:root{
  --gold-h: #F4DDB2; --gold-1: #E5C28B; --gold-2: #C9A063; --gold-3: #8C6A3A; --gold-deep: #5A4220;
  --line: rgba(201,160,99,0.2); --line-strong: rgba(229,194,139,0.45);
  --txt: #E8E0CC; --txt-mute: #B5AC95;
  --bg-0: #0a0805;
  --ok: #9FC88A; --warn: #E5B86B; --err: #D97770;
  --hdr-h: 90px; --side-w: 290px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg-0);color:var(--txt);
  font-family:'Inter','Noto Sans JP',sans-serif;font-weight:400;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.7;
}
body{ min-height:100vh;
  background:
    radial-gradient(ellipse 60% 40% at 30% 0%, rgba(201,160,99,0.10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 90% 100%, rgba(140,106,58,0.10), transparent 70%),
    var(--bg-0);
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg-0)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold-3),var(--gold-deep));border-radius:99px}

/* HEADER */
.hdr{ position:fixed;top:0;left:0;right:0;z-index:100;height:var(--hdr-h);
  background:linear-gradient(180deg, var(--hdr-bg-top, var(--bc-main-color)), var(--hdr-bg-bot, var(--bc-main-color)));
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 8px 32px rgba(0,0,0,0.6),inset 0 1px 0 rgba(229,194,139,0.18);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:0 28px;
}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-1) 50%,transparent);}
.hdr-left{display:flex;align-items:center;gap:18px;text-decoration:none;color:inherit;transition:opacity .2s}
.hdr-left:hover{opacity:.85}
.hdr-text{display:flex;flex-direction:column;justify-content:center;gap:6px}
.brand-name{ font-family:'Cinzel',serif;letter-spacing:.42em;font-size:30px;font-weight:600;line-height:1;
  background:linear-gradient(180deg,var(--gold-h),var(--gold-2) 60%,var(--gold-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(201,160,99,0.25));
}
.hdr-clock{ display:flex;align-items:center;gap:10px;
  font-family:'Cinzel',serif;font-weight:600;font-size:18px;letter-spacing:.16em;line-height:1;
  background:linear-gradient(180deg,var(--gold-h),var(--gold-2) 60%,var(--gold-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 8px rgba(229,194,139,0.3));
}
.hdr-clock .colon{animation:tBlink 1s steps(2) infinite;color:#C9A063;-webkit-text-fill-color:initial}
@keyframes tBlink{50%{opacity:.35}}
.hdr-clock .date{ font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;
  color:var(--txt-mute);letter-spacing:.05em;font-weight:400;
  background:none;-webkit-text-fill-color:initial;-webkit-background-clip:initial;
  filter:none;padding-left:14px;border-left:1px solid var(--line);margin-left:6px;
}
.hdr-center{ text-align:center; font-family:'Cinzel','Noto Sans JP',serif;font-weight:500;
  letter-spacing:.18em; font-size:18px; color:var(--gold-1);
  text-shadow:0 0 18px rgba(201,160,99,0.25); }
.hdr-center .sub{ display:block;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:13px;letter-spacing:.06em;color:var(--txt-mute); margin-top:4px;font-weight:400; }
.hdr-right{display:flex;align-items:center;gap:8px;min-width:180px;justify-content:flex-end}
.hdr-right .placeholder{ padding:8px 16px;border:1px dashed var(--line);border-radius:99px;
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:.4em;color:var(--gold-3);text-transform:uppercase; }
.hdr-burger{ display:none;width:42px;height:42px;border-radius:8px;
  background:linear-gradient(180deg,#2a2418 0%,#1a1410 50%,#100c08 100%);
  border:1px solid var(--gold-3);
  box-shadow:inset 0 1px 0 rgba(244,221,178,0.3),0 2px 6px rgba(0,0,0,0.5);
  align-items:center;justify-content:center;color:var(--gold-1);
}
.hdr-burger svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}

/* WATCH */
.brand-mark{ width:74px;height:74px;border-radius:50%;position:relative;flex-shrink:0;
  box-shadow:0 0 0 1px var(--gold-2),0 0 30px rgba(201,160,99,0.45),0 6px 22px rgba(0,0,0,0.7); }
.bm-bezel{ position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, var(--gold-3) 0deg,var(--gold-h) 30deg,var(--gold-2) 60deg,
    var(--gold-3) 90deg,var(--gold-1) 120deg,var(--gold-h) 150deg,var(--gold-2) 180deg,
    var(--gold-3) 210deg,var(--gold-1) 240deg,var(--gold-h) 270deg,var(--gold-2) 300deg,
    var(--gold-3) 330deg,var(--gold-3) 360deg);
  animation:rotate 30s linear infinite;
}
@keyframes rotate{to{transform:rotate(360deg)}}
.bm-bezel::after{content:"";position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle at 50% 30%,#1a1408,#0a0805);border:1px solid rgba(201,160,99,0.3);}
.bm-ticks{position:absolute;inset:7px;border-radius:50%;pointer-events:none}
.bm-ticks i{position:absolute;left:50%;top:0;width:1.6px;height:6px;background:var(--gold-1);
  transform-origin:50% 30px;margin-left:-0.8px;box-shadow:0 0 2px rgba(229,194,139,0.5);}
.bm-ticks i.major{height:8px;width:2.2px;background:var(--gold-h)}
.bm-hand{position:absolute;left:50%;top:50%;transform-origin:50% 100%;border-radius:1px;pointer-events:none}
.bm-hour{width:2.4px;height:17px;background:linear-gradient(180deg,transparent 0%,transparent 22%,var(--gold-2) 22%,var(--gold-h) 100%);transform:translate(-50%,-100%) rotate(0deg);z-index:3;filter:drop-shadow(0 0 1px rgba(229,194,139,0.6));}
.bm-min{width:1.8px;height:24px;background:linear-gradient(180deg,transparent 0%,transparent 15%,var(--gold-1) 15%,var(--gold-h) 100%);transform:translate(-50%,-100%) rotate(0deg);z-index:4;filter:drop-shadow(0 0 1px rgba(229,194,139,0.7));}
.bm-sec{width:0.9px;height:28px;background:linear-gradient(180deg,var(--gold-h) 0%,var(--gold-h) 78%,var(--bc-main-color) 78%,var(--bc-main-color) 100%);transform:translate(-50%,-100%) rotate(0deg);z-index:5;will-change:transform;}
.bm-pivot{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--gold-h),var(--gold-3));transform:translate(-50%,-50%);
  box-shadow:0 0 0 0.8px var(--gold-2),0 0 5px rgba(0,0,0,0.7);z-index:6;}

/* SIDEBAR */
.side{ position:fixed;top:var(--hdr-h);left:0;bottom:0;width:var(--side-w);z-index:90;
  background:linear-gradient(180deg, var(--side-bg-top, var(--bc-main-color)), var(--side-bg-bot, var(--bc-main-color)));
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden; scrollbar-gutter:stable;
  padding:10px 16px 18px;
  transition:transform .25s ease, width .25s ease;
}
.side-nav{display:flex;flex-direction:column;gap:10px;flex:1;padding-top:24px}
.side-foot{padding-top:8px;margin-top:6px}

.side-collapse-all{
  position:fixed;top:calc(var(--hdr-h) + 11px);left:16px;z-index:91;
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px 4px;
  background:linear-gradient(180deg,var(--gold-h) 0%,var(--gold-1) 50%,var(--gold-2) 100%);
  color:#1a1008; border:1px solid var(--gold-deep);
  border-radius:6px 6px 0 0;
  font-family:'Cinzel',serif;font-size:9px;letter-spacing:.14em;font-weight:700;
  text-transform:uppercase;cursor:pointer;line-height:1;
  box-shadow:0 -1px 2px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.3);
  transition:filter .15s, transform .12s, opacity .25s;
}
.side-collapse-all:hover{filter:brightness(1.1)}
.side-collapse-all:active{transform:translateY(1px)}
.side-collapse-all svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.2}
body.side-collapsed .side-collapse-all,
html.side-collapsed .side-collapse-all{opacity:0;pointer-events:none}

/* METALLIC BUTTON */
.btn-metallic{
  display:flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:8px;
  background:linear-gradient(180deg,#FAE7BC 0%,#F4DDB2 8%,#E5C28B 28%,#C9A063 55%,#8C6A3A 85%,#5A4220 100%);
  border:1px solid #3a2810;
  box-shadow:inset 0 1px 0 rgba(255,250,225,0.85),inset 0 -1px 0 rgba(40,28,10,0.55),inset 0 0 14px rgba(255,239,195,0.20),0 2px 8px rgba(0,0,0,0.55),0 1px 0 rgba(244,221,178,0.22);
  color:#1a1206;
  font-family:'Inter','Noto Sans JP',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.05em;
  text-shadow:0 1px 0 rgba(255,245,210,0.55);
  transition:all .2s;width:100%;text-align:left;
}
.btn-metallic:hover{ background:linear-gradient(180deg,#FFF1CE 0%,#FAE7BC 8%,#F4DDB2 28%,#E5C28B 55%,#C9A063 85%,#8C6A3A 100%);
  border-color:#5A4220; box-shadow:inset 0 1px 0 rgba(255,255,250,0.95),inset 0 -1px 0 rgba(58,44,20,0.5),inset 0 0 18px rgba(255,239,195,0.32),0 5px 16px rgba(0,0,0,0.65),0 0 0 1px rgba(244,221,178,0.45);
}
.btn-metallic:active{ background:linear-gradient(180deg,#5A4220 0%,#8C6A3A 25%,#C9A063 60%,#E5C28B 100%);
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.55),inset 0 -1px 0 rgba(244,221,178,0.35),0 1px 2px rgba(0,0,0,0.4); }
.btn-metallic .ic{ width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:#3a2810; filter:drop-shadow(0 1px 0 rgba(255,245,210,0.45)); font-size:16px;
}
.btn-metallic .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
.btn-metallic .lbl{flex:1}
.btn-metallic .chev{ width:14px;height:14px;flex-shrink:0;color:#5A4220;
  transition:transform .32s cubic-bezier(.4,0,.2,1); }
.btn-metallic .chev svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* GOLD primary button */
.btn-gold{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:6px;
  background:linear-gradient(180deg,var(--gold-h) 0%,var(--gold-1) 35%,var(--gold-2) 70%,var(--gold-3) 100%);
  border:1px solid var(--gold-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),inset 0 -1px 0 rgba(0,0,0,0.3),0 2px 8px rgba(0,0,0,0.4);
  color:#1a1206;font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,0.4);transition:all .2s;
  font-family:'Cinzel',serif;
}
.btn-gold:hover{filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,0.6),inset 0 -1px 0 rgba(0,0,0,0.3),0 4px 14px rgba(201,160,99,0.5)}
.btn-gold:active{background:linear-gradient(180deg,var(--gold-3) 0%,var(--gold-2) 35%,var(--gold-1) 70%,var(--gold-h) 100%);
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.4);}
.btn-gold.danger{background:linear-gradient(180deg,#E89A8F 0%,#C8665A 35%,#9C2F2A 70%,#5C1410 100%);
  border-color:#3a0a08;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,0.4);}
.btn-gold:disabled{opacity:.45;cursor:not-allowed}

/* ACCORDION */
.acc{position:relative}
.acc-head .chev{transition:transform .32s cubic-bezier(.4,0,.2,1)}
.acc.open > .acc-head .chev{transform:rotate(180deg)}
.acc-body{ display:grid; grid-template-rows:0fr; margin-top:0; padding:0 6px;
  background:transparent; border:1px solid transparent; border-radius:8px; overflow:hidden;
  transition: grid-template-rows .35s cubic-bezier(.4,0,.2,1), margin-top .35s,
    padding .35s, background .35s, border-color .35s;
}
.acc-body > .acc-body-inner{overflow:hidden;min-height:0}
.acc.open > .acc-body{ grid-template-rows:1fr; margin-top:4px; padding:4px;
  background:linear-gradient(180deg,rgba(0,0,0,0.25),rgba(0,0,0,0.12)); border-color:rgba(201,160,99,0.12); }
.acc-body-inner{display:flex;flex-direction:column;gap:2px}
.acc-sub .acc-head{padding:6px 10px;font-size:12px;letter-spacing:.06em}
.acc-sub .acc-body-inner{background:linear-gradient(180deg,rgba(0,0,0,0.35),rgba(0,0,0,0.2));padding:4px}

/* nav-link */
.dev-link{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:6px;
  background:linear-gradient(180deg,#1a1410 0%,#100c08 100%);
  border:1px solid var(--line);
  color:var(--gold-1);font-size:12.5px;letter-spacing:.04em;text-decoration:none;
  transition:all .2s;
}
.dev-link:hover{ border-color:var(--line-strong);color:var(--gold-h);
  background:linear-gradient(180deg,#251c14 0%,#150f0a 100%); }
.dev-link .arr{color:var(--gold-3);font-size:11px;margin-right:2px}

/* CC item (instance row — 2-row compact) */
.cc-item{
  background:rgba(18,14,10,0.25);
  border:1px solid rgba(201,160,99,0.12);border-radius:5px;
  padding:5px 8px;display:flex;flex-direction:column;gap:4px;
}
.cc-item:hover{border-color:var(--line-strong);background:rgba(25,20,14,0.4)}
.cc-row{display:flex;align-items:center;gap:8px;min-width:0}
.cc-link{display:flex;align-items:center;gap:8px;min-width:0;flex:1;color:var(--gold-1);text-decoration:none}
.cc-link:hover{color:var(--gold-h)}
.cc-badge{ flex-shrink:0;
  font-family:'Cinzel',serif;font-size:11px;font-weight:600;letter-spacing:.08em;
  padding:2px 9px;border-radius:99px;
  background:linear-gradient(180deg,var(--gold-h),var(--gold-2));color:#1a1206;
  box-shadow:0 0 0 1px var(--gold-deep) inset;
  white-space:nowrap;
}
.cc-name{ flex:1 1 0;min-width:0;
  font-size:13px;font-weight:600;color:var(--gold-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.cc-status{ display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  font-size:11px;font-weight:600;color:var(--txt);
  font-family:'JetBrains Mono','Inter',monospace;letter-spacing:.04em;
}
.cc-status .led{ width:7px;height:7px;border-radius:50%;background:#555;
  box-shadow:0 0 5px rgba(0,0,0,0.4) inset;flex-shrink:0; }
.cc-status.online .led{background:var(--ok);box-shadow:0 0 7px var(--ok),inset 0 0 3px rgba(255,255,255,0.4);animation:pulse 1.6s ease-in-out infinite}
.cc-status.offline .led{background:var(--err);box-shadow:0 0 5px var(--err)}
.cc-status.online{color:var(--ok)}
.cc-status.offline{color:var(--err)}
@keyframes pulse{50%{opacity:.4}}
.cc-actions{display:flex;gap:5px;width:100%}
.cc-actions .btn-gold{flex:1;justify-content:center;padding:2px 8px;font-size:11.5px;font-weight:700;letter-spacing:.08em;white-space:nowrap;}

/* All Instances row */
.cc-all{
  margin-top:3px;padding:5px 8px;border-radius:5px;
  background:rgba(50,22,18,0.3);
  border:1px solid rgba(122,58,50,0.4);
  display:flex;flex-direction:column;gap:4px;
}
.cc-all-h{
  font-family:'Cinzel',serif;font-size:10.5px;font-weight:700;letter-spacing:.2em;
  color:var(--gold-h);text-transform:uppercase;text-align:center;
  text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.cc-all .cc-actions .btn-gold{padding:2px 8px}

/* RAM block */
.ram-block{margin-top:10px;padding:8px 0 4px;border-top:1px solid var(--line)}
.ram-block-h{
  display:flex;align-items:center;justify-content:space-between;
  font-family:'Cinzel',serif;font-size:11px;font-weight:600;letter-spacing:.4em;color:var(--gold-1);
  text-transform:uppercase;padding:6px 12px 8px;
  background:none;border:0;width:100%;cursor:pointer;
  text-shadow:0 1px 0 rgba(0,0,0,.6);transition:color .2s ease;
}
.ram-block-h:hover{color:var(--gold-h)}
.ram-block-h .chev{display:inline-flex;transition:transform .32s cubic-bezier(.4,0,.2,1)}
.ram-block-h .chev svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2}
.ram-block.collapsed .ram-block-h .chev{transform:rotate(-90deg)}
.ram-block-sub{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:11px;
  color:var(--txt-mute);letter-spacing:.05em;padding:0 12px 6px;
}
.ram-block-body{
  display:flex;flex-direction:column;gap:3px;padding:0 4px;
  max-height:1200px;overflow:hidden;opacity:1;
  transition:max-height .35s,opacity .25s,margin-top .25s,padding .25s;
}
.ram-block.collapsed .ram-block-body{max-height:0;opacity:0;margin-top:-4px;padding-top:0;padding-bottom:0}
.ram-item{
  display:flex;flex-direction:column;gap:3px;
  padding:5px 9px 6px;border-radius:5px;
  background:linear-gradient(180deg,#1a1410 0%,#100c08 100%);
  border:1px solid var(--line);border-left:3px solid var(--gold-3);
  color:var(--gold-1);text-decoration:none;transition:all .2s;line-height:1.2;
}
.ram-item:hover{border-color:var(--line-strong);background:linear-gradient(180deg,#251c14 0%,#150f0a 100%)}
.ram-name{ font-family:'JetBrains Mono','Inter',monospace;font-size:11.5px;font-weight:500;letter-spacing:.02em;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.ram-stats{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.ram-cell{display:flex;align-items:center;gap:8px;width:100%;min-width:0;justify-content:space-between}
.ram-cell .ram-lbl{font-family:'Cinzel',serif;font-size:10px;letter-spacing:.14em;color:var(--gold-1);font-weight:700;flex:0 0 auto}
.ram-cell .ram-val{
  font-family:'JetBrains Mono','Inter',monospace;font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:2px 10px;border-radius:99px;
  background:rgba(0,0,0,0.45);color:var(--gold-h);
  white-space:nowrap;flex:0 1 auto;text-align:right;
}
.ram-cell.lvl-blue   .ram-val{color:#9EC4E5;background:rgba(111,168,220,0.16);box-shadow:inset 0 0 0 1px rgba(111,168,220,0.4)}
.ram-cell.lvl-green  .ram-val{color:var(--ok);background:rgba(159,200,138,0.16);box-shadow:inset 0 0 0 1px rgba(159,200,138,0.4)}
.ram-cell.lvl-yellow .ram-val{color:var(--warn);background:rgba(229,184,107,0.16);box-shadow:inset 0 0 0 1px rgba(229,184,107,0.45)}
.ram-cell.lvl-red    .ram-val{color:#fff;background:linear-gradient(180deg,#D67B6B,#9C2F2A);box-shadow:0 0 10px rgba(214,123,107,0.5)}
.ram-item.lvl-blue   {border-left-color:#6FA8DC}
.ram-item.lvl-green  {border-left-color:var(--ok)}
.ram-item.lvl-yellow {border-left-color:var(--warn)}
.ram-item.lvl-red    {border-left-color:var(--err);animation:ramAlert 2s ease-in-out infinite}
@keyframes ramAlert{50%{box-shadow:0 0 14px rgba(214,123,107,0.45)}}
.placeholder-row{
  padding:14px;border:1px dashed var(--line);border-radius:6px;
  text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:13px;color:var(--txt-mute);
}

/* Settings button (footer) */
.settings-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 14px;border-radius:6px;
  background:linear-gradient(180deg,#1a1410 0%,#100c08 100%);
  border:1px solid var(--gold-3);
  font-family:'Cinzel',serif;font-size:11.5px;letter-spacing:.28em;color:var(--gold-1);text-transform:uppercase;
  text-decoration:none;transition:all .25s;
}
.settings-btn:hover,.settings-btn.active{
  background:linear-gradient(180deg,var(--gold-h),var(--gold-2));color:#1a1206;border-color:transparent;
  box-shadow:0 6px 18px rgba(201,160,99,0.4);
}
.settings-btn .gear{font-size:14px;display:inline-block;animation:rotate 12s linear infinite;transform-origin:center}

/* MAIN */
.main{
  margin-top:var(--hdr-h);margin-left:var(--side-w);
  padding:32px 36px;min-height:calc(100vh - var(--hdr-h));
  transition:margin-left .25s ease;
}

/* SIDEBAR COLLAPSE */
.side-toggle{
  position:fixed;top:calc(var(--hdr-h) + 80px);left:var(--side-w);
  width:18px;height:64px;z-index:95;
  background:linear-gradient(180deg,#F4DDB2 0%,#C9A063 50%,#5A4220 100%);
  border:1px solid #3a2810;border-left:none;
  border-radius:0 8px 8px 0;
  box-shadow:inset 0 1px 0 rgba(255,250,225,0.7),inset 0 -1px 0 rgba(40,28,10,0.5),2px 2px 8px rgba(0,0,0,0.5);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:#1a1206;font-size:12px;font-weight:700;
  transition:left .25s ease, background .15s;padding:0;line-height:1;
}
.side-toggle:hover{background:linear-gradient(180deg,#FFF1CE 0%,#E5C28B 50%,#8C6A3A 100%);}
.side-toggle .chev{display:inline-block;transition:transform .25s ease}
body.side-collapsed .side, html.side-collapsed .side{transform:translateX(-100%)}
body.side-collapsed .main, html.side-collapsed .main{margin-left:0}
body.side-collapsed .side-toggle, html.side-collapsed .side-toggle{left:0;border-left:1px solid #3a2810;border-radius:0 8px 8px 0}
body.side-collapsed .side-toggle .chev, html.side-collapsed .side-toggle .chev{transform:rotate(180deg)}
.hdr-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:80;backdrop-filter:blur(2px)}

/* PAGE CONTENT helpers */
.page-title{
  font-family:'Cinzel',serif;font-weight:600;letter-spacing:.18em;font-size:26px;line-height:1.2;
  background:linear-gradient(180deg,var(--gold-h),var(--gold-2) 60%,var(--gold-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:8px;
}
.page-sub{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;
  color:var(--txt-mute);letter-spacing:.06em;margin-bottom:28px;
}
.card{
  border:1px solid var(--line);border-radius:10px;
  background:linear-gradient(180deg,rgba(20,18,14,0.7),rgba(11,9,6,0.6));
  padding:24px;margin-bottom:20px;position:relative;
}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 50%,transparent);border-radius:10px 10px 0 0;}
.card-h{
  font-family:'Cinzel',serif;font-size:13px;font-weight:600;letter-spacing:.2em;
  color:var(--gold-1);text-transform:uppercase;margin-bottom:16px;
}
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:12px;font-weight:500;color:var(--gold-1);letter-spacing:.06em;margin-bottom:6px}
.form-input{
  width:100%;padding:8px 12px;border-radius:6px;
  background:rgba(0,0,0,0.4);border:1px solid var(--line);
  color:var(--txt);font-family:'JetBrains Mono','Inter',monospace;font-size:13px;
  transition:border-color .2s;
}
.form-input:focus{outline:none;border-color:var(--gold-2)}
.form-input[type="color"]{height:40px;padding:4px;cursor:pointer}
.toast{
  position:fixed;bottom:24px;right:24px;z-index:200;
  padding:12px 20px;border-radius:8px;
  background:linear-gradient(180deg,var(--gold-h),var(--gold-2));color:#1a1206;
  font-weight:600;font-size:13px;box-shadow:0 4px 20px rgba(0,0,0,0.5);
  transform:translateY(80px);opacity:0;transition:all .3s ease;
}
.toast.show{transform:translateY(0);opacity:1}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-strong);
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:.14em;color:var(--gold-1);text-transform:uppercase;font-weight:600}
table.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);color:var(--txt)}
table.tbl tr:hover td{background:rgba(201,160,99,0.06)}

@media(max-width:980px){
  :root{--hdr-h:170px;--side-w:280px}
  .hdr{grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:14px;padding:14px 18px}
  .hdr-left{order:1;grid-row:1;grid-column:1}
  .hdr-right{order:2;grid-row:1;grid-column:2;min-width:0}
  .hdr-burger{display:flex}
  .hdr-right .placeholder{display:none}
  .hdr-center{order:3;grid-row:2;grid-column:1/3;text-align:center;font-size:14px;letter-spacing:.12em}
  .hdr-center .sub{font-size:12px}
  .brand-name{font-size:24px}
  .brand-mark{width:62px;height:62px}
  .bm-ticks{inset:6px}
  .bm-ticks i{transform-origin:50% 25px;height:5px}
  .bm-ticks i.major{height:7px}
  .bm-hour{height:14px}.bm-min{height:20px}.bm-sec{height:23px}
  .hdr-clock{font-size:15px}
  .hdr-clock .date{display:none}
  .side{transform:translateX(-100%);width:280px}
  .side.open{transform:translateX(0)}
  .side.open ~ .hdr-overlay{display:block}
  .main{margin-left:0}
  .side-toggle{display:none}
}
@media(max-width:480px){
  :root{--hdr-h:160px}
  .brand-name{font-size:20px}
  .hdr-clock{font-size:13px;letter-spacing:.1em}
  .hdr-text{gap:4px}
  .brand-mark{width:54px;height:54px}
}