/* 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}

/* ===== SMTP settings form (account + workspace) ===== */
.smtp-cards{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.smtp-card{width:84px;border:1px solid #E5E7EB;border-radius:10px;padding:12px 6px;text-align:center;cursor:pointer;transition:all .12s}
.smtp-card:hover{border-color:#9CA3AF}
.smtp-card.sel{border:2px solid #000;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.smtp-card-ic{font-size:24px;line-height:1}
.smtp-card-nm{font-size:12px;font-weight:500;margin-top:6px;color:#374151}
.smtp-help{font-size:13px;color:#6B7280;background:#F9FAFB;border:1px solid #F3F4F6;border-radius:8px;padding:10px 12px;margin-bottom:14px;line-height:1.5}
.smtp-help:empty{display:none}
.smtp-help a{color:#4F46E5}
.smtp-field{margin-bottom:14px}
.smtp-field label{display:block;font-size:13px;font-weight:500;color:#374151;margin-bottom:6px}
.smtp-field .rq{color:#DC2626}
.smtp-input{width:100%;height:42px;border:1px solid #E5E7EB;border-radius:8px;background:#F9FAFB;font-size:14px;padding:0 12px;outline:none;box-sizing:border-box;font-family:inherit}
.smtp-input:focus{border-color:#000;background:#fff}
.smtp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.smtp-actions{display:flex;align-items:center;gap:10px;margin-top:8px}
.smtp-btn{background:#000;color:#fff;border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit}
.smtp-btn:hover{background:#1a1a1a}
.smtp-btn.outline{background:#fff;color:#374151;border:1px solid #E5E7EB}
.smtp-btn.outline:hover{border-color:#000;color:#000}
.smtp-msg{font-size:13px}
.smtp-ok{color:#059669}.smtp-bad{color:#DC2626}.smtp-muted{color:#9CA3AF}
.smtp-status{margin-top:12px;font-size:13px}
.smtp-modechoice{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.smtp-radio{display:flex;align-items:center;gap:8px;font-size:14px;color:#374151;cursor:pointer}
.smtp-nosmtp{margin-top:18px;padding:14px;border:1px dashed #D1D5DB;border-radius:10px;font-size:13px;color:#6B7280;line-height:1.5}
@media(max-width:600px){.smtp-grid{grid-template-columns:1fr}}
.smtp-hint{font-size:12px;color:#9CA3AF;margin-top:5px}
.smtp-pwwrap{position:relative}
.smtp-pwwrap .smtp-input{padding-right:42px}
.smtp-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:16px;line-height:1;padding:4px;opacity:.7}
.smtp-eye:hover{opacity:1}

/* === MOBILE RESPONSIVE (Phase 1) === */
/* Touch niceties — all viewports (native-feel for Flutter WebView wrapper) */
a, button, input, select, textarea, .btn, .otp-box, [role="button"]{
  -webkit-tap-highlight-color: rgba(79,70,229,.15);
  touch-action: manipulation;
}
html, body{ max-width:100%; }
@media (max-width:767px){
  html, body{ overflow-x:hidden; }
  /* 16px+ inputs prevent iOS/Android focus auto-zoom */
  input, select, textarea, .input{ font-size:16px; }
  /* comfortable tap targets + full-width primary actions */
  .btn, button{ min-height:44px; }
  .btn-block{ width:100%; }
}
/* don't let hover states stick on touch devices */
@media (hover:none){
  .btn:hover, a:hover, .btn-google:hover{ }
}