/* ============================================================
   A DeZign Hub — Styles
   Edit this file to change layout, colors, component styles.
   Loaded by adezign-hub.html via <link rel="stylesheet">
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f8f9fb; --bg2:#ffffff; --bg3:#f1f3f5; --bg4:#e9ecef;
  --white:#1a1a2e; --gray1:#2d2d3f; --gray3:#4a4a5a; --gray5:#8b8fa3; --gray7:#c8ccd4; --gray8:#e2e5ea;
  --accent:#0a0a0a; --accent-dim:#222222; --blue:#333333;
  --gold:#d97706; --green:#16a34a; --red:#dc2626; --orange:#ea580c; --purple:#7c3aed;
  --font:'DM Sans',system-ui,sans-serif; --mono:'Space Mono',monospace;
  --radius:14px; --radius-sm:10px;
  --border:rgba(0,0,0,0.08); --border-light:rgba(0,0,0,0.04);
  --shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg:0 4px 16px rgba(0,0,0,0.08);
}
html,body{width:100%;height:100%;font-family:var(--font);background:var(--bg);color:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
.hidden{display:none!important}

/* ============================================================
   LOGIN
   ============================================================ */
.hub-login{min-height:100vh;display:flex;flex-direction:column;background:#0a0a0a}
.hub-login-hero{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 40px;position:relative}
.hub-login-container{display:grid;grid-template-columns:1fr 380px;gap:48px;max-width:960px;width:100%;align-items:center}
@media(max-width:768px){.hub-login-container{grid-template-columns:1fr;gap:24px;max-width:400px}}
.hub-login-pitch{color:#fff}
.hub-login-pitch h1{font-size:28px;font-weight:900;letter-spacing:-0.03em;margin:0 0 12px;line-height:1.15}
.hub-login-pitch h1 span{color:#fbbf24}
.hub-login-pitch p{font-size:13px;color:rgba(255,255,255,0.6);line-height:1.65;margin:0 0 20px}
.hub-login-features{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hub-login-feat{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.06)}
.hub-login-feat-icon{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hub-login-feat h4{font-size:12px;font-weight:700;color:#fff;margin:0 0 2px}
.hub-login-feat p{font-size:11px;color:rgba(255,255,255,0.45);line-height:1.4;margin:0}
.hub-login-card{background:#fff;border-radius:18px;padding:32px 28px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.hub-login-logo{margin-bottom:14px}
.hub-login-logo img{height:40px;width:auto}
.hub-login-title{font-size:20px;font-weight:800;margin-bottom:4px;color:#0a0a0a}
.hub-login-sub{font-size:12px;color:#6b7280;margin-bottom:20px;line-height:1.5}
.hub-login-input{width:100%;padding:12px 16px;border-radius:10px;border:1px solid #e5e7eb;background:#f9fafb;color:#111;font-size:14px;font-family:var(--font);outline:none;transition:border-color 0.2s;box-sizing:border-box}
.hub-login-input:focus{border-color:#0a0a0a;box-shadow:0 0 0 3px rgba(0,0,0,0.06);background:#fff}
.hub-login-btn{width:100%;padding:12px;border-radius:10px;border:none;background:#0a0a0a;color:#fff;font-size:14px;font-weight:700;cursor:pointer;margin-top:10px;transition:all 0.2s}
.hub-login-btn:hover{background:#222;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.15)}
.hub-login-error{color:#dc2626;font-size:12px;margin-top:10px;display:none}
.hub-login-help{font-size:11px;color:#9ca3af;margin-top:10px}
.hub-login-bottom{padding:12px 40px 16px;display:flex;align-items:center;justify-content:center;gap:24px;border-top:1px solid rgba(255,255,255,0.06)}
.hub-login-bottom-stat{text-align:center}
.hub-login-bottom-stat .num{font-size:20px;font-weight:900;color:#fbbf24}
.hub-login-bottom-stat .label{font-size:10px;color:rgba(255,255,255,0.35);text-transform:uppercase;letter-spacing:0.06em;margin-top:1px}
.hub-login-bottom-sep{width:1px;height:28px;background:rgba(255,255,255,0.08)}
.hub-login-bottom-text{font-size:11px;color:rgba(255,255,255,0.3)}
.hub-login-bottom-text a{color:rgba(255,255,255,0.5);text-decoration:none;font-weight:600}
.hub-login-bottom-text a:hover{color:#fff}

/* ============================================================
   MAIN SHELL
   ============================================================ */
.hub-shell{display:flex;min-height:100vh}
.hub-sidebar{width:260px;background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:50;transition:transform 0.3s}
.hub-sidebar-header{padding:20px 20px 16px;border-bottom:1px solid var(--border)}
.hub-sidebar-logo img{height:36px;width:auto}
.hub-sidebar-company{font-size:13px;font-weight:700;margin-top:10px;color:var(--white)}
.hub-sidebar-user{font-size:11px;color:var(--gray5);margin-top:2px}
.hub-sidebar-nav{flex:1;padding:12px 10px;overflow-y:auto}
.hub-nav-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:var(--gray3);cursor:pointer;transition:all 0.15s;margin-bottom:2px;position:relative}
.hub-nav-item:hover{background:rgba(0,0,0,0.03);color:var(--white)}
.hub-nav-item.active{background:rgba(0,0,0,0.06);color:var(--accent)}
.hub-nav-item .nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gray5)}
.hub-nav-item.active .nav-icon{color:var(--accent)}
.hub-nav-badge{position:absolute;right:10px;min-width:18px;height:18px;border-radius:9px;background:var(--red);color:var(--white);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
.hub-nav-section{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--gray7);padding:16px 14px 6px}
.hub-sidebar-footer{padding:14px 16px;border-top:1px solid var(--border)}
.hub-sidebar-streak{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-sm);background:rgba(217,119,6,0.06);border:1px solid rgba(217,119,6,0.15)}
.streak-fire{display:flex;align-items:center;color:#ff6b35}
.streak-info{flex:1}
.streak-count{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--gold)}
.streak-label{font-size:10px;color:var(--gray5);text-transform:uppercase;letter-spacing:0.08em}

.hub-main{flex:1;margin-left:260px;min-height:100vh}
.hub-topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,0.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:14px 28px;display:flex;align-items:center;justify-content:space-between}
.hub-topbar-title{font-size:18px;font-weight:800}
.hub-topbar-right{display:flex;align-items:center;gap:14px}
.hub-topbar-points{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;background:rgba(217,119,6,0.08);border:1px solid rgba(217,119,6,0.15);font-family:var(--mono);font-size:13px;font-weight:700;color:var(--gold)}
.hub-topbar-notif{width:36px;height:36px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:all 0.2s}
.hub-topbar-notif:hover{border-color:var(--accent);background:rgba(0,0,0,0.05)}
.hub-topbar-notif .notif-count{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--red);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.hub-mobile-toggle{display:none;width:36px;height:36px;border-radius:8px;background:var(--bg);border:1px solid var(--border);color:var(--white);font-size:18px;cursor:pointer;align-items:center;justify-content:center}
.hub-content{padding:28px}

/* ============================================================
   DASHBOARD CARDS
   ============================================================ */
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:28px}
.dash-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);transition:all 0.25s;position:relative;overflow:hidden}
.dash-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.dash-card-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--gray5);margin-bottom:8px}
.dash-card-val{font-family:var(--mono);font-size:36px;font-weight:700;line-height:1}
.dash-card-sub{font-size:12px;color:var(--gray5);margin-top:6px}
.dash-card-accent{color:var(--accent)}
.dash-card-gold{color:var(--gold)}
.dash-card-green{color:var(--green)}

/* Tier progress */
.tier-progress{margin-top:16px}
.tier-bar-track{height:6px;border-radius:3px;background:var(--bg4);overflow:hidden}
.tier-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--gold));transition:width 0.8s ease}
.tier-bar-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:var(--gray5)}

/* ============================================================
   WEEKLY STREAK
   ============================================================ */
.streak-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);margin-bottom:28px}
.streak-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.streak-title{font-size:16px;font-weight:800}
.streak-bonus{padding:5px 12px;border-radius:100px;background:rgba(217,119,6,0.06);border:1px solid rgba(217,119,6,0.12);font-size:12px;font-weight:700;color:var(--gold)}
.week-grid{display:flex;gap:6px;justify-content:center}
.week-day{width:44px;text-align:center}
.week-day-label{font-size:9px;color:var(--gray5);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:4px;font-weight:600}
.week-day-circle{width:38px;height:38px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:16px;margin:0 auto;transition:all 0.3s;position:relative}
.week-day-circle.checked{border-color:var(--green);background:rgba(40,200,64,0.1)}
.week-day-circle.checked::after{content:'✓';color:var(--green);font-weight:700;font-size:18px}
.week-day-circle.today{border-color:var(--accent);box-shadow:0 0 12px rgba(77,166,255,0.3)}
.week-day-circle.today.unchecked::after{content:'!';color:var(--accent);font-weight:700;font-size:16px}
.streak-msg{text-align:center;margin-top:16px;font-size:13px;color:var(--gray3)}
.streak-msg strong{color:var(--gold)}
.checkin-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:100px;border:none;background:var(--accent);color:#fff;font-size:14px;font-weight:700;cursor:pointer;margin-top:12px;transition:all 0.2s}
.checkin-btn:hover{background:var(--accent-dim);transform:translateY(-2px)}
.checkin-btn:disabled{opacity:0.4;cursor:default;transform:none}

/* ============================================================
   QUICK LAUNCH
   ============================================================ */
.launch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.launch-tile{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px 16px;box-shadow:var(--shadow);text-align:center;cursor:pointer;transition:all 0.25s;text-decoration:none;color:var(--white)}
.launch-tile:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.launch-icon{width:48px;height:48px;border-radius:12px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:var(--gray3)}
.launch-icon.blue{background:rgba(0,0,0,0.06);color:var(--accent)}
.launch-icon.green{background:rgba(22,163,74,0.08);color:var(--green)}
.launch-icon.gold{background:rgba(217,119,6,0.08);color:var(--gold)}
.launch-icon.purple{background:rgba(124,58,237,0.08);color:var(--purple)}
.launch-icon.orange{background:rgba(234,88,12,0.08);color:var(--orange)}
.launch-title{font-size:13px;font-weight:700}
.launch-sub{font-size:11px;color:var(--gray5);margin-top:4px}

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.notif-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);margin-bottom:28px}
.notif-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.notif-panel-title{font-size:16px;font-weight:800}
.notif-list{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto}
.notif-item{display:flex;gap:12px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--bg);border:1px solid var(--border-light);transition:all 0.2s}
.notif-item.unread{background:rgba(0,0,0,0.03);border-color:rgba(37,99,235,0.12)}
.notif-item:hover{background:var(--bg3)}
.notif-icon-wrap{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.notif-icon-wrap.blue{background:rgba(0,0,0,0.06);color:var(--accent)}
.notif-icon-wrap.gold{background:rgba(217,119,6,0.08);color:var(--gold)}
.notif-icon-wrap.green{background:rgba(22,163,74,0.08);color:var(--green)}
.notif-icon-wrap.red{background:rgba(220,38,38,0.08);color:var(--red)}
.notif-body{flex:1;min-width:0}
.notif-text{font-size:13px;color:var(--gray3);line-height:1.4}
.notif-text strong{color:var(--gray1)}
.notif-time{font-size:11px;color:var(--gray7);margin-top:4px}

/* ============================================================
   CAMPAIGNS SNAPSHOT
   ============================================================ */
.campaigns-snap{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:28px}
.camp-snap-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);transition:all 0.25s;cursor:pointer}
.camp-snap-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.camp-snap-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.camp-snap-name{font-size:14px;font-weight:700}
.camp-snap-status{padding:3px 10px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em}
.camp-snap-status.active{background:rgba(22,163,74,0.08);color:var(--green)}
.camp-snap-status.planned{background:rgba(0,0,0,0.06);color:var(--accent)}
.camp-snap-status.completed{background:rgba(217,119,6,0.08);color:var(--gold)}
.camp-snap-meta{font-size:12px;color:var(--gray5);line-height:1.5}
.camp-snap-roi{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--accent);margin-top:8px}

/* ── Pipeline stage pill (Hub campaign cards & dashboard rows) ── */
.hub-stage-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.05em;white-space:nowrap}
.hub-stage-pill .hub-stage-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.hub-stage-pill.stage-new_request{background:rgba(99,102,241,.1);color:#4f46e5}
.hub-stage-pill.stage-in_progress{background:rgba(37,99,235,.1);color:#1d4ed8}
.hub-stage-pill.stage-proof_sent{background:rgba(124,58,237,.1);color:#7c3aed}
.hub-stage-pill.stage-revision{background:rgba(245,158,11,.1);color:#d97706}
.hub-stage-pill.stage-approved{background:rgba(16,185,129,.1);color:#059669}
.hub-stage-pill.stage-in_production{background:rgba(6,182,212,.1);color:#0891b2}
.hub-stage-pill.stage-shipped{background:rgba(59,130,246,.1);color:#2563eb}
.hub-stage-pill.stage-complete{background:rgba(22,163,74,.1);color:#15803d}
.hub-stage-pill.stage-on_hold{background:rgba(156,163,175,.12);color:#6b7280}
.hub-stage-pill.stage-none{background:rgba(0,0,0,.05);color:var(--gray5)}

/* ── Campaign status row in card (two-line status block) ── */
.hub-camp-status-block{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}

/* ── Delete button on campaign card ── */
.hub-camp-delete-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:7px;border:1px solid rgba(220,38,38,.2);background:rgba(220,38,38,.05);color:#dc2626;font-size:10px;font-weight:700;cursor:pointer;transition:all .15s;font-family:var(--font)}
.hub-camp-delete-btn:hover{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.4)}
.hub-camp-delete-btn svg{flex-shrink:0}

/* ── Delete confirmation modal ── */
#hubDeleteCampModal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:blur(3px)}
#hubDeleteCampModal .modal-box{background:#fff;border-radius:16px;padding:28px;max-width:380px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.18);text-align:center}
#hubDeleteCampModal .modal-icon{width:48px;height:48px;border-radius:50%;background:rgba(220,38,38,.08);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
#hubDeleteCampModal h3{font-size:16px;font-weight:800;margin:0 0 6px;color:#0a0a0a}
#hubDeleteCampModal p{font-size:13px;color:#6b7280;margin:0 0 20px;line-height:1.55}
#hubDeleteCampModal .modal-btns{display:flex;gap:10px}
#hubDeleteCampModal .modal-btns button{flex:1;padding:11px;border-radius:10px;border:none;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .15s}
#hubDeleteCampModal .btn-cancel-del{background:#f3f4f6;color:#374151}
#hubDeleteCampModal .btn-cancel-del:hover{background:#e5e7eb}
#hubDeleteCampModal .btn-confirm-del{background:#dc2626;color:#fff}
#hubDeleteCampModal .btn-confirm-del:hover{background:#b91c1c}

/* ============================================================
   TEAM NOTES
   ============================================================ */
.notes-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:0;box-shadow:var(--shadow);margin-bottom:28px;overflow:hidden}
.msg-toolbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.msg-search{flex:1;min-width:180px;padding:8px 12px 8px 36px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--white);font-size:13px;font-family:var(--font);outline:none}
.msg-search:focus{border-color:var(--accent)}
.msg-search-wrap{position:relative;flex:1;min-width:180px}
.msg-search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--gray5)}
.msg-filters{display:flex;gap:4px;flex-wrap:wrap}
.msg-filter{padding:5px 12px;border-radius:100px;border:1px solid var(--border);background:transparent;color:var(--gray3);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.msg-filter:hover{border-color:var(--accent);color:var(--white)}
.msg-filter.active{background:var(--accent);border-color:var(--accent);color:#fff}
.msg-container{display:flex;height:calc(100vh - 200px);min-height:500px}
.msg-list-panel{width:380px;border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0}
.msg-detail-panel{flex:1;display:flex;flex-direction:column;overflow:hidden}
.msg-item{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-light);cursor:pointer;transition:background .12s;position:relative}
.msg-item:hover{background:var(--bg3)}
.msg-item.active{background:rgba(0,0,0,0.05);border-left:3px solid var(--accent)}
.msg-item.unread{background:var(--bg)}
.msg-item.unread .msg-item-sender{color:var(--white);font-weight:700}
.msg-item.unread .msg-item-preview{color:var(--gray3)}
.msg-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);position:absolute;top:18px;left:6px}
.msg-avatar{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;color:#fff}
.msg-avatar.team{background:#0a0a0a}
.msg-avatar.client{background:#059669}
.msg-item-content{flex:1;min-width:0;overflow:hidden}
.msg-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.msg-item-sender{font-size:13px;font-weight:500;color:var(--gray3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-item-time{font-size:10px;color:var(--gray5);white-space:nowrap;flex-shrink:0;margin-left:8px}
.msg-item-subject{font-size:12px;font-weight:600;color:var(--gray2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.msg-item-preview{font-size:11px;color:var(--gray5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-detail-header{padding:20px 24px;border-bottom:1px solid var(--border)}
.msg-detail-subject{font-size:18px;font-weight:800;color:var(--white);margin-bottom:8px}
.msg-detail-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--gray5)}
.msg-detail-sender{font-weight:700;color:var(--accent)}
.msg-detail-body{padding:24px;flex:1;overflow-y:auto}
.msg-detail-text{font-size:14px;line-height:1.8;color:var(--gray3);white-space:pre-wrap}
.msg-detail-empty{display:flex;align-items:center;justify-content:center;flex:1;color:var(--gray5);font-size:14px;text-align:center;padding:40px}
.msg-compose-bar{padding:16px 24px;border-top:1px solid var(--border);background:var(--bg)}
.msg-compose-row{display:flex;gap:8px}
.msg-compose-subject{width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--white);font-size:12px;font-family:var(--font);outline:none;margin-bottom:8px}
.msg-compose-subject:focus{border-color:var(--accent)}
.note-input{flex:1;padding:10px 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--white);font-size:13px;font-family:var(--font);outline:none;resize:none;min-height:44px;max-height:120px}
.note-input:focus{border-color:var(--accent)}
.note-send{padding:10px 20px;border-radius:8px;border:none;background:var(--accent);color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s;flex-shrink:0;align-self:flex-end}
.note-send:hover{background:var(--accent-dim)}
.msg-attach-btn{padding:8px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--gray3);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-end;transition:all 0.2s}
.msg-attach-btn:hover{background:var(--border);color:var(--text)}
.msg-file-preview{display:flex;gap:6px;flex-wrap:wrap;padding:4px 0}
.msg-file-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;background:rgba(0,0,0,0.06);color:var(--accent);font-size:11px;font-weight:600;border:1px solid rgba(0,0,0,0.1)}
.msg-file-chip .remove-file{cursor:pointer;color:var(--gray3);font-weight:800;margin-left:2px}
.msg-file-chip .remove-file:hover{color:#ef4444}
.msg-attachment-list{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.msg-attachment-link{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;background:rgba(0,0,0,0.05);border:1px solid rgba(37,99,235,0.12);color:var(--accent);font-size:12px;font-weight:600;text-decoration:none;transition:all 0.15s}
.msg-attachment-link:hover{background:rgba(37,99,235,0.12);border-color:rgba(37,99,235,0.25)}
.msg-compose-btn{position:fixed;bottom:28px;right:28px;width:52px;height:52px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow-lg);transition:all .2s;z-index:50}
.msg-compose-btn:hover{transform:scale(1.08);box-shadow:var(--shadow-lg)}
.msg-badge-count{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;background:var(--red);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff;padding:0 4px}
.msg-empty-list{padding:48px 24px;text-align:center;color:var(--gray5);font-size:13px}
.msg-new-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:9px;border:none;background:var(--accent);color:#fff;font-size:12px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .15s;white-space:nowrap;flex-shrink:0}
.msg-new-btn:hover{background:var(--accent-dim);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.msg-new-btn svg{flex-shrink:0}
.msg-compose-bar.composing-new .msg-compose-subject{border-color:var(--accent);background:rgba(0,0,0,0.02)}
.msg-reply-banner{display:flex;align-items:center;justify-content:space-between;padding:7px 14px;background:rgba(0,0,0,0.04);border-radius:8px;margin-bottom:8px;font-size:12px;color:var(--gray3)}
.msg-reply-banner strong{color:var(--accent)}
.msg-reply-banner button{background:none;border:none;cursor:pointer;color:var(--gray5);font-size:16px;line-height:1;padding:0 2px}
.msg-reply-banner button:hover{color:var(--red)}
@media(max-width:768px){
  .msg-container{flex-direction:column;height:auto;min-height:auto}
  .msg-list-panel{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:45vh;overflow-y:auto}
  .msg-detail-panel{min-height:300px}
  .msg-compose-btn{bottom:16px;right:16px;width:46px;height:46px}
}

/* ============================================================
   BADGES
   ============================================================ */
.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-bottom:28px}
.badge-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px 12px;text-align:center;transition:all 0.25s}
.badge-card:hover{transform:translateY(-2px)}
.badge-card.earned{border-color:rgba(255,215,64,0.2)}
.badge-card.locked{opacity:0.35}
.badge-icon{display:flex;align-items:center;justify-content:center;margin-bottom:8px;color:var(--accent)}
.badge-card.earned .badge-icon{color:var(--accent)}
.badge-card.locked .badge-icon{color:var(--gray8)}
.badge-name{font-size:11px;font-weight:700;color:var(--white)}
.badge-card.locked .badge-name{color:var(--gray7)}
.badge-req{font-size:9px;color:var(--gray5);margin-top:4px}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-title{font-size:16px;font-weight:800}
.section-action{font-size:12px;font-weight:600;color:var(--accent);cursor:pointer}

/* ============================================================
   CONFETTI OVERLAY
   ============================================================ */
.confetti-overlay{position:fixed;inset:0;z-index:9999;pointer-events:none;display:none}
.confetti-overlay.active{display:block}

/* ============================================================
   INSTALL BANNER
   ============================================================ */
.install-banner{background:linear-gradient(135deg,rgba(37,99,235,0.06),rgba(124,58,237,0.04));border:1px solid rgba(0,0,0,0.1);border-radius:var(--radius);padding:20px 24px;margin-bottom:28px;display:flex;align-items:center;gap:16px}
.install-banner-text{flex:1}
.install-banner-title{font-size:14px;font-weight:700;margin-bottom:4px}
.install-banner-sub{font-size:12px;color:var(--gray5)}
.install-banner-btn{padding:10px 20px;border-radius:100px;border:none;background:var(--accent);color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s;white-space:nowrap}
.install-banner-btn:hover{background:var(--accent-dim)}

/* ============================================================
   PAGES (non-dashboard views)
   ============================================================ */
.hub-page{display:none}
.hub-page.active{display:block}
.hub-back-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px 7px 11px;font-size:12.5px;font-weight:600;font-family:inherit;color:#4a4a4a;background:#fff;border:1px solid rgba(0,0,0,0.1);border-radius:7px;cursor:pointer;margin-bottom:14px;line-height:1;letter-spacing:-0.005em;transition:all .15s}
.hub-back-btn:hover{background:rgba(0,0,0,0.035);border-color:rgba(0,0,0,0.2);color:#0a0a0a}
.hub-back-btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ============================================================
   ANIMATIONS
   ============================================================ */
/* Install Welcome Popup */
.install-popup-overlay{display:none;position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.7);align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.install-popup-overlay.show{display:flex}
.install-popup{background:#fff;border:1px solid var(--border);border-radius:20px;padding:36px 32px;max-width:420px;width:90%;text-align:center}
.install-popup-icon{width:72px;height:72px;border-radius:18px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.06)}
.install-popup-icon img{width:48px;height:48px;border-radius:10px}
.install-popup h2{font-size:20px;font-weight:800;color:#111;margin:0 0 8px}
.install-popup p{font-size:13px;color:var(--gray5);line-height:1.7;margin:0 0 20px}
.install-popup-features{display:flex;flex-direction:column;gap:10px;text-align:left;margin-bottom:24px}
.install-popup-feat{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--gray3);font-weight:500}
.install-popup-feat-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);background:rgba(77,166,255,0.08)}
.install-popup-actions{display:flex;flex-direction:column;gap:8px}
.install-popup-install{padding:14px 24px;border-radius:100px;border:none;background:var(--accent);color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.2s}
.install-popup-install:hover{background:#fff}
.install-popup-later{padding:10px;border:none;background:transparent;color:var(--gray7);font-size:12px;cursor:pointer}
.install-popup-later:hover{color:#fff}
.admin-toggle{margin-top:16px;font-size:12px;color:#94a3b8;cursor:pointer}
.admin-toggle:hover{color:#0a0a0a}
.admin-fields{display:none;margin-top:12px}
.admin-fields.show{display:block}
.hub-login-pw{width:100%;padding:14px 20px;border-radius:14px;border:1px solid #e2e8f0;background:#f8fafc;font-size:15px;outline:none;margin-bottom:12px;font-family:inherit}
.hub-login-pw:focus{border-color:#0a0a0a;box-shadow:0 0 0 3px rgba(0,0,0,0.08)}
.settings-section{background:var(--bg);border:1px solid var(--border);border-radius:14px;padding:24px;margin-bottom:20px}

/* ============================================================
   PORTAL STYLES (merged from Client Portal)
   ============================================================ */
:root{
  --bf-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  --bf-primary:#0a0a0a;--bf-primary-600:#222222;--bf-primary-100:#f0f0f0;
  --bf-page:#f8fafc;--bf-card:#ffffff;--bf-text:#0f172a;--bf-muted:#64748b;
  --bf-border:#cbd5e1;--bf-border-light:#e2e8f0;--bf-ring:#888888;--bf-section:#f1f5f9;
  --accent:#0a0a0a;--danger:#ef4444;--warning:#f59e0b;--purple:#8b5cf6;--gold:#eab308
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100vh;background:var(--bf-page);color:var(--bf-text);font-family:var(--bf-font)}
a{color:#0a0a0a;text-decoration:none;font-weight:600}

/* Login Screen */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#0a0a0a 0%,#1a1a2e 50%,#16213e 100%)}
.login-card{background:#fff;border-radius:20px;padding:40px;max-width:480px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.login-logo{width:64px;height:64px;border-radius:16px;background:#0a0a0a;margin:0 auto 20px;display:flex;align-items:center;justify-content:center}
.login-title{text-align:center;font-size:24px;font-weight:800;margin-bottom:8px}
.login-subtitle{text-align:center;color:var(--bf-muted);margin-bottom:28px;font-size:14px}
.login-input{width:100%;padding:14px 16px;border:2px solid var(--bf-border);border-radius:12px;font-size:16px;outline:none}
.login-input:focus{border-color:var(--bf-primary);box-shadow:0 0 0 4px var(--bf-ring)}
.login-btn{width:100%;padding:14px;background:var(--bf-primary);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;margin-top:16px}
.login-btn:hover{background:var(--bf-primary-600)}
.login-error{background:#fee2e2;color:#991b1b;padding:12px;border-radius:10px;margin-top:16px;font-size:14px;text-align:center;display:none}
.login-error.show{display:block}

/* Company Picker */
.company-picker-list{display:flex;flex-direction:column;gap:8px;margin-top:16px;max-height:320px;overflow-y:auto}
.company-pick-btn{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:16px 18px;
  background:#fff;
  border:2px solid var(--bf-border);
  border-radius:14px;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  transition:all 0.15s;
}
.company-pick-btn:hover{border-color:var(--bf-primary);background:var(--bf-primary-100);transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,0.12)}
.company-pick-icon{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;color:#fff;flex-shrink:0;
}
.company-pick-name{font-size:15px;font-weight:700;color:var(--bf-text)}
.company-pick-role{font-size:12px;color:var(--bf-muted);margin-top:2px}
.company-pick-arrow{margin-left:auto;color:var(--bf-muted);flex-shrink:0}
.login-back-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:12px;margin-top:16px;
  background:transparent;border:1px solid var(--bf-border);border-radius:10px;
  color:var(--bf-muted);font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all 0.15s;
}
.login-back-btn:hover{background:var(--bf-section);color:var(--bf-text)}

/* Registration Form */
.reg-form{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.reg-field{display:flex;flex-direction:column;gap:4px}
.reg-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--bf-muted);margin:0}
.reg-company-matches{
  border:1px solid var(--bf-border);border-radius:10px;
  max-height:180px;overflow-y:auto;background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.reg-company-matches.hidden{display:none}
.reg-match-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--bf-border-light);
  transition:background 0.1s;
}
.reg-match-item:last-child{border-bottom:none}
.reg-match-item:hover{background:var(--bf-primary-100)}
.reg-match-icon{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#fff;flex-shrink:0;
}
.reg-match-name{font-weight:700;font-size:13px}
.reg-match-meta{font-size:11px;color:var(--bf-muted)}
.reg-new-option{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;cursor:pointer;background:var(--bf-section);
  border-radius:0 0 10px 10px;font-weight:700;font-size:13px;color:var(--bf-primary);
}
.reg-new-option:hover{background:var(--bf-primary-100)}
.reg-join-box{
  display:flex;align-items:center;gap:12px;
  padding:14px;border:2px solid #059669;border-radius:12px;
  background:#f0fdf4;position:relative;
}
.reg-join-box.hidden{display:none}
.reg-join-icon{flex-shrink:0}
.reg-join-title{font-weight:700;font-size:14px;color:#065f46}
.reg-join-desc{font-size:12px;color:#047857}
.reg-join-clear{
  position:absolute;top:8px;right:10px;
  background:none;border:none;font-size:18px;color:#64748b;cursor:pointer;
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.reg-join-clear:hover{background:#e2e8f0}
.reg-new-header{
  display:flex;align-items:center;gap:8px;
  font-weight:700;font-size:13px;color:var(--bf-primary);
  padding:12px 0 4px;border-top:1px solid var(--bf-border-light);margin-top:4px;
}
.reg-success{
  display:flex;align-items:center;gap:10px;
  padding:14px;border-radius:10px;
  background:#f0fdf4;border:1px solid #86efac;
  color:#065f46;font-weight:600;font-size:14px;margin-top:12px;
}
.reg-success.hidden{display:none}

/* Header */
.bf-header{position:sticky;top:0;z-index:40;background:#ffffffee;backdrop-filter:blur(8px);border-bottom:1px solid var(--bf-border)}
.bf-wrap{max-width:1600px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bf-brand{display:flex;align-items:center;gap:10px}
.bf-logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--bf-primary),#7c3aed);display:flex;align-items:center;justify-content:center}
.bf-logo svg{width:20px;height:20px;fill:#fff}
.bf-title{font-weight:800}
.bf-sub{font-size:12px;color:var(--bf-muted)}
.user-info{display:flex;align-items:center;gap:16px}
.user-name{font-weight:700;font-size:14px}
.user-company{font-size:12px;color:var(--bf-muted)}
.logout-btn{background:var(--bf-section);border:1px solid var(--bf-border);padding:8px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer}

/* Navigation */
.nav-tabs{display:flex;gap:4px;flex-wrap:nowrap;background:var(--bf-section);padding:8px;border-radius:12px;margin:12px 20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav-tab{padding:10px 16px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;border:none;background:transparent;color:var(--bf-muted);display:flex;align-items:center;gap:6px}
.nav-tab:hover{background:#fff;color:var(--bf-text)}
.nav-tab.active{background:#fff;color:var(--bf-primary);box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.nav-tab svg{width:16px;height:16px;fill:currentColor}

/* Layout */
.bf-main{max-width:1600px;margin:0 auto;padding:0 20px 60px}
.hidden{display:none !important}
.bf-card{background:var(--bf-card);border:1px solid var(--bf-border);border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,0.04);padding:20px;margin-bottom:16px}
.bf-card h2{margin:0 0 4px;font-size:18px}
.bf-card h3{margin:0 0 12px;font-size:16px}
.small{font-size:12px;color:var(--bf-muted)}
.row{display:grid;gap:12px}
@media(min-width:900px){.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}.cols-5{grid-template-columns:repeat(5,1fr)}}
.tab-content{display:none}
.tab-content.active{display:block}

/* Forms */
label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--bf-muted);margin-bottom:6px}
.bf-input,select.bf-input,textarea.bf-input{width:100%;box-sizing:border-box;background:#fff;color:var(--bf-text);border:1px solid #94a3b8;border-radius:10px;padding:10px 12px;outline:none;font-size:14px;font-family:inherit}
.bf-input:focus{border-color:var(--bf-primary);box-shadow:0 0 0 3px var(--bf-ring)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--bf-border);background:var(--bf-section);color:var(--bf-text);padding:10px 16px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;transition:all 0.15s}
.btn:hover{background:#e2e8f0}
.btn.primary{background:var(--bf-primary);border-color:var(--bf-primary);color:#fff}
.btn.primary:hover{background:var(--bf-primary-600)}
.btn.success{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.purple{background:var(--purple);border-color:var(--purple);color:#fff}
.btn.gold{background:linear-gradient(135deg,#eab308,#ca8a04);border-color:#ca8a04;color:#fff}
.btn.sm{padding:6px 12px;font-size:12px}
.btn.lg{padding:14px 24px;font-size:15px}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn svg{width:14px;height:14px;fill:currentColor}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;background:var(--bf-section);color:var(--bf-muted)}
.badge.blue{background:#f0f0f0;color:#1e40af}
.badge.green{background:#dcfce7;color:#166534}
.badge.yellow{background:#fef3c7;color:#92400e}
.badge.red{background:#fee2e2;color:#991b1b}
.badge.purple{background:#f3e8ff;color:#7c3aed}
.badge.gold{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;border:1px solid #fcd34d}

/* Mode Selector */
.mode-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px;margin-bottom:24px}
.mode-card{border:2px solid var(--border,rgba(0,0,0,0.08));border-radius:14px;padding:22px 20px;cursor:pointer;transition:all 0.18s;background:var(--bg2,#fff);position:relative;overflow:hidden}
.mode-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.mode-card.selected{border-color:var(--accent);background:var(--bg2,#fff);box-shadow:0 8px 24px rgba(0,0,0,0.06)}
.mode-card.advanced{border-color:var(--border,rgba(0,0,0,0.08))}
.mode-card.advanced:hover{border-color:var(--accent)}
.mode-card.advanced.selected{border-color:var(--accent);background:var(--bg2,#fff)}
.mode-icon{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:rgba(0,0,0,0.04)}
.mode-card.basic .mode-icon{background:rgba(0,0,0,0.04)}
.mode-card.advanced .mode-icon{background:rgba(0,0,0,0.04)}
.mode-title{font-size:17px;font-weight:800;margin-bottom:4px;color:var(--accent);letter-spacing:-0.01em}
.mode-subtitle{font-size:12.5px;color:var(--gray5,#8b8fa3);margin-bottom:14px;line-height:1.45}
.mode-points{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(0,0,0,0.05);color:var(--accent);border:1px solid rgba(0,0,0,0.08)}
.mode-card.basic .mode-points{background:rgba(0,0,0,0.05);color:var(--accent)}
.mode-card.advanced .mode-points{background:rgba(0,0,0,0.05);color:var(--accent)}
.mode-features{margin-top:18px;padding-top:16px;border-top:1px solid var(--border,rgba(0,0,0,0.08))}
.mode-feature{display:flex;align-items:center;gap:10px;font-size:12.5px;margin-bottom:9px;color:var(--accent)}
.mode-feature svg{width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:2;flex-shrink:0}
.mode-ribbon{position:absolute;top:16px;right:-35px;background:linear-gradient(135deg,#eab308,#ca8a04);color:#fff;padding:6px 45px;font-size:10px;font-weight:700;transform:rotate(45deg);text-transform:uppercase;letter-spacing:0.5px}

/* Detail Tabs */
.detail-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--bf-border);padding-bottom:12px}
.detail-tab{padding:10px 16px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;border:none;background:transparent;color:var(--bf-muted);display:flex;align-items:center;gap:6px;transition:all 0.15s}
.detail-tab:hover{background:var(--bf-section)}
.detail-tab.active{background:var(--bf-primary);color:#fff}
.detail-tab.gold{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e}
.detail-tab.gold.active{background:linear-gradient(135deg,#eab308,#ca8a04);color:#fff}
.step-num{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.detail-content{display:none}
.detail-content.active{display:block}

/* Tables */
.table-wrap{overflow-x:auto;border:1px solid var(--bf-border);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{background:var(--bf-section);padding:10px 12px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--bf-muted)}
td{padding:10px 12px;border-top:1px solid var(--bf-border-light)}
tr:hover{background:#f8fafc}

/* Stats */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.stat-card{background:#fff;border:1px solid var(--bf-border);border-radius:12px;padding:16px;text-align:center}
.stat-value{font-size:28px;font-weight:800;color:var(--bf-primary)}
.stat-label{font-size:11px;color:var(--bf-muted);text-transform:uppercase;margin-top:4px}

/* Empty State */
.empty-state{text-align:center;padding:40px 20px;color:var(--bf-muted)}
.empty-state-icon{font-size:48px;margin-bottom:12px;opacity:0.5}
.empty-state-title{font-size:16px;font-weight:700;color:var(--bf-text);margin-bottom:4px}

/* KPI Styles */
.kpi-category{margin-bottom:20px}
.kpi-category-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.kpi-item{padding:12px;border:1px solid var(--bf-border);border-radius:10px;cursor:pointer;transition:all 0.15s;background:#fff}
.kpi-item:hover{border-color:var(--bf-primary);background:#f8fafc}
.kpi-item.selected{border-color:var(--bf-primary);background:var(--bf-primary-100)}

/* Budget Tracker */
.budget-tracker{padding:16px 20px;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:2px solid #86efac;border-radius:12px;margin-bottom:16px}

/* Toast */
.toast{position:fixed;bottom:24px;right:24px;background:#1e293b;color:#fff;padding:14px 20px;border-radius:10px;font-weight:600;font-size:14px;z-index:9999;animation:slideIn 0.3s ease}
@keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Modal */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal-content{background:#fff;border-radius:16px;max-width:800px;width:100%;max-height:90vh;overflow-y:auto}
.modal-header{padding:20px;border-bottom:1px solid var(--bf-border);display:flex;justify-content:space-between;align-items:center}
.modal-body{padding:20px}
.modal-close{background:none;border:none;font-size:28px;cursor:pointer;color:var(--bf-muted)}

/* ============================================================
   UNIFIED HUB OVERRIDES (merged)
   ============================================================ */
/* ============================================================
   UNIFIED HUB OVERRIDES
   ============================================================ */

/* Portal content inside hub pages */
.hub-page .bf-card {
  background: var(--bg2, #ffffff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,0.06));
  padding: 20px;
  margin-bottom: 16px;
}
.hub-page .bf-main { max-width: 100%; padding: 0; }
.hub-page .nav-tabs { display: none; } /* hide portal nav - using sidebar */
.hub-page .bf-header { display: none; } /* hide portal header - using hub topbar */

/* Mode selector - Basic first, Advanced as small option */
.mode-selector-basic-first {
  max-width: 680px;
  margin: 0 auto;
}
.mode-selector-basic-first .mode-card.basic {
  border: 2px solid var(--accent, #0a0a0a);
  background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
}
.advanced-toggle-link {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--gray5, #666);
  cursor: pointer;
  padding: 12px;
  border-radius: 10px;
  transition: all 0.2s;
}
.advanced-toggle-link:hover {
  color: #0a0a0a; font-weight:700;
  background: rgba(217,119,6,0.04);
}
.advanced-mode-section {
  display: none;
  animation: fadeInUp 0.3s ease;
}
.advanced-mode-section.visible {
  display: block;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Campaign editor detail tabs inside hub */
.hub-page .detail-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
  padding-bottom: 12px;
}

/* Table styles inside hub */
.hub-page table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hub-page th { background: var(--bg3, #f1f3f5); padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--gray5, #666); }
.hub-page td { padding: 10px 12px; border-top: 1px solid var(--border-light, rgba(0,0,0,0.04)); }
.hub-page tr:hover { background: var(--bg, #f8f9fb); }

/* Stat cards inside hub */
.hub-page .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.hub-page .stat-card { background: var(--bg2, #fff); border: 1px solid var(--border, rgba(0,0,0,0.08)); border-radius: 12px; padding: 16px; text-align: center; }
.hub-page .stat-value { font-size: 28px; font-weight: 800; color: var(--accent, #0a0a0a); }
.hub-page .stat-label { font-size: 11px; color: var(--gray5, #666); text-transform: uppercase; margin-top: 4px; }

/* Form styles inside hub */
.hub-page .bf-input, .hub-page select.bf-input, .hub-page textarea.bf-input {
  width: 100%; box-sizing: border-box; background: var(--bg2, #fff); color: var(--white, #1a1a2e);
  border: 1px solid var(--border, rgba(0,0,0,0.08)); border-radius: 10px; padding: 10px 12px;
  outline: none; font-size: 14px; font-family: var(--font);
}
.hub-page .bf-input:focus { border-color: var(--accent, #0a0a0a); box-shadow: 0 0 0 3px rgba(0,0,0,0.1); }

/* Button styles inside hub */
.hub-page .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border, rgba(0,0,0,0.08)); background: var(--bg3, #f1f3f5);
  color: var(--white, #1a1a2e); padding: 10px 16px; border-radius: 10px;
  font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; transition: all 0.15s;
  font-family: var(--font);
}
.hub-page .btn:hover { background: var(--bg4, #e9ecef); }
.hub-page .btn.primary { background: var(--accent, #0a0a0a); border-color: var(--accent); color: #fff; }
.hub-page .btn.primary:hover { background: var(--accent-dim, #1d4ed8); }
.hub-page .btn.success { background: var(--green, #16a34a); border-color: var(--green); color: #fff; }
.hub-page .btn.danger { background: var(--red, #dc2626); border-color: var(--red); color: #fff; }
.hub-page .btn.purple { background: var(--purple, #7c3aed); border-color: var(--purple); color: #fff; }
.hub-page .btn.gold { background: linear-gradient(135deg,#eab308,#ca8a04); border-color: #ca8a04; color: #fff; }
.hub-page .btn.sm { padding: 6px 12px; font-size: 12px; }
.hub-page .btn.lg { padding: 14px 24px; font-size: 15px; }
.hub-page .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Badge styles */
.hub-page .badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.hub-page .badge.blue { background: #f0f0f0; color: #1e40af; }
.hub-page .badge.green { background: #dcfce7; color: #166534; }
.hub-page .badge.yellow { background: #fef3c7; color: #92400e; }
.hub-page .badge.red { background: #fee2e2; color: #991b1b; }
.hub-page .badge.purple { background: #f3e8ff; color: #7c3aed; }

/* Empty state */
.hub-page .empty-state { text-align: center; padding: 40px 20px; color: var(--gray5, #666); }

/* Registration form styles */
.hub-reg-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.hub-reg-field { display: flex; flex-direction: column; gap: 4px; }
.hub-reg-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray5, #666); margin: 0; }

/* Portal rows and columns */
.hub-page .row { display: grid; gap: 12px; }
@media(min-width:900px) {
  .hub-page .cols-2 { grid-template-columns: repeat(2,1fr); }
  .hub-page .cols-3 { grid-template-columns: repeat(3,1fr); }
  .hub-page .cols-4 { grid-template-columns: repeat(4,1fr); }
}
.hub-page label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray5, #666); margin-bottom: 6px; }
.hub-page .small { font-size: 12px; color: var(--gray5, #666); }

/* Detail tab styles */
.hub-page .detail-tab {
  padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 13px;
  cursor: pointer; border: none; background: transparent; color: var(--gray5, #666);
  display: flex; align-items: center; gap: 6px; transition: all 0.15s; font-family: var(--font);
}
.hub-page .detail-tab:hover { background: var(--bg3, #f1f3f5); }
.hub-page .detail-tab.active { background: var(--accent, #0a0a0a); color: #fff; }
.hub-page .detail-content { display: none; }
.hub-page .detail-content.active { display: block; }
.hub-page .step-num {
  width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}

/* KPI styles */
.hub-page .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 8px; }
.hub-page .kpi-item { padding: 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.15s; background: var(--bg2, #fff); }
.hub-page .kpi-item:hover { border-color: var(--accent); }
.hub-page .kpi-item.selected { border-color: var(--accent); background: rgba(37,99,235,0.06); }

/* Budget tracker */
.budget-track { margin-top: 16px; }
.budget-bar { height: 28px; border-radius: 14px; background: var(--bg3, #f1f3f5); overflow: hidden; position: relative; margin-bottom: 8px; }
.budget-fill { height: 100%; border-radius: 14px; transition: width 0.5s ease; position: relative; }

/* Mode card styles (re-scoped) */
.hub-page .mode-card { border: 2px solid var(--border, rgba(0,0,0,0.08)); border-radius: 14px; padding: 22px 20px; cursor: pointer; transition: all 0.18s; background: var(--bg2, #fff); position: relative; overflow: hidden; }
.hub-page .mode-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.hub-page .mode-card.selected { border-color: var(--accent); background: var(--bg2,#fff); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.hub-page .mode-icon { width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; background: rgba(0,0,0,0.04); }
.hub-page .mode-title { font-size: 17px; font-weight: 800; margin-bottom: 4px; color: var(--accent); letter-spacing: -0.01em; }
.hub-page .mode-subtitle { font-size: 12.5px; color: var(--gray5); margin-bottom: 14px; line-height: 1.45; }
.hub-page .mode-points { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(0,0,0,0.05); color: var(--accent); border: 1px solid rgba(0,0,0,0.08); }
.hub-page .mode-features { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.hub-page .mode-feature { display: flex; align-items: center; gap: 10px; font-size: 12.5px; margin-bottom: 9px; color: var(--accent); }
.hub-page .mode-feature svg { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 2; flex-shrink: 0; }

/* Toast */
.hub-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.hub-toast { padding: 14px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #fff; animation: toastIn 0.3s ease; box-shadow: 0 4px 16px rgba(0,0,0,0.15); max-width: 400px; }
.hub-toast.success { background: var(--green, #16a34a); }
.hub-toast.error { background: var(--red, #dc2626); }
.hub-toast.info { background: var(--accent, #0a0a0a); }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
/* Plan Ahead Card */
.plan-ahead-card{cursor:pointer;transition:all 0.2s}
.plan-ahead-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}

/* Quick Chat Bar */
.quick-chat{position:fixed;bottom:0;right:0;width:360px;z-index:190;font-family:var(--font);transition:all .2s}
.quick-chat.shifted{right:24px;bottom:24px}
.quick-chat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#0a0a0a;color:#fff;cursor:pointer;border-radius:12px 12px 0 0;user-select:none}
.quick-chat-header .qc-title{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}
.quick-chat-header .qc-status{width:7px;height:7px;border-radius:50%;background:#10b981;flex-shrink:0}
.quick-chat-header .qc-badge{background:#ef4444;color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:10px;display:none}
.quick-chat-body{display:none;background:#fff;border:1px solid #e5e7eb;border-top:none;border-radius:0 0 12px 12px;box-shadow:0 -4px 24px rgba(0,0,0,0.08);max-height:420px;display:flex;flex-direction:column}
.quick-chat.open .quick-chat-body{display:flex}
.quick-chat:not(.open) .quick-chat-body{display:none}
.quick-chat-context{padding:8px 14px;background:#fef3c7;font-size:11px;color:#92400e;display:flex;align-items:center;gap:6px;border-bottom:1px solid #fde68a}
.quick-chat-context svg{flex-shrink:0}
.quick-chat-msgs{flex:1;overflow-y:auto;padding:12px 14px;max-height:260px;min-height:80px}
.quick-chat-msgs:empty::after{content:'Start a conversation — we usually reply within minutes.';display:block;text-align:center;color:#9ca3af;font-size:12px;padding:20px 0}
.qc-msg{margin-bottom:8px;max-width:85%}
.qc-msg.client{margin-left:auto;text-align:right}
.qc-msg.team{margin-right:auto}
.qc-msg-bubble{display:inline-block;padding:8px 12px;border-radius:12px;font-size:12px;line-height:1.5;text-align:left}
.qc-msg.client .qc-msg-bubble{background:#0a0a0a;color:#fff;border-bottom-right-radius:4px}
.qc-msg.team .qc-msg-bubble{background:#f3f4f6;color:#1f2937;border-bottom-left-radius:4px}
.qc-msg-meta{font-size:9px;color:#9ca3af;margin-top:2px}
.qc-msg-read{color:#10b981}
.qc-prompts{display:flex;flex-wrap:wrap;gap:5px;padding:8px 14px;border-top:1px solid #f3f4f6}
.qc-prompt{padding:5px 10px;border-radius:16px;border:1px solid #e5e7eb;background:#fafafa;font-size:11px;color:#374151;cursor:pointer;transition:all .12s;white-space:nowrap}
.qc-prompt:hover{background:#f0f0f0;border-color:#d1d5db}
.qc-compose{display:flex;align-items:flex-end;gap:6px;padding:10px 14px;border-top:1px solid #e5e7eb}
.qc-input{flex:1;border:1px solid #e5e7eb;border-radius:10px;padding:8px 12px;font-size:12px;font-family:var(--font);resize:none;outline:none;max-height:80px;line-height:1.4}
.qc-input:focus{border-color:#3b82f6}
.qc-send{width:34px;height:34px;border-radius:50%;border:none;background:#0a0a0a;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .12s}
.qc-send:hover{background:#1f2937}
.qc-typing{padding:4px 14px;font-size:10px;color:#9ca3af;font-style:italic;display:none}
.qc-typing.visible{display:block}

/* Wizard styles now injected by client-portal-wizard.js */

/* ============================================================
   DASHBOARD — HERO FOCUS LAYOUT
   ============================================================ */
.dash-hero-quad{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;background:var(--bg2);margin-bottom:18px}
.dash-hq-item{padding:22px 20px;border-right:1px solid var(--border);cursor:pointer;transition:all .2s;position:relative;overflow:hidden;text-decoration:none;color:inherit;display:block}
.dash-hq-item:last-child{border-right:none}
.dash-hq-item:hover{filter:brightness(0.96)}
.dash-hq-item.hq-dark{background:#0a0a0a;color:#fff}
.dash-hq-item.hq-dark:hover{background:#1a1a2e;filter:none}
.dash-hq-item.hq-gold{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e}
.dash-hq-item.hq-gold:hover{filter:brightness(0.97)}
.dash-hq-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;flex-shrink:0}
.dash-hq-icon.on-dark{background:rgba(255,255,255,0.1)}
.dash-hq-icon.on-light{background:rgba(0,0,0,0.06)}
.dash-hq-icon.on-gold{background:rgba(0,0,0,0.08)}
.dash-hq-num{font-family:var(--mono);font-size:32px;font-weight:700;line-height:1;margin-bottom:4px}
.dash-hq-lbl{font-size:12px;font-weight:700;margin-bottom:2px}
.dash-hq-sub{font-size:10px;opacity:.6}
.dash-hq-corner{position:absolute;right:-8px;bottom:-8px;opacity:.05;font-size:80px;line-height:1;pointer-events:none}

/* Lower two-col grid */
.dash-lower-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;margin-bottom:0}

/* Campaign list card — new list-style override */
.dash-camp-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.dash-camp-card-hd{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px}
.dash-camp-filters{display:flex;gap:5px}
.dcf-pill{padding:3px 10px;border-radius:5px;font-size:10px;font-weight:700;cursor:pointer;border:1px solid transparent;transition:all .12s}
.dcf-pill.dark{background:#0a0a0a;color:#fff}
.dcf-pill.gr{background:rgba(22,163,74,0.1);color:var(--green);border-color:rgba(22,163,74,0.2)}
.dcf-pill.mu{background:var(--bg3);color:var(--gray5)}
/* Override campaigns-snap inside the new card to render as rows */
.dash-camp-card #campaignsSnap{display:flex;flex-direction:column}
.dash-camp-card .camp-snap-card{border-radius:0;border:none;border-bottom:1px solid var(--border);box-shadow:none;padding:11px 18px;display:flex;align-items:center;gap:10px;transition:background .12s;cursor:pointer}
.dash-camp-card .camp-snap-card:last-child{border-bottom:none}
.dash-camp-card .camp-snap-card:hover{background:var(--bg3)}
.dash-camp-card .camp-snap-top{flex:1;display:flex;align-items:center;justify-content:space-between;margin-bottom:0;gap:8px;min-width:0}
.dash-camp-card .camp-snap-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-camp-card .camp-snap-status{flex-shrink:0}
.dash-camp-card .camp-snap-meta{font-size:11px;color:var(--gray5);white-space:nowrap;flex-shrink:0;margin-left:auto;padding-left:8px}
.dash-camp-card .camp-snap-roi{font-family:var(--mono);font-size:13px;font-weight:700;margin-top:0;margin-left:8px;flex-shrink:0}
.dash-camp-card-ft{padding:12px 18px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}

/* Projects panel */
.dash-proj-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.dash-proj-hd{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.dash-proj-body{flex:1;padding:10px 16px}

/* Utility strip */
.dash-util-strip{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;background:var(--bg2);margin-top:14px}
.dash-util-tile{padding:16px 14px;border-right:1px solid var(--border);text-align:center;cursor:pointer;transition:all .18s;text-decoration:none;color:inherit;display:block}
.dash-util-tile:last-child{border-right:none}
.dash-util-tile:hover{background:var(--bg3);transform:translateY(-1px)}
.dash-util-icon{width:40px;height:40px;border-radius:10px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center}
.dash-util-lbl{font-size:12px;font-weight:700}
.dash-util-sub{font-size:10px;color:var(--gray5);margin-top:2px}


/* ========== DECORATION CALCULATOR STYLES (scoped to #decoInlineWrap) ========== */
/* All rules scoped to prevent conflict with hub sidebar/nav CSS */
/* ========== DECORATION CALCULATOR STYLES (inlined from client-safe-decoration-calculator.html) ========== */
/* Scoping: hide standalone header/nav since hub provides its own nav */
#decoInlineWrap header.bf-header, #decoInlineWrap .bf-nav { display: none !important; }
#decoInlineWrap .bf-main { padding-top: 0 !important; }
/* ensure decoration calc scrolls properly inside hub */
#decoInlineWrap { overflow-y: auto; }
#decoInlineWrap {--bf-font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;--bf-primary:#2563eb;--bf-primary-600:#1d4ed8;--bf-primary-100:#dbeafe;--bf-page:#f8fafc;--bf-card:#fff;--bf-text:#0f172a;--bf-muted:#64748b;--bf-border:#e2e8f0;--bf-ring:#93c5fd;--bf-success:#10b981;--bf-success-light:#d1fae5;--bf-warning:#f59e0b;--bf-warning-light:#fef3c7;--bf-danger:#ef4444;--bf-danger-light:#fee2e2;--bf-admin:#8b5cf6;--bf-admin-light:#ede9fe}
#decoInlineWrap {box-sizing:border-box}
#decoInlineWrap, #decoInlineWrap {margin:0;min-height:100%;background:var(--bf-page);color:var(--bf-text);font-family:var(--bf-font)}
#decoInlineWrap .bf-header {position:sticky;top:0;z-index:40;background:#ffffffee;backdrop-filter:blur(8px);border-bottom:1px solid var(--bf-border)}
#decoInlineWrap .bf-wrap {max-width:1400px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px}
#decoInlineWrap .bf-brand {display:flex;align-items:center;gap:10px}
#decoInlineWrap .bf-logo {width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--bf-primary),#7aa4ff);display:flex;align-items:center;justify-content:center}
#decoInlineWrap .bf-logo svg {width:20px;height:20px;fill:#fff}
#decoInlineWrap .bf-title {font-weight:800}
#decoInlineWrap .bf-sub {font-size:12px;color:var(--bf-muted)}
#decoInlineWrap nav {display:flex;gap:4px}
#decoInlineWrap nav a, #decoInlineWrap nav button {padding:8px 12px;border-radius:10px;font-size:13px;font-weight:500;color:var(--bf-text);text-decoration:none;background:none;border:none;cursor:pointer}
#decoInlineWrap nav a:hover, #decoInlineWrap nav button:hover {background:#eef2ff}
#decoInlineWrap nav a.active {background:var(--bf-primary-100);color:var(--bf-primary-600);font-weight:600}
#decoInlineWrap nav button.admin-btn {background:var(--bf-admin-light);color:var(--bf-admin)}
#decoInlineWrap .bf-main {max-width:1800px;margin:18px auto;padding:0 18px 60px}
#decoInlineWrap .page-title {display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:12px}
#decoInlineWrap .page-title h1 {margin:0;font-size:24px;font-weight:800}
#decoInlineWrap .bf-card {background:var(--bf-card);border:1px solid var(--bf-border);border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.04);padding:16px;margin-bottom:12px}
#decoInlineWrap .bf-card h2 {margin:0 0 12px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
#decoInlineWrap .bf-card h2 .icon {width:24px;height:24px;background:var(--bf-primary-100);border-radius:6px;display:flex;align-items:center;justify-content:center}
#decoInlineWrap .bf-card h2 .icon svg {width:14px;height:14px;fill:var(--bf-primary)}
#decoInlineWrap .grid-2 {display:grid;grid-template-columns:1fr 1fr;gap:16px}
#decoInlineWrap .grid-3 {display:grid;grid-template-columns:minmax(400px,1fr) minmax(320px,1fr) minmax(300px,1fr);gap:16px;align-items:start}
@media(max-width:1200px){#decoInlineWrap .grid-3 {grid-template-columns:1fr 1fr}
#decoInlineWrap .grid-3>div:last-child {grid-column:span 2}}
@media(max-width:900px){#decoInlineWrap .grid-3, #decoInlineWrap .grid-2 {grid-template-columns:1fr}
#decoInlineWrap .grid-3>div:last-child {grid-column:span 1}}
#decoInlineWrap label {display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--bf-muted);margin-bottom:6px}
#decoInlineWrap .bf-input, #decoInlineWrap select.bf-input {width:100%;background:#fff;color:var(--bf-text);border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;outline:none;font-size:14px;font-family:inherit}
#decoInlineWrap .bf-input:focus {border-color:var(--bf-primary);box-shadow:0 0 0 3px var(--bf-ring)}
#decoInlineWrap .form-row {margin-bottom:14px}
#decoInlineWrap .input-group {display:flex;gap:8px;align-items:center}
#decoInlineWrap .input-suffix {font-size:13px;color:var(--bf-muted);font-weight:600}
#decoInlineWrap .btn {appearance:none;border:1px solid var(--bf-border);background:#f1f5f9;color:var(--bf-text);padding:10px 16px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
#decoInlineWrap .btn:hover {background:#e2e8f0}
#decoInlineWrap .btn.primary {background:var(--bf-primary);border-color:var(--bf-primary);color:#fff}
#decoInlineWrap .btn.primary:hover {background:var(--bf-primary-600)}
#decoInlineWrap .btn.danger {background:var(--bf-danger);border-color:var(--bf-danger);color:#fff}
#decoInlineWrap .btn.success {background:var(--bf-success);border-color:var(--bf-success);color:#fff}
#decoInlineWrap .btn.sm {padding:6px 10px;font-size:12px}
#decoInlineWrap .upload-zone {border:2px dashed var(--bf-border);border-radius:12px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .2s;background:#fafbfc}
#decoInlineWrap .upload-zone:hover, #decoInlineWrap .upload-zone.drag-over {border-color:var(--bf-primary);background:var(--bf-primary-100)}
#decoInlineWrap .upload-icon {width:48px;height:48px;margin:0 auto 12px;background:var(--bf-primary-100);border-radius:12px;display:flex;align-items:center;justify-content:center}
#decoInlineWrap .upload-icon svg {width:24px;height:24px;fill:var(--bf-primary)}
#decoInlineWrap .upload-title {font-weight:700;font-size:14px;margin-bottom:4px}
#decoInlineWrap .upload-hint {font-size:12px;color:var(--bf-muted)}
#decoInlineWrap .upload-formats {margin-top:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
#decoInlineWrap .format-badge {padding:3px 8px;background:#fff;border:1px solid var(--bf-border);border-radius:6px;font-size:10px;font-weight:700;text-transform:uppercase;color:var(--bf-muted)}
#decoInlineWrap .logo-viewer-container {background:#f8fafc;border:1px solid var(--bf-border);border-radius:12px;overflow:hidden}
#decoInlineWrap .logo-viewer-toolbar {display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#fff;border-bottom:1px solid var(--bf-border);flex-wrap:wrap;gap:8px}
#decoInlineWrap .viewer-info {display:flex;align-items:center;gap:12px}
#decoInlineWrap .file-info {display:flex;align-items:center;gap:8px}
#decoInlineWrap .file-icon {width:32px;height:32px;background:var(--bf-primary-100);border-radius:8px;display:flex;align-items:center;justify-content:center}
#decoInlineWrap .file-icon svg {width:16px;height:16px;fill:var(--bf-primary)}
#decoInlineWrap .file-name {font-weight:600;font-size:13px}
#decoInlineWrap .file-type {font-size:11px;color:var(--bf-muted);text-transform:uppercase}
#decoInlineWrap .viewer-actions {display:flex;gap:6px;flex-wrap:wrap}
#decoInlineWrap .logo-viewer {position:relative;min-height:300px;max-height:500px;display:flex;align-items:center;justify-content:center;overflow:auto;background:linear-gradient(45deg,#e5e7eb 25%,transparent 25%),linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e7eb 75%),linear-gradient(-45deg,transparent 75%,#e5e7eb 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;background-color:#fff}
#decoInlineWrap .logo-canvas-wrapper {position:relative;display:inline-block;transition:transform .2s}
#decoInlineWrap .size-controls {background:#fff;border-top:1px solid var(--bf-border);padding:14px}
#decoInlineWrap .size-grid {display:grid;grid-template-columns:1fr 40px 1fr 80px;gap:10px;align-items:end}
#decoInlineWrap .lock-btn {width:40px;height:40px;border:1px solid var(--bf-border);border-radius:8px;background:var(--bf-primary-100);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
#decoInlineWrap .lock-btn:hover {background:var(--bf-primary)}
#decoInlineWrap .lock-btn:hover svg {fill:#fff}
#decoInlineWrap .lock-btn svg {width:18px;height:18px;fill:var(--bf-primary)}
#decoInlineWrap .lock-btn.unlocked {background:#fff}
#decoInlineWrap .lock-btn.unlocked svg {fill:var(--bf-muted)}
#decoInlineWrap .dual-measure {font-size:11px;color:var(--bf-muted)}
#decoInlineWrap .method-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
#decoInlineWrap .method-card {border:2px solid var(--bf-border);border-radius:10px;padding:12px 8px;text-align:center;cursor:pointer;transition:all .15s;background:#fff}
#decoInlineWrap .method-card:hover {border-color:var(--bf-primary);background:var(--bf-primary-100)}
#decoInlineWrap .method-card.selected {border-color:var(--bf-primary);background:var(--bf-primary-100);box-shadow:0 0 0 3px var(--bf-ring)}
#decoInlineWrap .method-icon {width:36px;height:36px;margin:0 auto 6px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}
#decoInlineWrap .method-card.selected .method-icon {background:var(--bf-primary);color:#fff}
#decoInlineWrap .method-name {font-weight:700;font-size:11px}
#decoInlineWrap .method-desc {font-size:9px;color:var(--bf-muted);margin-top:2px}
#decoInlineWrap .calc-results {background:linear-gradient(135deg,#eff6ff,#f0fdf4);border:1px solid #bfdbfe;border-radius:12px;padding:16px}
#decoInlineWrap .calc-row {display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06)}
#decoInlineWrap .calc-row:last-child {border-bottom:none}
#decoInlineWrap .calc-label {color:var(--bf-muted);font-size:13px}
#decoInlineWrap .calc-value {font-weight:700;font-size:13px;text-align:right}
#decoInlineWrap .calc-total {background:var(--bf-primary);color:#fff;margin:12px -16px -16px;padding:14px 16px;border-radius:0 0 11px 11px;display:flex;justify-content:space-between;align-items:center}
#decoInlineWrap .calc-total .calc-label {color:rgba(255,255,255,.8);font-weight:600}
#decoInlineWrap .calc-total .calc-value {font-size:20px}
#decoInlineWrap .validation-msg {display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:10px;margin-top:12px;font-size:13px;line-height:1.4}
#decoInlineWrap .validation-msg.warning {background:var(--bf-warning-light);border:1px solid #fcd34d}
#decoInlineWrap .validation-msg.error {background:var(--bf-danger-light);border:1px solid #fca5a5}
#decoInlineWrap .validation-msg.success {background:var(--bf-success-light);border:1px solid #6ee7b7}
#decoInlineWrap .validation-icon {width:20px;height:20px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
#decoInlineWrap .validation-msg.warning .validation-icon {background:var(--bf-warning);color:#fff}
#decoInlineWrap .validation-msg.error .validation-icon {background:var(--bf-danger);color:#fff}
#decoInlineWrap .validation-msg.success .validation-icon {background:var(--bf-success);color:#fff}
#decoInlineWrap .stats-row {display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#decoInlineWrap .stat-badge {display:flex;align-items:center;gap:6px;padding:6px 12px;background:#f1f5f9;border-radius:8px;font-size:12px}
#decoInlineWrap .stat-badge strong {color:var(--bf-primary)}
#decoInlineWrap .toast {position:fixed;right:16px;bottom:16px;background:#0f172a;color:#fff;padding:12px 16px;border-radius:10px;z-index:9999;font-size:13px;font-weight:500;animation:slideIn .3s ease}
@keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
#decoInlineWrap .hidden {display:none!important}
#decoInlineWrap .empty-state {text-align:center;padding:40px;color:var(--bf-muted)}
#decoInlineWrap .empty-state svg {width:48px;height:48px;fill:var(--bf-border);margin-bottom:12px}
#decoInlineWrap .qty-presets {display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#decoInlineWrap .qty-preset {padding:4px 10px;background:#f1f5f9;border:1px solid var(--bf-border);border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}
#decoInlineWrap .qty-preset:hover {background:var(--bf-primary-100);border-color:var(--bf-primary)}
#decoInlineWrap .qty-preset.active {background:var(--bf-primary);border-color:var(--bf-primary);color:#fff}
#decoInlineWrap .analysis-panel {background:#f8fafc;border:1px solid var(--bf-border);border-radius:10px;padding:14px;margin-top:14px}
#decoInlineWrap .analysis-title {font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--bf-muted);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
#decoInlineWrap .color-swatches {display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
#decoInlineWrap .color-swatch {width:36px;height:36px;border-radius:8px;border:3px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.15);position:relative;cursor:pointer;transition:all .15s}
#decoInlineWrap .color-swatch:hover {transform:scale(1.2);z-index:5}
#decoInlineWrap .color-swatch.is-white {border:3px dashed #cbd5e1}
#decoInlineWrap .color-swatch.removed {opacity:.25;border-color:var(--bf-danger)}
#decoInlineWrap .color-swatch.has-replacement {box-shadow:0 0 0 3px var(--bf-success),0 2px 4px rgba(0,0,0,.15)}
#decoInlineWrap .color-swatch .tooltip {position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;padding:4px 8px;border-radius:4px;font-size:10px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;margin-bottom:6px;z-index:10}
#decoInlineWrap .color-swatch:hover .tooltip {opacity:1}
#decoInlineWrap .color-swatch .badge {position:absolute;bottom:-6px;right:-6px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;border:2px solid #fff}
#decoInlineWrap .color-swatch .badge.edit {background:var(--bf-primary)}
#decoInlineWrap .color-swatch .badge.check {background:var(--bf-success)}
#decoInlineWrap .color-swatch .badge.remove {background:var(--bf-danger)}
#decoInlineWrap .analysis-stats {display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
#decoInlineWrap .analysis-stat {background:#fff;border:1px solid var(--bf-border);border-radius:8px;padding:10px}
#decoInlineWrap .analysis-stat-label {font-size:10px;color:var(--bf-muted);text-transform:uppercase}
#decoInlineWrap .analysis-stat-value {font-size:14px;font-weight:700;margin-top:2px}
#decoInlineWrap .analysis-stat-value.warning {color:var(--bf-warning)}
#decoInlineWrap .analysis-stat-value.error {color:var(--bf-danger)}
#decoInlineWrap .analysis-stat-value.success {color:var(--bf-success)}
#decoInlineWrap .image-actions {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding:10px;background:#fff;border:1px solid var(--bf-border);border-radius:8px}
#decoInlineWrap .logo-select-panel {background:var(--bf-primary-100);border:2px solid var(--bf-primary);border-radius:10px;padding:16px;margin-bottom:14px}
#decoInlineWrap .logo-select-title {font-size:14px;font-weight:700;margin-bottom:6px;color:var(--bf-primary-600)}
#decoInlineWrap .logo-select-hint {font-size:12px;color:var(--bf-muted);margin-bottom:12px}
#decoInlineWrap .logo-thumbnails {display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px}
#decoInlineWrap .logo-thumbnail {min-height:60px;max-height:120px;border:3px solid var(--bf-border);border-radius:10px;cursor:pointer;overflow:visible;background:#fff;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:6px}
#decoInlineWrap .logo-thumbnail:hover {border-color:var(--bf-primary)}
#decoInlineWrap .logo-thumbnail.selected {border-color:var(--bf-success);box-shadow:0 0 0 3px var(--bf-success-light)}
#decoInlineWrap .logo-thumbnail canvas {max-width:100%;max-height:100px;object-fit:contain}
#decoInlineWrap .modal-overlay {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
#decoInlineWrap .modal {background:#fff;border-radius:16px;max-width:750px;width:100%;max-height:90vh;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
#decoInlineWrap .modal-header {padding:16px 20px;border-bottom:1px solid var(--bf-border);display:flex;align-items:center;justify-content:space-between}
#decoInlineWrap .modal-header h3 {margin:0;font-size:18px}
#decoInlineWrap .modal-close {width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--bf-muted)}
#decoInlineWrap .modal-close:hover {background:#f1f5f9}
#decoInlineWrap .modal-body {padding:20px;max-height:65vh;overflow-y:auto}
#decoInlineWrap .color-tabs {display:flex;gap:4px;margin-bottom:16px}
#decoInlineWrap .color-tab {flex:1;padding:12px;border:1px solid var(--bf-border);background:#f8fafc;border-radius:10px;cursor:pointer;text-align:center;font-size:13px;font-weight:600;transition:all .15s}
#decoInlineWrap .color-tab:hover {background:var(--bf-primary-100)}
#decoInlineWrap .color-tab.active {background:var(--bf-primary);color:#fff;border-color:var(--bf-primary)}
#decoInlineWrap .color-search {margin-bottom:16px}
#decoInlineWrap .color-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(75px,1fr));gap:8px;max-height:350px;overflow-y:auto;padding:4px}
#decoInlineWrap .color-option {padding:6px;border:2px solid var(--bf-border);border-radius:8px;cursor:pointer;text-align:center;transition:all .15s;background:#fff}
#decoInlineWrap .color-option:hover {border-color:var(--bf-primary);transform:translateY(-2px)}
#decoInlineWrap .color-option.selected {border-color:var(--bf-success);box-shadow:0 0 0 2px var(--bf-success-light)}
#decoInlineWrap .color-preview {width:100%;height:40px;border-radius:6px;margin-bottom:4px;border:1px solid rgba(0,0,0,.08)}
#decoInlineWrap .color-name {font-size:8px;font-weight:600;color:var(--bf-text);line-height:1.2;min-height:20px;display:flex;align-items:center;justify-content:center;word-break:break-word}
#decoInlineWrap .color-code {font-size:7px;color:var(--bf-muted)}
#decoInlineWrap .current-color-preview {display:flex;gap:20px;margin-bottom:20px;padding:16px;background:#f8fafc;border-radius:10px;border:1px solid var(--bf-border)}
#decoInlineWrap .preview-box {flex:1;text-align:center}
#decoInlineWrap .preview-box-label {font-size:11px;color:var(--bf-muted);margin-bottom:8px;text-transform:uppercase;font-weight:600}
#decoInlineWrap .preview-swatch {width:100%;height:70px;border-radius:10px;border:1px solid var(--bf-border)}
#decoInlineWrap .preview-info {font-size:11px;margin-top:6px;color:var(--bf-text);font-weight:500}
#decoInlineWrap .modal-footer {padding:16px 20px;border-top:1px solid var(--bf-border);display:flex;justify-content:space-between;gap:10px;background:#f8fafc}
#decoInlineWrap .admin-panel {background:var(--bf-admin-light);border:2px solid var(--bf-admin);border-radius:14px;padding:20px;margin-bottom:16px}
#decoInlineWrap .admin-panel h2 {color:var(--bf-admin);margin:0 0 16px;font-size:18px}
#decoInlineWrap .admin-tabs {display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
#decoInlineWrap .admin-tab {padding:10px 16px;border:1px solid var(--bf-border);background:#fff;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;transition:all .15s}
#decoInlineWrap .admin-tab:hover {background:var(--bf-admin-light)}
#decoInlineWrap .admin-tab.active {background:var(--bf-admin);color:#fff;border-color:var(--bf-admin)}
#decoInlineWrap .pricing-table {width:100%;border-collapse:collapse;font-size:11px;background:#fff;border-radius:8px;overflow:hidden}
#decoInlineWrap .pricing-table th, #decoInlineWrap .pricing-table td {padding:6px 8px;text-align:center;border:1px solid var(--bf-border)}
#decoInlineWrap .pricing-table th {background:#f1f5f9;font-weight:700;font-size:10px;text-transform:uppercase}
#decoInlineWrap .pricing-table input {width:55px;padding:4px;text-align:center;border:1px solid var(--bf-border);border-radius:4px;font-size:11px}
#decoInlineWrap .pricing-table .row-header {text-align:left;font-weight:600;background:#f8fafc}
#decoInlineWrap .adjustment-controls {display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap;padding:12px;background:#fff;border-radius:8px}
#decoInlineWrap .adjustment-controls label {font-size:12px;margin-bottom:0}
#decoInlineWrap .adjustment-controls input, #decoInlineWrap .adjustment-controls select {padding:8px;border:1px solid var(--bf-border);border-radius:6px;font-size:13px}
#decoInlineWrap .logo-viewer.select-mode {cursor:crosshair}
#decoInlineWrap .logo-viewer.select-mode canvas {cursor:crosshair;pointer-events:auto}
#decoInlineWrap #displayCanvas {pointer-events:auto;display:block;max-width:100%;max-height:100%;image-rendering:smooth;image-rendering:-webkit-optimize-contrast}
#decoInlineWrap .logo-canvas-wrapper {position:relative}
#decoInlineWrap #selectionCanvas {opacity:0.6}
#decoInlineWrap .selection-info {display:flex;align-items:center;gap:12px;padding:8px 12px;background:#dbeafe;border:1px solid #93c5fd;border-radius:8px;margin-bottom:10px;font-size:12px}
#decoInlineWrap .selection-info .sel-color {width:24px;height:24px;border-radius:4px;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
#decoInlineWrap .tolerance-slider {display:flex;align-items:center;gap:8px}
#decoInlineWrap .tolerance-slider input[type=range] {width:100px}
#decoInlineWrap .color-tools {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding:10px;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px}
#decoInlineWrap .color-swatch.selected-for-merge {box-shadow:0 0 0 3px var(--bf-warning),0 2px 4px rgba(0,0,0,.15)}
/* NEW: Decoration Compatibility Panel Styles */
#decoInlineWrap .compatibility-panel {background:#fff;border:1px solid var(--bf-border);border-radius:10px;margin-top:0;overflow:hidden}
#decoInlineWrap .compatibility-header {display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#f8fafc;border-bottom:1px solid var(--bf-border);cursor:pointer}
#decoInlineWrap .compatibility-header:hover {background:#f1f5f9}
#decoInlineWrap .compatibility-title {font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--bf-muted);display:flex;align-items:center;gap:8px}
#decoInlineWrap .compatibility-status {display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px}
#decoInlineWrap .compatibility-status.ok {background:var(--bf-success-light);color:#059669}
#decoInlineWrap .compatibility-status.warning {background:var(--bf-warning-light);color:#d97706}
#decoInlineWrap .compatibility-status.error {background:var(--bf-danger-light);color:#dc2626}
#decoInlineWrap .compatibility-status.pending {background:#f1f5f9;color:var(--bf-muted)}
#decoInlineWrap .compatibility-body {padding:14px;max-height:350px;overflow-y:auto}
#decoInlineWrap .compatibility-body.collapsed {display:none}
#decoInlineWrap .issue-item {display:flex;align-items:flex-start;gap:10px;padding:10px;background:#f8fafc;border-radius:8px;margin-bottom:8px;font-size:12px;line-height:1.5}
#decoInlineWrap .issue-item:last-child {margin-bottom:0}
#decoInlineWrap .issue-item.error {background:var(--bf-danger-light);border:1px solid #fca5a5}
#decoInlineWrap .issue-item.warning {background:var(--bf-warning-light);border:1px solid #fcd34d}
#decoInlineWrap .issue-item.success {background:var(--bf-success-light);border:1px solid #6ee7b7}
#decoInlineWrap .issue-item.info {background:var(--bf-primary-100);border:1px solid #93c5fd}
#decoInlineWrap .issue-icon {width:20px;height:20px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px}
#decoInlineWrap .issue-item.error .issue-icon {background:var(--bf-danger);color:#fff}
#decoInlineWrap .issue-item.warning .issue-icon {background:var(--bf-warning);color:#fff}
#decoInlineWrap .issue-item.success .issue-icon {background:var(--bf-success);color:#fff}
#decoInlineWrap .issue-item.info .issue-icon {background:var(--bf-primary);color:#fff}
#decoInlineWrap .issue-content {flex:1}
#decoInlineWrap .issue-title {font-weight:600;margin-bottom:2px}
#decoInlineWrap .issue-detail {color:var(--bf-muted);font-size:11px}
#decoInlineWrap .show-problems-toggle {display:flex;align-items:center;gap:6px;padding:8px 12px;background:#fff;border:1px solid var(--bf-border);border-radius:8px;margin-bottom:10px;font-size:12px;cursor:pointer;transition:all .15s}
#decoInlineWrap .show-problems-toggle:hover {background:var(--bf-primary-100);border-color:var(--bf-primary)}
#decoInlineWrap .show-problems-toggle.active {background:var(--bf-danger-light);border-color:var(--bf-danger)}
#decoInlineWrap .method-specs {background:#f1f5f9;border-radius:6px;padding:8px 10px;margin-top:8px;font-size:11px}
#decoInlineWrap .method-specs-title {font-weight:600;margin-bottom:4px;color:var(--bf-primary-600)}
#decoInlineWrap .method-specs-grid {display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
#decoInlineWrap .method-specs-item {display:flex;justify-content:space-between;gap:8px}
#decoInlineWrap .method-specs-item span:first-child {color:var(--bf-muted)}
#decoInlineWrap .method-specs-item span:last-child {font-weight:600}
#decoInlineWrap #problemOverlayCanvas {pointer-events:none;position:absolute;top:0;left:0}
/* ========== END DECORATION CALCULATOR STYLES ========== */
/* ========== END DECORATION CALCULATOR STYLES ========== */