html,
body { position: relative; font-family:'IBM Plex Sans Thai', system-ui, sans-serif; }
main > .container {
    padding: 70px 15px 20px;
}

.footer {
    background-color: #f5f5f5;
    font-size: .9em;
    height: 60px;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}

@media(max-width:767px) {
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.nav > li > form > button.logout:focus {
    outline: none;
}

.collapse-fix-bug .collapse:not(.show) {
  display: none;
}


    .bg-app-home {
      background:#f0f2fa;
      background-image:
        radial-gradient(ellipse 100% 70% at 100%  0%,  rgba(139,92,246,.16), transparent 55%),
        radial-gradient(ellipse  80% 50% at   0% 100%, rgba(14,165,233,.12), transparent 50%),
        radial-gradient(ellipse  60% 40% at  80%  90%, rgba(244,63,94,.08),  transparent 45%);
    }
    .hero-mesh {
      background:
        radial-gradient(circle at 15% 55%, rgba(129,140,248,.28) 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(167,139,250,.22) 0%, transparent 40%),
        radial-gradient(circle at 50% 90%, rgba(244, 63, 94, .15) 0%, transparent 38%),
        linear-gradient(135deg,#1e1b4b 0%,#312e81 42%,#4338ca 100%);
    }
    .stat-card {
      background:rgba(255,255,255,.9);
      backdrop-filter:blur(12px);
      border:1px solid rgba(255,255,255,.7);
      border-radius:1.25rem;
      box-shadow:0 4px 24px -8px rgba(67,56,202,.18);
      transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
    }
    .stat-card:hover { transform:translateY(-3px); box-shadow:0 16px 40px -12px rgba(67,56,202,.22); }
    .gradient-text {
      background:linear-gradient(120deg,#4f46e5,#7c3aed 40%,#db2777 75%,#ea580c);
      background-size:200% auto;
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent;
      animation:shimmer 14s ease infinite;
    }
    @keyframes shimmer { 0%,100%{ background-position:0% center; } 50%{ background-position:100% center; } }
    .navbar-glass {
      background:rgba(248,250,252,.88);
      backdrop-filter:blur(16px);
      border-bottom:1px solid rgba(99,102,241,.14);
      box-shadow:0 2px 20px -6px rgba(30,27,75,.10);
    }
    .btn-primary-vivid {
      background:linear-gradient(135deg,#4f46e5,#7c3aed);
      box-shadow:0 4px 18px -6px rgba(79,70,229,.5);
      transition:transform .15s ease, box-shadow .15s ease;
    }
    .btn-primary-vivid:hover { transform:translateY(-1px); box-shadow:0 8px 28px -8px rgba(79,70,229,.6); }
    .btn-login-hero {
      background: linear-gradient(135deg,#f8f5ef 0%,#e8ddca 100%);
      color: #1f2937;
      border: 1px solid rgba(212,180,131,.38);
      box-shadow: 0 18px 34px -22px rgba(212,180,131,.5);
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .btn-login-hero:hover {
      transform: translateY(-1px);
      background: linear-gradient(135deg,#fbf8f2 0%,#efe4d2 100%);
      box-shadow: 0 22px 40px -22px rgba(212,180,131,.58);
    }
    .feature-card {
      border-radius:1.5rem; border:1px solid rgba(199,210,254,.6);
      background:rgba(255,255,255,.95);
      box-shadow:0 2px 20px -8px rgba(67,56,202,.14);
      transition:transform .2s ease, box-shadow .2s ease;
    }
    .feature-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px -14px rgba(67,56,202,.2); }
    .hero-shell {
      position: relative;
      overflow: hidden;
      border-radius: 2rem;
      border: 1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 24%),
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
      box-shadow: 0 28px 80px -30px rgba(15,23,42,.45);
    }
    .hero-panel {
      border-radius: 1.75rem;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      backdrop-filter: blur(16px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    }
    .glass-card {
      border-radius: 1.5rem;
      border: 1px solid rgba(226,232,240,.9);
      background: rgba(255,255,255,.92);
      box-shadow: 0 18px 45px -28px rgba(30,41,59,.32);
    }
    .section-kicker {
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      border-radius:9999px;
      border:1px solid rgba(99,102,241,.16);
      background:rgba(255,255,255,.72);
      padding:.45rem .8rem;
      font-size:.74rem;
      font-weight:700;
      letter-spacing:.08em;
      color:#4f46e5;
      text-transform:uppercase;
    }
    .journey-card {
      border-radius: 1.25rem;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      padding: 1rem;
      backdrop-filter: blur(8px);
    }
    .role-pill {
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      border-radius:9999px;
      padding:.35rem .7rem;
      font-size:.72rem;
      font-weight:700;
    }
    .d1{animation-delay:.1s} .d2{animation-delay:.2s} .d3{animation-delay:.3s}
    .d4{animation-delay:.4s} .d5{animation-delay:.5s} .d6{animation-delay:.6s}
    
    /* ---- reset nav for kpi pages ---- */
:root {
  --kpi-nav-h: 58px;
  --kpi-accent: #4f46e5;
  --kpi-accent2: #7c3aed;
}
.kpi-navbar {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(99,102,241,.13);
  box-shadow: 0 1px 12px rgba(99,102,241,.08);
  height: var(--kpi-nav-h);
}
.kpi-navbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Brand */
.kpi-brand {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; font-weight: 700; font-size: 15px; color: #1e1b4b;
  flex-shrink: 0;
}
.kpi-brand-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg,var(--kpi-accent),var(--kpi-accent2));
  box-shadow: 0 2px 8px rgba(99,102,241,.32);
  flex-shrink: 0;
}
/* Toggler */
.kpi-toggler {
  display: none; border: none; background: none; cursor: pointer;
  padding: 4px; border-radius: 6px; margin-left: auto; color: #475569;
}
/* Nav list */
.kpi-nav-collapse { display: flex; align-items: center; flex: 1; gap: 2px; margin-left: 1rem; }
.kpi-nav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; flex: 1; }
.kpi-nav-item { position: relative; }
.kpi-nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: #475569;
  text-decoration: none; border: none; background: none; cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.kpi-nav-link:hover, .kpi-nav-link.active { background: rgba(99,102,241,.09); color: var(--kpi-accent); }
/* Dropdown toggle */
.kpi-dropdown-toggle { gap: 5px; }
.kpi-chevron { margin-left: 1px; transition: transform .2s; }
.kpi-dropdown.open .kpi-chevron { transform: rotate(180deg); }
/* Dropdown menu */
.kpi-dropdown-menu {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid rgba(99,102,241,.12);
  border-radius: 14px;
  box-shadow: 0 12px 40px -8px rgba(30,27,75,.18), 0 0 0 1px rgba(255,255,255,.8) inset;
  padding: 8px 0;
  z-index: 1000;
}
.kpi-dropdown.open .kpi-dropdown-menu { display: block; }
.kpi-drop-section {
  padding: 6px 14px 3px;
  font-size: 9.5px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .07em;
}
.kpi-drop-link {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px;
  font-size: 13px; color: #334155; text-decoration: none;
  transition: background .12s;
}
.kpi-drop-link:hover { background: rgba(238,242,255,.7); color: var(--kpi-accent); }
.kpi-drop-link.active { background: rgba(99,102,241,.1); color: var(--kpi-accent); font-weight: 600; }
.kpi-drop-link.kpi-drop-disabled { opacity: .55; pointer-events: none; }
.kpi-drop-icon { display: flex; flex-shrink: 0; }
.kpi-drop-divider { height: 1px; background: rgba(99,102,241,.1); margin: 5px 0; }
.kpi-soon { font-style: normal; font-size: 9.5px; color: #94a3b8; font-weight: 500; background: #f1f5f9; border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
/* Right section */
.kpi-nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
/* User chip */
.kpi-user-chip {
  display: flex; align-items: center; gap: 7px;
  background: rgba(99,102,241,.07); border: 1px solid rgba(99,102,241,.14);
  border-radius: 10px; padding: 4px 10px 4px 4px;
}
.kpi-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.kpi-user-info { line-height: 1.25; }
.kpi-user-name { font-size: 12px; font-weight: 600; color: #1e293b; }
.kpi-user-role { font-size: 10px; font-weight: 500; }
/* Logout */
.kpi-logout-form { margin: 0; }
.kpi-btn-logout {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid #e2e8f0; background: #fff; border-radius: 8px;
  padding: 5px 12px; font-size: 12px; color: #64748b; cursor: pointer;
  transition: all .15s; font-family: inherit;
}
.kpi-btn-logout:hover { border-color: #fca5a5; color: #dc2626; background: #fff5f5; }
/* Login */
.kpi-btn-login {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg,#f8f5ef 0%,#e7dcc8 100%);
  color: #1f2937; border-radius: 8px; padding: 6px 14px; font-size: 12.5px;
  font-weight: 700; text-decoration: none; transition: all .15s;
  border: 1px solid rgba(212,180,131,.38);
  box-shadow: 0 14px 28px -22px rgba(212,180,131,.45);
}
.kpi-btn-login:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg,#fbf8f2 0%,#efe4d2 100%);
  box-shadow: 0 18px 32px -22px rgba(212,180,131,.58);
}
/* Mobile */
@media (max-width: 767px) {
  .kpi-toggler { display: flex; }
  .kpi-nav-collapse {
    display: none; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--kpi-nav-h); left: 0; right: 0;
    background: #fff; border-bottom: 1px solid rgba(99,102,241,.12);
    box-shadow: 0 8px 24px rgba(30,27,75,.12);
    padding: 12px 16px; gap: 8px;
  }
  .kpi-nav-collapse.open { display: flex; }
  .kpi-nav-list { flex-direction: column; }
  .kpi-dropdown-menu {
    position: static; border: none; box-shadow: none;
    background: rgba(238,242,255,.5); border-radius: 8px;
    margin: 4px 0 4px 8px; padding: 4px 0;
  }
  .kpi-nav-right { margin-left: 0; border-top: 1px solid rgba(99,102,241,.1); padding-top: 8px; flex-wrap: wrap; }
  .kpi-user-chip { flex: 1; }
}

.bg-app-vivid {
      background-color:#f0f2fa;
      background-image:
        radial-gradient(ellipse 100% 70% at 100%  0%, rgba(139,92,246,.18), transparent 55%),
        radial-gradient(ellipse  80% 50% at   0% 100%, rgba(14,165,233,.14), transparent 50%),
        radial-gradient(ellipse  60% 40% at  80%  90%, rgba(244,63,94,.09),  transparent 45%);
    }
    .domain-card-vivid {
      transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
    }
    .domain-card-vivid:hover {
      transform: translateY(-4px) scale(1.01);
      box-shadow: 0 20px 50px -15px rgba(99,102,241,.24);
    }
    .domain-card-hidden { display:none !important; }
    #domain-search-input:focus {
      outline:none; border-color:#a78bfa;
      box-shadow:0 0 0 4px rgba(167,139,250,.2);
    }
    .hero-gradient {
      background:linear-gradient(120deg,#4f46e5 0%,#7c3aed 35%,#db2777 70%,#ea580c 100%);
      background-size:200% auto;
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent;
      animation:shimmer 14s ease infinite;
    }
    @keyframes shimmer { 0%,100%{background-position:0% center;} 50%{background-position:100% center;} }
    .s1{animation-delay:.05s} .s2{animation-delay:.1s} .s3{animation-delay:.15s}
    .s4{animation-delay:.2s}  .s5{animation-delay:.25s} .s6{animation-delay:.3s}

     .ds-seg-btn {
      border-radius: 0.75rem; border: 1px solid #e2e8f0; background: #fff; padding: 0.375rem 0.75rem;
      font-size: 0.75rem; font-weight: 600; color: #475569; transition: background .15s, border-color .15s, box-shadow .15s;
    }
    .ds-seg-btn:hover { background: #f8fafc; }
    .ds-seg-btn.is-active { font-weight: 700; }
    .ds-seg-btn[data-segment="all"].is-active  { border-width: 2px; border-color: #6366f1; background: #eef2ff; color: #312e81; }
    .ds-seg-btn[data-segment="pilot"].is-active  { border-width: 2px; border-color: #fbbf24; background: #fffbeb; color: #78350f; }
    .ds-seg-btn[data-segment="rollout"].is-active { border-width: 2px; border-color: #22d3ee; background: #ecfeff; color: #164e63; }
    
    .card-vivid:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -10px rgba(67,56,202,.22); }
    .card-vivid-hidden { display: none !important; }
    /* search */
    #set-search-input:focus { outline: none; border-color: #818cf8; box-shadow: 0 0 0 3px rgba(129,140,248,.2); }
    /* stagger */
    .s1{animation-delay:.05s}.s2{animation-delay:.10s}.s3{animation-delay:.15s}
    .s4{animation-delay:.20s}.s5{animation-delay:.25s}.s6{animation-delay:.30s}
    .s7{animation-delay:.35s}.s8{animation-delay:.40s}.s9{animation-delay:.45s}
     .entry-row { transition: background .15s ease; }
    .entry-row:hover { background: rgba(238,242,255,.7); }
    /* modal backdrop */
    #reject-modal { display:none; }
    #reject-modal.open { display:flex; }
    .d1{animation-delay:.05s} .d2{animation-delay:.1s} .d3{animation-delay:.15s}
    .dc-bg {
      background-color: #f1f5f9;
      background-image:
        radial-gradient(ellipse 90% 60% at 100% 0%, rgba(99,102,241,.12), transparent 50%),
        radial-gradient(ellipse 70% 50% at 0% 100%, rgba(139,92,246,.10), transparent 45%),
        radial-gradient(ellipse 50% 40% at 80% 90%, rgba(14,165,233,.06), transparent 40%);
    }
    .dc-hero-mesh {
      background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 0%, transparent 42%),
        radial-gradient(circle at 88% 18%, rgba(167,139,250,.18) 0%, transparent 38%),
        linear-gradient(145deg, #0f172a 0%, #1e1b4b 42%, #312e81 72%, #4c1d95 100%);
    }
    .dc-card-hover { transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, border-color .2s; }
    .dc-card-hover:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 40px -12px rgba(67,56,202,.22);
    }
    .dc-bg {
      background-color: #f1f5f9;
      background-image:
        radial-gradient(ellipse 90% 60% at 100% 0%, rgba(99,102,241,.1), transparent 50%),
        radial-gradient(ellipse 70% 50% at 0% 100%, rgba(14,165,233,.08), transparent 45%);
    }
    .glass-nav { background:rgba(255,255,255,.88); backdrop-filter:blur(14px); border-bottom:1px solid rgba(99,102,241,.14); }
.hero { background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 45%,#0ea5e9 100%); position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 80% at 80% 20%,rgba(255,255,255,.14) 0%,transparent 65%); }
.card { background:#fff; border-radius:14px; border:1px solid rgba(99,102,241,.09); transition:all .22s; box-shadow:0 2px 8px rgba(99,102,241,.06); }
.card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(99,102,241,.15); border-color:rgba(99,102,241,.28); }
.btn-add { background:linear-gradient(135deg,#6366f1,#7c3aed); color:#fff; border-radius:10px; padding:9px 18px; font-weight:700; font-size:13px; border:none; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.btn-add:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 5px 16px rgba(99,102,241,.4); }
.badge { display:inline-flex; align-items:center; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:600; }
.filter-input { border:1.5px solid #e0e7ff; border-radius:9px; padding:8px 13px; font-size:13px; transition:border-color .2s; background:#fff; font-family:inherit; }
.filter-input:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.14); }
.sec-hdr { background:rgba(99,102,241,.05); border:1px solid rgba(99,102,241,.12); border-radius:12px; padding:10px 16px; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.stagger-1{animation-delay:.04s}.stagger-2{animation-delay:.08s}.stagger-3{animation-delay:.12s}.stagger-4{animation-delay:.16s}.stagger-5{animation-delay:.20s}.stagger-6{animation-delay:.24s}
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.glass-nav { background:rgba(255,255,255,.88); backdrop-filter:blur(14px); border-bottom:1px solid rgba(99,102,241,.14); }
.form-card { background:#fff; border-radius:16px; border:1px solid rgba(99,102,241,.1); box-shadow:0 2px 12px rgba(99,102,241,.06); }
.fl { display:block; font-size:13px; font-weight:600; color:#475569; margin-bottom:5px; }
.fi { width:100%; border:1.5px solid #e0e7ff; border-radius:10px; padding:9px 14px; font-size:14px; background:#fff; transition:border-color .2s,box-shadow .2s; font-family:inherit; }
.fi:focus { outline:none; border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.15); }
textarea.fi { resize:vertical; min-height:88px; }
.sec-t { font-size:12px; font-weight:700; color:#6366f1; text-transform:uppercase; letter-spacing:.07em; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.sec-t::after { content:''; flex:1; height:1.5px; background:linear-gradient(90deg,rgba(99,102,241,.3),transparent); border-radius:99px; }
.btn-save { background:linear-gradient(135deg,#6366f1,#7c3aed); color:#fff; border-radius:10px; padding:10px 22px; font-weight:700; font-size:14px; border:none; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:7px; }
.btn-save:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 6px 18px rgba(99,102,241,.35); }
.btn-cancel { background:#f1f5f9; color:#475569; border-radius:10px; padding:10px 18px; font-weight:600; font-size:14px; border:1.5px solid #e2e8f0; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:7px; text-decoration:none; }
.btn-cancel:hover { background:#e2e8f0; }
.btn-add-map { background:linear-gradient(135deg,#10b981,#059669); color:#fff; border-radius:9px; padding:8px 16px; font-weight:600; font-size:13px; border:none; cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:6px; }
.btn-add-map:hover { opacity:.9; transform:translateY(-1px); }
.btn-add-map:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.map-row { display:grid; grid-template-columns:60px 1fr 1fr 100px 36px; gap:8px; align-items:center; padding:8px 12px; border-radius:10px; background:#f8fafc; border:1px solid #e2e8f0; transition:all .2s; }
.map-row:hover { background:#f0f4ff; border-color:rgba(99,102,241,.2); }
.map-alias { font-weight:800; font-size:15px; color:#6366f1; font-family:monospace; text-align:center; }
.err { color:#ef4444; font-size:12px; margin-top:4px; }
.star { color:#ef4444; margin-left:2px; }
.stagger-1{animation-delay:.04s}.stagger-2{animation-delay:.08s}.stagger-3{animation-delay:.12s}.stagger-4{animation-delay:.16s}
.hero-band {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
    position: relative; overflow: hidden;
  }
  .hero-band::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }

  /* ─── Stat cards ─────────────────────────────────────── */
  .stat-card {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 20px 24px;
    backdrop-filter: blur(8px);
    min-width: 140px;
    transition: background .2s;
  }
  .stat-card:hover { background: rgba(255,255,255,.13); }
  .stat-card .num { font-size: 2rem; font-weight: 800; line-height: 1; }
  .stat-card .lbl { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; margin-top: 4px; opacity: .7; }

  /* ─── Progress ring inside hero ──────────────────────── */
  .ring-wrap { position: relative; width: 72px; height: 72px; }
  .ring-wrap svg { transform: rotate(-90deg); }
  .ring-wrap .pct { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; color:#fff; }

  /* ─── Filter bar ─────────────────────────────────────── */
  .filter-wrap {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e8eaf2;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    padding: 14px 18px;
  }
  .f-input {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    background: #f8fafc;
    color: #1e293b;
    transition: border-color .15s, background .15s;
  }
  .f-input:focus { border-color: #6366f1; background: #fff; }

  /* ─── Section divider ────────────────────────────────── */
  .fa-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 32px 0 16px;
  }
  .fa-divider::before,
  .fa-divider::after { content:''; flex:1; height:1px; background:#e2e8f0; }
  .fa-label {
    font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #94a3b8;
    padding: 4px 14px;
    background: #f0f1f7;
    border-radius: 99px;
    border: 1px solid #e2e8f0;
  }

  /* ─── KPI Card ───────────────────────────────────────── */
  .kpi-card {
    background: #fff;
    border: 1px solid #e8eaf2;
    border-radius: 18px;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    display: flex; flex-direction: column;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
  }
  .kpi-card:hover {
    box-shadow: 0 12px 32px -8px rgba(99,102,241,.15);
    transform: translateY(-2px);
    border-color: #c7d2fe;
  }
  .kpi-card-accent {
    height: 4px;
    width: 100%;
  }
  .kpi-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }

  /* value display */
  .kpi-val-big { font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
  .kpi-unit { font-size: 12px; font-weight: 600; color: #94a3b8; margin-left: 5px; }

  /* progress */
  .prog-track { height: 6px; background: #f1f5f9; border-radius: 99px; overflow: hidden; }
  .prog-fill  { height: 100%; border-radius: 99px; transition: width .4s ease; }

  /* badge */
  .tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 99px;
    font-size: 11px; font-weight: 600; letter-spacing: .02em;
  }

  /* action btn */
  .card-btn {
    flex: 1; text-align: center;
    padding: 8px 12px; border-radius: 10px;
    font-size: 12px; font-weight: 600;
    transition: background .15s, color .15s;
    cursor: pointer; border: none;
    font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 5px;
  }
  .card-btn-ghost {
    background: #f8fafc; color: #475569; border: 1px solid #e2e8f0;
    text-decoration: none;
  }
  .card-btn-ghost:hover { background: #f1f5f9; }
  .card-btn-primary { background: linear-gradient(135deg,#6366f1,#4f46e5); color: #fff; }
  .card-btn-primary:hover { background: linear-gradient(135deg,#4f46e5,#4338ca); }

  /* ─── Modal ──────────────────────────────────────────── */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.5);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; z-index: 999;
  }
  .modal-box {
    background: #fff; border-radius: 24px;
    padding: 32px 28px; width: 400px; max-width: 95vw;
    box-shadow: 0 32px 80px -12px rgba(0,0,0,.3);
    animation: modalIn .2s ease;
  }
  @keyframes modalIn {
    from { opacity:0; transform:scale(.95) translateY(8px); }
    to   { opacity:1; transform:scale(1) translateY(0); }
  }
  .modal-input {
    width: 100%; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 10px 14px; font-size: 14px; outline: none;
    font-family: inherit; background: #f8fafc;
    transition: border-color .15s, background .15s;
  }
  .modal-input:focus { border-color: #6366f1; background: #fff; }

  /* empty */
  .empty-box {
    border: 2px dashed #e2e8f0; border-radius: 20px;
    padding: 64px 32px; text-align: center;
  }

  /* flash */
  .flash { border-radius: 14px; padding: 12px 16px; font-size: 13px; font-weight: 500; }
  /* ─── Hero ─────────────────────── */
  .guide-hero {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%);
    padding-top: 64px; position: relative; overflow: hidden;
  }
  .guide-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }

  /* ─── Table of Contents ─────────── */
  .toc-card {
    background: #fff;
    border: 1px solid #e8eaf2;
    border-radius: 18px;
    padding: 24px;
    position: sticky; top: 80px;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
  }
  .toc-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 10px;
    font-size: 13px; font-weight: 500; color: #475569;
    text-decoration: none; transition: background .15s, color .15s;
    margin-bottom: 2px;
  }
  .toc-link:hover { background: #eef2ff; color: #4338ca; }
  .toc-link.active { background: #eef2ff; color: #4338ca; font-weight: 700; }
  .toc-num {
    width: 22px; height: 22px; border-radius: 6px;
    background: #f1f5f9; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: #94a3b8; flex-shrink: 0;
  }
  .toc-link.active .toc-num { background: #6366f1; color: #fff; }

  /* ─── Step cards ────────────────── */
  .step-card {
    background: #fff;
    border: 1px solid #e8eaf2;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    margin-bottom: 28px;
    scroll-margin-top: 88px;
  }
  .step-header {
    padding: 20px 28px;
    display: flex; align-items: center; gap: 16px;
    border-bottom: 1px solid #f1f5f9;
  }
  .step-num {
    width: 44px; height: 44px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 900; flex-shrink: 0;
  }
  .step-body { padding: 24px 28px; }

  /* ─── Mockup screens ────────────── */
  .mockup {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    margin: 16px 0;
  }
  .mockup-bar {
    background: #e8eaf2;
    padding: 8px 14px;
    display: flex; align-items: center; gap: 6px;
  }
  .mockup-dot { width: 10px; height: 10px; border-radius: 50%; }
  .mockup-url {
    flex: 1; background: #fff; border-radius: 6px;
    padding: 3px 10px; font-size: 11px; color: #94a3b8; font-family: monospace;
    margin: 0 8px;
  }
  .mockup-body { padding: 16px; }

  /* ─── UI elements in mockup ─────── */
  .mock-nav {
    background: #1e1b4b;
    border-radius: 10px;
    padding: 10px 16px;
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
  }
  .mock-logo { color: #a5b4fc; font-weight: 800; font-size: 13px; }
  .mock-btn {
    margin-left: auto; background: rgba(255,255,255,.15);
    color: #fff; border-radius: 7px; padding: 4px 12px;
    font-size: 11px; font-weight: 700;
  }
  .mock-menu-item {
    padding: 6px 12px; border-radius: 8px; font-size: 12px; color: #94a3b8;
    display: inline-block;
  }
  .mock-menu-item.active { background: #eef2ff; color: #4338ca; font-weight: 700; }

  .mock-card {
    background: #fff; border: 1px solid #e2e8f0;
    border-radius: 12px; padding: 14px 16px;
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; transition: border-color .15s;
  }
  .mock-card:hover { border-color: #6366f1; }
  .mock-card-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
  }
  .mock-input {
    width: 100%; background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 8px; padding: 8px 12px; font-size: 12px; color: #475569;
    margin-bottom: 8px;
  }
  .mock-submit {
    background: linear-gradient(135deg,#6366f1,#4f46e5);
    color: #fff; border-radius: 9px; padding: 9px 20px;
    font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
  }

  /* ─── Tips / Notes ──────────────── */
  .tip-box {
    border-radius: 12px; padding: 14px 18px;
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 13px; line-height: 1.6;
    margin: 12px 0;
  }
  .tip-icon { flex-shrink: 0; margin-top: 1px; }

  /* ─── Status badges ─────────────── */
  .status-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 12px; border-radius: 99px;
    font-size: 12px; font-weight: 700;
  }

  /* ─── Role badge ────────────────── */
  .role-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 99px;
    font-size: 12px; font-weight: 700;
  }

  /* ─── Flow arrow ────────────────── */
  .flow-wrap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
  .flow-box {
    background: #f1f5f9; border: 1px solid #e2e8f0;
    border-radius: 10px; padding: 8px 16px;
    font-size: 12px; font-weight: 600; color: #334155;
    display: flex; align-items: center; gap: 6px;
  }
  .flow-arrow { color: #94a3b8; font-size: 18px; font-weight: 300; }

  @media print {
    .toc-sidebar { display: none; }
    .step-card { break-inside: avoid; }
    .guide-hero { padding-top: 0; }
  }