/* ===== IDCraft Studio ===== */
:root{
  --bg:#0f1115; --panel:#171a21; --panel-2:#1e222b; --line:#2a2f3a;
  --text:#e6e9ef; --muted:#8b93a3; --accent:#1f6feb; --accent-2:#2f81f7;
  --good:#2ea043; --danger:#da3633; --radius:10px; --radius-lg:14px;
  --shadow:0 6px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; overflow:hidden;
}
kbd{background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:11px}

/* Top bar */
.topbar{
  height:56px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; background:var(--panel); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:baseline; gap:8px}
.brand-mark{font-size:22px}
.brand-name{font-weight:700; font-size:17px; letter-spacing:.2px}
.brand-sub{color:var(--muted); font-size:12px}
.topbar-actions{display:flex; align-items:center; gap:8px}
.divider{width:1px; height:24px; background:var(--line); margin:0 4px}

/* Layout */
.workspace{display:grid; grid-template-columns:280px 1fr 300px; height:calc(100vh - 56px)}
.sidebar{background:var(--panel); overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:14px}
.sidebar.left{border-right:1px solid var(--line)}
.sidebar.right{border-left:1px solid var(--line)}
.sidebar::-webkit-scrollbar{width:9px}
.sidebar::-webkit-scrollbar-thumb{background:var(--line); border-radius:9px}

.panel{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:12px}
.panel-title{margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted)}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.panel-head .panel-title{margin:0}
.hint-sm{color:var(--muted); font-size:11.5px; margin:2px 0 8px}
.sel-name{color:var(--accent-2); text-transform:none; letter-spacing:0; font-weight:600}

/* Buttons */
.btn{
  border:1px solid var(--line); background:var(--panel); color:var(--text);
  border-radius:var(--radius); padding:8px 12px; cursor:pointer; font-size:13px;
  font-weight:500; transition:.12s; white-space:nowrap;
}
.btn:hover{border-color:#3a4150; background:#232833}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-2)}
.btn.accent{background:linear-gradient(135deg,#5b3df2,#1f6feb); border-color:transparent; color:#fff}
.btn.ghost{background:transparent}
.btn.small{padding:6px 10px; font-size:12.5px}
.btn.tiny{padding:4px 9px; font-size:12px}
.btn.full{width:100%}
.btn.active{background:var(--accent); border-color:var(--accent); color:#fff}
.row{display:flex; gap:8px; margin-top:8px}
.row.two > *{flex:1}
.style-toggles{flex-wrap:wrap}
.style-toggles .btn{flex:1; min-width:34px; text-align:center}

/* Dropzone */
.dropzone{
  border:2px dashed var(--line); border-radius:var(--radius-lg); padding:22px 12px;
  text-align:center; cursor:pointer; transition:.15s; background:rgba(255,255,255,.02);
}
.dropzone:hover{border-color:var(--accent); background:rgba(31,111,235,.06)}
.dropzone.drag{border-color:var(--accent); background:rgba(31,111,235,.12)}
.dz-icon{font-size:28px}
.dz-text{margin-top:6px}
.dz-sub{color:var(--muted); font-size:11.5px; margin-top:3px}

/* Controls */
.ctrl{margin:10px 0}
.ctrl > label{display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--muted); margin-bottom:5px}
.ctrl .val{color:var(--text); font-variant-numeric:tabular-nums}
input[type=range]{width:100%; accent-color:var(--accent); cursor:pointer}
select,.text-input{width:100%; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:var(--radius); padding:7px 9px; font-size:13px}
.mini{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:6px 9px}
.mini input[type=color]{width:28px; height:24px; border:none; background:none; padding:0; cursor:pointer}
.mini input[type=range]{width:90px}

/* Shape grid */
.shape-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.shape-btn{border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:var(--radius); padding:10px 6px; cursor:pointer; font-size:12.5px; transition:.12s}
.shape-btn:hover{border-color:#3a4150}
.shape-btn.active{border-color:var(--accent); background:rgba(31,111,235,.15); color:#fff}

/* Field list */
.field-list{display:flex; flex-direction:column; gap:7px}
.field-item{display:flex; align-items:center; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:6px 8px}
.field-item.on-card{border-color:rgba(31,111,235,.5)}
.field-drag{cursor:grab; color:var(--muted); user-select:none}
.field-label{width:74px; font-size:11px; color:var(--muted); flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.field-value{flex:1; min-width:0; background:transparent; border:none; color:var(--text); font-size:13px; outline:none}
.field-value:focus{border-bottom:1px solid var(--accent)}
.field-btn{background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px; padding:2px 4px; border-radius:5px}
.field-btn:hover{color:var(--text); background:var(--panel-2)}
.field-btn.active{color:var(--accent-2)}

/* Stage */
.stage{display:flex; flex-direction:column; background:#0b0d11; min-width:0}
.stage-toolbar{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line)}
.spacer{flex:1}
.pill{background:var(--panel-2); border:1px solid var(--line); border-radius:20px; padding:4px 12px; font-size:12px; font-variant-numeric:tabular-nums}
.pill.muted{color:var(--muted)}
.canvas-wrap{flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; padding:24px}
.canvas-wrap canvas{box-shadow:var(--shadow); border-radius:4px}
.stage-hint{padding:8px 14px; color:var(--muted); font-size:12px; border-top:1px solid var(--line); text-align:center}

/* Segmented + modal */
.seg,.seg-btn{border-radius:var(--radius)}
.seg{display:flex; gap:6px}
.seg-btn{flex:1; border:1px solid var(--line); background:var(--panel); color:var(--text); padding:9px; cursor:pointer}
.seg-btn.active{background:var(--accent); border-color:var(--accent); color:#fff}
.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:50}
.modal{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; width:380px; box-shadow:var(--shadow)}
.modal.wide{width:640px; max-width:92vw; max-height:88vh; overflow-y:auto}
.batch-opts{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 10px}
.mini.check{cursor:pointer}
.mini.check input{width:auto}
.batch-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; max-height:230px; overflow-y:auto; margin:4px 0}
.batch-thumb{position:relative; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#000; aspect-ratio:1}
.batch-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.batch-thumb .nm{position:absolute; bottom:0; left:0; right:0; font-size:10px; padding:2px 4px; background:rgba(0,0,0,.6); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.batch-thumb .st{position:absolute; top:3px; right:4px; font-size:12px}
.batch-progress{margin:8px 0}
.batch-progress .bar{height:8px; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.batch-progress .bar span{display:block; height:100%; width:0; background:linear-gradient(90deg,#5b3df2,#1f6feb); transition:width .2s}
.modal h2{margin:0 0 16px; font-size:18px}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px}

/* Toast */
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--panel-2); border:1px solid var(--line); color:var(--text); padding:11px 18px; border-radius:var(--radius); box-shadow:var(--shadow); z-index:60; font-size:13px}