:root {
      --bg: var(--paper);
      --surface: var(--card);
      --border: var(--line);
      --text: var(--ink);

      --primary: var(--primary-bg);

      --danger: #cf222e;
      --danger-bg: #ffebe9;
      --warning: #9a6700;
      --warning-bg: #fff8c5;
      --success: #1a7f37;
      --success-bg: #dafbe1;
      --secret-bg: #ddf4ff;
      --secret-border: #54aeff;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: var(--sans, "Poppins", sans-serif);
      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
    }
    .topbar {
      background: var(--header-bg);
      color: var(--ink);
      padding: 0.75rem 1.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .topbar-brand {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .brand-title {
      color: var(--ink);
      text-decoration: none;
      font-weight: 600;
      font-size: 1.05rem;
    }
    .env-pill {
      background: var(--surface-soft);
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: 0.75rem;
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .topbar-nav {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .nav-link {
      color: var(--muted);
      text-decoration: none;
      font-size: 0.9rem;
      padding: 0.35rem 0.65rem;
      border-radius: 6px;
    }
    .nav-link.active, .nav-link:hover {
      background: var(--surface-soft);
      color: var(--ink);
    }
    .logout-form { margin: 0; }
    .container {
      max-width: 1200px;
      margin: 1.5rem auto;
      padding: 0 1.25rem 3rem;
    }
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 1.25rem 1.5rem;
      margin-bottom: 1.5rem;
    }
    .card h1, .card h2, .card h3 {
      margin-top: 0;
    }
    .banner {
      border-radius: 8px;
      padding: 1rem 1.25rem;
      margin-bottom: 1.5rem;
      border: 1px solid var(--border);
    }
    .banner h2 {
      margin: 0 0 0.35rem 0;
      font-size: 1.05rem;
    }
    .banner p { margin: 0.35rem 0; }
    .banner-success { background: var(--success-bg); border-color: #4ac26b; color: #116329; }
    .banner-warning { background: var(--warning-bg); border-color: #d4a72c; color: #7d4e00; }
    .banner-error { background: var(--danger-bg); border-color: #ff8182; color: #a40e26; }
    .banner-secret { background: var(--secret-bg); border: 2px solid var(--secret-border); }
    .banner-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .secret-box {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      background: #0d1117;
      color: #79c0ff;
      padding: 0.75rem 1rem;
      border-radius: 6px;
      margin: 0.75rem 0;
      overflow-x: auto;
    }
    .secret-box code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 0.95rem;
      word-break: break-all;
      flex: 1;
    }
    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }
    @media (max-width: 860px) {
      .grid-2 { grid-template-columns: 1fr; }
    }
    .form-group {
      margin-bottom: 1rem;
    }
    .form-group label {
      display: block;
      font-weight: 600;
      font-size: 0.9rem;
      margin-bottom: 0.3rem;
    }
    .form-hint {
      display: block;
      font-size: 0.8rem;
      color: var(--muted);
      margin-top: 0.2rem;
    }
    input[type="text"],
    input[type="password"],
    input[type="datetime-local"],
    select {
      width: 100%;
      padding: 0.5rem 0.65rem;
      border: 1px solid var(--border-strong);
      border-radius: 7px;
      font: inherit;
      min-height: 42px;
      background: var(--card);
      color: var(--text);
    }
    .checkbox-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 0.5rem;
      margin-top: 0.35rem;
    }
    .checkbox-item {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.88rem;
      padding: 0.35rem 0.5rem;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--surface-soft);
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.45rem 0.9rem;
      border-radius: 6px;
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      border: 1px solid transparent;
    }
    .btn-primary {
      background: var(--primary);
      color: var(--primary-text);
    }
    .btn-primary:hover { background: var(--primary-hover); }
    .btn-secondary {
      background: var(--surface-soft);
      color: var(--text);
      border-color: var(--border);
    }
    .btn-danger {
      background: var(--danger);
      color: #ffffff;
    }
    .btn-outline {
      background: transparent;
      color: var(--ink);
      border-color: var(--border-strong);
    }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.88rem;
    }
    th, td {
      text-align: left;
      padding: 0.6rem 0.75rem;
      border-bottom: 1px solid var(--border);
      vertical-align: top;
    }
    th {
      background: var(--surface-soft);
      font-weight: 600;
      color: var(--muted);
    }
    .badge {
      display: inline-block;
      padding: 0.15rem 0.5rem;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
    }
    .badge-active { background: var(--success-bg); color: var(--success); }
    .badge-revoked { background: var(--danger-bg); color: var(--danger); }
    .badge-warning { background: var(--warning-bg); color: var(--warning); }
    .badge-scope { background: #eaeef2; color: #24292f; }
    .meta-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 0.75rem 1.25rem;
      margin: 0.75rem 0;
    }
    .meta-grid dt {
      font-size: 0.78rem;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .meta-grid dd {
      margin: 0.15rem 0 0 0;
      font-size: 0.9rem;
      word-break: break-all;
    }
    .inline-rename-form {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      margin-top: 0.5rem;
    }
    .inline-rename-form input[type="text"] {
      max-width: 260px;
    }
    .muted { color: var(--muted); }

.layout-1 { max-width: 540px; margin: 2rem auto; }

.layout-2 { margin: 0.15rem 0; }

.layout-3 { font-size: 0.85rem; }

.layout-4 { margin-top: 1.1rem; font-size: 0.95rem; }

.layout-5 { margin-bottom: 0.5rem; }

.layout-6 { font-size: 0.78rem; }

.layout-7 { display: none; }

.layout-8 { margin: 0.2rem 0; }

    .key-admin-shell { --bg: var(--paper); --surface: var(--card); --border: var(--line); --text: var(--ink); --primary: var(--primary-bg); font-family: var(--sans); }
    .key-admin-shell .container { width: 100%; max-width: none; padding: 24px; margin: 0; }
    .key-admin-shell .main { min-width: 0; }
    .key-admin-shell .app.auth-app { grid-template-columns: minmax(0, 1fr); }
    .key-admin-shell .card { min-width: 0; border-radius: 12px; }
    .key-admin-shell .card h1 { font-size: 24px; line-height: 1.3; margin-bottom: 12px; letter-spacing: -.6px; }
    .key-admin-shell .card h2 { font-size: 17px; line-height: 1.4; margin-bottom: 12px; }
    .key-admin-shell .card h3 { font-size: 14px; margin-bottom: 8px; }
    .key-admin-shell .card p { margin: 0 0 16px; }
    .key-admin-shell .card .form-hint { margin-top: 6px; font-weight: 400; }
    .key-admin-shell .form-group { margin-bottom: 20px; }
    .key-admin-shell .form-group label { font-size: 12px; font-weight: 500; margin-bottom: 7px; }
    .key-admin-shell .key-search-form { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr) auto; align-items: end; gap: 16px; }
    .key-admin-shell .key-search-form .form-group { margin: 0; }
    .key-admin-shell .key-search-form input { width: 100%; min-height: 42px; }
    .key-admin-shell .key-search-form .btn { min-height: 42px; }
    .key-admin-shell .banner-header { align-items: start; flex-wrap: wrap; }
    .key-admin-shell .banner-header > div { min-width: 0; overflow-wrap: anywhere; }
    .key-admin-shell .inline-rename-form { flex-wrap: wrap; margin: 20px 0; }
    .key-admin-shell .checkbox-item { display: flex; align-items: start; font-weight: 400; }
    .key-admin-shell .access-help { margin: 16px 0 24px; color: var(--muted); font-size: 12px; }
    .key-admin-shell .access-help summary { cursor: pointer; font-weight: 500; }
    .key-admin-shell .access-help p { margin-top: 12px; }
    .key-admin-shell input, .key-admin-shell select { font-family: inherit; }
    .key-admin-shell .form-group select { padding-right: 34px; background-image: url('/dadmin/icons/chevron-down.svg'); background-position: right 10px center; background-repeat: no-repeat; background-size: 16px; }
    @media(max-width:760px) {
      .key-admin-shell .container { padding: 24px 16px; }
      .key-admin-shell .key-search-form { grid-template-columns: minmax(0,1fr); }
      .key-admin-shell .card { padding: 20px; }
      .key-admin-shell .card h1 { font-size: 22px; overflow-wrap: anywhere; }
      .key-admin-shell .topbar-nav { gap: 6px; }
    }
    .key-admin-shell .topbar-brand { flex-wrap: wrap; }
    .key-admin-shell .topbar-nav { flex-wrap: wrap; }
    .key-admin-shell .topbar { flex-wrap: wrap; gap: 12px; }
    .key-admin-shell .reference-source { color: var(--ink); background: var(--card); }
    .key-admin-shell .rail a.active { background: var(--rail-active); color: var(--rail-active-text); font-weight: 600; box-shadow: inset 3px 0 var(--primary-bg); }
    .key-admin-shell .table-wrap { max-width: 100%; overflow-x: auto; }