/* ============================================================
   PreOwned Design Kit (theme-kit) — reusable module, ZABA-CI styled
   data-theme-kit="switcher" -> preset bar (top-right)
   data-theme-kit="editor"   -> LEFT typo drawer + RIGHT design drawer
                                manifest-driven per-element editing + export
   ============================================================ */

/* scope typography hooks (non-destructive cascade) */
[data-tk-scope]{zoom:var(--tk-scale,1);letter-spacing:var(--tk-ls,normal);line-height:var(--tk-lh,inherit);font-weight:var(--tk-weight,inherit)}
.tk-dnd-hot{outline:3px dashed var(--accent,#A53A2A)!important;outline-offset:-4px;cursor:copy}

/* ---- SWITCHER ---- */
.tk-switch{position:fixed;top:14px;right:14px;z-index:9999;display:flex;align-items:center;gap:8px;
  background:color-mix(in srgb,var(--bg-2) 88%,transparent);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 12px;box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
.tk-switch .tk-lbl{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--fg);opacity:.6;font-family:ui-monospace,monospace}
.tk-switch .tk-presets{display:flex;gap:6px}
.tk-sw{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);cursor:pointer;padding:0;position:relative;overflow:hidden;transition:transform .15s}
.tk-sw:hover{transform:scale(1.12)}
.tk-sw.on{border-color:var(--fg);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 60%,transparent)}
.tk-sw .a{position:absolute;right:0;top:0;bottom:0;width:42%}

/* ---- FABs ---- (CI: 5px radius pills, terra primary) */
.tk-fab{position:fixed;top:14px;z-index:9999;display:inline-flex;align-items:center;gap:8px;border-radius:5px;
  padding:10px 14px;cursor:pointer;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;
  font-family:ui-monospace,"Space Mono",monospace;box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.tk-fab.right{right:14px;background:var(--accent,#A53A2A);color:#fff;border:0}
.tk-fab.left{left:14px;background:var(--bg-2,#2D2A27);color:var(--fg,#FFFADA);border:1px solid var(--line,rgba(255,250,218,.12))}
.tk-fab svg{width:14px;height:14px;display:block}
.tk-fab:hover{filter:brightness(1.08)}

/* ---- DRAWERS (CI) ---- */
.tk-drawer{position:fixed;top:0;width:340px;max-width:92vw;height:100vh;z-index:10000;
  background:var(--bg-2,#2D2A27);color:var(--fg,#FFFADA);overflow-y:auto;transition:transform .3s ease;
  font-family:ui-monospace,"Space Mono",monospace}
.tk-drawer.right{right:0;border-left:1px solid var(--line);transform:translateX(100%);box-shadow:-22px 0 55px -22px rgba(0,0,0,.6)}
.tk-drawer.left{left:0;border-right:1px solid var(--line);transform:translateX(-100%);box-shadow:22px 0 55px -22px rgba(0,0,0,.6)}
.tk-drawer.right.open,.tk-drawer.left.open{transform:translateX(0)}
.tk-head{display:flex;justify-content:space-between;align-items:center;padding:18px 18px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg-2);z-index:2}
.tk-head h3{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin:0;font-weight:700;display:flex;align-items:center;gap:8px}
.tk-head h3 svg{width:15px;height:15px}
.tk-close{background:transparent;border:1px solid var(--line);color:var(--fg);width:28px;height:28px;border-radius:5px;cursor:pointer;font-size:15px;line-height:1}
.tk-close:hover{border-color:var(--fg)}

.tk-seg{display:flex;gap:6px;padding:12px 18px;border-bottom:1px solid var(--line)}
.tk-seg button{flex:1;background:transparent;border:1px solid var(--line);color:var(--fg);opacity:.6;padding:9px;font:inherit;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border-radius:5px}
.tk-seg button.on{opacity:1;background:var(--accent);color:#fff;border-color:var(--accent)}

.tk-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.tk-sechdr{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--fg);opacity:.45;margin:8px 0 -2px;display:flex;align-items:center;gap:6px}
.tk-sechdr svg{width:12px;height:12px;opacity:.7}
.tk-hint{font-size:10px;opacity:.5;line-height:1.5}

/* color token / part color row */
.tk-tok{display:grid;grid-template-columns:42px 1fr 78px;gap:10px;align-items:center}
.tk-tok input[type=color]{-webkit-appearance:none;appearance:none;border:none;width:42px;height:42px;border-radius:5px;cursor:pointer;background:transparent;padding:0;overflow:hidden}
.tk-tok input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.tk-tok input[type=color]::-webkit-color-swatch{border:1px solid var(--line);border-radius:5px}
.tk-tok input[type=color]::-moz-color-swatch{border:1px solid var(--line);border-radius:5px}
.tk-tok .m .n{font-size:13px;font-weight:600;font-family:var(--sans),sans-serif}
.tk-tok .m .r{font-size:10px;letter-spacing:1px;text-transform:uppercase;opacity:.5}
.tk-tok input[type=text]{background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:5px;padding:9px;font-size:12px;font-family:ui-monospace,monospace;text-align:center;width:100%}

/* generic control (range / select / text) */
.tk-ctl{display:flex;flex-direction:column;gap:6px}
.tk-ctl .lab{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1px;text-transform:uppercase;opacity:.85}
.tk-ctl .lab b{color:var(--accent);font-weight:700}
.tk-ctl input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:2px;background:var(--line);border-radius:2px}
.tk-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer}
.tk-ctl input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--accent);cursor:pointer}
.tk-ctl select,.tk-ctl input[type=text]{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:5px;padding:10px;font:inherit;font-size:12px;cursor:pointer}
.tk-ctl input[type=text]{cursor:text;font-family:var(--sans),sans-serif}
.tk-two{display:grid;grid-template-columns:1fr 46px;gap:8px;align-items:center}
.tk-two input[type=color]{width:46px;height:38px;border:none;border-radius:5px;padding:0;background:transparent;cursor:pointer}

/* part picker */
.tk-pick{display:flex;flex-direction:column;gap:8px;margin-bottom:6px}
.tk-pick select{background:var(--bg);color:var(--fg);border:1px solid var(--accent);border-radius:5px;padding:11px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}

/* image dropzone */
.tk-drop{border:1.5px dashed var(--line);border-radius:5px;padding:18px;text-align:center;font-size:11px;opacity:.8;cursor:pointer}
.tk-drop:hover,.tk-drop.hot{border-color:var(--accent);opacity:1}
.tk-drop input{display:none}

/* actions / css / templates */
.tk-actions{display:flex;flex-wrap:wrap;gap:8px;padding:10px 18px 14px}
.tk-actions button{flex:1 1 44%;background:transparent;border:1px solid var(--line);color:var(--fg);opacity:.85;padding:11px;font:inherit;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;border-radius:5px}
.tk-actions button:hover{opacity:1;border-color:var(--fg)}
.tk-actions button.primary{background:var(--accent);color:#fff;border-color:var(--accent);opacity:1}
.tk-out{padding:0 18px 14px;display:none}
.tk-out.show{display:block}
.tk-out textarea{width:100%;height:150px;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:5px;padding:10px;font-family:ui-monospace,monospace;font-size:11px;resize:vertical}
.tk-tpl{padding:8px 18px 26px;border-top:1px solid var(--line)}
.tk-tpl h4{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin:12px 0 10px;font-weight:700}
.tk-tpl .empty{font-size:11px;opacity:.45;line-height:1.5}
.tk-tpl .item{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:5px;margin-bottom:8px;cursor:pointer}
.tk-tpl .item:hover{border-color:var(--fg)}
.tk-tpl .item .sw{display:flex;gap:3px}
.tk-tpl .item .sw i{width:14px;height:14px;border-radius:3px;border:1px solid var(--line)}
.tk-tpl .item .nm{flex:1;font-size:12px;font-family:var(--sans),sans-serif}
.tk-tpl .item .del{background:transparent;border:0;color:var(--fg);opacity:.5;cursor:pointer;font-size:14px;padding:2px 6px}
.tk-tpl .item .del:hover{opacity:1;color:var(--accent)}