:root {
        --bg: #0b1220;
        --panel: #111827;
        --panel-2: #0f172a;
        --card: #172033;
        --line: rgba(148, 163, 184, 0.16);
        --text: #e5e7eb;
        --muted: #94a3b8;
        --primary: #2563eb;
        --primary-2: #1d4ed8;
        --danger: #dc2626;
        --danger-2: #b91c1c;
        --good: #22c55e;
        --warn: #f59e0b;
        --bad: #ef4444;
        --radius: 16px;
        --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
      }

      [hidden] {
        display: none !important;
      }
      * {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      body {
        font-family:
          Inter,
          Segoe UI,
          Roboto,
          Arial,
          sans-serif;
        background: linear-gradient(180deg, #08101c 0%, #0b1220 100%);
        color: var(--text);
        min-height: 100vh;
      }

      a {
        color: inherit;
        text-decoration: none;
      }
      button,
      input,
      select,
      textarea {
        font: inherit;
      }

      .appshell {
        display: grid;
        grid-template-columns: 280px 1fr;
        min-height: 100vh;
      }

      .sidebar {
        border-right: 1px solid var(--line);
        background: rgba(15, 23, 42, 0.7);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        padding: 20px 16px;
        position: sticky;
        top: 0;
        height: 100vh;
      }

      .brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 18px;
      }

      .brand__left {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .brand__logo {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, var(--primary), #60a5fa);
        font-weight: 900;
        color: #fff;
        box-shadow: var(--shadow);
      }

      .brand__title {
        font-size: 15px;
        font-weight: 800;
        line-height: 1.2;
      }

      .brand__sub {
        color: var(--muted);
        font-size: 12px;
        margin-top: 2px;
      }

      .envpill {
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.04);
        color: var(--muted);
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
      }

      .nav {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 16px;
      }

      .nav a {
        padding: 12px 14px;
        border-radius: 12px;
        color: var(--muted);
        font-weight: 700;
        border: 1px solid transparent;
        transition: 0.18s ease;
      }

      .nav a:hover,
      .nav a.is-active {
        color: #fff;
        background: rgba(37, 99, 235, 0.12);
        border-color: rgba(37, 99, 235, 0.22);
      }

      .main {
        display: flex;
        flex-direction: column;
        min-width: 0;
      }

      .topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 24px;
        border-bottom: 1px solid var(--line);
        background: rgba(11, 18, 32, 0.55);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        position: sticky;
        top: 0;
        z-index: 20;
      }

      .topbar__left {
        min-width: 0;
      }

      .pageTitle {
        margin: 0;
        font-size: 24px;
        font-weight: 900;
        letter-spacing: -0.02em;
      }

      .pageSub {
        margin-top: 6px;
        color: var(--muted);
        font-size: 14px;
      }

      .topbar__right {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .userchip {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--line);
        min-width: 0;
      }

      .avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-weight: 900;
        background: linear-gradient(135deg, #334155, #64748b);
        color: #fff;
        flex: 0 0 auto;
      }

      .userchip__meta {
        min-width: 0;
      }

      .userchip__name {
        font-weight: 800;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .userchip__email {
        color: var(--muted);
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 220px;
      }

      .content {
        padding: 24px;
      }

      .view {
        max-width: 1280px;
        margin: 0 auto;
      }

      .authwrap {
        min-height: calc(100vh - 140px);
        display: grid;
        place-items: center;
        padding: 32px 16px;
      }

      .authcard {
        width: min(460px, 100%);
        background: rgba(17, 24, 39, 0.92);
        border: 1px solid var(--line);
        border-radius: 24px;
        box-shadow: var(--shadow);
        padding: 24px;
      }

      .authcard h2 {
        margin: 0 0 8px 0;
        font-size: 26px;
        font-weight: 900;
      }

      .authcard p {
        margin: 0 0 20px 0;
        color: var(--muted);
      }

      .formgrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .field {
        display: block;
      }

      .field.span2 {
        grid-column: span 2;
      }

      .field > span {
        display: block;
        margin-bottom: 8px;
        font-size: 13px;
        color: #cbd5e1;
        font-weight: 700;
      }

      .input {
        width: 100%;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.04);
        color: #fff;
        border-radius: 12px;
        padding: 12px 14px;
        outline: none;
      }

      .input:focus {
        border-color: rgba(37, 99, 235, 0.55);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
      }

      textarea.input {
        min-height: 120px;
        resize: vertical;
      }

      .row {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 16px;
      }

      .btn {
        appearance: none;
        border: none;
        cursor: pointer;
        background: linear-gradient(135deg, var(--primary), var(--primary-2));
        color: #fff;
        padding: 11px 16px;
        border-radius: 12px;
        font-weight: 800;
        transition: 0.18s ease;
      }

      .btn:hover {
        transform: translateY(-1px);
      }
      .btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
      }

      .btn--ghost {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--line);
        color: #fff;
      }

      .btn--danger {
        background: linear-gradient(135deg, var(--danger), var(--danger-2));
        color: #fff;
      }

      .notice {
        margin-top: 16px;
        border: 1px solid rgba(239, 68, 68, 0.35);
        background: rgba(239, 68, 68, 0.1);
        color: #fecaca;
        padding: 12px 14px;
        border-radius: 12px;
        font-size: 14px;
      }

      .kpis {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: 18px;
      }

      .kpi,
      .card,
      .tablewrap {
        background: rgba(17, 24, 39, 0.88);
        border: 1px solid var(--line);
        border-radius: 20px;
        box-shadow: var(--shadow);
      }

      .kpi {
        padding: 18px;
      }

      .kpi__label {
        color: var(--muted);
        font-size: 13px;
        margin-bottom: 8px;
        font-weight: 700;
      }

      .kpi__value {
        font-size: 32px;
        font-weight: 900;
        letter-spacing: -0.03em;
      }

      .tablewrap {
        overflow: hidden;
      }

      .tabletools {
        display: flex;
        gap: 12px;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        padding: 14px;
        border-bottom: 1px solid var(--line);
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th,
      td {
        padding: 14px;
        text-align: left;
        border-bottom: 1px solid var(--line);
        vertical-align: top;
        font-size: 14px;
      }

      th {
        color: #cbd5e1;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      tbody tr:hover {
        background: rgba(255, 255, 255, 0.02);
      }

      .actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
      }

      .iconbtn {
        border: none;
        cursor: pointer;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--line);
        color: #fff;
        padding: 8px 12px;
        border-radius: 10px;
        font-weight: 700;
      }

      .iconbtn.btn--danger {
        background: rgba(220, 38, 38, 0.14);
        border-color: rgba(220, 38, 38, 0.28);
        color: #fecaca;
      }

      .tag {
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(37, 99, 235, 0.12);
        border: 1px solid rgba(37, 99, 235, 0.2);
        color: #dbeafe;
        font-size: 12px;
        font-weight: 800;
        text-transform: capitalize;
      }

      .muted {
        color: var(--muted);
      }
      .small {
        font-size: 12px;
      }
      .divider {
        height: 1px;
        background: var(--line);
        margin: 14px 0;
      }

      .preview {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 10px;
        flex-wrap: wrap;
      }

      .preview img {
        width: 92px;
        height: 92px;
        object-fit: cover;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: #0b1220;
      }

      .modal {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: grid;
        place-items: center;
        padding: 18px;
        background: rgba(2, 6, 23, 0.68);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
      }

      .modal__dialog {
        width: min(900px, 100%);
        max-height: 90vh;
        overflow: auto;
        background: rgba(15, 23, 42, 0.98);
        border: 1px solid var(--line);
        border-radius: 24px;
        box-shadow: var(--shadow);
      }

      .modal__head,
      .modal__foot {
        padding: 18px 20px;
      }

      .modal__head {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: flex-start;
        border-bottom: 1px solid var(--line);
      }

      .modal__title {
        margin: 0;
        font-size: 20px;
        font-weight: 900;
      }

      .modal__sub {
        margin-top: 6px;
        color: var(--muted);
        font-size: 13px;
      }

      .modal__body {
        padding: 20px;
      }

      .modal__foot {
        border-top: 1px solid var(--line);
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        flex-wrap: wrap;
      }

      .closebtn {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--line);
        color: #fff;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        cursor: pointer;
        font-size: 18px;
        font-weight: 900;
      }

      @media (max-width: 980px) {
        .appshell {
          grid-template-columns: 1fr;
        }

        .sidebar {
          position: static;
          height: auto;
          border-right: none;
          border-bottom: 1px solid var(--line);
        }

        .kpis {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 640px) {
        .content,
        .topbar {
          padding: 16px;
        }
        .formgrid {
          grid-template-columns: 1fr;
        }
        .field.span2 {
          grid-column: auto;
        }
        .kpis {
          grid-template-columns: 1fr;
        }
        .userchip__email {
          max-width: 140px;
        }
        th,
        td {
          padding: 12px 10px;
        }
      }