*{box-sizing:border-box}
:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{margin:0;background:#0a0d13;color:#f4f7fb}
button,input,select,textarea{font:inherit}
button,a{border-radius:8px}
button{cursor:pointer;border:1px solid #34404f;padding:.65rem .85rem}
button.primary{background:#9f86c0;color:#fff;border-color:#b69ed3}
button.secondary{background:#151b24;color:#dce5ef;border-color:#354252}
button.secondary.active{background:#29223a;border-color:#9f86c0;color:#fff}
a{color:#b8d8ff;text-decoration:none}
.lab-header{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid #202a36;background:#0e131b;position:sticky;top:0;z-index:10}
.eyebrow{font-size:.65rem;letter-spacing:.13em;opacity:.6}
h1{margin:.15rem 0;font-size:1.55rem}
.lab-header p{margin:0;color:#9eabb9;font-size:.85rem}
.header-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.layout{display:grid;grid-template-columns:370px minmax(0,1fr);min-height:calc(100vh - 93px)}
.controls{padding:1rem;background:#0b1017;border-right:1px solid #202a36;overflow:auto}
.panel{background:#111821;border:1px solid #273241;border-radius:12px;padding:1rem;margin-bottom:1rem}
.panel-title{font-weight:700;display:flex;align-items:center;gap:.45rem;margin-bottom:.8rem}
.panel-title.small{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:#aab7c5;margin-top:1rem}
.theme-buttons{display:grid;grid-template-columns:1fr 1fr;gap:.45rem}
.theme-picker-panel{padding:.8rem 1rem}
.section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:#151b24;border:1px solid #34404f;color:#f4f7fb;padding:.65rem .75rem;text-align:left}
.section-toggle:hover{border-color:#9f86c0}
.toggle-title{min-width:0}
.chevron{font-size:1rem;color:#bfa9df;line-height:1}
.theme-picker-body{overflow:hidden;max-height:700px;opacity:1;transition:max-height .2s ease,opacity .15s ease}
.theme-picker-panel.collapsed .theme-picker-body{max-height:0;opacity:0}
.theme-picker-panel.collapsed{margin-bottom:1rem}
.theme-picker-body[hidden]{display:none !important}
.theme-picker-body{display:block}

.theme-btn{text-align:left;background:#151c26;border:1px solid #2d3948;color:#dce5ef;padding:.55rem .6rem}
.theme-btn.active{outline:2px solid #9f86c0;border-color:#9f86c0}
.theme-btn span{margin-right:.3rem}
.color-editor{border:1px solid #273241;border-radius:10px;padding:.75rem;background:#0d131b}
.color-editor-head{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:700;margin-bottom:.6rem}
#hexReadout{font-family:ui-monospace,monospace;color:#bfa9df}
.picker-wrap{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:.75rem;align-items:center}
.sv-picker{position:relative;aspect-ratio:1/1;border-radius:9px;overflow:hidden;cursor:crosshair;background:linear-gradient(to bottom,#fff,transparent),linear-gradient(to right,#fff,transparent),#f00}
.sv-picker:after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000);pointer-events:none}
.sv-cursor{position:absolute;z-index:2;width:17px;height:17px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #0008;transform:translate(-50%,-50%);pointer-events:none}
.hue-wheel{position:relative;width:132px;aspect-ratio:1;border-radius:50%;background:conic-gradient(from -90deg,#ff0000 0deg,#ffff00 60deg,#00ff00 120deg,#00ffff 180deg,#0000ff 240deg,#ff00ff 300deg,#ff0000 360deg);cursor:crosshair;box-shadow:0 0 0 1px #7d8ca0,0 0 20px #000a;isolation:isolate}
/* Keep the center subtle so the spectrum remains clearly visible. The old
   large opaque center hid most of the hue information and made the wheel
   look like a dark, nearly colorless ring. */
.hue-wheel:after{content:"";position:absolute;inset:31%;border-radius:50%;background:rgba(11,16,23,.62);box-shadow:0 0 0 1px rgba(220,230,242,.24),inset 0 0 14px rgba(0,0,0,.5);pointer-events:none;z-index:1}
.hue-cursor{position:absolute;z-index:3;width:17px;height:17px;border:2px solid #fff;border-radius:50%;background:rgba(0,0,0,.08);box-shadow:0 0 0 2px rgba(0,0,0,.75),0 0 8px rgba(255,255,255,.65);transform:translate(-50%,-50%);pointer-events:none}
.hex-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.45rem;margin-top:.7rem}
.hex-row label{font-size:.68rem;color:#9eabb9}
#hexInput{min-width:0;background:#080c12;color:#f4f7fb;border:1px solid #34404f;border-radius:7px;padding:.48rem .55rem;font-family:ui-monospace,monospace}
.small-btn{padding:.48rem .6rem;font-size:.72rem}
.color-role-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.7rem}
.role-btn{background:#151c26;color:#aeb9c6;border:1px solid #2d3948;padding:.45rem .35rem;font-size:.68rem}
.role-btn.active{border-color:#9f86c0;color:#fff;background:#211b2e}
.history-head{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem;font-size:.7rem;color:#aeb9c6}
.text-btn{background:none;border:0;padding:0;color:#9d85c0;font-size:.68rem}
.color-history{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:.4rem}
.history-swatch{aspect-ratio:1;border-radius:5px;border:1px solid #526070;padding:0;min-width:0}
.history-swatch:hover{transform:translateY(-1px);border-color:#fff}
.tiny-help{font-size:.63rem;line-height:1.4;color:#788695;margin:.55rem 0 0}
.font-toolbar{display:grid;grid-template-columns:1fr auto;gap:.45rem;margin-bottom:.6rem}
#fontSearch{min-width:0;background:#0d131b;color:#eaf0f6;border:1px solid #34404f;border-radius:7px;padding:.5rem .55rem}
.font-filter{font-size:.72rem;white-space:nowrap}
.font-row{display:grid;gap:.25rem;margin:.55rem 0}
.font-row label{font-size:.7rem;color:#9eabb9}
select{width:100%;background:#0d131b;color:#eaf0f6;border:1px solid #34404f;border-radius:7px;padding:.5rem}
.font-library{margin-top:.8rem;border-top:1px solid #273241;padding-top:.7rem}
.library-head{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;color:#aeb9c6;margin-bottom:.45rem}
.font-results{display:grid;gap:.35rem;max-height:340px;overflow:auto}
.font-card{position:relative;text-align:left;background:#0d131b;border:1px solid #273241;border-radius:8px;padding:.55rem .65rem;color:#f4f7fb;cursor:pointer}
.font-card:hover{border-color:#77879a}
.font-card.selected{border-color:#9f86c0;box-shadow:0 0 0 1px #9f86c055 inset}
.font-card-name{font-size:.72rem;color:#9eabb9;font-family:system-ui,sans-serif}
.font-card-sample{font-size:1rem;line-height:1.25;margin-top:.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.font-star{position:absolute;right:.45rem;top:.35rem;border:0;background:none;padding:.1rem;color:#d5c3ef;font-size:1rem}
.button-row{margin-top:1rem;display:flex;justify-content:flex-end}
.help{font-size:.78rem;line-height:1.5;color:#9eabb9}
code{color:#d6bfff}
.preview-panel{display:flex;flex-direction:column;min-width:0;background:#070a0f}
.preview-toolbar{height:46px;display:flex;align-items:center;gap:1rem;padding:0 .8rem;border-bottom:1px solid #202a36;color:#9eabb9;font-size:.75rem}
.preview-toolbar #status{margin-right:auto}
#preview{border:0;width:100%;height:calc(100vh - 139px);background:#fff}
dialog{width:min(950px,94vw);background:#111821;color:#f4f7fb;border:1px solid #34404f;border-radius:12px;padding:0;box-shadow:0 20px 80px #000}
dialog::backdrop{background:#0009}
dialog form{padding:1rem}
dialog h2{margin-top:0}
dialog p{color:#9eabb9;font-size:.82rem}
.export-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#aeb9c6;margin:.65rem 0 .3rem}
textarea{width:100%;height:260px;background:#080c12;color:#dfe8f2;border:1px solid #34404f;border-radius:8px;padding:.8rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem}
#fontExportText{height:150px}
.dialog-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.7rem}

/* ---------- Theme Lab v7 responsive layout ---------- */

.mobile-only{display:none}

@media (min-width:901px){
  html,body{height:100%;overflow:hidden}
  .app-shell{
    height:calc(100dvh - 93px);
    min-height:0;
    display:grid;
    grid-template-columns:minmax(320px,380px) minmax(0,1fr);
    overflow:hidden;
  }
  .controls{
    min-height:0;
    height:100%;
    overflow:hidden;
    border-right:1px solid #202a36;
  }
  .controls-scroll{
    height:100%;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:1rem;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  .preview-panel{
    min-width:0;
    min-height:0;
    height:100%;
    overflow:hidden;
  }
  .preview-frame-wrap{
    min-width:0;
    min-height:0;
    flex:1 1 auto;
    overflow:hidden;
  }
  #preview{
    display:block;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
  }
}

@media (max-width:900px){
  html,body{
    height:auto;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
  }

  .lab-header{
    height:auto;
    min-height:0;
    position:relative;
  }

  .app-shell{
    width:100%;
    height:auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:visible;
  }

  .controls{
    width:100%;
    height:clamp(290px,52dvh,560px);
    min-height:290px;
    max-height:560px;
    flex:0 0 auto;
    padding:0;
    overflow:hidden;
    border-right:0;
    border-bottom:1px solid #202a36;
  }

  .controls-scroll{
    width:100%;
    height:100%;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:1rem;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
  }

  .preview-panel{
    width:100%;
    height:clamp(540px,78dvh,900px);
    min-height:540px;
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  .preview-toolbar{
    width:100%;
    min-height:46px;
    height:auto;
    flex:0 0 auto;
    flex-wrap:wrap;
  }

  .preview-toolbar #status{
    flex:1 1 100%;
    min-width:0;
  }

  .preview-frame-wrap{
    width:100%;
    min-width:0;
    min-height:0;
    flex:1 1 auto;
    overflow:hidden;
  }

  #preview{
    display:block;
    width:100%;
    height:100% !important;
    min-width:0;
    min-height:0;
  }

  .mobile-only{display:inline-flex}
}

@media (max-width:600px){
  .controls{
    height:52dvh;
    min-height:290px;
    max-height:560px;
  }

  .preview-panel{
    height:78dvh;
    min-height:560px;
  }

  .picker-wrap{
    grid-template-columns:minmax(0,1fr) 100px;
  }

  .hue-wheel{
    width:100px;
    height:100px;
  }

  .precision-row{
    grid-template-columns:auto 1fr;
  }

  .numeric-color-row{
    grid-template-columns:1fr;
  }

  .font-toolbar{
    grid-template-columns:1fr;
  }
}

@media (max-width:390px){
  .controls{
    height:48dvh;
    min-height:270px;
  }

  .preview-panel{
    height:82dvh;
    min-height:540px;
  }

  .controls-scroll{
    padding:.75rem;
  }
}