:root {
  --bg: #F7F9FC;
  --surface: #FFFFFF;
  --primary: #2F6BFF;
  --primary-soft: #E8F0FF;
  --accent: #FF5C8A;
  --accent-soft: #FFE8EF;
  --success: #12B76A;
  --success-soft: #E7F8F0;
  --warning: #F5A524;
  --warning-soft: #FFF6E5;
  --danger: #E5484D;
  --danger-soft: #FFE8E8;
  --text: #1A2332;
  --muted: #5B6B7C;
  --border: #E3E9F2;
  --shadow: 0 8px 24px rgba(26, 35, 50, 0.08);
  --radius: 14px;
  --radius-sm: 10px;
  --sidebar-w: 260px;
  --topbar-h: 64px;
  --bottom-nav-h: 76px;
  --touch: 48px;
  --font: "Segoe UI", "Noto Sans Thai", "Sarabun", Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); text-decoration: none; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-svg { width: 40px; height: 40px; }
.logo--lg .logo-svg { width: 72px; height: 72px; }
.logo-mark {
  width: 40px; height: 40px; position: relative;
  display: grid; place-items: center;
}
.logo-mark svg { width: 100%; height: 100%; overflow: visible; }
.atom-spin { transform-box: fill-box; transform-origin: center; animation: atom-spin 4s linear infinite; }
@keyframes atom-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.wave-path { stroke-dasharray: 120; animation: wave-dash 2.4s ease-in-out infinite; }
@keyframes wave-dash {
  0%, 100% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: 24; }
}

.boot-screen {
  min-height: 100vh; display: grid; place-content: center; gap: 12px; text-align: center;
  background: radial-gradient(circle at 20% 20%, #e8f0ff, transparent 40%),
              radial-gradient(circle at 80% 0%, #ffe8ef, transparent 35%),
              var(--bg);
}
.boot-text { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.04em; margin: 0; color: var(--primary); }

[dir="rtl"] .sidebar, [dir="rtl"] .topbar-actions { direction: rtl; }