:root { --bg:#0b1120; --fg:#e5e7eb; --card:#111827; --border:#1f2937; --link:#3b82f6; --muted:#9ca3af; --success:#16a34a; color-scheme: dark; }
    :root[data-theme="light"] { --bg:#f8fafc; --fg:#0f172a; --card:#ffffff; --border:#e5e7eb; --link:#2563eb; --muted:#475569; --success:#16a34a; color-scheme: light; }

    *,*::before,*::after{box-sizing:border-box;}

    body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;background:var(--bg);color:var(--fg)}
    .wrap{max-width:1100px;margin:0 auto;padding:16px}
    header{background:var(--card);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--border)}
    .nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .brand{font-weight:800;letter-spacing:.2px;margin-right:auto;padding:4px 0}

    a{color:var(--link);text-decoration:none}
    a:hover{text-decoration:underline}
    .btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9999px;border:1px solid var(--border);background:transparent;color:var(--fg);text-decoration:none;line-height:1}
    .btn:hover{background:rgba(255,255,255,.04)}
    .btn--ghost{background:transparent}
    .btn:focus-visible{outline:2px solid var(--link);outline-offset:2px}

    .card{background:var(--card);border:1px solid var(--border);padding:16px;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.15)}
    input,select,button,textarea{width:100%;padding:10px 12px;margin:6px 0 14px;background-color:var(--card);color:var(--fg);border:1px solid var(--border);border-radius:10px}
    :root[data-theme="dark"] input,select,button,textarea{color-scheme:dark}
    :root[data-theme="light"] input,select,button,textarea{color-scheme:light}
    :root[data-theme="dark"] select option,:root[data-theme="dark"] select optgroup{background-color:var(--card);color:var(--fg)}
    :root[data-theme="light"] select option,:root[data-theme="light"] select optgroup{background-color:var(--card);color:var(--fg)}
    button{cursor:pointer;font-weight:600}
    table{width:100%;border-collapse:collapse}
    .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
    th,td{border-bottom:1px solid var(--border);padding:10px;text-align:left;vertical-align:top}
    .grid{display:grid;gap:16px}
    .grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
    .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .muted{color:var(--muted)}
    .pill{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid var(--border);border-radius:999px;font-size:12px}

    .nav .btn, .nav button { width:auto; margin:0; } .nav form { margin:0; }
    .nav .active{border-bottom:2px solid var(--link);}
    .nav-admin{position:relative;}
    .nav-admin>summary{list-style:none;}
    .nav-admin>summary::-webkit-details-marker{display:none;}
    .nav-admin-menu{position:absolute;right:0;top:100%;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);padding:4px;margin-top:4px;}

    #navToggle { display:none; width:auto; margin-bottom:8px; }
    @media (min-width:768px){ .nav{flex-wrap:nowrap;} }
    @media (max-width:768px){
      #navToggle { display:inline-flex; }
      #mainNav { display:none; }
      #mainNav.show { display:block; }
    }

    @media (max-width:600px){
      .table-wrap table,
      .table-wrap thead,
      .table-wrap tr{display:block}
      .card{padding:20px;font-size:1.05em}
      input,select,button,textarea{padding:14px 16px;font-size:1.1em}
    }

    @media (min-width:1024px){
      .wrap{max-width:1200px}
    }

    /* Toast */
    .toast{position:fixed;right:18px;top:18px;z-index:9999;background:var(--card);border:1px solid var(--border);border-left:4px solid var(--success);padding:12px 14px;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.25);opacity:0;transform:translateY(-10px);transition:all .25s}
    .toast.show{opacity:1;transform:translateY(0)}