@import"https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&family=Roboto+Condensed:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap";:root{--color-navy: #1C3163;--color-navy-dark: #152549;--color-navy-mid: #243d7a;--color-gold: #D4AF37;--color-gold-light: #F5CB5C;--color-gold-dark: #d39e29;--color-ivory: #f7f2e8;--color-ivory-dark: #ede5d5;--color-bg: var(--color-ivory);--color-surface: #ffffff;--color-surface-hover: var(--color-ivory-dark);--color-surface-elevated: #faf7f1;--color-primary: var(--color-gold);--color-primary-light: var(--color-gold-light);--color-primary-dark: var(--color-gold-dark);--color-primary-dim: rgba(212, 175, 55, .15);--color-btn: var(--color-gold);--color-btn-light: var(--color-gold-light);--color-btn-dim: rgba(212, 175, 55, .15);--color-accent: var(--color-navy);--color-accent-mid: var(--color-navy-mid);--color-text: var(--color-navy);--color-text-muted: #5b6b8a;--color-text-inverse: #ffffff;--color-error: #c0392b;--color-success: #1a7a4a;--color-warning: #b8860b;--font-sans: "Roboto Condensed", "Noto Sans Thai", "Helvetica Neue", Arial, sans-serif;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 14px;--radius-xl: 20px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(28, 49, 99, .08);--shadow-md: 0 4px 16px rgba(28, 49, 99, .1);--shadow-lg: 0 10px 32px rgba(28, 49, 99, .14);--shadow-glow: 0 0 18px rgba(212, 175, 55, .25);--gradient-gold: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold-dark) 100%);--gradient-navy: linear-gradient(135deg, var(--color-navy-mid) 0%, var(--color-navy) 100%);--gradient-brand: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-mid) 50%, var(--color-gold-dark) 100%);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--color-bg);color:var(--color-text);line-height:1.55;letter-spacing:.01em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;scrollbar-gutter:stable}a{color:var(--color-navy);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-gold-dark)}input,select,textarea{font-family:var(--font-sans);color:var(--color-text)}button{font-family:var(--font-sans);cursor:pointer}.layout-container{max-width:1280px;margin:0 auto;padding:0 1rem}@media (min-width: 768px){.layout-container{padding:0 1.5rem}}.main-content{flex:1;padding:1.5rem 0 3rem}@media (max-width: 767px){.main-content{padding:.75rem 0 2rem}}.glass{background:#f7f2e8eb;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(212,175,55,.2)}.card{background:var(--color-surface);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-md);border:1px solid rgba(28,49,99,.06);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}@media (hover: hover){.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}}@media (max-width: 768px){.card{padding:1rem}}.btn-primary{background:var(--gradient-gold);color:var(--color-navy);font-weight:700;font-family:var(--font-sans);letter-spacing:.04em;text-transform:uppercase;font-size:.875rem;padding:.7rem 1.5rem;border-radius:var(--radius-md);border:none;transition:all var(--transition-fast);box-shadow:0 3px 12px #d4af374d}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px #d4af3773;filter:brightness(1.05)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}@media (max-width: 768px){.btn-primary,.btn-secondary{padding:.85rem 1.25rem;font-size:.95rem}}.btn-secondary{background:transparent;color:var(--color-navy);font-weight:600;font-family:var(--font-sans);letter-spacing:.03em;font-size:.875rem;padding:.7rem 1.5rem;border-radius:var(--radius-md);border:1.5px solid rgba(28,49,99,.25);transition:all var(--transition-fast)}.btn-secondary:hover{border-color:var(--color-navy);background:#1c31630d}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.input{width:100%;padding:.75rem 1rem;background:var(--color-ivory);border:1.5px solid rgba(28,49,99,.18);border-radius:var(--radius-md);color:var(--color-text);font-family:var(--font-sans);font-size:.9rem;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input:focus{outline:none;border-color:var(--color-gold);box-shadow:0 0 0 3px var(--color-primary-dim)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--color-ivory-dark)}::-webkit-scrollbar-thumb{background:#1c316340;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-navy)}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn var(--transition-normal) forwards}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes loader-orbit{to{transform:rotate(360deg)}}@keyframes loader-breath{0%,to{transform:scale(.7);opacity:.35}50%{transform:scale(1);opacity:.85}}@keyframes loader-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}.brand-loader{position:relative;display:inline-block;flex-shrink:0}.brand-loader-ring,.brand-loader-arc,.brand-loader-core{position:absolute;border-radius:var(--radius-full)}.brand-loader-ring{top:0;right:0;bottom:0;left:0;border:2px solid rgba(28,49,99,.12)}.brand-loader-arc{top:0;right:0;bottom:0;left:0;border:2px solid transparent;border-top-color:var(--color-gold);border-right-color:var(--color-gold-light);animation:loader-orbit 1.1s cubic-bezier(.45,.15,.55,.85) infinite}.brand-loader-core{top:26%;right:26%;bottom:26%;left:26%;background:radial-gradient(circle at 40% 35%,var(--color-gold-light),var(--color-gold-dark));box-shadow:var(--shadow-glow);animation:loader-breath 2.6s ease-in-out infinite}.brand-loader-label{font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;background:linear-gradient(90deg,var(--color-navy) 35%,var(--color-gold-dark) 50%,var(--color-navy) 65%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:loader-shimmer 2.4s linear infinite}.brand-loader-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;padding:2rem;background:#f7f2e8e0;background:color-mix(in srgb,var(--color-bg) 88%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:overlay-fade-in .2s ease-out forwards}.btn-spinner{display:inline-block;width:1em;height:1em;vertical-align:-.125em;margin-right:.45em;border-radius:var(--radius-full);border:2px solid currentColor;border-top-color:transparent;opacity:.85;animation:loader-orbit .8s linear infinite}@media (prefers-reduced-motion: reduce){.brand-loader-arc,.btn-spinner{animation-duration:2.4s}.brand-loader-core{animation:none;opacity:.7;transform:scale(.85)}.brand-loader-label{animation:none;background:none;color:var(--color-navy)}}.gold-bar{height:3px;background:var(--gradient-gold);border-radius:var(--radius-full)}.badge{display:inline-flex;align-items:center;padding:.2rem .65rem;border-radius:var(--radius-full);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.badge-active{background:#1a7a4a1f;color:var(--color-success);border:1px solid rgba(26,122,74,.25)}.badge-inactive{background:#1c316314;color:var(--color-text-muted);border:1px solid rgba(28,49,99,.15)}.badge-gold{background:#d4af3726;color:var(--color-gold-dark);border:1px solid rgba(212,175,55,.3)}.mobile-only{display:block}.desktop-only{display:none}@media (min-width: 768px){.mobile-only{display:none}.desktop-only{display:block}}.responsive-grid{display:grid;grid-template-columns:1fr;gap:1rem}@media (min-width: 768px){.responsive-grid.grid-2{grid-template-columns:repeat(2,1fr)}.responsive-grid.grid-3{grid-template-columns:repeat(3,1fr)}.responsive-grid.grid-4{grid-template-columns:repeat(4,1fr)}}.responsive-flex{display:flex;flex-direction:column;gap:1rem}@media (min-width: 768px){.responsive-flex{flex-direction:row;align-items:center}}.stack-on-mobile{display:flex;flex-direction:column;gap:1rem}@media (min-width: 768px){.stack-on-mobile{flex-direction:row}}.hide-on-mobile{display:none}@media (min-width: 768px){.hide-on-mobile{display:inherit}}.app-wrapper{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding:2rem 0}
