/* assets/css/style.css — Magazine Portfolio Shelf, Flipbook Stage & Central Admin Panel */
:root{
    --bg:#ffffff;
    --ink:#111111;
    --soft:#555555;
    --ring:#e8a400;
    --ed-bg:#141b22;
    --ed-ink:#e9eef2;
    --ed-muted:#8fa0ae;
    --ed-card:#1d2630;
    --ed-line:rgba(255,255,255,.12);
    --head:'Hanken Grotesk',system-ui,sans-serif;
    --serif:'Instrument Serif',Georgia,serif;
    --info-w:210px;
    --ttl-max:40px;
    --cx:50%;
    --cy:47%;
    --barh:76px;
  }
  *{box-sizing:border-box}
  [hidden]{display:none!important}
  html,body{height:100%;margin:0;overscroll-behavior:none;-webkit-text-size-adjust:100%}
  body{
    background:var(--bg);color:var(--ink);font-family:var(--head);overflow:hidden;
    transition:background-color .9s ease,color .9s ease;-webkit-tap-highlight-color:transparent;
    height:100vh;height:100dvh;
  }
  dl,dl>div,#back,details ul,summary{transition:border-color .9s,background-color .9s,color .9s}

  /* ---- Top Navigation (Landing Page) ---- */
  nav#topNav{
    position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:center;align-items:center;gap:28px;
    padding:max(14px,env(safe-area-inset-top)) 16px 12px;font-size:17px;
    transition:padding-right .3s ease;
  }
  body.editing nav#topNav{padding-right:408px}
  nav#topNav b{font-weight:600;letter-spacing:.02em;color:var(--tc-nav-brand,var(--ink));transition:color .45s ease}
  nav#topNav .here{position:relative;color:var(--tc-nav-tab,var(--ink));transition:color .45s ease}
  nav#topNav .here::after{content:"";position:absolute;left:50%;bottom:-7px;width:4px;height:4px;border-radius:50%;background:var(--tc-nav-tab,var(--ink));transition:background-color .45s ease}
  details#idx{position:relative}
  details#idx summary{cursor:pointer;list-style:none;color:var(--tc-nav-idx,var(--soft));user-select:none;transition:color .45s ease}
  details#idx summary::-webkit-details-marker{display:none}
  details#idx ul{
    position:absolute;top:30px;left:-10px;margin:0;padding:8px 0;list-style:none;background:var(--bg);
    color:var(--tc-nav-brand,var(--ink));
    border:1px solid var(--tc-meta-line,var(--ink));min-width:210px;max-height:70vh;overflow:auto;box-shadow:0 12px 28px rgba(0,0,0,.18);
  }
  details#idx li button{all:unset;display:flex;align-items:center;gap:8px;width:100%;padding:7px 14px;cursor:pointer;box-sizing:border-box;font-size:15px;color:var(--tc-nav-brand,var(--ink))}
  details#idx li button .dot{width:10px;height:10px;border-radius:50%;border:1px solid rgba(128,128,128,.4);flex:none}
  details#idx li button:hover,details#idx li button:focus-visible{background:var(--tc-nav-brand,var(--ink));color:var(--bg)}

  /* Admin trigger button in top-right */
  #adminBtn{
    display:none;
    position:fixed;top:max(12px,env(safe-area-inset-top));right:14px;z-index:110;
    font:500 13px/1 var(--head);padding:7px 13px;border-radius:999px;
    background:color-mix(in srgb,var(--ink) 10%,var(--bg));color:var(--ink);
    border:1px solid color-mix(in srgb,var(--ink) 28%,transparent);cursor:pointer;
    opacity:.75;transition:opacity .2s,transform .2s,right .3s ease;
  }
  .admin-route #adminBtn{display:block}
  #adminBtn:hover,#adminBtn:focus-visible{opacity:1}
  body.editing #adminBtn{right:406px;opacity:1;background:var(--ring);color:#14212b;border-color:var(--ring);font-weight:600}

  /* ---- Left Info Panel & Bottom Quotes ---- */
  #info{
    position:fixed;top:60px;left:14px;width:min(var(--info-w,210px),30vw);z-index:60;
    transition:transform .8s cubic-bezier(.32,.72,0,1),width .3s ease;
    pointer-events:auto;
  }
  .ttl{
    font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,var(--ttl-max,40px));
    line-height:.95;margin:0 0 10px;text-transform:uppercase;letter-spacing:-.01em;
    color:var(--tc-title,var(--ink));transition:color .45s ease;
  }
  .ttl .w{display:inline-block;white-space:nowrap}
  .ttl .w span{display:inline-block;animation:rise .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * 32ms)}
  dl{margin:0;border-top:1px solid var(--tc-meta-line,var(--ink))}
  dl>div{
    display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--tc-meta-line,var(--ink));
    animation:fade .6s both;animation-delay:calc(320ms + var(--i) * 110ms);
  }
  dl.no-anim>div,.ttl.no-anim .w span{animation:none!important}
  dt{font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding-top:5px;color:var(--tc-meta-label,var(--soft));transition:color .45s ease}
  dd{margin:0;text-align:right;font-size:15px;line-height:1.15;color:var(--tc-meta-value,var(--ink));transition:color .45s ease}

  #quotes{
    position:fixed;left:0;right:0;bottom:4vh;z-index:60;display:flex;justify-content:center;gap:clamp(24px,8vw,120px);
    padding:0 5vw;transition:opacity .4s,padding-right .3s ease;pointer-events:none;
  }
  body.editing #quotes{padding-right:calc(5vw + 392px)}
  figure{margin:0;text-align:center;max-width:320px;animation:fade .7s both;animation-delay:calc(400ms + var(--i) * 140ms)}
  figcaption{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tc-quote-cap,var(--soft));transition:color .45s ease}
  blockquote{font-family:var(--serif);margin:6px 0 0;font-size:clamp(20px,2.4vw,30px);line-height:1;text-transform:uppercase;color:var(--tc-quote-text,var(--ink));transition:color .45s ease}
  @keyframes rise{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .reading #quotes,body.hide-quotes #quotes{opacity:0;pointer-events:none}

  /* ---- 3D Shelf Stage ---- */
  #shelfStage{position:fixed;inset:0;perspective:1500px;touch-action:pan-y;cursor:grab;z-index:20}
  .reading #shelfStage{pointer-events:none;cursor:default}
  .disc{
    position:absolute;left:var(--cx,50%);top:var(--cy,47%);will-change:transform;
    transition:transform .46s cubic-bezier(.32,.72,0,1),opacity .46s,left .3s ease;
    outline:none;-webkit-tap-highlight-color:transparent;
    backface-visibility:hidden;-webkit-backface-visibility:hidden;
  }
  .disc:not(.cur){cursor:pointer}
  .disc.live-open{opacity:0!important;pointer-events:none!important;transition:none!important}
  @media (hover:hover){.disc:hover{--lift:var(--lh,0px)}}
  /* Touch: no hover, so JS adds .ring-on to the current magazine and the ring draws in like the desktop hover */
  @media (hover:none){
    .disc.cur.ring-on:not(.ring-lock) .ring{opacity:1;visibility:visible;transition:opacity .14s ease .07s,visibility 0s linear 0s}
    .disc.cur.ring-on:not(.ring-lock) .ring .ring-reveal{stroke-dashoffset:0;transition-delay:.07s}
    .disc.cur.ring-on:not(.ring-lock) .ring .ring-reveal.r2{transition-delay:.13s}
  }
  .reading .disc{cursor:default}
  /* ---- Multi-Layer Background Stack (#bgStack) ---- */
  #bgStack{
    position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;
    /* Edge/Chromium: keep the whole background in one isolated GPU layer to avoid tile seams */
    isolation:isolate;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  }
  .bg-layer{
    position:absolute;inset:0;pointer-events:none;
    transition:background-color .85s cubic-bezier(.22,.68,0,1),opacity .85s cubic-bezier(.22,.68,0,1),filter .85s cubic-bezier(.22,.68,0,1),transform .85s cubic-bezier(.22,.68,0,1);
  }
  #bgStack.live-knob .bg-layer,#bgStack.live-knob .bg-img-fill{
    transition-duration:.05s!important;
  }
  .bg-layer-image{
    background-repeat:no-repeat;will-change:transform,opacity;overflow:hidden;
  }
  .bg-img-fill{
    position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;
    will-change:transform,opacity;
    transition:opacity .85s cubic-bezier(.22,.68,0,1),transform .85s cubic-bezier(.22,.68,0,1);
  }
  /* Frosted grain: random noise (not a regular dot grid), so it never shows moire/tiling on phones */
  .bg-layer-glass.grain::after{
    content:"";position:absolute;inset:0;opacity:.09;pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 -.1'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size:240px 240px;background-repeat:repeat;
  }

  /* ---- Calligraphic Uneven Pen-Stroke Hover Ring (.ring) ---- */
  .ring{
    position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;
    opacity:0;visibility:hidden;
    transition:opacity .18s ease,visibility 0s linear .18s;
  }
  body.hide-ring .ring,.reading .ring,.disc:not(.cur) .ring,.disc.ring-lock .ring{
    opacity:0!important;visibility:hidden!important;transition:none!important;
  }
  .ring .ring-ink{
    fill:var(--tc-ring,var(--ink));stroke:none;transition:fill .45s ease;
  }
  .ring .ring-ink.r2{
    opacity:.76;
  }
  .ring .ring-reveal{
    fill:none;stroke:#ffffff;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:1.05;stroke-dashoffset:1.05;
    transition:stroke-dashoffset .62s cubic-bezier(.24,.74,.18,1);
  }
  .ring .ring-reveal.r2{
    transition-duration:.72s;transition-delay:.06s;
  }
  .disc.cur:not(.ring-lock):hover .ring{
    opacity:1;visibility:visible;
    transition:opacity .14s ease .07s,visibility 0s linear 0s;
  }
  .disc.cur:not(.ring-lock):hover .ring .ring-reveal{
    stroke-dashoffset:0;
    transition-delay:.07s;
  }
  .disc.cur:not(.ring-lock):hover .ring .ring-reveal.r2{
    transition-delay:.13s;
  }

  #back{
    position:fixed;top:58px;left:6px;z-index:105;background:none;color:var(--tc-bar,var(--ink));border:0;padding:8px 10px;
    cursor:pointer;display:none;
  }
  #back svg{display:block;transition:transform .25s ease}
  #back:hover svg{transform:translateX(-4px)}
  .reading #back{display:block;animation:fade .6s .35s both}
  .reading #info{transform:translateY(54px)}

  /* ---- Open Magazine Interactive Stage (v4 St.PageFlip + Overlay) ---- */
  #view{
    position:fixed;inset:0;z-index:45;overflow:visible;pointer-events:auto;
    outline:none;-webkit-tap-highlight-color:transparent;
  }
  #view.zm{overflow:hidden}
  #stage{
    position:absolute;left:0;top:0;display:flex;justify-content:center;
    transform-origin:0 0;will-change:transform;
    backface-visibility:hidden;-webkit-backface-visibility:hidden;
    filter:drop-shadow(0 14px 22px rgba(0,0,0,.28));
    outline:none;-webkit-tap-highlight-color:transparent;
  }
  flip-magazine,flip-magazine:focus,flip-magazine:focus-visible,.disc:focus,.stf__parent,.stf__canvas{
    outline:none!important;-webkit-tap-highlight-color:transparent;
  }
  #view.pan{cursor:grab}#view.panning{cursor:grabbing}#view.pan *,#view.panning *{cursor:inherit!important}
  #ov{position:absolute;inset:0;pointer-events:none;z-index:5}
  .ovel{position:absolute;pointer-events:none;line-height:1.4}
  .ovel.btn,.ovel.html{pointer-events:auto}
  #ov .ovel.leaving{pointer-events:none!important}
  .ovel.btn{cursor:pointer;display:flex;align-items:center;justify-content:center;transition:filter .15s}
  .ovel.btn:hover{filter:brightness(1.08)}
  #ov.edt .ovel{pointer-events:auto;cursor:move;touch-action:none;outline:1px dashed rgba(130,130,130,.85)}
  #ov.edt .ovel.sel{outline:2px solid var(--ring)}
  body.editing .ovel.btn:hover{filter:none}
  #ov.edt .ovel *{pointer-events:none!important}
  .ovpg{position:absolute;overflow:hidden;pointer-events:none}

  @keyframes a-fade{from{opacity:0}}
  @keyframes a-up{from{opacity:0;transform:translateY(34px)}}
  @keyframes a-left{from{opacity:0;transform:translateX(-44px)}}
  @keyframes a-zoom{from{opacity:0;transform:scale(.55)}}
  @keyframes a-vignette{from{opacity:0;transform:scale(.92);filter:brightness(.45) blur(4px)}to{opacity:1;transform:none;filter:none}}
  @keyframes a-bounce{0%{opacity:0;transform:translateY(-60px)}55%{opacity:1;transform:translateY(12px)}75%{transform:translateY(-6px)}100%{transform:none}}
  @keyframes pulse{50%{transform:scale(1.8);opacity:.4}}
  @media (prefers-reduced-motion:reduce){.ovel{animation:none!important}}

  /* ---- Floating Reader Control Bar (visible when magazine is open) ---- */
  .bar{
    position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));
    transform:translateX(-50%);z-index:75;width:max-content;max-width:calc(100vw - 16px);
    display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center;
    padding:8px 12px;border-radius:14px;
    background:color-mix(in srgb,var(--bg) 86%,transparent);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    box-shadow:0 6px 28px rgba(0,0,0,.28),inset 0 0 0 1px color-mix(in srgb,var(--ink) 18%,transparent);
    transition:left .3s ease;
  }
  body.editing .bar{left:calc((100% - 392px) / 2)}
  .bar button{
    font:600 .82rem var(--head);background:var(--tc-bar,var(--ink));color:var(--bg);
    border:0;border-radius:8px;padding:8px 13px;cursor:pointer;touch-action:manipulation;
  }
  .bar button.alt{
    background:transparent;color:var(--tc-bar,var(--ink));
    box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--tc-bar,var(--ink)) 35%,transparent);
  }
  .bar button:disabled{opacity:.38;cursor:default}
  #lbl{min-width:105px;text-align:center;font-size:.82rem;color:var(--tc-bar,var(--soft))}

  /* ---- Stage Vignette Overlay (#stageVignette) ---- */
  #stageVignette{
    position:fixed;inset:0;z-index:35;pointer-events:none;
    opacity:0;transition:opacity .35s ease,background .35s ease;
  }
  #stageVignette.on{opacity:1}

  /* ---- Central Admin Panel (#ed) — Modern Studio Inspector ---- */
  #ed{
    --ed-bg:#0f141c;
    --ed-surface:#151c27;
    --ed-card:#18202c;
    --ed-card-hover:#1d2736;
    --ed-ink:#f0f4f8;
    --ed-muted:#8b9bb0;
    --ed-line:rgba(255,255,255,.09);
    --ed-line-strong:rgba(255,255,255,.16);
    position:fixed;right:0;top:0;bottom:0;width:392px;max-width:100%;overflow-y:auto;overflow-x:hidden;
    background:var(--ed-bg);color:var(--ed-ink);
    border-left:1px solid var(--ed-line-strong);
    box-shadow:-14px 0 40px rgba(0,0,0,.45);z-index:120;
    display:flex;flex-direction:column;gap:0;
    font:400 .82rem/1.45 "Inter","Work Sans",system-ui,sans-serif;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;
  }
  #ed .edtop{
    position:sticky;top:0;z-index:10;
    background:rgba(15,20,28,.92);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    padding:12px 14px 0;display:flex;flex-direction:column;gap:8px;
    border-bottom:1px solid var(--ed-line-strong);
  }
  #ed .edbody{padding:14px 14px 36px;display:flex;flex-direction:column;gap:12px}

  /* Header Row */
  #ed .hdr{display:flex;justify-content:space-between;align-items:center;gap:8px}
  #ed .ed-brand{display:flex;align-items:center;gap:7px;min-width:0}
  #ed .ed-dot{width:8px;height:8px;border-radius:50%;background:var(--ring);box-shadow:0 0 8px var(--ring);flex:none}
  #ed .hdr strong{font-size:.9rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
  #ed .ed-pill{
    font-size:.68rem;font-weight:600;padding:2px 7px;border-radius:99px;
    background:rgba(232,164,0,.15);color:#f9c851;border:1px solid rgba(232,164,0,.3);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:125px;
  }
  #ed .ed-actions{display:flex;align-items:center;gap:5px;flex:none}
  #ed .hdr .u{flex:none;padding:5px 8px;font-size:.75rem;border-radius:6px}
  #ed .hdr .icon-btn{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem}
  #ed .hdr .pv-pill{padding:5px 10px;font-weight:600;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
  #ed .hdr .pv-pill:hover{background:rgba(255,255,255,.14)}
  #ed .hdr .close-btn:hover{background:rgba(255,107,107,.18);color:#ff8585}

  /* Context Action Bar (Open Magazine + Publish) */
  #ed .ed-ctxbar{
    display:grid;grid-template-columns:1fr 1.25fr;gap:7px;align-items:center;
  }
  #ed .ctx-mode-btn{
    padding:7px 10px;font-size:.76rem;font-weight:600;border-radius:8px;
    background:rgba(255,255,255,.06)!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)!important;
    white-space:nowrap;
  }
  #ed .ctx-mode-btn:hover{background:rgba(255,255,255,.12)!important}
  #ed #pubBtn.ctx-pub-btn{
    padding:7px 11px;font-size:.77rem;font-weight:600;border-radius:8px;
    background:linear-gradient(135deg,#f3b21a,#df9600);color:#10171f;
    box-shadow:0 2px 10px rgba(232,164,0,.25);white-space:nowrap;
  }
  #ed #pubBtn.ctx-pub-btn:hover{filter:brightness(1.06)}

  /* Subbar (Preview + Live Status) */
  #ed .ed-subbar{display:flex;align-items:center;justify-content:space-between;gap:8px}
  #ed .pv-wide-btn{flex:none;padding:5px 10px;font-size:.72rem;border-radius:6px}
  /* Compact Status Bar */
  #ed .ed-status-row{
    display:flex;align-items:center;justify-content:space-between;min-height:16px;
    padding:0 2px;
  }
  #ed #st{
    color:#f7c95c;font-size:.71rem;font-weight:500;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* 6-Tab Navigation Bar */
  #ed .tabs{
    display:grid;grid-template-columns:repeat(6,1fr);gap:2px;
    margin:2px -6px 0;padding:0 2px;
  }
  #ed .tabs button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    background:transparent;color:var(--ed-muted);box-shadow:none;
    border-radius:7px 7px 0 0;padding:6px 2px 7px;font-size:.68rem;font-weight:500;
    border-bottom:2px solid transparent;transition:color .15s,background .15s,border-color .15s;
  }
  #ed .tabs button .t-ico{font-size:.88rem;line-height:1}
  #ed .tabs button:hover{color:var(--ed-ink);background:rgba(255,255,255,.04)}
  #ed .tabs button.on{
    color:#ffffff;font-weight:600;
    background:rgba(232,164,0,.1);
    border-bottom-color:var(--ring);
  }

  #ed section{display:none;flex-direction:column;gap:10px}
  #ed[data-tab="style"] section[data-tab="style"],
  #ed[data-tab="lib"] section[data-tab="lib"],
  #ed[data-tab="page"] section[data-tab="page"],
  #ed[data-tab="el"] section[data-tab="el"],
  #ed[data-tab="fx"] section[data-tab="fx"],
  #ed[data-tab="book"] section[data-tab="book"]{display:flex}

  /* Studio Cards & Collapsible Headers */
  #ed .card{
    display:flex;flex-direction:column;gap:0;padding:0;border-radius:11px;
    background:var(--ed-card);border:1px solid var(--ed-line);
    box-shadow:0 4px 14px rgba(0,0,0,.18);overflow:hidden;
    transition:border-color .18s ease;
  }
  #ed .card:hover{border-color:rgba(255,255,255,.14)}
  #ed .card-hdr{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:10px 12px;background:rgba(255,255,255,.025);
    border-bottom:1px solid var(--ed-line);user-select:none;
  }
  #ed .card-hdr[data-collapse-trigger]{cursor:pointer}
  #ed .card-hdr[data-collapse-trigger]:hover{background:rgba(255,255,255,.05)}
  #ed .card.is-collapsed .card-hdr{border-bottom-color:transparent}
  #ed .card.is-collapsed .card-body{display:none}
  #ed .card-body{
    padding:11px 12px 12px;display:flex;flex-direction:column;gap:9px;
  }
  #ed h2{
    margin:0;display:flex;align-items:center;gap:6px;
    font:600 .74rem/1.2 "Inter","Work Sans",system-ui,sans-serif;
    letter-spacing:.04em;text-transform:uppercase;color:#d5e0ec;
  }
  #ed h2 .c-ico{font-size:.86rem;font-weight:400}
  #ed .card-badge{
    font-size:.66rem;font-weight:600;padding:2px 7px;border-radius:99px;
    background:rgba(255,255,255,.07);color:var(--ed-muted);
  }
  #ed .card-badge.active{
    background:rgba(232,164,0,.18);color:#f9c851;
  }
  #ed .card-toggle{
    all:unset;cursor:pointer;color:var(--ed-muted);font-size:.82rem;
    width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
    border-radius:5px;transition:transform .2s ease,background .15s;
  }
  #ed .card-toggle:hover{background:rgba(255,255,255,.08);color:var(--ed-ink)}
  #ed .card.is-collapsed .card-toggle{transform:rotate(-90deg)}

  #ed .hdr-mini-actions{display:flex;align-items:center;gap:4px}
  #ed button.u-sm{padding:4px 7px;font-size:.7rem;border-radius:6px;flex:none}

  /* Form Controls */
  #ed label{display:flex;flex-direction:column;gap:4px;color:var(--ed-muted);font-size:.73rem;font-weight:500}
  #ed label.chk{
    flex-direction:row;align-items:center;gap:8px;color:var(--ed-ink);
    font-size:.78rem;font-weight:400;cursor:pointer;padding:2px 0;
  }
  #ed input,#ed select,#ed textarea{
    font:400 .8rem/1.35 "Inter","Work Sans",system-ui,sans-serif;
    color:var(--ed-ink);background:#0b1017;
    border:1px solid rgba(255,255,255,.14);border-radius:7px;padding:6px 9px;width:100%;
    transition:border-color .15s,box-shadow .15s;
  }
  #ed input:hover,#ed select:hover,#ed textarea:hover{border-color:rgba(255,255,255,.26)}
  #ed input[type=color]{padding:2px 3px;height:32px;cursor:pointer;border-radius:7px}
  #ed input[type=checkbox]{width:15px;height:15px;margin:0;align-self:center;accent-color:var(--ring);cursor:pointer}
  #ed input[type=range]{padding:0;background:transparent;border:0;accent-color:var(--ring);cursor:pointer;height:22px}
  #ed textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;resize:vertical}
  #ed .row{display:flex;gap:7px;flex-wrap:wrap;align-items:flex-end}
  #ed .row>*{flex:1;min-width:0}
  #ed .hint{margin:0;color:var(--ed-muted);font-size:.72rem;line-height:1.4}

  #ed button{
    font:600 .78rem/1.2 "Inter","Work Sans",system-ui,sans-serif;
    background:#e9eef2;color:#10171d;border:0;border-radius:7px;padding:8px 10px;
    cursor:pointer;transition:background .15s,transform .1s,box-shadow .15s;
  }
  #ed button.alt{
    background:rgba(255,255,255,.04);color:var(--ed-ink);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  }
  #ed button.alt:hover:not(:disabled){background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
  #ed button.danger{
    background:rgba(255,107,107,.06);color:#ff7b7b;
    box-shadow:inset 0 0 0 1px rgba(255,107,107,.38);
  }
  #ed button.danger:hover:not(:disabled){background:rgba(255,107,107,.15)}
  #ed button.primary-gold{
    background:linear-gradient(135deg,#f3b21a,#df9600);color:#10171f;font-weight:600;
    box-shadow:0 2px 8px rgba(232,164,0,.22);
  }
  #ed button.primary-gold:hover:not(:disabled){filter:brightness(1.06)}
  #ed button.save-all-btn{padding:10px 14px;font-size:.82rem;border-radius:9px;margin-top:2px}
  #ed button:disabled{opacity:.36;cursor:default}

  /* Swatches & dynamic row/quote editors in Style tab */
  .swatches{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
  .swatch{
    width:24px;height:24px;border-radius:50%;padding:0!important;flex:none!important;
    border:2px solid rgba(255,255,255,.25)!important;cursor:pointer;
  }
  .swatch.on{border-color:var(--ring)!important;transform:scale(1.12)}
  .kv-list{display:flex;flex-direction:column;gap:7px}
  .kv-item{
    display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:8px;
    background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.08);
  }
  .kv-item .kv-top{display:flex;gap:5px;align-items:center}
  .kv-item .kv-top input{flex:1;font-weight:600}
  .kv-item .kv-btn{flex:none!important;padding:4px 7px!important;font-size:.71rem!important}

  /* Visual Page Thumbnail Strip (#pgStrip) */
  .pg-strip{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px;
    max-height:148px;overflow-y:auto;padding:3px 1px;
  }
  .pg-thumb{
    display:flex;flex-direction:column;align-items:center;justify-content:space-between;
    aspect-ratio:1 / 1.32;padding:5px 4px;border-radius:7px;cursor:pointer;
    border:1.5px solid rgba(255,255,255,.16);position:relative;overflow:hidden;
    box-shadow:0 2px 6px rgba(0,0,0,.28);transition:transform .12s,border-color .15s;
  }
  .pg-thumb:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.45)}
  .pg-thumb.on{border-color:var(--ring)!important;box-shadow:0 0 0 2px rgba(232,164,0,.35)!important}
  .pg-thumb .pt-num{
    font-size:.66rem;font-weight:700;padding:1px 5px;border-radius:99px;
    background:rgba(15,20,28,.75);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  }
  .pg-thumb .pt-tag{
    font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
    padding:1px 4px;border-radius:4px;background:rgba(15,20,28,.78);color:#d5e0ec;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  /* Add Element 5-Tile Tool Grid */
  .el-tool-grid{
    display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  }
  #ed .el-tool-btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    padding:8px 4px;border-radius:8px;font-size:.69rem;font-weight:600;
  }
  #ed .el-tool-btn .et-ico{
    font-size:.95rem;line-height:1;color:#f7c95c;
  }

  /* Element & Issue Lists */
  #list,#magList{display:flex;flex-direction:column;gap:5px;max-height:185px;overflow:auto}
  #list .it,#magList .it{
    display:flex;align-items:center;gap:8px;width:100%;text-align:left;
    background:rgba(0,0,0,.22);color:var(--ed-ink);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
    padding:7px 9px;font-weight:400;border-radius:7px;
  }
  #list .it:hover,#magList .it:hover{background:rgba(255,255,255,.06)}
  #list .it.on,#magList .it.on{
    box-shadow:inset 0 0 0 1.5px var(--ring);
    background:rgba(232,164,0,.11);
  }
  .el-type-pill{
    font-size:.61rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    padding:2px 5px;border-radius:4px;background:rgba(255,255,255,.1);color:#d5e0ec;flex:none;
  }
  #list .it.on .el-type-pill{background:rgba(232,164,0,.25);color:#f9c851}
  #magList .it .sw{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.4);flex:none}

  /* Categorized Element Inspector (#props) */
  #props{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #props .wide{grid-column:1/-1}
  #props .prop-sec-hdr{
    grid-column:1/-1;margin:4px 0 0;padding:5px 0 2px;
    border-top:1px solid rgba(255,255,255,.08);
    font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#f7c95c;
  }
  #props .prop-sec-hdr:first-child{margin-top:0;padding-top:0;border-top:0}
  #props .thumb{display:block;max-width:100%;max-height:110px;margin:0 auto 6px;object-fit:contain;border-radius:6px;background:rgba(128,128,128,.2)}

  /* Vignette Controls in Effects Tab */
  .vig-controls{display:flex;flex-direction:column;gap:8px;padding-top:4px;border-top:1px solid rgba(255,255,255,.08)}
  .vig-controls.off{opacity:.45;pointer-events:none}
  .vig-presets{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding-top:2px}

  /* ---- Dialog & Visitor Preview Modal ---- */
  dialog{
    border:0;border-radius:12px;padding:20px;width:min(350px,92vw);
    background:var(--ed-bg);color:var(--ed-ink);box-shadow:0 20px 60px rgba(0,0,0,.55);
    font-family:"Work Sans",system-ui,sans-serif;
  }
  dialog::backdrop{background:rgba(0,0,0,.55)}
  dialog h2{margin:0 0 12px;font:600 1.1rem "Fraunces",Georgia,serif}
  dialog label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;color:var(--ed-muted)}
  dialog input{font:inherit;color:var(--ed-ink);background:#0f141a;border:1px solid rgba(255,255,255,.22);border-radius:6px;padding:8px}
  #loginMsg{margin:8px 0;min-height:1.2em;color:#ff6b6b;font-size:.8rem}
  dialog .row{display:flex;gap:8px}
  dialog .row>*{flex:1}
  dialog button{font:600 .85rem "Work Sans",system-ui,sans-serif;background:var(--ring);color:#14212b;border:0;border-radius:8px;padding:9px 14px;cursor:pointer}
  dialog button.alt{background:transparent;color:var(--ed-ink);box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.28)}

  #pv{position:fixed;inset:0;z-index:200;background:#0b1015;display:flex;flex-direction:column;font-family:"Work Sans",system-ui,sans-serif}
  #pv .pvbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:var(--ed-bg);color:var(--ed-ink)}
  #pv .pvbar .hint{flex:1;min-width:160px;color:var(--ed-muted);font-size:.78rem}
  #pv .pvbar button{font:600 .8rem "Work Sans",system-ui,sans-serif;background:#e9eef2;color:#10171d;border:0;border-radius:7px;padding:7px 12px;cursor:pointer}
  #pv .pvbar button.alt{background:transparent;color:var(--ed-ink);box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.28)}
  #pv .seg{display:flex;gap:0;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.28)}
  #pv .seg button{border-radius:0;background:transparent;color:var(--ed-ink);box-shadow:none;padding:7px 12px}
  #pv .seg button.on{background:var(--ring);color:#14212b}
  #pv .pvbody{flex:1;min-height:0;display:flex;justify-content:center;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  #pvFrame{border:0;width:100%;height:100%;background:#ffffff;border-radius:10px;transition:width .25s}
  #pv[data-dev="tablet"] #pvFrame{width:820px;max-width:100%}
  #pv[data-dev="phone"] #pvFrame{width:390px;max-width:100%}

  button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:2px solid var(--ring);outline-offset:2px;
  }

  /* ---- Responsive Mobile Rules ---- */
  @media (max-width:900px){
    #ed{top:auto;height:56vh;width:100%;border-left:0;border-top:1px solid var(--ed-line-strong);border-radius:16px 16px 0 0}
    body.editing nav#topNav{padding-right:16px}
    body.editing #adminBtn{right:14px}
    body.editing #quotes{padding-right:5vw;bottom:calc(56vh + 10px)}
    body.editing .bar{left:50%;bottom:calc(56vh + 10px)}
  }
  @media (max-width:640px){
    nav#topNav{gap:16px;font-size:15px}
    #info{left:0;right:0;width:auto;padding:0 18px;text-align:center;top:calc(56px + env(safe-area-inset-top))}
    .ttl{font-size:32px;margin-bottom:8px}
    dl{max-width:320px;margin:0 auto}
    .reading dl{display:none}
    figure+figure{display:none}
    #quotes{bottom:calc(3vh + env(safe-area-inset-bottom))}
    #back{top:calc(52px + env(safe-area-inset-top));left:4px}
    .reading #info{transform:none}
    .bar{gap:5px;padding:6px 8px;border-radius:12px}
    .bar button{padding:7px 10px;font-size:.76rem}
    #lbl{min-width:0;font-size:.74rem}
  }
  @media (prefers-reduced-motion: reduce){
    .disc{transition:opacity .3s}#info{transition:none}.ring .ring-reveal{transition:none}
    .ttl span,dl>div,figure,.reading #back{animation:fade .3s both;animation-delay:0s}
  }

  /* ---- Background Layering Editor UI ---- */
  .bg-layers-list{display:flex;flex-direction:column;gap:7px;margin:4px 0}
  .bg-lcard{
    background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 9px;
    transition:border-color .15s,background .15s;
  }
  .bg-lcard.off{opacity:.56;border-style:dashed}
  .bg-lcard.dragging{opacity:.4;border-color:var(--ring)}
  .bg-lcard-hdr{display:flex;align-items:center;gap:6px}
  .bg-lcard-hdr .drag-h{cursor:grab;color:var(--ed-muted);font-size:13px;user-select:none;padding:0 2px}
  .bg-lcard-hdr label.l-chk{display:flex;align-items:center;gap:6px;margin:0;flex:1;font-weight:600;color:var(--ed-ink);font-size:12px;cursor:pointer}
  .bg-lcard-hdr .l-badge{
    font-size:10px;font-weight:600;padding:2px 6px;border-radius:99px;
    background:rgba(240,180,41,.16);color:#f7c95c;letter-spacing:.03em;
  }
  .bg-lcard-hdr .kv-btn{padding:3px 7px;font-size:11px;min-width:0;flex:none}
  .bg-lcard-body{margin-top:8px;padding-top:7px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:6px}
  .bg-lcard.off .bg-lcard-body{display:none}
  .bg-lcard-body .row{margin-top:0;gap:6px}
  .bg-lcard-body label{margin:0;font-size:11px}
  .bg-img-preview{
    display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.25);padding:5px;border-radius:6px;
  }
  .bg-img-thumb{
    width:42px;height:42px;border-radius:5px;background:#111 center/cover no-repeat;flex-shrink:0;border:1px solid rgba(255,255,255,.15);
  }
  .bg-add-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .bg-add-row button{font-size:11px;padding:6px 8px}


  /* ---- Text Color Override Grid & Quick Page Text Color Editor ---- */
  #ov.edt .ovel.txt-el{z-index:4}
  #ov.edt .ovel.btn.empty-hotspot{z-index:2;outline-color:rgba(232,164,0,.45)}
  #ov.edt .ovel.bg-img-el{z-index:1}
  .tc-sec-divider{
    font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
    color:#f7c95c;margin:4px 0 0;padding-top:6px;border-top:1px solid rgba(255,255,255,.08);
  }
  .tc-preset-bar{display:flex;gap:5px;flex-wrap:wrap}
  .tc-preset-bar button{flex:1;min-width:74px;text-align:center}
  .color-hex-pair{display:flex;gap:5px;align-items:center}
  .color-hex-pair input[type=color]{width:38px;min-width:38px;flex:none;height:30px;padding:2px}
  .color-hex-pair input[type=text]{flex:1;min-width:68px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;padding:5px 7px}
  .tc-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:6px;
  }
  .tc-item{
    display:flex;align-items:center;justify-content:space-between;gap:6px;
    padding:5px 7px;border-radius:7px;background:rgba(0,0,0,.24);
    border:1px solid rgba(255,255,255,.08);font-size:.71rem;color:var(--ed-ink);
  }
  .tc-item.custom{border-color:rgba(232,164,0,.45);background:rgba(232,164,0,.07)}
  .tc-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tc-item .tc-ctrl{display:flex;align-items:center;gap:3px;flex:none}
  .tc-item input[type=color]{width:26px;height:24px;padding:1px;border-radius:5px;flex:none}
  .tc-item .kv-btn{padding:2px 5px!important;font-size:.68rem!important;opacity:.75}
  .tc-item .kv-btn:hover{opacity:1}
  .pg-txt-row{
    display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:7px;
    background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.08);
  }
  .pg-txt-row.on{border-color:var(--ring);background:rgba(232,164,0,.1)}
  .pg-txt-row .pt-lbl{
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:.75rem;color:var(--ed-ink);cursor:pointer;
  }
  .pg-txt-row .pt-badge{
    font-size:.62rem;font-weight:700;padding:1px 5px;border-radius:4px;
    background:rgba(255,255,255,.1);color:#f7c95c;flex:none;
  }
  .pg-txt-row input[type=color]{width:30px;height:26px;padding:1px;flex:none}
  .pg-txt-row input[type=text]{width:68px;flex:none;font-family:ui-monospace,Menlo,monospace;font-size:.71rem;padding:3px 5px}