:root {
    color-scheme: light;
    --tw-brand: #2563eb;
    --tw-accent: #06b6d4;
    --tw-violet: #8b5cf6;
}

html {
    font-family: "Sarabun", system-ui, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    min-height: 100vh;
    background: #f8fafc;
    color: #0f172a;
}

body.dark {
    color-scheme: dark;
    background: #020617;
    color: #e2e8f0;
}

button, input, select, textarea {
    font: inherit;
}

button, a, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid rgba(96, 165, 250, .55);
    outline-offset: 3px;
}

::selection {
    background: rgba(37, 99, 235, .20);
}

.font-display { font-family: "Kanit", "Sarabun", sans-serif; }

.nav-link {
    display:inline-flex; align-items:center; gap:.4rem; border-radius:.75rem;
    padding:.55rem .75rem; font-size:.875rem; color:#cbd5e1; transition:.2s;
}
.nav-link:hover { background:rgba(255,255,255,.08); color:#fff; }

.mobile-nav-link {
    display:flex; align-items:center; gap:.65rem; border-radius:.75rem;
    padding:.7rem .8rem; color:#cbd5e1; font-size:.9rem;
}
.mobile-nav-link:hover { background:rgba(255,255,255,.08); color:#fff; }

.icon-btn {
    display:grid; place-items:center; height:40px; width:40px; border-radius:12px;
    border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.06);
    color:#e2e8f0; transition:.2s;
}
.icon-btn:hover { background:rgba(255,255,255,.13); transform:translateY(-1px); }

.primary-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    border-radius:14px; padding:.75rem 1.15rem; background:#2563eb; color:white;
    font-size:.9rem; font-weight:600; box-shadow:0 12px 30px rgba(37,99,235,.25); transition:.2s;
}
.primary-btn:hover { background:#1d4ed8; transform:translateY(-2px); }

.secondary-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    border-radius:14px; padding:.75rem 1.15rem; border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06); color:#f8fafc; font-size:.9rem; font-weight:600;
    backdrop-filter:blur(8px); transition:.2s;
}
.secondary-btn:hover { background:rgba(255,255,255,.12); }

.form-input {
    width:100%; border-radius:14px; border:1px solid #e2e8f0; background:#fff;
    padding:.72rem 1rem; color:#0f172a; outline:none; transition:.2s;
}
.form-input:focus { border-color:#60a5fa; box-shadow:0 0 0 4px rgba(59,130,246,.10); }
.dark .form-input { border-color:#334155; background:#0f172a; color:#f8fafc; }

.filter-chip {
    border:1px solid #e2e8f0; background:#fff; color:#64748b; border-radius:999px;
    padding:.35rem .75rem; font-size:.75rem; font-weight:500; transition:.2s;
}
.filter-chip:hover, .filter-chip.active {
    border-color:#bfdbfe; background:#eff6ff; color:#2563eb;
}
.dark .filter-chip { border-color:#334155; background:#0f172a; color:#94a3b8; }
.dark .filter-chip:hover, .dark .filter-chip.active { border-color:#1d4ed8; background:#172554; color:#93c5fd; }

.system-card {
    position:relative; display:flex; min-height:340px; flex-direction:column; overflow:hidden;
    border:1px solid #e2e8f0; border-radius:24px; background:#fff; padding:20px;
    box-shadow:0 10px 35px rgba(15,23,42,.055); transition:.25s ease;
}
.system-card::before {
    content:""; position:absolute; inset:0 0 auto 0; height:3px;
    background:linear-gradient(90deg,#2563eb,#06b6d4,#8b5cf6); opacity:.0; transition:.25s;
}
.system-card:hover { transform:translateY(-5px); border-color:#bfdbfe; box-shadow:0 22px 50px rgba(15,23,42,.12); }
.system-card:hover::before { opacity:1; }
.dark .system-card { border-color:#1e293b; background:#111827; }
.dark .system-card:hover { border-color:#1d4ed8; }

.system-icon {
    display:grid; height:56px; width:56px; place-items:center; border-radius:18px;
    color:#fff; font-size:1.35rem; box-shadow:0 10px 24px rgba(15,23,42,.15);
}
.system-icon.primary { background:linear-gradient(135deg,#2563eb,#60a5fa); }
.system-icon.danger { background:linear-gradient(135deg,#dc2626,#fb7185); }
.system-icon.success { background:linear-gradient(135deg,#059669,#34d399); }
.system-icon.info { background:linear-gradient(135deg,#0284c7,#22d3ee); }
.system-icon.warning { background:linear-gradient(135deg,#d97706,#fbbf24); }
.system-icon.purple { background:linear-gradient(135deg,#7c3aed,#a78bfa); }
.system-icon.teal { background:linear-gradient(135deg,#0f766e,#2dd4bf); }
.system-icon.orange { background:linear-gradient(135deg,#ea580c,#fb923c); }
.system-icon.indigo { background:linear-gradient(135deg,#4338ca,#818cf8); }
.system-icon.cyan { background:linear-gradient(135deg,#0891b2,#67e8f9); }

.app-number { color:#94a3b8; font-size:.68rem; font-weight:700; letter-spacing:.12em; }

.tag {
    border-radius:8px; background:#f1f5f9; padding:.25rem .55rem;
    color:#64748b; font-size:.7rem;
}
.dark .tag { background:#1e293b; color:#94a3b8; }

.open-btn {
    display:flex; align-items:center; justify-content:space-between; border-radius:14px;
    background:#f8fafc; padding:.75rem .9rem; color:#334155; font-size:.875rem;
    font-weight:600; transition:.2s;
}
.open-btn:hover { background:#2563eb; color:#fff; }
.dark .open-btn { background:#1e293b; color:#e2e8f0; }
.dark .open-btn:hover { background:#2563eb; color:#fff; }

.mini-stat {
    display:flex; min-height:92px; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.04);
}
.mini-stat i { font-size:1rem; }
.mini-stat b { font-family:"Kanit"; font-size:1.15rem; }
.mini-stat span { color:#64748b; font-size:.68rem; }

.hero-orb {
    position:absolute; height:280px; width:280px; border-radius:999px;
    filter:blur(70px); pointer-events:none;
}

@media (max-width: 640px) {
    .system-card { min-height:0; }
}


/* Witsanu theme helpers */
.hero-system-panel {
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(145deg, rgba(15,23,42,.88), rgba(30,41,59,.72));
    box-shadow: 0 25px 70px rgba(2,8,23,.30), inset 0 1px rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.inner-panel {
    background: rgba(2,8,23,.26);
    box-shadow: inset 0 1px rgba(255,255,255,.05);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* Shared portal helpers */
.section-kicker {
    display: inline-block;
    color: #2563eb;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.modal-backdrop {
    background: rgba(2, 6, 23, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Prevent horizontal overflow on small screens. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Better tap targets and transitions on touch devices. */
@media (max-width: 640px) {
    .primary-btn,
    .secondary-btn,
    .filter-chip,
    .icon-btn {
        min-height: 42px;
    }
}