/* ===== Base ===== */
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      background: var(--bg-deep);
      color: var(--text-body);
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      font-size: 14px;
      min-height: 100vh;
    }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; }

    /* ===== Layout ===== */
    .ftf-shell { display: flex; min-height: calc(100vh - 60px); }
    
    /* ===== Main content ===== */
    .ftf-main { flex: 1; padding: 24px 28px; min-width: 0; }
    .ftf-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
    .ftf-page-title-wrap { display: flex; align-items: flex-start; gap: 12px; }
    .ftf-page-title-icon {
      width: 40px; height: 40px; border-radius: 8px;
      background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2);
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .ftf-page-title { font-size: 22px; font-weight: 600; color: var(--text-strong); margin: 0 0 4px 0; letter-spacing: -0.01em; }
    .ftf-page-subtitle { font-size: 13px; color: var(--text-muted); margin: 0; }
    .ftf-page-actions { display: flex; gap: 10px; flex-shrink: 0; }
    .ftf-btn-ghost {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 14px;
      background: transparent; border: 1px solid var(--border-strong); border-radius: 6px;
      color: var(--text-body); font-size: 12px; font-weight: 500;
      cursor: pointer;
    }
    .ftf-btn-ghost:hover { background: var(--surface-tint-03); border-color: var(--border-hover); }
    .ftf-btn-primary {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 16px;
      background: linear-gradient(135deg, #16a34a, #15803d); border: 1px solid var(--success-action); border-radius: 6px;
      color: var(--text-on-accent); font-size: 12px; font-weight: 600;
      cursor: pointer;
      box-shadow: 0 0 16px rgba(34,197,94,0.18);
    }
    .ftf-btn-primary:hover { background: linear-gradient(135deg, var(--success-action), #16a34a); }
    .ftf-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }

    /* ===== Content grid ===== */
    .ftf-content { display: grid; grid-template-columns: 1fr 340px; gap: 18px; }
    @media (max-width: 1100px) { .ftf-content { grid-template-columns: 1fr; } }

    /* ===== KPI cards ===== */
    .ftf-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; grid-column: 1 / -1; }
    @media (max-width: 1280px) { .ftf-kpi-row { grid-template-columns: repeat(2, 1fr); } }
    .ftf-kpi {
      padding: 16px 18px;
      background: var(--bg-app); border: 1px solid var(--border-subtle); border-radius: 10px;
      position: relative; min-height: 110px;
      display: flex; flex-direction: column; justify-content: space-between;
    }
    .ftf-kpi-label { font-size: 10px; color: var(--text-muted-strong); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; }
    .ftf-kpi-icon { color: rgba(74,222,128,0.5); }
    .ftf-kpi-value { font-size: 30px; font-weight: 700; color: var(--text-strong); line-height: 1.1; font-family: 'JetBrains Mono', monospace; }
    .ftf-kpi-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    .ftf-kpi-mini-chart { height: 30px; margin-top: 6px; opacity: 0.55; }

    /* ===== Cards ===== */
    .ftf-card {
      background: var(--bg-app); border: 1px solid var(--border-subtle); border-radius: 10px;
      padding: 18px 20px; margin-bottom: 18px;
    }
    .ftf-card-title { font-size: 14px; font-weight: 600; color: var(--text-heading); margin: 0 0 16px 0; display: flex; align-items: center; justify-content: space-between; }
    .ftf-card-title-icon { color: var(--text-muted); cursor: pointer; }

    /* ===== Alerts table ===== */
    .ftf-alert-table { width: 100%; border-collapse: collapse; }
    .ftf-alert-table thead th {
      text-align: left; padding: 0 10px 10px 10px;
      font-size: 10px; color: var(--text-muted-strong); font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
      border-bottom: 1px solid var(--border-subtle);
    }
    .ftf-alert-table tbody td {
      padding: 14px 10px;
      border-bottom: 1px solid var(--border-subtle);
      font-size: 13px; color: var(--text-body); vertical-align: middle;
    }
    .ftf-alert-table tbody tr:last-child td { border-bottom: none; }
    .ftf-alert-cell-ticker { display: flex; align-items: center; gap: 10px; }
    .ftf-alert-logo {
      width: 28px; height: 28px; border-radius: 6px;
      background: linear-gradient(135deg, var(--bg-elevated), var(--bg-input));
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; color: var(--text-muted);
      flex-shrink: 0;
    }
    .ftf-alert-name { font-weight: 600; color: var(--text-heading); font-size: 13px; }
    .ftf-alert-tk { font-size: 11px; color: var(--text-muted-strong); font-family: 'JetBrains Mono', monospace; margin-top: 1px; }
    .ftf-alert-cond { font-size: 12px; color: var(--text-muted); }
    .ftf-alert-cond-val { color: var(--active); font-family: 'JetBrains Mono', monospace; font-weight: 600; display: block; margin-top: 2px; }
    
    /* LED toggle */
    .ftf-toggle {
      position: relative; display: inline-flex; align-items: center; gap: 8px;
      cursor: pointer;
    }
    .ftf-toggle-track {
      width: 38px; height: 20px; border-radius: 999px;
      background: var(--border-strong); border: 1px solid var(--border-subtle);
      position: relative; transition: background 0.18s;
    }
    .ftf-toggle-thumb {
      position: absolute; top: 1px; left: 1px;
      width: 16px; height: 16px; border-radius: 50%;
      background: var(--text-muted); transition: left 0.18s, background 0.18s;
    }
    .ftf-toggle.on .ftf-toggle-track { background: rgba(34,197,94,0.25); border-color: rgba(34,197,94,0.4); }
    .ftf-toggle.on .ftf-toggle-thumb { left: 19px; background: var(--active); box-shadow: 0 0 8px rgba(74,222,128,0.5); }
    .ftf-toggle-label { font-size: 12px; color: var(--text-muted); }
    .ftf-toggle.on .ftf-toggle-label { color: var(--active); font-weight: 600; }
    .ftf-toggle.disabled { opacity: 0.45; cursor: not-allowed; }
    
    /* Delivery icons */
    .ftf-delivery { display: inline-flex; gap: 6px; }
    .ftf-delivery-icon {
      width: 30px; height: 30px; border-radius: 6px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--surface-tint-02); border: 1px solid var(--border-subtle);
      color: var(--text-disabled); cursor: default;
    }
    .ftf-delivery-icon.active { color: var(--active); background: rgba(74,222,128,0.05); border-color: rgba(74,222,128,0.2); }
    
    .ftf-alert-time { font-size: 12px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
    .ftf-row-menu {
      width: 24px; height: 24px; border-radius: 4px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--text-muted-strong); cursor: pointer; background: transparent; border: none;
    }
    .ftf-row-menu:hover { background: var(--surface-tint-05); color: var(--text-soft); }

    /* + Create New Alert big dashed card */
    .ftf-create-alert {
      margin-top: 6px;
      padding: 18px;
      border: 1.5px dashed var(--border-strong); border-radius: 8px;
      background: var(--surface-tint-01);
      text-align: center;
      color: var(--active); font-size: 13px; font-weight: 500;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .ftf-create-alert:hover { background: rgba(74,222,128,0.03); border-color: rgba(74,222,128,0.3); }
    .ftf-create-alert.disabled { color: var(--text-disabled); cursor: not-allowed; border-style: dashed; }
    .ftf-create-alert.disabled:hover { background: var(--surface-tint-01); border-color: var(--border-strong); }

    /* ===== Right column ===== */
    .ftf-right-col { display: flex; flex-direction: column; gap: 18px; }
    
    .ftf-pref-row {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 12px; padding: 12px 0;
      border-bottom: 1px solid var(--border-subtle);
    }
    .ftf-pref-row:last-of-type { border-bottom: none; }
    .ftf-pref-icon {
      width: 32px; height: 32px; border-radius: 6px;
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .ftf-pref-icon.bell { background: rgba(74,222,128,0.1); color: var(--active); }
    .ftf-pref-icon.mail { background: var(--accent-muted-10); color: var(--info); }
    .ftf-pref-icon.sms { background: rgba(168,85,247,0.1); color: #c084fc; }
    .ftf-pref-icon.moon { background: rgba(245,158,11,0.1); color: #fbbf24; }
    .ftf-pref-icon.clock { background: rgba(74,222,128,0.1); color: var(--active); }
    .ftf-pref-icon.bulb { background: rgba(250,204,21,0.1); color: var(--warning-bright); }
    .ftf-pref-text { flex: 1; min-width: 0; }
    .ftf-pref-title { font-size: 13px; color: var(--text-heading); font-weight: 500; margin: 0 0 2px 0; }
    .ftf-pref-sub { font-size: 11px; color: var(--text-muted); margin: 0; }
    
    .ftf-time-pickers { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
    .ftf-time-picker { padding: 6px 8px; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 5px; color: var(--text-heading); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
    
    .ftf-slider {
      -webkit-appearance: none; appearance: none;
      width: 100%; height: 4px;
      background: linear-gradient(90deg, var(--active) 0%, var(--active) 60%, var(--border-strong) 60%, var(--border-strong) 100%);
      border-radius: 999px;
      outline: none;
      margin: 12px 0;
    }
    .ftf-slider::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 16px; height: 16px; border-radius: 50%;
      background: var(--active); cursor: pointer;
      box-shadow: 0 0 8px rgba(74,222,128,0.6);
    }
    .ftf-cooldown-val { font-size: 12px; color: var(--active); font-weight: 600; text-align: right; font-family: 'JetBrains Mono', monospace; }
    
    .ftf-tips { background: rgba(250,204,21,0.04); border: 1px solid rgba(250,204,21,0.15); }
    .ftf-tips .ftf-pref-title { color: var(--warning-bright); }
    .ftf-tips .ftf-pref-sub { color: var(--text-muted); line-height: 1.45; }
    .ftf-tips-link { display: inline-block; margin-top: 8px; color: var(--warning-bright); font-size: 12px; font-weight: 600; }

    /* ===== Recent Alert History ===== */
    .ftf-history-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .ftf-history-table thead th {
      text-align: left; padding: 0 10px 10px 10px;
      font-size: 10px; color: var(--text-muted-strong); font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
      border-bottom: 1px solid var(--border-subtle);
    }
    .ftf-history-table tbody td {
      padding: 12px 10px; border-bottom: 1px solid var(--border-subtle);
      color: var(--text-body); vertical-align: middle;
    }
    .ftf-history-table tbody tr:last-child td { border-bottom: none; }
    .ftf-history-time { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
    .ftf-history-ticker { color: var(--text-heading); font-weight: 600; font-family: 'JetBrains Mono', monospace; }
    .ftf-history-msg { color: var(--text-body); font-size: 12px; }
    .ftf-status-delivered { color: var(--active); font-weight: 500; }
    .ftf-view-all {
      display: block; margin: 16px auto 0; padding: 8px 18px;
      background: transparent; border: 1px solid var(--border-strong); border-radius: 6px;
      color: var(--text-body); font-size: 12px; cursor: pointer;
    }
    .ftf-view-all:hover { border-color: var(--active); color: var(--active); }

    /* ===== Modal ===== */
    .ftf-modal-overlay {
      position: fixed; inset: 0; z-index: 100;
      background: var(--overlay); backdrop-filter: blur(4px);
      display: none; align-items: center; justify-content: center;
    }
    .ftf-modal-overlay.open { display: flex; }
    .ftf-modal {
      width: 440px; max-width: calc(100vw - 32px);
      background: var(--bg-modal-panel); border: 1px solid var(--border-strong); border-radius: 12px;
      padding: 24px; position: relative;
      box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    }
    .ftf-modal-close {
      position: absolute; top: 16px; right: 16px;
      width: 28px; height: 28px; border-radius: 6px;
      background: transparent; border: 1px solid var(--border-strong);
      color: var(--text-muted); font-size: 14px; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .ftf-modal-close:hover { color: var(--text-on-dark); border-color: var(--border-hover); }
    .ftf-modal h3 { margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: var(--text-strong); }
    .ftf-modal-sub { margin: 0 0 20px 0; font-size: 12px; color: var(--text-muted); }
    .ftf-field { margin-bottom: 14px; }
    .ftf-field label { display: block; font-size: 10px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; }
    .ftf-field input, .ftf-field select {
      width: 100%; padding: 10px 12px;
      background: var(--bg-app); border: 1px solid var(--border); border-radius: 6px;
      color: var(--text-heading); font-size: 13px; font-family: inherit;
    }
    .ftf-field input:focus, .ftf-field select:focus { outline: none; border-color: var(--border-strong); }
    .ftf-field input.mono { font-family: 'JetBrains Mono', monospace; }
    .ftf-field-hint { margin-top: 4px; font-size: 11px; color: var(--text-muted-strong); }
    .ftf-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
    .ftf-modal-error {
      margin-bottom: 14px; padding: 10px 12px;
      background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.25); border-radius: 6px;
      color: var(--danger-text); font-size: 12px;
      display: none;
    }
    .ftf-modal-error.show { display: block; }
    
    /* Empty state */
    .ftf-empty { text-align: center; padding: 36px 16px; color: var(--text-muted-strong); font-size: 13px; }
    .ftf-empty-icon { display: block; margin: 0 auto 12px; opacity: 0.4; }
    /* Category tabs (V2) */
    .ftf-alert-tabs { display: flex; gap: 4px; margin: 0 0 14px 0; border-bottom: 1px solid var(--border-subtle); padding-bottom: 0; }
    .ftf-alert-tab { background: transparent; border: none; padding: 8px 14px 10px; font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.12s; }
    .ftf-alert-tab:hover { color: var(--text-body); }
    .ftf-alert-tab.active { color: var(--active); border-bottom-color: var(--active); }
    .ftf-tab-count { display: inline-block; min-width: 18px; padding: 1px 6px; background: var(--surface-tint-06); border-radius: 999px; font-size: 10px; font-weight: 600; color: var(--text-muted); text-align: center; }
    .ftf-alert-tab.active .ftf-tab-count { background: rgba(74,222,128,0.15); color: var(--active); }
    .ftf-tab-soon { padding: 1px 5px; background: var(--surface-tint-04); border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-disabled); }
    .ftf-alert-coming-soon { text-align: center; padding: 32px 16px; color: var(--text-muted); }
    .ftf-alert-coming-soon-title { font-size: 14px; font-weight: 600; color: var(--text-body); margin: 8px 0 4px; }
    .ftf-alert-coming-soon-desc { font-size: 12px; line-height: 1.5; max-width: 420px; margin: 0 auto; }