/* Jewel Tags — light theme overrides. Dark is the default (tokens in app.css / legacy inline styles). Setting data-theme="light" on re-skins everything, because every page shares the same CSS variable names. */ :root[data-theme="light"]{ --bg:#f4f1ea; --s1:#ffffff; --s2:#faf7f0; --s3:#f0ebe0; --bdr:#e7ded0; --bdr2:#d9cdb6; --gold:#9a7b3f; --gold2:#7a5c22; --gold-d:#b7974e; --gold-g:rgba(154,123,63,.14); --text:#2b2620; --dim:#6f6659; --mute:#b0a591; --green:#1f9d6b; --gbg:rgba(31,157,107,.12); --amber:#b5820a; --abg:rgba(181,130,10,.12); --red:#c0392b; --rbg:rgba(192,57,43,.10); --blue:#2f6fd0; --bbg:rgba(47,111,208,.10); } :root[data-theme="light"] body{background:var(--bg);color:var(--text)} :root[data-theme="light"] nav.top{box-shadow:0 1px 0 rgba(0,0,0,.03)} :root[data-theme="light"] .toast{box-shadow:0 8px 28px rgba(0,0,0,.14)} :root[data-theme="light"] .modal,:root[data-theme="light"] .nav-menu{box-shadow:0 14px 40px rgba(40,30,10,.16)} :root[data-theme="light"] .table-wrap,:root[data-theme="light"] .card,:root[data-theme="light"] .panel{box-shadow:0 1px 3px rgba(40,30,10,.04)} html{transition:none} body,nav.top,.card,.panel,.btn,.modal,input,select,textarea,.tile,.carat-btn{transition:background-color .15s,color .15s,border-color .15s} /* ── Unified nav chrome (self-contained so legacy pages need only theme.css) ── */ nav.top{height:54px;background:var(--s1);border-bottom:1px solid var(--bdr);display:flex;align-items:center;padding:0 20px;gap:6px;position:sticky;top:0;z-index:50} nav.top .brand{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:700;color:var(--gold2);letter-spacing:.04em;margin-right:8px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap} nav.top .brand small{font-size:11px;font-family:'Outfit',sans-serif;font-weight:300;color:var(--dim);letter-spacing:.08em;text-transform:uppercase} nav.top .brand span{display:inline-flex;flex-direction:column;line-height:1} nav.top .brand-logo{height:32px;width:auto;max-width:150px;border-radius:5px;object-fit:contain} nav.top .nav-links{display:flex;gap:2px;align-items:center;flex-wrap:wrap} nav.top .nav-links>a{padding:7px 11px;border-radius:7px;font-size:13px;font-weight:500;color:var(--dim);text-decoration:none;white-space:nowrap} nav.top .nav-links>a:hover{color:var(--text);background:var(--s2)} nav.top .nav-links>a.active{color:var(--gold2);background:var(--gold-g)} nav.top .nav-sp{flex:1} nav.top .nav-user{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--dim)} nav.top .nav-user b{color:var(--text);font-weight:600} nav.top .nav-group{position:relative} nav.top .nav-btn{background:none;border:none;color:var(--dim);font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;padding:7px 11px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap} nav.top .nav-btn:hover{color:var(--text);background:var(--s2)} nav.top .nav-btn .caret{font-size:9px;opacity:.6} nav.top .nav-group.active .nav-btn{color:var(--gold2);background:var(--gold-g)} nav.top .nav-group.open .nav-btn{color:var(--text);background:var(--s2)} nav.top .nav-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:200px;background:var(--s1);border:1px solid var(--bdr2);border-radius:10px;padding:6px;display:none;flex-direction:column;gap:1px;z-index:60;box-shadow:0 12px 34px rgba(0,0,0,.45)} nav.top .nav-group.open .nav-menu{display:flex} nav.top .nav-menu a{padding:8px 12px;border-radius:7px;font-size:13px;color:var(--text);text-decoration:none;white-space:nowrap} nav.top .nav-menu a:hover{background:var(--s2);color:var(--gold2)} nav.top .nav-menu a.active{color:var(--gold2);background:var(--gold-g)} nav.top .nav-menu .mi-desc{display:block;font-size:10px;color:var(--dim);font-weight:400;margin-top:1px} nav.top #themeBtn{background:none;border:1px solid var(--bdr2);color:var(--dim);width:32px;height:30px;border-radius:7px;cursor:pointer;font-size:14px;line-height:1} nav.top #themeBtn:hover{border-color:var(--gold-d);color:var(--text)} .acting-bar{background:linear-gradient(90deg,rgba(240,165,0,.16),rgba(240,165,0,.04));border-bottom:1px solid rgba(240,165,0,.32);color:var(--amber);font-size:12.5px;padding:8px 20px;display:flex;gap:10px;align-items:center} .acting-bar b{color:var(--gold2)} .acting-bar a{color:var(--blue);text-decoration:none;font-weight:600} /* ── Responsive nav (mobile hamburger) — self-contained in theme.css so every page gets it ── */ nav.top .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:4px;width:42px;height:36px;margin-left:auto;background:none;border:1px solid var(--bdr2);border-radius:8px;cursor:pointer;padding:0 9px;flex-shrink:0} nav.top .nav-toggle span{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;transition:.2s} nav.top.mobile-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)} nav.top.mobile-open .nav-toggle span:nth-child(2){opacity:0} nav.top.mobile-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} @media(max-width:820px){ nav.top{flex-wrap:wrap;height:auto;min-height:54px;padding:0 14px} nav.top .nav-toggle{display:flex} nav.top .nav-sp{display:none} nav.top .nav-links{order:10;flex-basis:100%;width:100%;display:none;flex-direction:column;align-items:stretch;gap:2px;padding:6px 0 10px;border-top:1px solid var(--bdr)} nav.top.mobile-open .nav-links{display:flex} nav.top .nav-links>a{padding:12px;font-size:15px;border-radius:8px} nav.top .nav-group{position:static;width:100%} nav.top .nav-btn{width:100%;justify-content:space-between;padding:12px;font-size:15px;border-radius:8px} nav.top .nav-menu{position:static;display:none;min-width:0;width:100%;box-shadow:none;border:1px solid var(--bdr);background:var(--s2);margin:2px 0 4px;padding:5px} nav.top .nav-group.open .nav-menu{display:flex} nav.top .nav-menu a{padding:11px 12px;font-size:14px;white-space:normal} nav.top .nav-user{order:11;flex-basis:100%;width:100%;display:none;justify-content:flex-start;flex-wrap:wrap;gap:12px;padding:10px 0 12px;border-top:1px solid var(--bdr);font-size:14px} nav.top.mobile-open .nav-user{display:flex} nav.top.mobile-open .nav-user .btn{margin-left:auto} }