/* StaqOn — design system */
:root {
  --brand: #4F46E5;
  --brand-hover: #4338CA;
  --brand-soft: #EEF2FF;
  --surface-0: #F8F9FA;
  --surface-1: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-3: #FFFFFF;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --text: #111827;
  --text-2: #6B7280;
  --text-muted: #9CA3AF;
  --success: #059669; --success-bg: #ECFDF5;
  --warning: #D97706; --warning-bg: #FFFBEB;
  --danger: #DC2626;  --danger-bg: #FEF2F2;
  --info: #2563EB;    --info-bg: #EFF6FF;
  --online: #22C55E;

  --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --shadow-card: 0 1px 3px rgba(0,0,0,.08);
  --shadow-pop: 0 4px 24px rgba(0,0,0,.12);
  --ring: 0 0 0 2px #fff, 0 0 0 4px rgba(79,70,229,.45);
  --sidebar-w: 260px;
  --t: 150ms ease;
  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

/* avatar palette (8 colors) */
.av0{background:#4F46E5}.av1{background:#0EA5E9}.av2{background:#059669}
.av3{background:#D97706}.av4{background:#DC2626}.av5{background:#7C3AED}
.av6{background:#DB2777}.av7{background:#0D9488}

.avatar {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; color:#fff; font-weight:600; flex:0 0 auto;
  width:32px; height:32px; font-size:12px; text-transform:uppercase; user-select:none;
}
.avatar.sm{width:24px;height:24px;font-size:10px}
.avatar.lg{width:40px;height:40px;font-size:15px}

/* buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:36px; padding:0 16px; border:1px solid transparent; border-radius:var(--r-sm);
  font-size:14px; font-weight:600; transition:var(--t); background:var(--surface-1); color:var(--text);
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-hover)}
.btn-outline{background:#fff; border-color:var(--border-strong); color:var(--text)}
.btn-outline:hover{background:var(--surface-0)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--surface-0)}
.btn-danger{background:var(--danger); color:#fff}
.btn-block{width:100%}
.btn-sm{height:30px; padding:0 12px; font-size:13px}
.btn-lg{height:42px; padding:0 22px; font-size:15px}
.btn:disabled{opacity:.55; cursor:not-allowed}

/* form controls */
.field{margin-bottom:16px}
.field label{display:block; font-size:13px; font-weight:500; color:#374151; margin-bottom:6px}
.input, select.input, textarea.input {
  width:100%; height:36px; padding:0 12px; background:#F9FAFB;
  border:1px solid var(--border); border-radius:var(--r-sm); font-size:14px; color:var(--text);
  transition:var(--t); font-family:inherit;
}
textarea.input{height:auto; padding:9px 12px; resize:vertical}
.input:focus, select.input:focus, textarea.input:focus {
  outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px rgba(79,70,229,.15);
}
.input.error{border-color:var(--danger)}
.field-error{color:var(--danger); font-size:12px; margin-top:5px; display:none}
.field.has-error .field-error{display:block}

.banner{padding:10px 14px; border-radius:var(--r-sm); font-size:13px; margin-bottom:16px; border:1px solid transparent}
.banner-error{background:var(--danger-bg); color:var(--danger); border-color:#FECACA}
.banner-success{background:var(--success-bg); color:var(--success); border-color:#A7F3D0}
.banner-info{background:var(--info-bg); color:var(--info); border-color:#BFDBFE}

.muted{color:var(--text-muted)}
.text-2{color:var(--text-2)}
.divider{display:flex; align-items:center; gap:12px; color:var(--text-muted); font-size:12px; margin:18px 0}
.divider::before,.divider::after{content:""; height:1px; background:var(--border); flex:1}

/* scrollbar */
.scroll{scrollbar-width:thin; scrollbar-color:#CBD5E1 transparent}
.scroll::-webkit-scrollbar{width:8px;height:8px}
.scroll::-webkit-scrollbar-thumb{background:#CBD5E1; border-radius:8px}
.scroll::-webkit-scrollbar-thumb:hover{background:#94A3B8}
.scroll::-webkit-scrollbar-track{background:transparent}

/* spinner */
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
.spinner.dark{border-color:rgba(0,0,0,.15);border-top-color:var(--brand)}
@keyframes spin{to{transform:rotate(360deg)}}

/* modal */
.modal-overlay{position:fixed; inset:0; background:rgba(17,24,39,.45); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px}
.modal{background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-pop); width:100%; max-width:440px; overflow:hidden}
.modal-head{padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between}
.modal-head h3{font-size:16px; font-weight:600}
.modal-body{padding:22px}
.modal-foot{padding:14px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--r-sm); background:transparent; border:none; color:var(--text-2); transition:var(--t)}
.icon-btn:hover{background:var(--surface-0); color:var(--text)}

.brand-mark{display:flex; align-items:center; gap:10px; font-weight:600; font-size:20px; color:var(--text)}
.brand-mark img{height:30px}
.online-dot{width:9px;height:9px;border-radius:50%;background:var(--online);border:2px solid #fff;display:inline-block}

[hidden]{display:none !important}