/* ════════════════════════════════════════════════════
   PHAOS LAB · Phaos Works · Design System
   Industrial dark · Plasma orange · Precise typography
   Brand guide v1.0 · Panama 2026
   ════════════════════════════════════════════════════ */

:root {
  /* ─── Brand Colors ─── */
  --orange:        #F97316;
  --orange-dim:    #c45c0e;
  --orange-glow:   rgba(249,115,22,0.18);
  --orange-soft:   rgba(249,115,22,0.08);
  --orange-border: rgba(249,115,22,0.20);
  /* ─── Backgrounds ─── */
  --bg:      #0a0a0a;
  --bg2:     #111111;
  --bg3:     #181818;
  --surface: #1c1c1c;
  --bg4:     #222222;
  /* ─── Borders ─── */
  --border:      rgba(249,115,22,0.20);
  --border-soft: rgba(255,255,255,0.06);
  --border2:     rgba(255,255,255,0.10);
  --border3:     rgba(255,255,255,0.18);
  /* ─── Text ─── */
  --text:    #f0ece4;
  --text2:   #8a8580;
  --text3:   #5a5550;
  --white:   #ffffff;
  /* ─── Semantic ─── */
  --green:   #22c55e;
  --red:     #ef4444;
  --amber:   #f59e0b;
  --blue:    #3b82f6;
  --grey:    #2a2a2a;
  --grey-light: #3a3a3a;
  /* ─── Typography ─── */
  --ff-display: 'Bebas Neue','Arial Black',sans-serif;
  --ff-body:    'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ff-mono:    'Courier New',Courier,monospace;
  /* ─── Radius — sharp industrial ─── */
  --radius:      4px;
  --radius-sm:   2px;
  --radius-lg:   6px;
  --radius-pill: 2px;
  /* ─── Motion ─── */
  --trans:      all 0.3s ease;
  --trans-fast: all 0.15s ease;
  /* ─── Layout ─── */
  --sidebar-w: 260px;
  --topbar-h:  60px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--ff-body);font-weight:300;
  background:var(--bg);color:var(--text);
  min-height:100vh;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
h1,h2,h3,h4,h5{font-family:var(--ff-display);font-weight:400;letter-spacing:2px;line-height:1.0}
p{line-height:1.7}
a{color:var(--orange);text-decoration:none;transition:var(--trans-fast)}
a:hover{opacity:.8}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--orange);color:var(--bg)}
*{-webkit-tap-highlight-color:transparent}

::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--grey-light);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--orange-dim)}

/* ─── PLASMA PULSE ─── */
@keyframes corePulse{
  0%,100%{box-shadow:0 0 6px var(--orange);transform:translate(-50%,-50%) scale(1)}
  50%{box-shadow:0 0 14px var(--orange);transform:translate(-50%,-50%) scale(1.15)}
}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ─── BUTTONS ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--ff-body);font-weight:700;font-size:.82rem;
  letter-spacing:2px;text-transform:uppercase;
  padding:.85rem 1.75rem;border-radius:var(--radius-pill);
  border:1px solid transparent;cursor:pointer;
  text-decoration:none;transition:var(--trans);white-space:nowrap;line-height:1;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}
.btn-primary{background:var(--orange);color:var(--bg);border-color:var(--orange)}
.btn-primary:hover{background:var(--orange-dim);border-color:var(--orange-dim);box-shadow:0 0 20px var(--orange-glow);transform:translateY(-2px)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--orange-border)}
.btn-secondary:hover{border-color:var(--orange);background:var(--orange-glow);color:var(--white)}
.btn-ghost{background:transparent;color:var(--text2);border-color:var(--border-soft)}
.btn-ghost:hover{background:var(--surface);border-color:var(--border2);color:var(--text)}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red)}
.btn-danger:hover{opacity:.85}
.btn-sm{padding:.55rem 1.1rem;font-size:.72rem}
.btn-block{width:100%}

/* ─── FORMS ─── */
.field{margin-bottom:1.1rem}
.field-label{
  display:block;font-size:.68rem;font-weight:500;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--text2);margin-bottom:.45rem;
}
.field-input,.field-select,.field-textarea{
  width:100%;background:var(--bg2);
  border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:.75rem 1rem;color:var(--text);
  font-family:var(--ff-body);font-weight:400;font-size:.92rem;
  outline:none;transition:var(--trans);
}
.field-input:focus,.field-select:focus,.field-textarea:focus{
  border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft);background:var(--bg3);
}
.field-input::placeholder{color:var(--text3)}
.field-input.error{border-color:var(--red)}
.field-hint{font-size:.72rem;color:var(--text3);margin-top:.35rem}
.field-error{font-size:.75rem;color:var(--red);margin-top:.35rem;display:flex;align-items:center;gap:.35rem}
.field-error::before{content:'⚠'}

/* ─── CARDS ─── */
.card{
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius);overflow:hidden;transition:var(--trans);
}
.card:hover{border-color:var(--orange-border);background:var(--bg3)}
.card-pad{padding:1.5rem}
.card-header{
  padding:1rem 1.5rem;border-bottom:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
}
.card-title{font-family:var(--ff-display);font-size:1.1rem;letter-spacing:2px;color:var(--white)}
.card-body{padding:1.5rem}

/* ─── BADGES ─── */
.badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  padding:.2rem .55rem;border-radius:var(--radius-sm);border:1px solid transparent;
}
.badge-orange{background:var(--orange-glow);color:var(--orange);border-color:var(--orange-border)}
.badge-green{background:rgba(34,197,94,.12);color:var(--green);border-color:rgba(34,197,94,.25)}
.badge-red{background:rgba(239,68,68,.12);color:var(--red);border-color:rgba(239,68,68,.25)}
.badge-amber{background:rgba(245,158,11,.12);color:var(--amber);border-color:rgba(245,158,11,.25)}
.badge-muted{background:rgba(255,255,255,.05);color:var(--text2);border-color:var(--border-soft)}
.badge-blue{background:rgba(59,130,246,.12);color:var(--blue);border-color:rgba(59,130,246,.25)}

/* ─── TABLES ─── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
thead th{
  font-family:var(--ff-body);font-size:.65rem;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--text2);
  padding:.75rem 1rem;border-bottom:1px solid var(--border-soft);
  text-align:left;white-space:nowrap;background:var(--bg2);
}
tbody tr{border-bottom:1px solid var(--border-soft);transition:background .15s ease}
tbody tr:hover{background:var(--bg3)}
tbody tr:last-child{border-bottom:none}
td{padding:.85rem 1rem;font-size:.88rem;vertical-align:middle;color:var(--text)}
.td-muted{color:var(--text2);font-size:.8rem}
.td-mono{font-family:var(--ff-mono);font-size:.8rem;color:var(--text2)}

/* ─── MODAL ─── */
.modal-overlay{
  position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:1rem;
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--bg3);border:1px solid var(--orange-border);
  border-radius:var(--radius-lg);width:100%;max-width:520px;
  max-height:90vh;overflow-y:auto;animation:fadeInUp .3s ease;
}
.modal-head{
  padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-soft);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.modal-title{font-family:var(--ff-display);font-size:1.2rem;letter-spacing:2px;color:var(--white)}
.modal-close{
  width:32px;height:32px;border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text2);font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;
  transition:var(--trans);cursor:pointer;border:none;
}
.modal-close:hover{background:var(--red);color:#fff}
.modal-body{padding:1.5rem}
.modal-foot{
  padding:1rem 1.5rem;border-top:1px solid var(--border-soft);
  display:flex;gap:.75rem;justify-content:flex-end;
}

/* ─── TOAST ─── */
#toast-stack{
  position:fixed;top:1rem;right:1rem;z-index:500;
  display:flex;flex-direction:column;gap:.5rem;max-width:340px;
}
.toast{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:1rem 1.25rem;background:var(--surface);
  border:1px solid var(--border-soft);border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(0,0,0,.5);animation:fadeInUp .25s ease;
  font-size:.88rem;
}
.toast.success{border-color:rgba(34,197,94,.3)}
.toast.error{border-color:rgba(239,68,68,.3)}
.toast.info{border-color:var(--orange-border)}
.toast-icon{font-size:1.1rem;flex-shrink:0;margin-top:.1rem}
.toast-msg{line-height:1.4}
.toast-title{font-weight:700;font-size:.82rem;letter-spacing:1px;margin-bottom:.15rem}

/* ─── STATS ─── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.stat-card{
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius);padding:1.25rem 1.5rem;transition:var(--trans);
}
.stat-card:hover{border-color:var(--orange-border)}
.stat-value{font-family:var(--ff-display);font-size:2.2rem;letter-spacing:2px;line-height:1;color:var(--white);margin-bottom:.35rem}
.stat-label{font-size:.65rem;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--text2)}
.stat-meta{font-size:.75rem;color:var(--text3);margin-top:.4rem}
.stat-change{font-size:.75rem;margin-top:.4rem}
.stat-change.up{color:var(--green)}
.stat-change.down{color:var(--red)}

/* ─── ALERTS ─── */
.alert{
  padding:.9rem 1.1rem;border-radius:var(--radius);border:1px solid transparent;
  font-size:.88rem;display:flex;align-items:flex-start;gap:.7rem;line-height:1.5;
}
.alert-orange{background:var(--orange-soft);border-color:var(--orange-border);color:var(--text)}
.alert-green{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.25);color:var(--text)}
.alert-red{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25);color:var(--text)}

/* ─── EMPTY STATE ─── */
.empty-state{padding:3rem 1.5rem;text-align:center;color:var(--text2)}
.empty-state-icon{font-size:2.5rem;margin-bottom:1rem;opacity:.4}
.empty-state-title{font-family:var(--ff-display);font-size:1.4rem;letter-spacing:2px;color:var(--text2);margin-bottom:.5rem}
.empty-state-desc{font-size:.85rem;color:var(--text3);max-width:360px;margin:0 auto 1.25rem}

/* ─── PAGE LAYOUT ─── */
.page{padding:1.5rem}
.page-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;
}
.page-title{font-family:var(--ff-display);font-size:1.8rem;letter-spacing:3px;color:var(--white);line-height:1}
.page-sub{font-size:.82rem;color:var(--text2);margin-top:.35rem}
.page-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* ─── ACTIVITY ─── */
.activity-row{
  display:flex;align-items:flex-start;gap:.9rem;
  padding:.85rem 1.5rem;border-bottom:1px solid var(--border-soft);
}
.activity-row:last-child{border-bottom:none}
.activity-dot{width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0;margin-top:.35rem}
.activity-label{font-size:.88rem;line-height:1.4}
.activity-time{font-size:.72rem;color:var(--text3);margin-top:.2rem}

/* ─── GRID BG PATTERN ─── */
.grid-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(249,115,22,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(249,115,22,.03) 1px,transparent 1px);
  background-size:50px 50px;
  -webkit-mask-image:radial-gradient(ellipse at center,black 40%,transparent 80%);
  mask-image:radial-gradient(ellipse at center,black 40%,transparent 80%);
}

/* ─── PAGE PROGRESS BAR ─── */
#page-progress{
  position:fixed;top:0;left:0;height:2px;z-index:600;
  background:var(--orange);box-shadow:0 0 8px var(--orange);
  transition:width .2s ease;width:0;
}

kbd{
  font-family:var(--ff-mono);font-size:.7rem;background:var(--surface);
  border:1px solid var(--border-soft);border-bottom-width:2px;
  padding:.15rem .4rem;border-radius:var(--radius-sm);color:var(--text2);
}

/* ─── MOBILE ─── */
@media(hover:none) and (pointer:coarse){
  .btn{min-height:44px}
  .btn-sm{min-height:38px}
  .field-input,.field-select,.field-textarea{min-height:44px}
  .modal-close{width:44px;height:44px}
}
@media(max-width:768px){
  .field-input,.field-select,.field-textarea,
  input[type=text],input[type=email],input[type=password],
  input[type=number],input[type=date],input[type=month],
  input[type=tel],input[type=search],textarea,select{font-size:16px!important}
}
@media(max-width:480px){
  .modal-overlay{align-items:flex-end;padding:0}
  .modal{max-width:100%;border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom)}
  #toast-stack{top:.5rem;right:.5rem;left:.5rem}
  .toast{min-width:auto;max-width:none;width:100%}
}
/* ─── RESPONSIVE GRID UTILITIES ─── */
.grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(max-width:480px){.grid-2col{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  body{background:#fff!important;color:#000!important}
  #sidebar,#topbar,#bottom-nav,.btn{display:none!important}
  #main{margin-left:0!important;padding-top:0!important}
}
@supports not (inset:0){
  .modal-overlay{top:0;right:0;bottom:0;left:0}
  #sb-overlay{top:0;right:0;bottom:0;left:0}
}