:root {
      color-scheme: dark;
      --ink:#f1f2f3; --muted:#aeb2b9; --gold:#d6c28a; --gold-2:#aa945b;
      --deep:#090a0c; --panel:rgba(26,28,32,.78); --panel-2:rgba(42,44,49,.76);
      --line:rgba(215,217,220,.22); --shadow:0 18px 52px rgba(0,0,0,.45);
      --sidebar:248px; --radius:16px;
    }
    * { box-sizing:border-box }
    html { scroll-behavior:smooth }
    body {
      margin:0; min-width:320px; color:var(--ink);
      font:13px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      background:
        radial-gradient(ellipse at 18% 0,rgba(214,194,138,.18),transparent 28%),
        radial-gradient(ellipse at 88% 18%,rgba(215,217,220,.1),transparent 25%),
        linear-gradient(145deg,#202329 0,#101216 52%,#050607 100%);
      background-attachment:fixed;
    }
    button,input,select,textarea { font:inherit }
    button,a { -webkit-tap-highlight-color:transparent }
    button { color:inherit }
    .shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); transition:grid-template-columns .25s ease }
    .sidebar {
      position:sticky; top:0; height:100vh; z-index:20; padding:18px 14px;
      border-right:1px solid var(--line); background:rgba(8,9,11,.82); backdrop-filter:blur(20px);
      display:flex; flex-direction:column; overflow:hidden;
    }
    .brand { display:flex; align-items:center; gap:11px; min-height:48px; padding:0 7px 17px; white-space:nowrap }
    .brand-mark { display:grid; place-items:center; flex:0 0 38px; height:38px; border-radius:11px; color:#090a0c; font:800 18px Georgia,serif; background:linear-gradient(145deg,#eadcae,#aa945b); box-shadow:0 8px 24px rgba(214,194,138,.2) }
    .brand strong { display:block; letter-spacing:.08em; font-size:12px }
    .brand small { color:var(--muted) }
    .nav-label { margin:18px 10px 7px; color:#71757d; font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; white-space:nowrap }
    .side-nav { display:grid; gap:4px }
    .nav-link { display:flex; align-items:center; gap:12px; min-height:42px; padding:0 12px; color:var(--muted); text-decoration:none; border:1px solid transparent; border-radius:10px; white-space:nowrap; cursor:pointer; background:transparent }
    .nav-link:hover,.nav-link.active { color:var(--ink); border-color:var(--line); background:rgba(255,255,255,.06) }
    .nav-link.active { box-shadow:inset 3px 0 var(--gold); background:linear-gradient(90deg,rgba(214,194,138,.13),rgba(255,255,255,.03)) }
    .nav-icon { display:grid; place-items:center; flex:0 0 20px; font-size:16px }
    .sidebar-foot { margin-top:auto; padding-top:14px; border-top:1px solid var(--line) }
    .workspace { min-width:0 }
    .topbar {
      position:sticky; top:0; z-index:15; min-height:72px; padding:0 26px; display:flex; align-items:center; gap:18px;
      border-bottom:1px solid var(--line); background:rgba(14,15,18,.72); backdrop-filter:blur(18px);
    }
    .collapse { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.05); cursor:pointer }
    .collapse:hover { border-color:rgba(214,194,138,.55); color:var(--gold) }
    .crumbs { min-width:0; color:var(--muted) }
    .crumbs strong { color:var(--ink); font-size:14px }
    .top-actions { margin-left:auto; display:flex; align-items:center; gap:10px }
    .search { display:flex; align-items:center; gap:8px; width:min(260px,25vw); height:38px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.05) }
    .search input { width:100%; border:0; outline:0; color:var(--ink); background:transparent }
    .search input::placeholder { color:#777c83 }
    .round { display:grid; place-items:center; height:38px; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.05); cursor:pointer }
    
    .avatar {
        color: #111;
        font-weight: 800;
        border: 0;
        background: linear-gradient(145deg, #eadcae, #aa945b);
        border-radius: 10px;
        text-wrap: nowrap;
        height: 35px;
    }

    main { max-width:1480px; margin:auto; padding:25px }
    .welcome { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:20px }
    .eyebrow { margin:0 0 7px; color:var(--gold); font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase }
    h1 { margin:0; font-size:clamp(25px,3vw,38px); line-height:1.1; letter-spacing:-.035em }
    .welcome p:last-child { margin:8px 0 0; color:var(--muted) }
    .btn {
        min-height: 39px;
        padding: 10px;
        border-radius: 9px;
        color: #101114;
        font-weight: 750;
        cursor: pointer;
        transition: .18s ease;
        font-style: normal;
        text-decoration: none;
        color: var(--ink);
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, .07);
        box-shadow: none;
      }

    .btn:hover { transform:translateY(-2px); filter:brightness(1.06) }
    .btn:active { transform:none }
    .btn.secondary { color:var(--ink); border:1px solid var(--line); background:rgba(255,255,255,.07); box-shadow:none }
    .btn.ghost { color:var(--gold); background:transparent; box-shadow:none }
    .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px }
    .panel { min-width:0; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:inset 0 1px rgba(255,255,255,.1),var(--shadow); backdrop-filter:blur(18px) }
    .stat { position:relative; overflow:hidden }
    .stat::after { content:""; position:absolute; right:-15px; top:-25px; width:85px; height:85px; border-radius:50%; background:rgba(214,194,138,.07) }
    .stat-head { display:flex; justify-content:space-between; color:var(--muted) }
    .stat b { display:block; margin:15px 0 5px; font-size:27px }
    .trend { color:#dcca99; font-size:11px }
    .grid { display:grid; grid-template-columns:1fr 1fr; gap:14px }
    select.control option {
      color: var(--ink);
      background-color: #17191d;
    }

    .wide { grid-column:1/-1 }
    .panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px }
    .panel h2 { margin:0; font-size:13px; text-transform:uppercase; letter-spacing:.045em }
    .panel-head small { color:var(--muted) }
    .button-row { display:flex; flex-wrap:wrap; gap:10px }
    .button-row + .button-row { margin-top:11px }
    .icon-button { width:39px; padding:0; border-radius:50% }
    .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px }
    .field { display:grid; gap:6px; color:var(--muted); font-size:11px }
    .field.full { grid-column:1/-1 }
    .group-menu-actions { margin-top:14px }
    .menu-json-editor { min-height:520px; padding:14px; font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; tab-size:2; white-space:pre }
    .menu-page-reference { margin-top:22px; padding:16px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025) }
    .menu-page-reference h2 { margin-bottom:4px }
    .menu-page-reference small { color:var(--muted) }
    .menu-page-reference ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px 18px; margin:14px 0 0; padding-left:20px }
    .menu-page-reference code { color:var(--gold) }
    .control { width:100%; height:41px; padding:0 12px; border:1px solid var(--line); border-radius:9px; outline:0; color:var(--ink); background:rgba(255,255,255,.05) }
    .control:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(214,194,138,.1) }
    textarea.control { height:72px; padding-top:10px; resize:vertical }
    .toggles { display:grid; gap:2px }
    .toggle-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line) }
    .toggle-row:last-child { border:0 }
    .toggle-row strong,.toggle-row small { display:block }
    .toggle-row small { color:var(--muted); margin-top:3px }
    .switch { position:relative; flex:0 0 45px; width:45px; height:26px; appearance:none; border:1px solid var(--line); border-radius:99px; background:#292c31; cursor:pointer; transition:.2s }
    .switch::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#eee; transition:.2s }
    .switch:checked { background:var(--gold-2) }
    .switch:checked::after { left:22px }
    .switch:indeterminate { background:linear-gradient(90deg,var(--gold-2) 50%,#292c31 50%) }
    .switch:indeterminate::after { left:12px }
    .permission-groups { display:grid; gap:10px }
    .permission-group { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025) }
    .permission-group-summary { display:flex; align-items:center; gap:14px; min-height:64px; padding:12px 16px; cursor:pointer; list-style:none }
    .permission-group-summary::-webkit-details-marker { display:none }
    .permission-group-summary::after { content:"+"; flex:0 0 20px; color:var(--gold); font-size:18px; text-align:center }
    .permission-group[open] > .permission-group-summary::after { content:"−" }
    .permission-group-copy { display:grid; gap:2px; min-width:0 }
    .permission-group-copy strong { font-size:14px }
    .permission-group-copy code,.permission-child-copy code { color:var(--gold); font-size:11px }
    .permission-group-controls { display:flex; align-items:center; gap:12px; margin-left:auto }
    .permission-group-children { display:grid; padding:0 16px 8px 34px; border-top:1px solid var(--line) }
    .permission-child { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:62px; padding:10px 0; border-bottom:1px solid var(--line); cursor:pointer }
    .permission-child:last-child { border-bottom:0 }
    .permission-child:hover { background:rgba(255,255,255,.025) }
    .permission-child-copy { display:grid; gap:2px; min-width:0 }
    .permission-child-copy small { color:var(--muted) }
    .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
    .card { min-height:155px; padding:15px; border:1px solid var(--line); border-radius:13px; background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025)); display:flex; flex-direction:column }
    .card small { color:var(--muted) }
    .card h3 { margin:11px 0 6px; font-size:17px }
    .card p { color:var(--muted); margin:0 }
    .card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:18px }
    .badge { padding:4px 9px; border-radius:99px; color:#eadcae; background:rgba(214,194,138,.12); font-size:10px }
    .table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px }
    table { width:100%; min-width:720px; border-collapse:collapse; text-align:left }
    th { padding:11px 14px; color:var(--muted); font-size:9px; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,.05) }
    td { padding:13px 14px; border-top:1px solid var(--line) }
    tbody tr:hover { background:rgba(255,255,255,.035) }
    .person { display:flex; align-items:center; gap:10px }
    .person i { display:grid; place-items:center; width:31px; height:31px; border-radius:8px; color:#111; font-style:normal; font-weight:800; background:#d6c28a }
    .person small { display:block; color:var(--muted) }
    .status { display:inline-flex; padding:4px 9px; border-radius:99px; font-size:10px; background:rgba(215,217,220,.1) }
    .status.live { color:#eadcae; background:rgba(214,194,138,.13) }
    .progress { width:90px; height:6px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.12) }
    .progress i { display:block; height:100%; background:var(--gold) }
    dialog { width:min(92vw,520px); padding:0; color:var(--ink); border:1px solid var(--line); border-radius:18px; background:#17191d; box-shadow:0 30px 100px rgba(0,0,0,.8) }
    dialog.small { max-width:360px } dialog.large { max-width:820px }
    dialog::backdrop { background:rgba(2,3,4,.72); backdrop-filter:blur(5px) }
    .modal-head,.modal-body,.modal-foot { padding:18px 20px }
    .modal-head { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line) }
    .modal-head h2 { margin:0; font-size:16px }
    .modal-close { border:0; color:var(--muted); font-size:21px; cursor:pointer; background:none }
    .modal-body { color:var(--muted) }
    .modal-foot { display:flex; justify-content:flex-end; gap:9px; border-top:1px solid var(--line) }
    .modal-columns { display:grid; grid-template-columns:1fr 1fr; gap:14px }
    .collapsed { --sidebar:76px }
    .collapsed .brand-copy,.collapsed .nav-copy,.collapsed .nav-label { opacity:0; pointer-events:none }
    .collapsed .brand,.collapsed .nav-link { justify-content:center }
    .collapsed .nav-link { padding-inline:0 }
    @media (max-width:980px) { .stats { grid-template-columns:1fr 1fr } .cards { grid-template-columns:1fr } }
    @media (max-width:760px) {
      .shell { --sidebar:76px } .brand-copy,.nav-copy,.nav-label { display:none } .brand,.nav-link { justify-content:center } .nav-link { padding-inline:0 }
      .topbar { padding:0 14px } .search { display:none } main { padding:16px } .grid { grid-template-columns:1fr } .wide { grid-column:auto }
    }
    @media (max-width:520px) { .stats,.form-grid,.modal-columns { grid-template-columns:1fr } .field.full { grid-column:auto } .welcome { align-items:start; flex-direction:column } .permission-group-summary { align-items:flex-start; flex-wrap:wrap } .permission-group-controls { margin-left:0 } .permission-group-children { padding-left:16px } }