/* ===========================================================
   KOREVRA SURELEND — Interactive Demo Design System
   Shared across all 6 functioning platforms.
   =========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,30..100,0..1&family=DM+Sans:opsz,wght@9..40,300..900&family=IBM+Plex+Mono:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500;600&display=swap");

:root {
  /* Brand */
  --navy:        #0D2B4E;
  --navy-deep:   #061A33;
  --navy-soft:   #1A3C66;
  --teal:        #1B8A8A;
  --teal-light:  #5BC0BE;
  --teal-pale:   #D6EBEA;
  --teal-deep:   #0F5959;
  --gold:        #D4A843;
  --gold-light:  #F0D58A;
  --gold-pale:   #FAF0D7;
  --gold-deep:   #8C6B1F;
  /* Neutrals (warm) */
  --paper:       #FAF7F0;
  --cream:       #F4EFE2;
  --bone:        #E8E1CC;
  --ink:         #14171F;
  --ink-soft:    #2D3340;
  --slate:       #4A5260;
  --slate-mid:   #6B7280;
  --slate-soft:  #9CA3AF;
  --line:        #DAD2BC;
  --line-soft:   #ECE6D3;
  /* Status */
  --green:       #2E8B57;
  --green-soft:  #DCEBD9;
  --green-deep:  #1A5938;
  --amber:       #C28B17;
  --amber-soft:  #F8E6BB;
  --red:         #B83232;
  --red-soft:    #F5D9D5;
  --red-deep:    #7A1F1F;
  --blue:        #2B6CB0;
  --blue-soft:   #D8E3F5;
  /* Type */
  --serif: "Fraunces", "Times New Roman", serif;
  --sans:  "DM Sans", -apple-system, system-ui, sans-serif;
  --mono:  "IBM Plex Mono", "SF Mono", Consolas, monospace;
  --jet:   "JetBrains Mono", "SF Mono", Consolas, monospace;
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(13,43,78,.04), 0 1px 3px rgba(13,43,78,.06);
  --shadow-md: 0 4px 12px rgba(13,43,78,.05), 0 2px 4px rgba(13,43,78,.04);
  --shadow-lg: 0 24px 48px -12px rgba(13,43,78,.18), 0 8px 16px rgba(13,43,78,.08);
  --shadow-xl: 0 50px 100px -20px rgba(13,43,78,.25), 0 30px 60px -30px rgba(13,43,78,.30);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  color: var(--ink);
  background: var(--paper);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:4px; font-family:var(--sans); font-size:12px; font-weight:600; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:all .15s; white-space:nowrap; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-primary { background:var(--navy); color:white; border-color:var(--navy); }
.btn-primary:hover { background:var(--navy-deep); }
.btn-gold { background:var(--gold); color:var(--navy); border-color:var(--gold); }
.btn-gold:hover { background:var(--gold-deep); color:white; }
.btn-ghost { background:transparent; color:var(--navy); border-color:var(--line); }
.btn-ghost:hover { background:var(--cream); }
.btn-teal { background:var(--teal); color:white; border-color:var(--teal); }
.btn-teal:hover { background:var(--teal-deep); }
.btn-red { background:var(--red); color:white; border-color:var(--red); }
.btn-sm { padding:5px 10px; font-size:11px; }
.btn-lg { padding:12px 22px; font-size:13px; }
.btn-icon { padding:6px; }

/* Pills */
.pill { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:100px; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; }
.pill-green { background:var(--green-soft); color:var(--green); }   .pill-green::before { background:var(--green); }
.pill-amber { background:var(--amber-soft); color:var(--amber); }   .pill-amber::before { background:var(--amber); }
.pill-red { background:var(--red-soft); color:var(--red); }         .pill-red::before { background:var(--red); }
.pill-blue { background:var(--blue-soft); color:var(--blue); }      .pill-blue::before { background:var(--blue); }
.pill-neutral { background:var(--cream); color:var(--slate); }      .pill-neutral::before { background:var(--slate); }
.pill-gold { background:var(--gold-pale); color:var(--gold-deep); } .pill-gold::before { background:var(--gold-deep); }

/* Cards */
.card { background:white; border:1px solid var(--line-soft); border-radius:6px; padding:18px 20px; }
.card-h { font-family:var(--mono); font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--slate); display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.card-h .more { font-family:var(--mono); color:var(--gold-deep); cursor:pointer; }

/* Tables */
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { font-family:var(--mono); font-weight:500; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate); text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--cream); }
.tbl td { padding:12px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.tbl .num { font-family:var(--mono); font-feature-settings:"tnum"; text-align:right; }
.tbl .strong { font-weight:600; color:var(--ink); }
.tbl tr:hover td { background:var(--gold-pale); cursor:pointer; }

/* Stats */
.stat-l { font-family:var(--mono); font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--slate); margin-bottom:8px; }
.stat-v { font-family:var(--serif); font-size:34px; font-weight:400; color:var(--navy); letter-spacing:-0.02em; line-height:1; }
.stat-v em { font-style:italic; color:var(--gold-deep); font-size:0.6em; vertical-align:super; }
.stat-d { margin-top:6px; font-family:var(--mono); font-size:11px; color:var(--green); }
.stat-d.down { color:var(--red); }
.stat-d.flat { color:var(--slate-mid); }

/* Avatars */
.av { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; font-weight:600; color:white; }
.av-1 { background:linear-gradient(135deg, #1B8A8A 0%, #0F5959 100%); }
.av-2 { background:linear-gradient(135deg, #D4A843 0%, #8C6B1F 100%); }
.av-3 { background:linear-gradient(135deg, #0D2B4E 0%, #061A33 100%); }
.av-4 { background:linear-gradient(135deg, #5BC0BE 0%, #1B8A8A 100%); }
.av-5 { background:linear-gradient(135deg, #B83232 0%, #7A1F1F 100%); }
.av-6 { background:linear-gradient(135deg, #2E8B57 0%, #1A5938 100%); }

/* Forms */
input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], textarea, select {
  font-family: var(--sans); font-size: 13px; color: var(--ink);
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 4px;
  background: white; transition: border-color .15s, box-shadow .15s; width: 100%;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-pale);
}
label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); display: block; margin-bottom: 6px; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(13,43,78,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeIn .2s; }
.modal { background: var(--paper); border-radius: 8px; max-width: 720px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-xl); animation: scaleIn .2s; }
.modal-h { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.modal-h h2 { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--navy); letter-spacing: -0.02em; }
.modal-close { background: transparent; border: none; font-size: 20px; color: var(--slate); cursor: pointer; padding: 4px 8px; border-radius: 4px; }
.modal-close:hover { background: var(--cream); }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--line-soft); display: flex; justify-content: flex-end; gap: 8px; }

/* Toast */
.toast-stack { position: fixed; top: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
.toast { background: var(--navy); color: white; padding: 14px 18px; border-radius: 6px; box-shadow: var(--shadow-lg); font-size: 13px; display: flex; align-items: center; gap: 10px; min-width: 280px; animation: slideIn .25s; }
.toast.green { background: var(--green-deep); }
.toast.amber { background: var(--amber); color: white; }
.toast.red { background: var(--red-deep); }

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes blink { 0%, 49% { opacity:1; } 50%, 100% { opacity:0; } }
@keyframes pulse { 0%, 100% { opacity:1; transform:scale(1); } 50% { opacity:0.7; transform:scale(0.95); } }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; }

/* Live indicator */
.live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.live::before { content: ""; width: 7px; height: 7px; background: var(--green); border-radius: 50%; animation: pulse 1.4s infinite; }

/* Utility */
.grain::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode: multiply; opacity: 0.5;
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip: rect(0,0,0,0); border:0; }
.text-mono { font-family: var(--mono); }
.text-serif { font-family: var(--serif); }
.text-italic { font-style: italic; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--slate-mid); }