:root{
  --menu-bg:#c7b37a;
  --content-bg:#ead9a5;
  --content-card:rgba(255,255,255,.22);
  --panel-grey:#6f747b;
  --panel-grey-dark:#575d65;
  --menu-border:#9d8750;
  --nav-text:#1f211d;
  --nav-muted:#5e5131;
  --nav-hover:#b9a264;
  --nav-active:#a88f50;
  --button-face:#111;
  --button-border:#c8d0dc;
  --button-text:#fff;
  --sidebar-width:288px;
  --mobile-header-height:58px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--content-bg);font-family:Arial,Helvetica,sans-serif;color:#171717}
a{color:inherit;text-decoration:none}
.site-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr)}
.sidebar{background:var(--menu-bg);border-right:1px solid var(--menu-border);color:var(--nav-text);height:100vh;position:sticky;top:0;overflow-y:auto;padding:20px 16px;z-index:30;box-shadow:6px 0 18px rgba(72,54,18,.16)}
.site-title{font-size:19px;font-weight:800;margin:0 0 22px;line-height:1.15;color:#16170f}
.nav-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.nav-link,.submenu-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:11px 12px;border-radius:10px;color:var(--nav-text);font-weight:800;font-size:14px;background:transparent;border:0;text-align:left;cursor:pointer;font-family:inherit}
.nav-link:hover,.submenu-toggle:hover{background:var(--nav-hover)}
.nav-link.active{background:var(--nav-active);color:#111}
.submenu-toggle::after{content:'▸';font-size:12px;color:var(--nav-muted)}
.nav-group.open>.submenu-toggle::after{content:'▾'}
.submenu{display:none;list-style:none;margin:5px 0 4px;padding:0 0 0 12px;border-left:1px solid var(--menu-border)}
.nav-group.open>.submenu{display:grid;gap:4px}
.submenu .nav-link{font-size:13px;padding:9px 10px 9px 14px}
.mobile-header{display:none;height:var(--mobile-header-height);align-items:center;justify-content:space-between;padding:0 16px;background:var(--menu-bg);border-bottom:1px solid var(--menu-border);color:#111;position:sticky;top:0;z-index:40}
.mobile-title{font-weight:800}
.hamburger{width:42px;height:38px;border:1px solid var(--menu-border);border-radius:10px;background:var(--nav-hover);display:grid;place-items:center;cursor:pointer}
.hamburger span,.hamburger span:before,.hamburger span:after{display:block;width:20px;height:2px;background:#111;border-radius:999px;content:''}
.hamburger span:before{transform:translateY(-7px)}
.hamburger span:after{transform:translateY(5px)}
.menu-backdrop{display:none}
.content{min-width:0;padding:28px;background:var(--content-bg)}
.page-header{max-width:1180px;margin:0 auto 18px}
.page-header h1{font-size:28px;margin:0 0 7px;color:#201b11}
.page-header p{margin:0;color:#463d27;font-weight:700;line-height:1.45}
.page-card{max-width:1180px;margin:0 auto;background:var(--content-card);border:1px solid rgba(70,55,25,.18);border-radius:18px;padding:18px}
.panel-title{font-size:20px;font-weight:800;margin:0 0 12px;color:#221f18}
.panel-scroll{overflow-x:auto;overflow-y:hidden;padding:0 0 12px;-webkit-overflow-scrolling:touch}
.panel{background:linear-gradient(180deg,#8a8d91,#6f7276);padding:clamp(18px,2vw,28px);border-radius:16px;border:3px solid #242629;box-shadow:inset 0 2px 12px rgba(255,255,255,.10),inset 0 -12px 30px rgba(0,0,0,.22);min-width:1020px}
.layout{display:grid;grid-template-columns:clamp(72px,9vw,110px) 1fr clamp(72px,9vw,110px);gap:clamp(18px,3vw,42px);align-items:stretch}
.vertical{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:12px;min-height:100%}
.switch{width:clamp(54px,6.6vw,88px);aspect-ratio:1/1;border-radius:7px;border:3px solid #1d1f22;background:var(--sw-bg,#000);position:relative;color:var(--sw-text,#fff);box-shadow:inset 0 4px 12px rgba(255,255,255,.22),inset 0 -7px 13px rgba(0,0,0,.24),0 4px 8px rgba(0,0,0,.25);display:grid;place-items:center;padding:6px;text-shadow:0 2px 5px rgba(0,0,0,.55);user-select:none}
.switch:after{content:attr(data-label);position:absolute;inset:6px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(.68rem,1.05vw,.95rem);line-height:1.08;font-weight:800;white-space:pre-line}
.switch[data-status="empty"]{--sw-bg:#000;--sw-text:#fff;box-shadow:inset 0 3px 8px rgba(255,255,255,.08),inset 0 -7px 13px rgba(0,0,0,.45),0 4px 8px rgba(0,0,0,.25)}
.switch[data-status="ready"]{--sw-bg:#00a651;--sw-text:#fff;box-shadow:inset 0 4px 12px rgba(255,255,255,.25),inset 0 -7px 13px rgba(0,0,0,.28),0 0 14px rgba(0,255,123,.28),0 4px 8px rgba(0,0,0,.25)}
.switch[data-status="heating"]{--sw-bg:#ffd400;--sw-text:#000;text-shadow:none;box-shadow:inset 0 4px 12px rgba(255,255,255,.30),inset 0 -7px 13px rgba(0,0,0,.20),0 0 12px rgba(255,212,0,.25),0 4px 8px rgba(0,0,0,.25)}
.switch[data-status="problem"]{--sw-bg:#ff0000;--sw-text:#fff;box-shadow:inset 0 4px 12px rgba(255,255,255,.22),inset 0 -7px 13px rgba(0,0,0,.24),0 0 16px rgba(255,0,0,.35),0 4px 8px rgba(0,0,0,.25)}
.switch[data-status="charging"]{--sw-bg:#ffd400;--sw-text:#000;text-shadow:none;box-shadow:inset 0 4px 12px rgba(255,255,255,.30),inset 0 -7px 13px rgba(0,0,0,.20),0 0 12px rgba(255,212,0,.25),0 4px 8px rgba(0,0,0,.25)}
.switch[data-status="idle"]{--sw-bg:#7b2d8e;--sw-text:#fff;box-shadow:inset 0 4px 12px rgba(255,255,255,.22),inset 0 -7px 13px rgba(0,0,0,.28),0 0 12px rgba(123,45,142,.3),0 4px 8px rgba(0,0,0,.25)}
.switch[data-status="used"]{--sw-bg:#7b2d8e;--sw-text:#fff;box-shadow:inset 0 4px 12px rgba(255,255,255,.22),inset 0 -7px 13px rgba(0,0,0,.28),0 0 12px rgba(123,45,142,.3),0 4px 8px rgba(0,0,0,.25)}
.switch[data-status="active"]{--sw-bg:#3a7bd5;--sw-text:#fff;box-shadow:inset 0 4px 12px rgba(255,255,255,.25),inset 0 -7px 13px rgba(0,0,0,.28),0 0 12px rgba(58,123,213,.3),0 4px 8px rgba(0,0,0,.25)}
.switch[data-status="requested"]{--sw-bg:#ff8c00;--sw-text:#fff;box-shadow:inset 0 4px 12px rgba(255,255,255,.25),inset 0 -7px 13px rgba(0,0,0,.28),0 0 12px rgba(255,140,0,.3),0 4px 8px rgba(0,0,0,.25)}
.switch.flash{animation:switchFlash .52s ease-in-out infinite alternate}
@keyframes switchFlash{0%{opacity:1}100%{opacity:.15}}
.center{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:clamp(16px,2vw,28px);padding:clamp(18px,3vw,36px);border-radius:16px;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.12);box-sizing:border-box;overflow:hidden}
.row{display:grid;grid-template-columns:repeat(6,clamp(54px,6.6vw,88px));gap:clamp(10px,1.4vw,16px);justify-content:center}
.row.small{grid-template-columns:repeat(2,clamp(54px,6.6vw,88px));justify-content:center;gap:clamp(24px,4vw,46px)}
.placeholder{background:rgba(255,255,255,.16);border:1px solid rgba(70,55,25,.16);color:#211d13;border-radius:16px;padding:24px;min-height:220px}
.placeholder h2{margin-top:0}
.placeholder p{max-width:760px;line-height:1.5;font-weight:700}
.link-list{display:grid;gap:12px;max-width:650px;margin-top:18px}
.doc-link{display:block;background:rgba(255,255,255,.24);border:1px solid rgba(70,55,25,.22);border-radius:12px;padding:14px 16px;font-weight:800;color:#1c1a12}
.doc-link:hover{background:rgba(255,255,255,.38)}
.note{font-weight:700;color:#3a3325;margin-top:12px}
@media(max-width:900px){
  .site-shell{display:block}
  .mobile-header{display:flex}
  .sidebar{position:fixed;top:0;left:0;width:min(86vw,var(--sidebar-width));transform:translateX(-105%);transition:transform .2s ease;height:100vh}
  .sidebar.open{transform:translateX(0)}
  .menu-backdrop.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:25}
  .content{padding:18px 12px}
  .page-card{padding:12px}
  .page-header h1{font-size:23px}
  .panel{min-width:1020px}
  .panel-scroll{margin:0 -2px}
}