:root {
      --blue-900: #0b1d4d;
      --blue-800: #0f2a6b;
      --blue-700: #123483;
      --blue-600: #1c4db8;
      --blue-500: #2a66ed;
      --white: #ffffff;
      --bg: #f7f9ff;
      --muted: #5f6b85;
      --line: #e6e9f5;
      --danger: #e54848;
      --success: #16a34a;
      --shadow: 0 4px 14px rgba(11, 29, 77, 0.08);
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body {
      background: var(--bg);
      color: var(--blue-900);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial;
    }
    .app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
    .sidebar {
      background: linear-gradient(180deg, var(--blue-900), var(--blue-800));
      color: var(--white);
      padding: 18px 16px;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
    }
    .brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
    .brand-logo { width: 32px; height: 32px; border-radius: 8px; background: var(--white); color: var(--blue-900); display: grid; place-items: center; font-weight: 700; }
    .brand-name { font-weight: 600; letter-spacing: 0.2px; }
    nav { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.15); padding-top: 12px; }
    .nav-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px; border-radius: 10px;
      cursor: pointer; color: rgba(255,255,255,.95);
      font-weight: 600;
    }
    .nav-item:hover { background: rgba(255,255,255,.08); }
    .nav-item.active { background: var(--white); color: var(--blue-900); }
    .nav-item .dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; opacity: .6; }

    .topbar { display: none; position: sticky; top: 0; background: var(--white); border-bottom: 1px solid var(--line); padding: 10px 14px; align-items: center; justify-content: space-between; }
    .burger { background: var(--blue-900); color: var(--white); border: none; border-radius: 8px; padding: 8px 10px; font-weight: 700; }

    .content { padding: 20px; }
    .page-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .title { font-size: 20px; font-weight: 800; }
    .info { color: var(--blue-800); font-size: 13px; font-weight: 600; }

    .panel { background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 16px; }
    .panel + .panel { margin-top: 14px; }
    .panel h2 { margin: 0 0 8px; font-size: 18px; }

    .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; }
    .col-12 { grid-column: span 12; }
    .col-6 { grid-column: span 12; }
    .col-4 { grid-column: span 12; }
    .col-3 { grid-column: span 12; }
    @media (min-width: 900px) {
      .col-6 { grid-column: span 6; }
      .col-4 { grid-column: span 4; }
      .col-3 { grid-column: span 3; }
    }

    label { display: block; font-size: 13px; margin: 10px 0 6px; font-weight: 700; }
    input, select { width: 100%; border: 2px solid var(--line); padding: 12px; border-radius: 10px; outline: none; }

    .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .btn {
      border: none; border-radius: 10px; padding: 12px 16px; cursor: pointer;
      font-weight: 800; box-shadow: var(--shadow);
    }
    .btn.primary { background: linear-gradient(180deg, var(--blue-600), var(--blue-500)); color: var(--white); }
    .btn.secondary { background: var(--white); border: 2px solid var(--blue-600); color: var(--blue-900); }
    .btn.danger { background: linear-gradient(180deg, #f87171, #ef4444); color: var(--white); }
    .btn.loading { opacity: .85; position: relative; }
    .btn.loading::after {
      content: ""; width: 14px; height: 14px; border-radius: 50%;
      border: 2px solid rgba(255,255,255,.8); border-top-color: transparent;
      display: inline-block; margin-left: 8px; animation: spin .7s linear infinite;
    }
    .btn.secondary.loading::after { border-color: var(--blue-600); border-top-color: transparent; }
    .btn:disabled { cursor: not-allowed; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); }
    .table th, .table td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; white-space: nowrap; }
    .table th { background: #f1f4ff; }

    .kv { display: grid; grid-template-columns: 180px 1fr; gap: 6px 12px; }
    .kv div { padding: 6px 0; border-bottom: 1px dashed var(--line); }
    .hidden { display: none; }

    @media (max-width: 1000px) {
      .app { grid-template-columns: 1fr; }
      .topbar { display: flex; }
      .sidebar { position: fixed; left: -280px; width: 260px; transition: left .25s; }
      .sidebar.open { left: 0; }
      .content { padding-top: 56px; }
    }