:root{
    /* ── Light Mode (default) ── */
    --bg: #FFFFFF;
    --panel: #FFFFFF;
    --panel-2: #FDF6F3;
    --line: #EDE8E4;
    --text: #1B1B18;
    --text-dim: #6B6A62;
    --accent: #FF6A00;
    --accent-dim: #CC5500;
    --blue: #3D63C9;
    --measure: #B8860B;
    --canvas-bg: #FFFFFF;
    --header-bg: rgba(255,255,255,0.95);
    --radius: 10px;
    --header-h: 60px;
    --tabbar-h: 40px;
    --toolbar-h: 58px;
  }
  html[data-theme="dark"]{
    --bg: #0B0E14;
    --panel: #12161F;
    --panel-2: #171C27;
    --line: #232938;
    --text: #E8EAED;
    --text-dim: #8B93A1;
    --accent: #FF6A00;
    --accent-dim: #CC5500;
    --blue: #5B8DEF;
    --measure: #FFC857;
    --canvas-bg: #0B0E14;
    --header-bg: rgba(11,14,20,.86);
  }
  html[data-theme="light"]{
    /* already the :root default — explicit for specificity */
    --bg: #FFFFFF;
    --panel: #FFFFFF;
    --panel-2: #FDF6F3;
    --line: #EDE8E4;
    --text: #1B1B18;
    --text-dim: #6B6A62;
    --accent: #FF6A00;
    --accent-dim: #CC5500;
    --blue: #3D63C9;
    --measure: #B8860B;
    --canvas-bg: #FFFFFF;
    --header-bg: rgba(255,255,255,0.95);
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0; padding:0; height:100%;
    background:var(--bg); color:var(--text);
    font-family:'Inter',sans-serif;
    overflow:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
    transition: background .2s ease, color .2s ease;
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar{ display:none; }

  /* ---------- app header ---------- */
  #app-header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 26px;
    background: var(--header-bg);
    border-bottom:1px solid rgba(255,106,0,0.12);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 20px rgba(255,106,0,0.06);
  }
  /* ---------- logo (per supplied nav design) ---------- */
  .brand,
  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    margin-right:auto;
  }
  .brand-mark,
  .logo img{
    width:42px;
    height:42px;
    flex-shrink:0;
    object-fit:contain; display:block;
    image-rendering:-webkit-optimize-contrast;
    filter: drop-shadow(0 1px 4px rgba(255,106,0,0.20));
    transition: filter .2s ease;
  }
  html[data-theme="dark"] .brand-mark,
  html[data-theme="dark"] .logo img{
    filter: drop-shadow(0 1px 6px rgba(255,106,0,0.35));
  }
  .brand-mark:hover,
  .logo img:hover{
    filter: drop-shadow(0 2px 8px rgba(255,106,0,0.40));
  }
  .brand-name,
  .logo-text{
    font-family:'Space Grotesk', sans-serif;
    font-size:30px;
    font-weight:700;
    letter-spacing:-0.8px;
    line-height:1;
    color:var(--text);
    white-space:nowrap;
  }
  .brand-name span,
  .logo-highlight{ color:var(--accent); }
  .theme-toggle{
    display:flex; align-items:center; gap:8px;
    background:var(--panel-2); border:1px solid var(--line); border-radius:20px;
    padding:6px 6px; cursor:pointer; position:relative; width:56px; height:30px;
    transition: border-color .15s ease;
  }
  .theme-toggle:hover{ border-color:var(--accent); }
  .theme-toggle .knob{
    position:absolute; top:3px; left:31px; width:22px; height:22px; border-radius:50%;
    background:var(--accent); display:flex; align-items:center; justify-content:center;
    transition: left .2s ease, background .2s ease;
  }
  html[data-theme="dark"] .theme-toggle .knob{ left:3px; }
  html[data-theme="light"] .theme-toggle .knob{ left:31px; }
  .theme-toggle .knob svg{ width:13px; height:13px; color:#12100d; }
  .theme-toggle .icon-static{
    color: var(--text-dim); width:13px; height:13px;
  }
  .theme-toggle .icon-static.sun{ margin-left:2px; }
  .theme-toggle .icon-static.moon{ margin-right:2px; }
  h1,h2,h3,.display{ font-family:'Space Grotesk',sans-serif; }
  .mono{ font-family:'JetBrains Mono',monospace; }

  /* ---------- shared grid backdrop ---------- */
  .grid-bg{
    position:fixed; inset:0;
    background:
      radial-gradient(ellipse 60% 50% at 15% 20%, rgba(255,106,0,0.13) 0%, transparent 70%),
      radial-gradient(ellipse 50% 45% at 85% 15%, rgba(255,106,0,0.09) 0%, transparent 65%),
      radial-gradient(ellipse 40% 40% at 10% 75%, rgba(255,106,0,0.08) 0%, transparent 60%),
      radial-gradient(ellipse 45% 45% at 90% 80%, rgba(255,106,0,0.07) 0%, transparent 65%),
      radial-gradient(ellipse 55% 50% at 50% 50%, rgba(255,200,180,0.05) 0%, transparent 70%);
    pointer-events:none;
  }
  .grid-bg::after{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,106,0,0.06), transparent 55%);
  }
  html[data-theme="dark"] .grid-bg{
    background:
      radial-gradient(ellipse 60% 50% at 15% 20%, rgba(255,106,0,0.07) 0%, transparent 70%),
      radial-gradient(ellipse 50% 45% at 85% 15%, rgba(255,106,0,0.05) 0%, transparent 65%),
      radial-gradient(ellipse 40% 40% at 10% 75%, rgba(255,106,0,0.04) 0%, transparent 60%),
      radial-gradient(ellipse 45% 45% at 90% 80%, rgba(255,106,0,0.04) 0%, transparent 65%);
  }

  /* ---------- HOME PAGE ---------- */
  #home{
    position:fixed; inset:0;
    display:flex; align-items:center; justify-content:center;
    padding:96px 32px 32px;
  }
  .home-wrap{
    width:100%; max-width:920px;
  }
  .home-title{
    font-size:34px; font-weight:600; margin:0 0 6px 0; color:var(--text);
  }
  .home-title span{ color:var(--accent); }
  .home-sub{
    color:var(--text-dim); font-size:15px; margin:0 0 34px 0; max-width:520px; line-height:1.5;
  }

  .dropcard{
    position:relative;
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    border:1px solid var(--line);
    border-radius: 16px;
    padding: 54px 40px 44px;
    text-align:center;
    transition: border-color .2s ease, background .2s ease;
  }
  .corner{
    position:absolute; width:22px; height:22px;
    border-color: var(--accent);
    opacity:.55;
    transition: opacity .2s ease, border-color .2s ease;
  }
  .corner.tl{ top:14px; left:14px; border-top:2px solid; border-left:2px solid; }
  .corner.tr{ top:14px; right:14px; border-top:2px solid; border-right:2px solid; }
  .corner.bl{ bottom:14px; left:14px; border-bottom:2px solid; border-left:2px solid; }
  .corner.br{ bottom:14px; right:14px; border-bottom:2px solid; border-right:2px solid; }

  .dropcard.drag{
    border-color: var(--accent);
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
  }
  html[data-theme="dark"] .dropcard.drag{
    background: linear-gradient(180deg, #1a1610, #14181f);
  }
  .dropcard.drag .corner{ opacity:1; }

  .drop-icon{
    width:46px; height:46px; margin:0 auto 18px;
    display:block; object-fit:contain;
    /* no tint needed — logo is full-colour PNG */
    filter: drop-shadow(0 2px 8px rgba(255,106,0,0.18));
    transition: filter .2s ease;
  }
  .dropcard:hover .drop-icon{
    filter: drop-shadow(0 4px 16px rgba(255,106,0,0.32));
  }
  html[data-theme="dark"] .drop-icon{
    filter: drop-shadow(0 2px 10px rgba(255,106,0,0.25));
  }
  html[data-theme="dark"] .dropcard:hover .drop-icon{
    filter: drop-shadow(0 4px 20px rgba(255,106,0,0.45));
  }
  .drop-title{
    font-size:21px; font-weight:600; color:var(--text); margin:0 0 6px;
  }
  .drop-hint{
    color:var(--text-dim); font-size:13.5px; margin:0 0 26px;
  }

  .hr{
    border:none; height:1px;
    background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
    margin: 26px 0;
  }

  .btn{
    font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
    color:var(--text); background:var(--panel-2);
    border:1px solid var(--line); border-radius:8px;
    padding:12px 22px; cursor:pointer;
    display:inline-flex; align-items:center; gap:9px;
    transition: all .15s ease;
  }
  .btn:hover{ border-color:var(--accent); color:#fff; }
  .btn.primary{
    background: var(--accent); border-color:var(--accent); color:#12100d;
  }
  .btn.primary:hover{ background:#FF8C33; }
  .btn svg{ width:16px; height:16px; flex-shrink:0; }

  .examples-label{
    color:var(--text-dim); font-size:12.5px; letter-spacing:.06em;
    text-transform:uppercase; margin-bottom:16px;
  }
  .chip-grid{
    display:grid; grid-template-columns: repeat(5, 1fr); gap:10px;
  }
  .chip{
    font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:500;
    color:var(--text-dim); background:var(--panel-2);
    border:1px solid var(--line); border-radius:8px;
    padding:11px 8px; cursor:pointer; text-align:center;
    transition: all .15s ease;
  }
  .chip:hover{ border-color:var(--blue); color:var(--text); background:var(--panel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent); }
  .chip.limited{ opacity:.55; }
  .chip.limited:hover{ border-color:var(--line); color:var(--text-dim); background:var(--panel-2); }

  #file-input{ display:none; }

  .foot-note{
    margin-top:28px; color:var(--text-dim); font-size:12px; text-align:center;
  }

  /* toast */
  .toast{
    position:fixed; left:50%; bottom:36px; transform:translate(-50%,20px);
    background:var(--panel-2); border:1px solid var(--line);
    color:var(--text); font-size:13.5px; padding:13px 20px; border-radius:9px;
    box-shadow:0 12px 30px rgba(0,0,0,.4);
    opacity:0; pointer-events:none; transition: all .25s ease;
    max-width:420px; text-align:center; z-index:500;
  }
  .toast.show{ opacity:1; transform:translate(-50%,0); }


  /* ---------- VIEWER PAGE ---------- */
  #viewer{
    position:fixed; inset:0; display:none;
  }
  #canvas-wrap{
    position:absolute;
    top: calc(var(--header-h) + var(--tabbar-h) + var(--toolbar-h));
    left:0; right:0; bottom:0;
  }
  #three-canvas{ display:block; width:100%; height:100%; }
  .color-picker-bar{
    position:absolute; left:50%; bottom:24px;
    transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:6px;
    background:var(--panel-bg,#fff);
    padding:10px 16px; border-radius:18px;
    box-shadow:0 4px 16px rgba(0,0,0,.15);
    border:1px solid rgba(0,0,0,.06);
    z-index:5;
    pointer-events:none;
  }
  .swatch-row{ display:flex; align-items:center; gap:12px; }
  .panel-label{
    font-size:11px; font-weight:600; color:#8B93A1;
    text-transform:uppercase; letter-spacing:.05em;
    pointer-events:none; user-select:none;
  }
  .color-swatch{
    width:28px; height:28px; border-radius:50%;
    border:2px solid rgba(0,0,0,.12);
    cursor:pointer; padding:0; outline:none;
    transition:transform .12s ease, border-color .12s ease;
    pointer-events:auto;
  }
  .color-swatch:hover{ transform:scale(1.12); }
  .color-swatch.active{ border-color:#FF6A00; box-shadow:0 0 0 2px rgba(255,106,0,.25); }
  .diamond-picker-panel{
    position:absolute; right:24px; top:50%;
    transform:translateY(-50%);
    display:flex; flex-direction:column; align-items:center; gap:10px;
    background:var(--panel-bg,#fff);
    padding:14px 10px; border-radius:18px;
    box-shadow:0 4px 16px rgba(0,0,0,.15);
    border:1px solid rgba(0,0,0,.06);
    z-index:5;
    pointer-events:none;
  }
  .diamond-swatch-grid{
    display:grid;
    grid-template-columns:repeat(2, auto);
    gap:10px;
    justify-items:center;
  }
  .diamond-swatch{
    width:24px; height:24px; border-radius:50%;
    border:2px solid rgba(0,0,0,.12);
    cursor:pointer; padding:0; outline:none;
    transition:transform .12s ease, border-color .12s ease;
    pointer-events:auto;
  }
  .diamond-swatch:hover{ transform:scale(1.12); }
  .diamond-swatch.active{ border-color:#5B8DEF; box-shadow:0 0 0 2px rgba(91,141,239,.25); }
  .pick-diamond-btn{
    width:26px; height:26px; border-radius:50%;
    border:2px solid rgba(0,0,0,.12);
    background:#f4f4f4; color:#555;
    cursor:pointer; padding:0; outline:none; font-size:13px;
    line-height:1; display:flex; align-items:center; justify-content:center;
    pointer-events:auto;
    margin-bottom:4px;
  }
  .pick-diamond-btn.active{ background:#5B8DEF; color:#fff; border-color:#5B8DEF; }
  #canvas-wrap.measuring .color-swatch,
  #canvas-wrap.measuring .diamond-swatch,
  #canvas-wrap.measuring .pick-diamond-btn{ pointer-events:none; }
  .measure-3d-label{
    position:absolute; top:0; left:0;
    transform:translate(-50%,-50%);
    background:#E8B183; color:#1a1a1a;
    font-weight:700; font-size:15px;
    padding:6px 12px; border-radius:8px;
    white-space:nowrap; pointer-events:none;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    z-index:5;
  }

  .vp-corner{
    position:absolute; width:26px; height:26px;
    border-color: rgba(255,106,0,.5); pointer-events:none; z-index:20;
  }
  .vp-corner.tl{ top:calc(var(--header-h) + var(--tabbar-h) + var(--toolbar-h) + 14px); left:16px; border-top:2px solid; border-left:2px solid; }
  .vp-corner.tr{ top:calc(var(--header-h) + var(--tabbar-h) + var(--toolbar-h) + 14px); right:16px; border-top:2px solid; border-right:2px solid; }
  .vp-corner.bl{ bottom:16px; left:16px; border-bottom:2px solid; border-left:2px solid; }
  .vp-corner.br{ bottom:16px; right:16px; border-bottom:2px solid; border-right:2px solid; }

  /* ---------- horizontal toolbar, fixed under the header ---------- */
  /* ---------- tab bar ---------- */
  #tab-bar{
    position:fixed; top:var(--header-h); left:0; right:0;
    height:var(--tabbar-h); z-index:50;
    background:var(--panel-2); border-bottom:1px solid var(--line);
    display:flex; align-items:flex-end; gap:0;
    padding:0 14px 0;
    overflow:hidden;
  }
  #tab-bar.hidden{ display:none !important; }
  .tab{
    display:flex; align-items:center; gap:8px;
    height:32px; padding:0 13px 0 14px;
    background:transparent; border:1px solid transparent;
    border-bottom:none; border-radius:8px 8px 0 0;
    color:var(--text-dim); font-size:12.5px; font-weight:500;
    cursor:pointer; white-space:nowrap; flex-shrink:0;
    max-width:200px; min-width:80px;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
    user-select:none;
  }
  .tab:hover{ background:var(--panel); color:var(--text); }
  .tab.active{
    background:var(--panel); border-color:var(--line);
    color:var(--text);
    box-shadow: 0 -2px 0 0 var(--accent);
  }
  .tab-name{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
  }
  .tab-close{
    width:16px; height:16px; display:flex; align-items:center; justify-content:center;
    border-radius:4px; flex-shrink:0; color:var(--text-dim);
    transition: background .1s ease, color .1s ease;
  }
  .tab-close:hover{ background:rgba(255,106,0,.18); color:var(--accent); }
  .tab-close svg{ width:10px; height:10px; pointer-events:none; }
  .tab-new{
    width:28px; height:28px; display:flex; align-items:center; justify-content:center;
    border-radius:6px; flex-shrink:0; color:var(--text-dim); cursor:pointer;
    transition: background .1s ease, color .1s ease; margin-left:4px;
  }
  .tab-new:hover{ background:var(--panel); color:var(--text); }
  .tab-new svg{ width:14px; height:14px; }

  .viewer-toolbar{
    position:fixed; top:calc(var(--header-h) + var(--tabbar-h)); left:0; right:0; height:var(--toolbar-h);
    z-index:40; display:flex; align-items:center; justify-content:space-between;
    gap:8px; padding:0 14px;
    background:var(--panel); border-bottom:1px solid var(--line);
    backdrop-filter: blur(8px);
    overflow:visible;
  }
  .vt-left{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
  .back-btn{
    display:flex; align-items:center; gap:7px;
    background:var(--panel-2); border:1px solid var(--line);
    color:var(--text); font-size:13px; font-weight:600;
    padding:9px 14px; border-radius:8px; cursor:pointer;
    flex-shrink:0; transition: border-color .15s ease;
  }
  .back-btn:hover{ border-color:var(--accent); }
  .file-badge{
    font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--text-dim);
    background:var(--panel-2); border:1px solid var(--line);
    padding:9px 13px; border-radius:8px;
    max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .file-badge b{ color:var(--text); font-weight:600; }

  .vt-tools{ display:flex; align-items:center; gap:4px; flex-shrink:0; overflow:visible; }
  .tb-divider{
    width:1px; height:26px; background:var(--line); margin:0 5px; flex-shrink:0;
  }
  .tb-btn{
    position:relative;
    width:40px; height:40px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px; flex-shrink:0;
    background:transparent; border:1px solid transparent; border-radius:9px;
    color:var(--text-dim); cursor:pointer; padding:0;
    transition: all .15s ease;
  }
  .tb-btn svg{ width:18px; height:18px; flex-shrink:0; }
  .tb-btn .tb-label{ font-size:8.5px; font-weight:700; letter-spacing:.03em; line-height:1; }
  .tb-btn:hover{ background:var(--panel-2); border-color:var(--line); color:var(--text); }
  .tb-btn.active{ background:color-mix(in srgb, var(--accent) 18%, var(--panel)); border-color:var(--accent); color:var(--accent); }
  html[data-theme="light"] .tb-btn.active{ background:#fdece3; }
  .tb-btn.measure-active{ background:var(--measure); border-color:var(--measure); color:#1a1608; }
  .view-btn.active{ background:var(--panel-2); border-color:var(--accent); color:var(--accent); }

  /* Download button */
  .download-btn{
    display:flex; align-items:center; gap:7px; flex-shrink:0;
    background:var(--accent); border:none; border-radius:9px;
    color:#12100d; font-family:'Inter',sans-serif; font-size:13px; font-weight:700;
    padding:9px 14px; cursor:pointer; white-space:nowrap;
    transition: background .15s ease;
    position:relative;
  }
  .download-btn:hover{ background:#FF8C33; }
  .download-btn svg:first-child{ width:16px; height:16px; flex-shrink:0; }
  .download-btn .chevron{ width:13px; height:13px; flex-shrink:0; transition: transform .2s ease; }
  .tb-group.open .download-btn .chevron{ transform: rotate(180deg); }

  .download-popover{
    min-width:0 !important;
    width:190px !important;
    padding:6px !important;
  }
  .dl-option{
    width:100%; display:flex; align-items:center; gap:10px;
    background:transparent; border:none; border-radius:8px;
    color:var(--text); font-family:'Inter',sans-serif; font-size:13.5px; font-weight:500;
    padding:10px 12px; cursor:pointer; text-align:left;
    transition: background .12s ease;
  }
  .dl-option:hover{ background:var(--panel-2); }
  .dl-option svg{ width:18px; height:18px; color:var(--text-dim); flex-shrink:0; }

  /* tooltip — opens below the horizontal bar */
  .tb-btn[data-tooltip]::after{
    content: attr(data-tooltip);
    position:absolute; top:calc(100% + 10px); left:50%;
    transform:translateX(-50%) translateY(-4px);
    background:var(--panel-2); color:var(--text); font-size:12px; font-weight:600;
    padding:6px 11px; border-radius:7px; border:1px solid var(--line);
    white-space:nowrap; opacity:0; pointer-events:none; z-index:80;
    transition: opacity .15s ease, transform .15s ease;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
  }
  .tb-btn[data-tooltip]:hover::after{ opacity:1; transform:translateX(-50%) translateY(0); }
  .tb-group.open .tb-btn[data-tooltip]::after{ opacity:0; }

  /* popovers — open downward under the horizontal bar */
  .tb-group{ position:relative; flex-shrink:0; }
  .popover{
    display:none;
    position:absolute; top:calc(100% + 10px); left:0;
    width:230px; background:var(--panel); border:1px solid var(--line);
    border-radius:12px; padding:14px; backdrop-filter: blur(8px);
    box-shadow:0 16px 40px rgba(0,0,0,.35); z-index:200;
  }
  .tb-group:last-child .popover, .tb-group:nth-last-child(2) .popover{ left:auto; right:0; }
  .tb-group.open .popover{ display:block; }
  .popover-title{
    font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-dim); margin:0 0 11px;
  }

  .row-btns{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
  .icon-btn{
    display:flex; flex-direction:column; align-items:center; gap:5px;
    background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
    color:var(--text-dim); font-size:10.5px; padding:9px 4px; cursor:pointer;
    transition: all .15s ease;
  }
  .icon-btn:hover{ border-color:var(--blue); color:var(--text); }
  .icon-btn.active{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 15%, var(--panel)); }
  .icon-btn svg{ width:16px; height:16px; }

  .full-btn{
    width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
    color:var(--text); font-size:13px; font-weight:600; padding:10px; cursor:pointer;
    margin-bottom:8px; transition: all .15s ease;
  }
  .full-btn:last-child{ margin-bottom:0; }
  .full-btn:hover{ border-color:var(--blue); }
  .full-btn.accent{ background:var(--accent); border-color:var(--accent); color:#12100d; }
  .full-btn.accent:hover{ background:#FF8C33; }
  .full-btn.active{ background:var(--accent); border-color:var(--accent); color:#12100d; }
  .full-btn.measure-active{ background:var(--measure); border-color:var(--measure); color:#1a1608; }
  .full-btn svg{ width:15px; height:15px; }

  .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }

  select, .num-input{
    width:100%; background:var(--panel-2); border:1px solid var(--line);
    color:var(--text); font-family:'JetBrains Mono',monospace; font-size:12.5px;
    padding:8px 9px; border-radius:7px; outline:none;
  }
  select:focus, .num-input:focus{ border-color:var(--blue); }
  label.field-label{
    font-size:11px; color:var(--text-dim); display:block; margin:9px 0 5px;
  }

  .measure-readout{
    font-family:'JetBrains Mono',monospace; font-size:12.5px;
    background:var(--panel-2); border:1px dashed var(--line); border-radius:7px;
    padding:9px 10px; color:var(--text-dim); min-height:18px;
  }
  .measure-readout b{ color:var(--measure); font-size:14px; }

  .hint{ font-size:11px; color:var(--text-dim); line-height:1.5; margin-top:9px; }

  /* capture flash */
  .flash{
    position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:900;
  }
  .flash.go{ animation: flashAnim .35s ease; }
  @keyframes flashAnim{ 0%{opacity:.85;} 100%{opacity:0;} }

  .loading{
    position:absolute; inset:0; z-index:200;
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
    background: var(--bg);
  }
  .spinner{
    width:38px; height:38px; border-radius:50%;
    border:3px solid var(--line); border-top-color:var(--accent);
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .loading-text{ color:var(--text-dim); font-size:13px; font-family:'JetBrains Mono',monospace; }

  .error-box{
    position:absolute; inset:0; z-index:200;
    display:flex; align-items:center; justify-content:center; background:var(--bg);
  }
  .error-inner{ max-width:420px; text-align:center; padding:20px; }
  .error-inner h3{ margin:0 0 10px; font-size:19px; }
  .error-inner p{ color:var(--text-dim); font-size:13.5px; line-height:1.6; margin:0 0 20px; }

  @media (max-width: 760px){
    .home-title{ font-size:26px; }
    .chip-grid{ grid-template-columns: repeat(3,1fr); }
    .popover{ width:200px; }
  }