@font-face {
    font-family: "Careem";
    src: url("../fonts/Careem-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Careem";
    src: url("../fonts/Careem-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Place the licensed Careem font files under static/fonts/ and enable @font-face here. */
:root{--brand:#059ba8;--brand-dark:#087783;--navy:#102b3a;--ink:#163442;--muted:#6e7f88;--bg:#f4f7f8;--card:#fff;--line:#e2eaed;--danger:#c94040;--success:#1b8c63;--warn:#c48717;--radius:18px;--shadow:0 10px 30px rgba(16,43,58,.06);font-family:"Careem","Tahoma","Arial",sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}body{font-size:15px}.app-shell{min-height:100vh}.sidebar{position:fixed;right:0;top:0;bottom:0;width:272px;background:var(--navy);color:#fff;padding:26px 18px;display:flex;flex-direction:column;z-index:20}.brand-block{display:flex;gap:12px;align-items:center;padding:0 8px 26px;border-bottom:1px solid rgba(255,255,255,.1)}.brand-mark,.login-logo{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#08a9b8,#38c6c1);font-weight:800;font-size:22px}.brand-block strong{display:block;font-size:16px}.brand-block span{display:block;font-size:12px;color:#a9bdc7;margin-top:3px}.nav-list{display:flex;flex-direction:column;gap:6px;margin-top:24px}.nav-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;color:#dce7eb;text-decoration:none;transition:.2s}.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}.nav-icon{width:24px;text-align:center}.nav-item b{font-size:9px;padding:2px 5px;border-radius:8px;background:rgba(255,255,255,.1);margin-right:auto}.nav-disabled{opacity:.55;pointer-events:none}.sidebar-foot{margin-top:auto}.server-pill{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.06);padding:8px 10px;border-radius:999px;font-size:11px;color:#bcd0d8}.server-pill i{width:7px;height:7px;background:#4bd89d;border-radius:50%}.main-area{margin-right:272px;min-height:100vh}.auth-main{margin-right:0}.topbar{height:86px;background:rgba(255,255,255,.93);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 34px;position:sticky;top:0;z-index:10;backdrop-filter:blur(14px)}.top-title h1{font-size:17px;margin:0}.top-title p{font-size:11px;color:var(--muted);margin:4px 0 0}.top-actions{margin-right:auto;display:flex;align-items:center;gap:10px}.icon-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;background:#fff;display:grid;place-items:center;text-decoration:none;color:var(--ink);position:relative}.notification-btn b{position:absolute;top:-5px;left:-5px;background:var(--danger);color:#fff;border-radius:99px;min-width:18px;height:18px;font-size:10px;display:grid;place-items:center}.user-chip{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);padding:5px 8px}.user-chip img,.avatar-fallback{width:38px;height:38px;border-radius:12px;object-fit:cover}.avatar-fallback{display:grid;place-items:center;background:#e5f5f6;color:var(--brand-dark);font-weight:800}.user-chip strong,.user-chip small{display:block}.user-chip strong{font-size:12px}.user-chip small{font-size:10px;color:var(--muted);direction:ltr}.logout-btn{border:0;background:#f7eaea;color:#a33;border-radius:10px;padding:9px 12px;cursor:pointer}.page-wrap{padding:34px;max-width:1600px;margin:auto}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}.page-head.compact{align-items:center}.page-head h2{font-size:30px;margin:5px 0 7px}.page-head p{color:var(--muted);margin:0;max-width:760px;line-height:1.8}.eyebrow{color:var(--brand-dark);font-size:12px;font-weight:800;letter-spacing:.4px}.head-date{background:#eaf5f5;color:var(--brand-dark);padding:9px 13px;border-radius:999px;font-size:11px}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.kpi-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.kpi-card span,.kpi-card small{display:block;color:var(--muted)}.kpi-card strong{display:block;font-size:32px;margin:12px 0 8px;color:var(--navy)}.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}.panel-head h3{margin:0 0 4px;font-size:16px}.panel-head p{margin:0;color:var(--muted);font-size:12px}.panel-head a{color:var(--brand-dark);text-decoration:none;font-size:12px}.content-grid{display:grid;gap:18px}.two-col{grid-template-columns:1.35fr 1fr}.list-clean{padding:7px 20px}.list-row{display:grid;grid-template-columns:12px 1fr auto auto;gap:11px;align-items:center;padding:15px 4px;border-bottom:1px solid var(--line)}.list-row:last-child{border:0}.list-row strong{font-size:13px}.list-row p{font-size:11px;color:var(--muted);margin:4px 0 0}.list-row time{font-size:10px;color:var(--muted)}.list-row.unread{background:#f7fcfc}.dot{width:8px;height:8px;border-radius:50%;background:#9aa}.dot.success{background:var(--success)}.dot.warning{background:var(--warn)}.dot.danger{background:var(--danger)}.dot.info{background:var(--brand)}.empty-state{padding:34px;text-align:center;color:var(--muted)}.roadmap{padding:18px 22px}.roadmap-item{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid var(--line)}.roadmap-item:last-child{border:0}.roadmap-item>b{width:34px;height:34px;border-radius:10px;background:#edf1f2;display:grid;place-items:center}.roadmap-item span strong,.roadmap-item span small{display:block}.roadmap-item span small{color:var(--muted);font-size:10px;margin-top:4px}.roadmap-item.done>b{background:#dff5eb;color:var(--success)}.roadmap-item.next>b{background:#dff5f6;color:var(--brand-dark)}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:11px 17px;text-decoration:none;border:1px solid transparent;cursor:pointer;font:inherit}.btn-primary{background:var(--brand);color:white}.btn-primary:hover{background:var(--brand-dark)}.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}.btn-block{width:100%}.table-panel{overflow:hidden}.table-toolbar{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;gap:10px}.search-input{max-width:420px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:820px}.data-table th{font-size:11px;color:var(--muted);font-weight:700;text-align:right;background:#fafcfc}.data-table th,.data-table td{padding:14px 18px;border-bottom:1px solid var(--line);white-space:nowrap}.data-table tr:hover td{background:#fbfdfd}.person-cell{display:flex;align-items:center;gap:10px}.person-cell strong,.person-cell small{display:block}.person-cell small{color:var(--muted);font-size:10px;direction:ltr}.mini-avatar{width:34px;height:34px;border-radius:10px;background:#e6f4f5;color:var(--brand-dark);display:grid;place-items:center;font-weight:800}.badge{display:inline-flex;border-radius:99px;padding:5px 9px;font-size:10px}.badge.success{background:#e2f6ed;color:var(--success)}.badge.muted{background:#edf1f2;color:#63727a}.row-actions{display:flex;gap:8px}.row-actions a{font-size:11px;color:var(--brand-dark);text-decoration:none}.form-panel{padding:24px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.form-group label,.stack-form label{display:block;font-size:12px;font-weight:700;margin-bottom:8px}.field-input{width:100%;border:1px solid #d7e1e4;background:#fff;border-radius:12px;padding:12px 13px;outline:none;font:inherit;color:var(--ink)}.field-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(5,155,168,.1)}.field-select{appearance:auto}.form-group small{color:var(--muted);font-size:10px;display:block;margin-top:6px}.field-error,.form-error{color:#a52d2d;background:#fff0f0;border:1px solid #f1cccc;border-radius:10px;padding:9px 11px;font-size:11px;margin-top:6px}.form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;padding-top:14px;border-top:1px solid var(--line);margin-top:6px}.switch-group{display:flex;align-items:center;gap:14px}.switch-input{width:20px;height:20px}.permission-list ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.permission-list label{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:11px}.profile-preview{display:grid;place-items:center;margin:20px auto;width:130px;height:130px;border-radius:32px;background:#e6f5f6;overflow:hidden;color:var(--brand-dark);font-size:42px;font-weight:800}.profile-preview img{width:100%;height:100%;object-fit:cover}.stack-form{display:flex;flex-direction:column;gap:15px}.security-note{text-align:center;color:var(--muted);font-size:10px;margin-top:18px}.login-layout{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:#fff}.login-visual{position:relative;background:linear-gradient(140deg,#0e2b39,#0a5864);overflow:hidden;display:flex;align-items:flex-end;padding:9vw 7vw;color:#fff}.visual-grid{position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:48px 48px;transform:perspective(600px) rotateX(8deg) scale(1.2)}.login-visual:after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:#14aaba;filter:blur(90px);opacity:.3;top:8%;left:9%}.visual-copy{position:relative;z-index:2}.visual-copy .eyebrow{color:#6de2e2}.visual-copy h1{font-size:50px;line-height:1.3;margin:14px 0}.visual-copy p{color:#c5dce2;max-width:530px;line-height:2}.login-panel{display:grid;place-items:center;padding:32px}.login-card{width:min(430px,100%)}.login-logo{margin-bottom:26px;color:#fff}.login-heading h2{font-size:30px;margin:0 0 7px}.login-heading p{color:var(--muted);margin:0 0 28px}.link-btn{border:0;background:none;color:var(--brand-dark);cursor:pointer;font:inherit;font-size:10px}.flash-stack{position:fixed;left:24px;top:100px;z-index:50;display:flex;flex-direction:column;gap:8px}.flash{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:12px;padding:11px 15px}.flash.success{border-right:4px solid var(--success)}code{direction:ltr;display:inline-block;background:#f1f4f5;border-radius:7px;padding:3px 6px}.mobile-only{display:none}
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.two-col{grid-template-columns:1fr}.sidebar{transform:translateX(100%);transition:.22s}.sidebar.open{transform:none}.main-area{margin-right:0}.mobile-only{display:grid}.topbar{padding:0 18px}.page-wrap{padding:22px}.login-layout{grid-template-columns:1fr}.login-visual{display:none}}
@media(max-width:650px){.kpi-grid,.form-grid{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}.top-title{display:none}.user-chip span:last-child{display:none}.permission-list ul{grid-template-columns:1fr}.page-head h2{font-size:25px}.page-wrap{padding:16px}.form-panel{padding:18px}.login-panel{padding:20px}}

.field-textarea{resize:vertical;line-height:1.8}.full-span{grid-column:1/-1}.budget-preview{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:16px;border-radius:14px;background:#edf8f8}.budget-preview div{padding:4px 10px}.budget-preview span,.budget-preview strong{display:block}.budget-preview span{font-size:11px;color:var(--muted)}.budget-preview strong{font-size:21px;margin-top:5px;color:var(--brand-dark)}.subline{display:block;color:var(--muted);font-size:10px;margin-top:4px}.click-row{cursor:pointer}.campaign-hero{display:flex;align-items:flex-end;justify-content:space-between;background:linear-gradient(135deg,#102b3a,#0a6974);color:#fff;border-radius:22px;padding:30px;margin-bottom:14px}.campaign-hero h2{font-size:30px;margin:10px 0 6px}.campaign-hero p{margin:0;color:#c5dce2}.hero-actions{display:flex;gap:9px}.campaign-tabs{display:flex;gap:6px;overflow:auto;margin:0 0 18px;padding:5px;background:#fff;border:1px solid var(--line);border-radius:14px}.campaign-tabs a{white-space:nowrap;padding:9px 12px;color:var(--muted);font-size:11px;border-radius:10px}.campaign-tabs a.active{background:#e7f6f6;color:var(--brand-dark);font-weight:800}.detail-copy{padding:20px 24px}.detail-copy h4{margin:0 0 7px}.detail-copy p{color:var(--muted);line-height:1.9;margin:0 0 20px}.brand-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.brand-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;gap:15px;box-shadow:var(--shadow)}.brand-card img,.brand-placeholder{width:66px;height:66px;border-radius:16px;object-fit:contain;background:#f3f7f8;display:grid;place-items:center;font-size:24px;font-weight:800;color:var(--brand-dark)}.brand-card h3{margin:3px 0 7px}.brand-card p{font-size:11px;color:var(--muted);line-height:1.7}.hero-actions .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:white}@media(max-width:850px){.brand-grid{grid-template-columns:1fr 1fr}.campaign-hero{align-items:flex-start;flex-direction:column;gap:18px}}@media(max-width:600px){.brand-grid,.budget-preview{grid-template-columns:1fr}.campaign-hero{padding:22px}.campaign-hero h2{font-size:24px}}

.badge.warning{background:#fff2d8;color:#9d6910}.priority-normal{background:#edf1f2;color:#63727a}.priority-medium{background:#fff2d8;color:#95640f}.priority-high{background:#ffe5e5;color:#ad3434}.progress-mini{width:92px;height:6px;background:#e9eff1;border-radius:99px;overflow:hidden;display:inline-block;margin-left:7px}.progress-mini i{display:block;height:100%;background:var(--brand);border-radius:99px}.upload-rules{display:flex;gap:10px;padding:13px 15px;background:#f6f9fa;border:1px dashed #cbdadd;border-radius:13px}.upload-rules span{color:var(--muted)}.task-hero{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;margin-bottom:16px;box-shadow:var(--shadow)}.task-badges{display:flex;gap:7px}.task-hero h2{font-size:28px;margin:10px 0 6px}.task-hero p{margin:0;color:var(--muted)}.task-hero p a{color:var(--brand-dark);text-decoration:none}.task-progress-ring{width:92px;height:92px;border:9px solid #e2f2f3;border-top-color:var(--brand);border-radius:50%;display:grid;place-items:center;align-content:center}.task-progress-ring strong{font-size:20px}.task-progress-ring span{font-size:9px;color:var(--muted)}.task-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}.task-main{display:flex;flex-direction:column;gap:18px}.task-side{display:flex;flex-direction:column;gap:14px}.side-panel{padding:18px}.side-panel h3{font-size:14px;margin:0 0 14px}.team-row{display:flex;gap:9px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.team-row:last-child{border:0}.team-row strong,.team-row small{display:block}.team-row small{color:var(--muted);font-size:10px;margin-top:3px}.comments{padding:6px 22px}.comment{display:flex;gap:11px;padding:15px 0;border-bottom:1px solid var(--line)}.comment>div{flex:1}.comment header{display:flex;justify-content:space-between}.comment time{color:var(--muted);font-size:9px}.comment p{margin:7px 0 0;line-height:1.8;color:#3a535e}.comment-form{display:grid;grid-template-columns:1fr auto;gap:9px;padding:14px 22px;border-top:1px solid var(--line)}.file-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0}.file-card{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:11px;text-decoration:none;color:var(--ink);min-width:0}.file-card>b{width:32px;height:32px;border-radius:9px;background:#e5f5f6;color:var(--brand-dark);display:grid;place-items:center}.file-card span{min-width:0}.file-card strong,.file-card small{display:block}.file-card strong{font-size:10px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.file-card small{font-size:9px;color:var(--muted);margin-top:4px}.submission-list{padding:8px 20px}.submission{padding:16px 4px;border-bottom:1px solid var(--line)}.submission:last-child{border:0}.submission header{display:flex;justify-content:space-between;align-items:center}.submission header>div{display:flex;gap:9px;align-items:center}.submission time{font-size:9px;color:var(--muted)}.submission>p{color:var(--muted);font-size:11px}.version-pill{background:var(--navy);color:#fff;border-radius:9px;padding:5px 8px;font-size:10px}.review-history{margin:10px 0}.review-history>div{border-right:3px solid var(--brand);padding:8px 10px;background:#f8fbfb}.review-history strong,.review-history span,.review-history small{display:block}.review-history span{font-size:11px;margin:5px 0}.review-history small{font-size:9px;color:var(--muted)}.helper{font-size:9px;color:var(--muted)}.rating-form{display:flex;flex-direction:column;gap:9px}.rating-form label{display:flex;justify-content:space-between;align-items:center;font-size:10px}.rating-form input[type=checkbox]{width:18px;height:18px}.rating-result{margin-top:13px;padding:12px;border-radius:12px;background:#eef8f4}.rating-result span,.rating-result strong{display:block}.rating-result span{font-size:9px;color:var(--muted)}.rating-result strong{font-size:20px;color:var(--success);margin-top:4px}@media(max-width:1050px){.task-layout{grid-template-columns:1fr}.task-side{display:grid;grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.task-side,.file-grid{grid-template-columns:1fr}.task-hero{align-items:flex-start}.task-progress-ring{width:72px;height:72px}.comment-form{grid-template-columns:1fr}}

/* Sales module */
.head-actions{display:flex;gap:9px;flex-wrap:wrap}.nav-item.nav-sub{margin-right:22px;font-size:10px;padding-top:8px;padding-bottom:8px;opacity:.82}.sales-home-grid{align-items:start}.campaign-sales-list{padding:8px 18px 20px;display:flex;flex-direction:column;gap:9px}.campaign-sales-card{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--line);border-radius:15px;padding:16px;text-decoration:none;color:var(--ink);transition:.18s}.campaign-sales-card:hover{border-color:#9bcfd3;transform:translateY(-1px);box-shadow:var(--shadow)}.campaign-sales-card h3{margin:8px 0 4px;font-size:15px}.campaign-sales-card small{color:var(--muted)}.campaign-mini-kpis{display:flex;gap:8px}.campaign-mini-kpis span{background:#f4f8f9;border-radius:11px;padding:9px 11px;font-size:9px;color:var(--muted);text-align:center}.campaign-mini-kpis b{display:block;color:var(--navy);font-size:17px;margin-bottom:2px}.sales-assignment-row{text-decoration:none;color:inherit}.province-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#e7f6f6;color:var(--brand-dark);font-weight:800}.sales-campaign-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,#0f2c3a,#087b84);color:white;border-radius:22px;padding:28px 30px;margin-bottom:16px}.sales-campaign-hero h2{font-size:30px;margin:8px 0 5px}.sales-campaign-hero p{margin:0;color:#cce6e8}.sales-filter-grid{display:grid;grid-template-columns:2fr repeat(5,minmax(130px,1fr)) auto auto;gap:8px;padding:15px;border-bottom:1px solid var(--line)}.sheet-note{display:flex;justify-content:space-between;align-items:center;padding:9px 16px;background:#f8fbfb;color:var(--muted);font-size:9px}.sheet-note strong{color:var(--navy)}.sales-sheet-wrap{max-height:68vh;overflow:auto}.sales-sheet thead{position:sticky;top:0;z-index:2}.sales-sheet th,.sales-sheet td{white-space:nowrap}.sales-sheet .notes-cell{max-width:260px;white-space:normal;min-width:180px}.ltr-cell{direction:ltr;text-align:right;font-variant-numeric:tabular-nums}.yes-mark,.sale-mark{width:23px;height:23px;border-radius:50%;display:inline-grid;place-items:center;font-weight:900}.yes-mark{background:#e9f4f5;color:#176a72}.sale-mark{background:#e8f6ee;color:#1f754a}.badge.category-dealer{background:#e6f6f2;color:#17694f}.badge.category-electrician{background:#e8f0ff;color:#315ea8}.badge.status-no_response{background:#fff0f0;color:#a33}.badge.status-waiting{background:#fff5dc;color:#926410}.badge.status-dealer_confirmed{background:#e8f6ee;color:#24734a}.badge.status-directed{background:#e9eff8;color:#395c87}.sales-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}.success-card{background:linear-gradient(145deg,#fff,#eef9f3);border-color:#cae9d8}.sales-tabs{margin-top:18px}.comparison-builder{padding:22px}.compare-columns{display:grid;grid-template-columns:1fr 1fr;gap:22px}.compare-columns form{border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:11px}.compare-columns h3{margin:0}.compare-columns p{margin:0;color:var(--muted);font-size:10px}.compare-select{min-height:190px}.compare-results{margin-top:18px}.btn-small{padding:6px 9px;font-size:9px}.kpi-text{font-size:14px!important;line-height:1.5}.sales-sheet-panel{overflow:hidden}
@media(max-width:1350px){.sales-filter-grid{grid-template-columns:repeat(4,1fr)}.sales-kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.sales-campaign-hero{align-items:flex-start;flex-direction:column}.sales-filter-grid,.compare-columns{grid-template-columns:1fr 1fr}.campaign-sales-card{align-items:flex-start;flex-direction:column}.sales-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sales-filter-grid,.compare-columns,.sales-kpis{grid-template-columns:1fr}.sales-campaign-hero{padding:22px}.campaign-mini-kpis{width:100%}.campaign-mini-kpis span{flex:1}}

/* Ads & Meta */
.system-warning{margin:15px 0;padding:14px 16px;border:1px solid #ead59e;background:#fff9e8;border-radius:13px;color:#76570c;font-size:11px}.external-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 18px 18px}.external-photo-grid a{border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--ink);background:#fff}.external-photo-grid img{display:block;width:100%;height:150px;object-fit:cover}.external-photo-grid span{display:block;padding:8px 10px;font-size:9px}.photo-upload-form{display:grid;grid-template-columns:1.5fr 1fr auto;gap:8px;padding:15px 18px;border-top:1px solid var(--line)}
@media(max-width:650px){.external-photo-grid{grid-template-columns:1fr}.photo-upload-form{grid-template-columns:1fr}}

/* Management private notes */
.management-compose{padding:18px;margin-bottom:16px}.management-compose form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}.management-thread-list{display:flex;flex-direction:column;gap:14px}.management-thread{padding:20px}.management-thread>header{display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid var(--line);padding-bottom:12px}.management-thread header strong,.management-thread header small{display:block}.management-thread header small{color:var(--muted);font-size:9px;margin-top:4px}.management-message{font-size:13px;line-height:2;padding:8px 2px}.management-replies{border-right:3px solid #cfe8ea;padding-right:13px;display:flex;flex-direction:column;gap:8px}.management-reply{background:#f7fafb;border-radius:12px;padding:11px 13px}.management-reply p{margin:5px 0;line-height:1.8}.management-reply small{color:var(--muted);font-size:9px}.management-reply-form{display:grid;grid-template-columns:1fr auto;gap:9px;margin-top:14px;align-items:end}
@media(max-width:650px){.management-compose form,.management-reply-form{grid-template-columns:1fr}}

/* AI analysis */
.ai-run-form{display:flex;gap:8px;align-items:center}.ai-run-form select{min-width:210px}.ai-analysis-list{display:flex;flex-direction:column;gap:14px}.ai-analysis-card{padding:22px}.ai-analysis-card header{border-bottom:1px solid var(--line);padding-bottom:13px}.ai-analysis-card h3{font-size:13px;margin:8px 0 3px}.ai-analysis-card small{color:var(--muted)}.ai-result{line-height:2.05;font-size:12px;padding-top:15px;white-space:normal}.ai-privacy{border-color:#b9dde0;background:#effafa;color:#285d63}
@media(max-width:700px){.ai-run-form{width:100%;flex-direction:column;align-items:stretch}.ai-run-form select{min-width:0}}

/* Chunked upload */
.large-upload-box{margin-top:15px;padding-top:15px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:8px}.large-upload-box h4{margin:0;font-size:12px}.large-upload-box p{margin:0;color:var(--muted);font-size:9px;line-height:1.7}.large-upload-progress{height:26px;background:#f0f5f6;border-radius:9px;position:relative;overflow:hidden;border:1px solid var(--line)}.large-upload-progress i{position:absolute;inset:0 auto 0 0;width:0;background:#cdecee;transition:.15s}.large-upload-progress span{position:relative;z-index:1;display:grid;place-items:center;height:100%;font-size:9px;color:var(--navy)}

.inline-form{display:inline-flex;margin:0}.four-compare{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.four-compare form{display:flex;flex-direction:column;gap:10px}.four-compare .compare-select{min-height:155px}@media(max-width:900px){.four-compare{grid-template-columns:1fr}}

.context-note-chip{padding:10px 12px;border:1px dashed var(--line);border-radius:12px;background:var(--surface-2);font-size:.86rem}.context-note-link{display:inline-flex;margin:10px 0 2px;font-size:.86rem;font-weight:700}.hero-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.storage-meter{height:10px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-top:14px}.storage-meter i{display:block;height:100%;background:linear-gradient(90deg,#14b8a6,#0f766e);border-radius:999px}

/* Build 0.8 campaign integration */
.campaign-summary-grid{margin-top:18px}.compact-table{min-width:0}.campaign-result-strip{margin-top:18px;padding:18px 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:14px;align-items:center}.campaign-result-strip>div{padding:8px 12px;border-left:1px solid var(--line)}.campaign-result-strip span,.campaign-result-strip strong{display:block}.campaign-result-strip span{font-size:10px;color:var(--muted)}.campaign-result-strip strong{font-size:22px;margin-top:5px}.performance-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.narrow-panel{max-width:760px;margin:auto}@media(max-width:900px){.campaign-result-strip{grid-template-columns:repeat(2,1fr)}.campaign-result-strip .btn{grid-column:1/-1}.performance-kpis{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.campaign-result-strip,.performance-kpis{grid-template-columns:1fr}}
/* Explicit per-account permission control */
.permission-columns{align-items:start}.permission-columns .panel{overflow:visible}.muted-copy{color:var(--muted);font-size:11px;line-height:1.7}.deny-list label{border-color:#efd8d8;background:#fffafa}.permission-save-bar{background:var(--bg);position:sticky;bottom:0;z-index:6;padding:14px 0;margin-top:18px}


/* Compact task brief attachments */
.brief-attachments{
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid var(--line);
}
.brief-attachments-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}
.brief-attachments-title span{
    font-size:12px;
    color:var(--muted);
}
.brief-attachment-grid{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.brief-image-thumb{
    width:52px;
    height:52px;
    padding:0;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
}
.brief-image-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.brief-file-mini{
    min-height:76px;
    max-width:230px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:12px;
    text-decoration:none;
    background:#fff;
}
.brief-file-mini span{
    min-width:0;
    display:flex;
    flex-direction:column;
}
.brief-file-mini strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.brief-file-mini small{
    color:var(--muted);
}
.image-preview-overlay{
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(5,25,30,.82);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
}
.image-preview-box{
    position:relative;
    max-width:94vw;
    max-height:92vh;
}
.image-preview-box img{
    display:block;
    max-width:94vw;
    max-height:86vh;
    object-fit:contain;
    border-radius:14px;
    background:#fff;
}
.image-preview-close{
    position:absolute;
    top:-18px;
    left:-18px;
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    font-size:24px;
    cursor:pointer;
}
.image-preview-name{
    margin-top:8px;
    text-align:center;
    color:#fff;
    font-size:13px;
}


/* Universal paste-image upload control */
.paste-upload-wrap{
    width:100%;
}

.paste-upload-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:7px;
}

.paste-upload-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:34px;
    padding:6px 11px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    color:var(--brand-dark);
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.paste-upload-btn:hover{
    border-color:var(--brand);
    background:rgba(5,149,184,.06);
}

.paste-upload-status{
    color:var(--muted);
    font-size:11px;
}

.paste-upload-status.success{
    color:var(--success);
}

/* Selected attachments preview */
.upload-preview-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}

.upload-preview-item{
    position:relative;
    width:62px;
    min-width:62px;
    height:62px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fff;
    overflow:hidden;
}

.upload-preview-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.upload-preview-file-icon{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    background:#f5fafb;
}

.upload-preview-name{
    position:absolute;
    right:3px;
    left:3px;
    bottom:2px;
    padding:2px 3px;
    border-radius:5px;
    background:rgba(0,0,0,.58);
    color:#fff;
    font-size:8px;
    line-height:1.25;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    direction:ltr;
}

.upload-preview-remove{
    position:absolute;
    top:3px;
    left:3px;
    z-index:2;
    width:20px;
    height:20px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:rgba(185,35,35,.92);
    color:#fff;
    font-family:Arial,sans-serif;
    font-size:17px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 2px 7px rgba(0,0,0,.18);
}

.upload-preview-remove:hover{
    transform:scale(1.08);
}


/* === PERMISSION MATRIX V2 === */

.permission-page-head{
    align-items:center;
}

.permission-head-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.permission-count-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:38px;
    padding:7px 12px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--card);
    color:var(--muted);
    font-size:12px;
}

.permission-count-pill b{
    color:var(--brand);
    font-size:15px;
}

.permission-global-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
    padding:15px 18px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--card);
    box-shadow:var(--shadow);
}

.permission-global-toolbar > div:first-child{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.permission-global-toolbar span{
    color:var(--muted);
    font-size:12px;
}

.permission-toolbar-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.permission-reset-btn{
    color:var(--danger);
}

.permission-sections{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.permission-section{
    overflow:hidden;
    padding:0;
}

.permission-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:17px 18px 15px;
    border-bottom:1px solid var(--line);
    background:
      linear-gradient(
        135deg,
        rgba(5,155,168,.075),
        rgba(255,255,255,.2)
      );
}

.permission-section-head h3{
    margin:3px 0 4px;
}

.permission-section-head p{
    margin:0;
    color:var(--muted);
    font-size:12px;
}

.permission-section-kicker{
    display:inline-flex;
    font-size:10px;
    letter-spacing:1px;
    color:var(--brand);
    font-weight:800;
}

.permission-section-tools{
    display:flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
}

.permission-section-counter{
    direction:ltr;
    display:inline-flex;
    align-items:center;
    gap:4px;
    min-height:29px;
    padding:4px 8px;
    border-radius:9px;
    background:rgba(5,155,168,.09);
    color:var(--brand-dark);
    font-size:11px;
}

.permission-mini-action{
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--muted);
    font-family:inherit;
    font-size:10px;
    cursor:pointer;
    padding:5px 7px;
}

.permission-mini-action:hover{
    background:rgba(5,155,168,.09);
    color:var(--brand);
}

.permission-row-list{
    padding:4px 16px 10px;
}

.permission-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:67px;
    padding:11px 2px;
    border-bottom:1px solid var(--line);
    cursor:pointer;
}

.permission-row:last-child{
    border-bottom:0;
}

.permission-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.permission-copy strong{
    font-size:13px;
    color:var(--ink);
}

.permission-copy small{
    direction:ltr;
    text-align:right;
    color:var(--muted);
    font-size:9px;
    opacity:.78;
}

.permission-row-side{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.permission-source{
    min-width:58px;
    text-align:center;
    padding:4px 7px;
    border-radius:8px;
    background:rgba(110,127,136,.09);
    color:var(--muted);
    font-size:9px;
}

.permission-source.custom{
    background:rgba(5,155,168,.10);
    color:var(--brand-dark);
}


/* Neumorphic switch */

.neo-switch{
    position:relative;
    display:inline-flex;
    width:68px;
    height:36px;
    direction:ltr;
}

.permission-switch-input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.neo-switch-track{
    position:relative;
    display:block;
    width:68px;
    height:36px;
    padding:4px;
    border-radius:999px;
    background:
      linear-gradient(145deg,#eef3f5,#f9fbfc);
    border:1px solid rgba(140,165,175,.22);
    box-shadow:
      inset 2px 2px 5px rgba(105,130,140,.18),
      inset -2px -2px 5px rgba(255,255,255,.95),
      0 3px 9px rgba(25,60,70,.08);
    transition:.22s ease;
}

.neo-switch-thumb{
    position:absolute;
    top:4px;
    left:4px;
    width:26px;
    height:26px;
    border-radius:50%;
    background:
      linear-gradient(145deg,#ffffff,#e8eff2);
    box-shadow:
      1px 2px 5px rgba(40,70,80,.22),
      inset 1px 1px 2px rgba(255,255,255,.9);
    transition:
      transform .22s cubic-bezier(.2,.8,.2,1),
      background .22s ease,
      box-shadow .22s ease;
}

.permission-switch-input:checked
+ .neo-switch-track{
    background:
      linear-gradient(145deg,#0b9eae,#087bdb);
    border-color:rgba(17,128,211,.42);
    box-shadow:
      inset 2px 2px 7px rgba(4,74,135,.35),
      inset -2px -2px 7px rgba(80,218,239,.35),
      0 0 0 3px rgba(27,148,218,.06),
      0 5px 14px rgba(5,125,190,.18);
}

.permission-switch-input:checked
+ .neo-switch-track
.neo-switch-thumb{
    transform:translateX(32px);
    background:#fff;
    box-shadow:
      0 0 0 3px rgba(255,255,255,.16),
      0 2px 9px rgba(4,71,125,.30);
}

.permission-switch-input:focus-visible
+ .neo-switch-track{
    outline:3px solid rgba(5,155,168,.18);
    outline-offset:2px;
}


/* === LIGHT / DARK SWITCH === */

.theme-mode-toggle{
    position:relative;
    width:88px;
    height:40px;
    padding:4px;
    border:1px solid rgba(140,165,175,.22);
    border-radius:999px;
    background:
      linear-gradient(145deg,#eef3f5,#ffffff);
    box-shadow:
      inset 2px 2px 5px rgba(105,130,140,.16),
      inset -2px -2px 5px rgba(255,255,255,.95),
      0 3px 9px rgba(25,60,70,.08);
    cursor:pointer;
    overflow:hidden;
    font-family:inherit;
    flex-shrink:0;
}

.theme-mode-glider{
    position:absolute;
    top:4px;
    right:4px;
    width:38px;
    height:30px;
    border-radius:999px;
    background:
      linear-gradient(145deg,#0c9fb0,#1266db);
    box-shadow:
      inset 1px 1px 6px rgba(255,255,255,.18),
      0 3px 10px rgba(13,108,205,.30),
      0 0 14px rgba(31,148,238,.20);
    transition:transform .25s ease;
}

.theme-mode-toggle.is-dark
.theme-mode-glider{
    transform:translateX(-40px);
    background:
      linear-gradient(145deg,#163b68,#172554);
}

.theme-mode-icon{
    position:absolute;
    top:4px;
    z-index:2;
    width:38px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    font-size:16px;
    transition:.2s ease;
    pointer-events:none;
}

.theme-mode-icon.sun{
    right:4px;
    color:#fff;
}

.theme-mode-icon.moon{
    left:4px;
    color:#66768b;
}

.theme-mode-toggle.is-dark
.theme-mode-icon.sun{
    color:#738398;
}

.theme-mode-toggle.is-dark
.theme-mode-icon.moon{
    color:#fff;
}


/* === DARK THEME === */

html[data-theme="dark"]{
    color-scheme:dark;

    --bg:#07151b;
    --card:#0d2129;
    --ink:#edf8f9;
    --muted:#91a8b0;
    --line:#1d3942;
    --brand:#26c0cc;
    --brand-dark:#63dde4;
    --navy:#e5f7f8;
    --shadow:0 10px 30px rgba(0,0,0,.22);
}

html[data-theme="dark"] body{
    background:#07151b;
    color:var(--ink);
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .permission-global-toolbar,
html[data-theme="dark"] .permission-count-pill,
html[data-theme="dark"] .topbar{
    background:var(--card);
    color:var(--ink);
    border-color:var(--line);
}

html[data-theme="dark"] .permission-section-head{
    background:
      linear-gradient(
        135deg,
        rgba(38,192,204,.10),
        rgba(10,35,44,.22)
      );
}

html[data-theme="dark"] .field-input,
html[data-theme="dark"] .field-select,
html[data-theme="dark"] .field-textarea,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
    background:#0a1b22;
    color:var(--ink);
    border-color:var(--line);
}

html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .paste-upload-btn{
    background:#10262e;
    color:var(--ink);
    border-color:var(--line);
}

html[data-theme="dark"] .neo-switch-track,
html[data-theme="dark"] .theme-mode-toggle{
    background:
      linear-gradient(145deg,#0b1b22,#102832);
    border-color:#244550;
    box-shadow:
      inset 2px 2px 5px rgba(0,0,0,.32),
      inset -2px -2px 4px rgba(45,80,90,.16),
      0 4px 10px rgba(0,0,0,.20);
}

html[data-theme="dark"] .neo-switch-thumb{
    background:
      linear-gradient(145deg,#d7e6ea,#a9bdc4);
}

html[data-theme="dark"] .permission-source{
    background:#142b34;
}

html[data-theme="dark"] .permission-source.custom{
    background:rgba(38,192,204,.13);
    color:#6ce5eb;
}

@media(max-width:1050px){
    .permission-sections{
        grid-template-columns:1fr;
    }
}

@media(max-width:720px){
    .permission-global-toolbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .permission-row{
        gap:10px;
    }

    .permission-source{
        display:none;
    }

    .permission-copy small{
        display:none;
    }
}



/* Sidebar scroll restoration without visible jumping */
html.sidebar-scroll-restoring #sidebar .nav-list{
    visibility:hidden !important;
}

#sidebar .nav-list{
    scroll-behavior:auto !important;
}


/* Compact submitted-file preview */
.submission-files{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-top:10px;
}

.submission-file-item{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:58px;
    padding:6px 8px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fff;
}

.submission-file-thumb{
    display:block;
    width:46px;
    height:46px;
    min-width:46px;
    border-radius:8px;
    overflow:hidden;
    border:1px solid var(--line);
    background:#f4f8f9;
}

.submission-file-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.submission-file-generic{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    min-width:46px;
    border-radius:8px;
    background:#f2f7f8;
    font-size:20px;
}

.submission-file-info{
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.submission-file-info strong{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:11px;
}

.submission-file-info small{
    color:var(--muted);
    font-size:9px;
}

.submission-file-download{
    flex-shrink:0;
    padding:6px 9px;
    border:1px solid var(--line);
    border-radius:8px;
    color:var(--brand-dark);
    text-decoration:none;
    font-size:10px;
    font-weight:700;
}

.submission-file-download:hover{
    border-color:var(--brand);
    background:rgba(5,149,184,.06);
}



/* === INTERNAL CHAT === */

.internal-chat{
    position:relative;
    z-index:8500;
}

.chat-launcher{
    position:fixed;
    left:22px;
    bottom:22px;
    z-index:8501;

    width:54px;
    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;
    border:0;
    border-radius:18px;

    background:
      linear-gradient(
        145deg,
        #19b9c3,
        #087dc7
      );

    color:#fff;
    cursor:pointer;

    box-shadow:
      0 10px 30px rgba(5,108,170,.28),
      inset 1px 1px 0 rgba(255,255,255,.25);

    transition:
      transform .18s ease,
      box-shadow .18s ease;
}

.chat-launcher:hover{
    transform:translateY(-2px);
    box-shadow:
      0 14px 34px rgba(5,108,170,.34),
      inset 1px 1px 0 rgba(255,255,255,.25);
}

.chat-launcher svg{
    width:27px;
    height:27px;
    fill:currentColor;
}

.chat-launcher b{
    position:absolute;
    top:-5px;
    right:-5px;

    min-width:21px;
    height:21px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 5px;

    border:2px solid #fff;
    border-radius:999px;

    background:#e33d4e;
    color:#fff;

    font-size:10px;
    line-height:1;
}


.chat-panel{
    position:fixed;
    left:22px;
    bottom:86px;
    z-index:8500;

    width:360px;
    height:min(560px, calc(100vh - 120px));

    display:none;
    flex-direction:column;

    overflow:hidden;

    border:1px solid var(--line);
    border-radius:20px;

    background:#fff;
    box-shadow:
      0 24px 70px rgba(18,50,60,.24);
}

.chat-panel.open{
    display:flex;
}


.chat-panel-head{
    min-height:67px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:12px 15px;

    border-bottom:1px solid var(--line);

    background:
      linear-gradient(
        135deg,
        rgba(19,183,195,.10),
        rgba(255,255,255,.95)
      );
}

.chat-panel-head > div{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.chat-panel-head strong{
    color:var(--ink);
    font-size:15px;
}

.chat-panel-head small{
    color:var(--muted);
    font-size:10px;
}

.chat-close{
    width:32px;
    height:32px;

    border:0;
    border-radius:10px;

    background:#f2f7f8;
    color:var(--ink);

    font-size:21px;
    cursor:pointer;
}


.chat-contact-screen,
.chat-thread-screen{
    min-height:0;
    flex:1;
}

.chat-contact-screen{
    display:flex;
    flex-direction:column;
}


.chat-search-wrap{
    padding:10px 12px;
    border-bottom:1px solid var(--line);
}

.chat-search-wrap input{
    width:100%;
    min-height:39px;

    padding:8px 11px;

    border:1px solid var(--line);
    border-radius:11px;

    background:#f8fbfc;
    color:var(--ink);

    font-family:inherit;
    outline:none;
}

.chat-search-wrap input:focus{
    border-color:var(--brand);
}


.chat-contact-list{
    min-height:0;
    overflow:auto;
    flex:1;
    padding:5px 8px 10px;
}

.chat-contact-item{
    width:100%;

    display:flex;
    align-items:center;
    gap:10px;

    min-height:62px;
    padding:8px;

    border:0;
    border-bottom:1px solid var(--line);

    background:transparent;
    color:var(--ink);

    text-align:right;
    font-family:inherit;

    cursor:pointer;
}

.chat-contact-item:hover{
    background:rgba(10,161,177,.055);
}

.chat-contact-avatar,
.chat-person-avatar{
    width:39px;
    height:39px;
    min-width:39px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:13px;

    background:
      linear-gradient(
        145deg,
        #e4f7f8,
        #d6eef1
      );

    color:var(--brand-dark);

    font-weight:800;
}

.chat-contact-copy{
    min-width:0;
    flex:1;

    display:flex;
    flex-direction:column;
    gap:2px;
}

.chat-contact-copy strong{
    color:var(--ink);
    font-size:12px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.chat-contact-copy small{
    color:var(--muted);
    font-size:9px;
}

.chat-contact-unread{
    min-width:20px;
    height:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 5px;

    border-radius:999px;

    background:var(--brand);
    color:#fff;

    font-size:9px;
    font-weight:800;
}

.chat-loading,
.chat-empty{
    padding:26px 12px;
    text-align:center;
    color:var(--muted);
    font-size:11px;
}


/* Thread */

.chat-thread-screen{
    display:flex;
    flex-direction:column;
}

.chat-thread-screen[hidden]{
    display:none;
}

.chat-thread-head{
    min-height:58px;

    display:flex;
    align-items:center;
    gap:8px;

    padding:8px 10px;

    border-bottom:1px solid var(--line);
}

.chat-thread-head > div{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.chat-thread-head strong{
    font-size:12px;
    color:var(--ink);
}

.chat-thread-head small{
    font-size:9px;
    color:var(--muted);
}

.chat-back{
    width:31px;
    height:31px;

    border:0;
    border-radius:9px;

    background:#f2f7f8;
    color:var(--ink);

    font-family:inherit;
    cursor:pointer;
}


.chat-messages{
    min-height:0;
    flex:1;

    display:flex;
    flex-direction:column;
    gap:7px;

    overflow:auto;

    padding:12px;

    background:#f6fafb;
}

.chat-message{
    max-width:82%;

    display:flex;
    flex-direction:column;
    gap:3px;

    padding:8px 10px;

    border-radius:13px;

    white-space:pre-wrap;
    overflow-wrap:anywhere;

    font-size:11px;
    line-height:1.65;
}

.chat-message.mine{
    align-self:flex-start;

    background:
      linear-gradient(
        145deg,
        #13aebb,
        #078dc1
      );

    color:#fff;

    border-bottom-left-radius:4px;
}

.chat-message.theirs{
    align-self:flex-end;

    background:#fff;
    color:var(--ink);

    border:1px solid var(--line);

    border-bottom-right-radius:4px;
}

.chat-message time{
    font-size:8px;
    opacity:.72;
    direction:ltr;
}


.chat-compose{
    display:flex;
    align-items:flex-end;
    gap:7px;

    padding:9px;

    border-top:1px solid var(--line);

    background:#fff;
}

.chat-compose textarea{
    min-height:40px;
    max-height:105px;

    flex:1;

    resize:none;

    padding:9px 10px;

    border:1px solid var(--line);
    border-radius:11px;

    background:#f8fbfc;
    color:var(--ink);

    font-family:inherit;
    outline:none;
}

.chat-compose textarea:focus{
    border-color:var(--brand);
}

.chat-compose button{
    min-height:40px;

    padding:7px 13px;

    border:0;
    border-radius:11px;

    background:var(--brand);
    color:#fff;

    font-family:inherit;
    font-weight:700;

    cursor:pointer;
}


/* Notification clickable rows */

.notification-click-row{
    text-decoration:none;
    color:inherit;
    cursor:pointer;
}

.notification-click-row:hover{
    background:rgba(6,157,172,.055);
}


@media(max-width:600px){
    .chat-launcher{
        left:14px;
        bottom:14px;
    }

    .chat-panel{
        left:10px;
        right:10px;
        bottom:78px;

        width:auto;
        height:min(620px, calc(100vh - 100px));
    }
}



/* Chat account photos */
.chat-contact-avatar,
.chat-person-avatar{
    overflow:hidden;
}

.chat-contact-avatar img,
.chat-person-avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.chat-compose button:disabled{
    opacity:.65;
    cursor:wait;
}



/* === LIVE EVENTS === */

.live-toast-stack{
    position:fixed;
    top:88px;
    left:22px;
    z-index:12000;

    width:min(360px, calc(100vw - 30px));

    display:flex;
    flex-direction:column;
    gap:9px;

    pointer-events:none;
}

.live-toast{
    position:relative;

    display:grid;
    grid-template-columns:10px 1fr auto;
    align-items:center;
    gap:10px;

    min-height:68px;
    padding:12px 13px;

    border:1px solid var(--line);
    border-radius:16px;

    background:rgba(255,255,255,.98);

    box-shadow:
      0 14px 38px rgba(17,55,65,.20);

    color:var(--ink);
    text-decoration:none;

    pointer-events:auto;

    animation:
      liveToastIn .24s ease both;
}

.live-toast-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--brand);
}

.live-toast.warning .live-toast-dot{
    background:#e5a12c;
}

.live-toast.danger .live-toast-dot{
    background:#df4957;
}

.live-toast.success .live-toast-dot{
    background:#26b77d;
}

.live-toast-copy{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:3px;
}

.live-toast-copy strong{
    color:var(--ink);
    font-size:12px;
}

.live-toast-copy span{
    color:var(--muted);
    font-size:10px;
    line-height:1.5;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.live-toast-arrow{
    color:var(--brand);
    font-size:18px;
}

.live-toast.removing{
    animation:
      liveToastOut .22s ease both;
}

@keyframes liveToastIn{
    from{
        opacity:0;
        transform:translateY(-12px) scale(.98);
    }
    to{
        opacity:1;
        transform:none;
    }
}

@keyframes liveToastOut{
    to{
        opacity:0;
        transform:translateY(-10px) scale(.98);
    }
}

@media(max-width:600px){
    .live-toast-stack{
        top:76px;
        left:10px;
        right:10px;
        width:auto;
    }
}


/* Review inbox compact delivery files */
.review-delivery-files{
    margin:13px 0;
    padding-top:11px;
    border-top:1px solid var(--line);
}

.review-delivery-files-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.review-delivery-files-head strong{
    font-size:11px;
}

.review-delivery-files-head small{
    color:var(--muted);
    font-size:9px;
}

.review-delivery-file-list{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.review-delivery-file{
    display:flex;
    align-items:center;
    gap:8px;

    min-height:52px;
    padding:5px 7px;

    border:1px solid var(--line);
    border-radius:10px;

    background:#fff;
}

.review-delivery-thumb{
    width:44px;
    height:44px;
    min-width:44px;

    display:block;
    overflow:hidden;

    border:1px solid var(--line);
    border-radius:8px;

    background:#f4f8f9;
    cursor:pointer;
}

.review-delivery-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.review-delivery-generic{
    width:44px;
    height:44px;
    min-width:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:8px;
    background:#f3f8f9;

    font-size:18px;
}

.review-delivery-info{
    min-width:0;
    flex:1;

    display:flex;
    flex-direction:column;
    gap:2px;
}

.review-delivery-info strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:10px;
}

.review-delivery-info small{
    color:var(--muted);
    font-size:8px;
}

.review-delivery-download{
    flex-shrink:0;

    padding:6px 10px;

    border:1px solid var(--brand);
    border-radius:8px;

    color:var(--brand-dark);
    background:rgba(5,149,184,.05);

    text-decoration:none;
    font-size:10px;
    font-weight:800;
}

.review-delivery-download:hover{
    background:var(--brand);
    color:#fff;
}

.review-decision-btn{
    margin-top:3px;
}



/* === REVIEW FORM IMAGE PREVIEW === */

.review-form-files{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-top:10px;
}

.review-form-file{
    display:flex;
    align-items:center;
    gap:9px;

    min-height:60px;
    padding:6px 8px;

    border:1px solid var(--line);
    border-radius:11px;

    background:#fff;
}

.review-form-thumb{
    width:50px;
    height:50px;
    min-width:50px;

    padding:0;
    overflow:hidden;

    border:1px solid var(--line);
    border-radius:9px;

    background:#f4f8f9;
    cursor:pointer;
}

.review-form-thumb img{
    width:100%;
    height:100%;

    display:block;
    object-fit:cover;

    transition:transform .18s ease;
}

.review-form-thumb:hover img{
    transform:scale(1.06);
}

.review-form-file-icon{
    width:50px;
    height:50px;
    min-width:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:9px;

    background:#f2f7f8;

    font-size:20px;
}

.review-form-file-copy{
    min-width:0;
    flex:1;

    display:flex;
    flex-direction:column;
    gap:2px;
}

.review-form-file-copy strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:11px;
}

.review-form-file-copy small{
    color:var(--muted);
    font-size:9px;
}

.review-form-download{
    flex-shrink:0;

    padding:7px 11px;

    border:1px solid var(--brand);
    border-radius:9px;

    color:var(--brand-dark);
    background:rgba(5,149,184,.05);

    text-decoration:none;

    font-size:10px;
    font-weight:800;
}

.review-form-download:hover{
    background:var(--brand);
    color:#fff;
}

.review-submission-note{
    margin-top:16px;
    padding-top:13px;

    border-top:1px solid var(--line);
}


/* Full image viewer */

.review-image-viewer{
    position:fixed;
    inset:0;

    z-index:20000;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;
}

.review-image-viewer[hidden]{
    display:none;
}

.review-image-viewer-backdrop{
    position:absolute;
    inset:0;

    border:0;

    background:rgba(3,18,24,.78);
    backdrop-filter:blur(3px);

    cursor:pointer;
}

.review-image-viewer-box{
    position:relative;
    z-index:1;

    width:min(1200px, 95vw);
    max-height:94vh;

    display:flex;
    flex-direction:column;

    padding:10px;

    border-radius:18px;

    background:#fff;

    box-shadow:
      0 30px 90px rgba(0,0,0,.35);
}

.review-image-viewer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:5px 6px 10px;
}

.review-image-viewer-head strong{
    min-width:0;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:12px;
}

.review-image-viewer-close{
    width:34px;
    height:34px;

    border:0;
    border-radius:10px;

    background:#eef5f6;
    color:var(--ink);

    font-size:23px;
    cursor:pointer;
}

.review-image-viewer-content{
    min-height:0;
    flex:1;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:auto;

    border-radius:12px;

    background:#eaf0f2;
}

.review-image-viewer-content img{
    display:block;

    max-width:100%;
    max-height:75vh;

    object-fit:contain;
}

.review-image-viewer-download{
    align-self:center;
    margin-top:10px;
}


/* =========================================================
   SALES INLINE EXCEL-LIKE ENTRY
   ========================================================= */

.sales-inline-sheet{
    min-width:1540px;
}

.sales-inline-sheet td,
.sales-inline-sheet th{
    vertical-align:middle;
}

.sales-inline-row{
    background:
      linear-gradient(
        90deg,
        rgba(20,185,195,.07),
        rgba(255,255,255,.96)
      ) !important;
}

.sales-inline-row.saving{
    opacity:.7;
}

.sales-cell-input{
    width:100%;
    min-width:92px;
    height:34px;

    padding:5px 7px;

    border:1px solid #cddfe3;
    border-radius:7px;

    background:#fff;
    color:var(--ink);

    font-family:inherit;
    font-size:10px;

    outline:none;
}

.sales-cell-input:focus{
    border-color:var(--brand);
    box-shadow:
      0 0 0 2px
      rgba(10,171,184,.09);
}

.sales-phone-input{
    min-width:125px;
}

.sales-check-cell{
    text-align:center;
}

.sales-mini-check{
    width:19px;
    height:19px;

    accent-color:var(--brand);
    cursor:pointer;
}

.sales-fixed-owner{
    display:block;

    min-width:95px;

    color:var(--ink);
    font-size:10px;
    font-weight:700;
}

.sales-inline-state{
    color:var(--brand-dark);

    font-size:9px;
    font-weight:700;
}

.sales-inline-actions{
    white-space:nowrap;
}

.sales-inline-save,
.sales-inline-cancel,
.sales-inline-edit{
    width:31px;
    height:31px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:1px solid var(--line);
    border-radius:8px;

    background:#fff;
    color:var(--brand-dark);

    font-family:inherit;
    font-size:15px;
    font-weight:900;

    cursor:pointer;
}

.sales-inline-save{
    border-color:var(--brand);
    background:var(--brand);
    color:#fff;
}

.sales-inline-cancel{
    margin-inline-start:3px;
    color:#9a5555;
}

.sales-inline-edit:hover{
    border-color:var(--brand);
    background:rgba(5,149,184,.06);
}

.sales-inline-message{
    margin:10px 0;

    padding:9px 12px;

    border-radius:9px;

    font-size:11px;
    font-weight:700;
}

.sales-inline-message.success{
    background:#e7f8f2;
    color:#187a59;
    border:1px solid #bfe9da;
}

.sales-inline-message.error{
    background:#fff0f1;
    color:#a43d48;
    border:1px solid #f2c9ce;
}

.sales-empty-row td{
    text-align:center;
    color:var(--muted);
}

@media(max-width:900px){
    .sales-inline-sheet{
        min-width:1450px;
    }
}



/* === CAMPAIGN SALES PHASE 2 START === */

.campaign-province-check{
    accent-color:var(--brand);
}

.form-group:has(.campaign-province-check){
    padding:14px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(5,149,184,.035);
}

.form-group:has(.campaign-province-check) > div{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin-top:8px;
}

.form-group:has(.campaign-province-check) label{
    display:flex;
    align-items:center;
    gap:7px;
    cursor:pointer;
}

.form-group:has(.campaign-province-check) input{
    width:17px;
    height:17px;
}

.province-chip-list{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:5px;
    margin-top:7px;
}

.province-chip{
    display:inline-flex;
    align-items:center;
    min-height:25px;
    padding:4px 9px;
    border:1px solid rgba(5,149,184,.18);
    border-radius:999px;
    background:rgba(5,149,184,.07);
    color:var(--brand-dark);
    font-size:9px;
    font-weight:700;
    white-space:nowrap;
}

.sales-campaign-scope{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:11px;
}

.sales-campaign-scope > span{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:6px 10px;
    border:1px solid rgba(255,255,255,.26);
    border-radius:999px;
    background:rgba(255,255,255,.10);
    font-size:10px;
}

.sales-inline-sheet{
    min-width:1440px;
}

.sales-inline-row{
    background:
        linear-gradient(
            90deg,
            rgba(20,185,195,.065),
            rgba(255,255,255,.98)
        ) !important;
}

.sales-inline-row.saving{
    opacity:.62;
    pointer-events:none;
}

.sales-cell-input{
    width:100%;
    min-width:92px;
    height:35px;
    padding:5px 7px;
    border:1px solid #cddfe3;
    border-radius:7px;
    background:#fff;
    color:var(--ink);
    font-family:inherit;
    font-size:10px;
    outline:none;
}

.sales-cell-input:focus{
    border-color:var(--brand);
    box-shadow:
        0 0 0 2px
        rgba(10,171,184,.09);
}

.sales-phone-input{
    min-width:125px;
}

.sales-check-cell{
    text-align:center;
}

.sales-mini-check{
    width:19px;
    height:19px;
    accent-color:var(--brand);
    cursor:pointer;
}

.sales-fixed-owner{
    display:block;
    min-width:95px;
    font-size:10px;
    font-weight:700;
}

.sales-inline-state{
    color:var(--brand-dark);
    font-size:9px;
    font-weight:700;
}

.sales-inline-actions{
    white-space:nowrap;
}

.sales-inline-save,
.sales-inline-cancel,
.sales-inline-edit{
    width:31px;
    height:31px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    color:var(--brand-dark);
    font-family:inherit;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
}

.sales-inline-save{
    border-color:var(--brand);
    background:var(--brand);
    color:#fff;
}

.sales-inline-cancel{
    margin-inline-start:3px;
    color:#9a5555;
}

.sales-inline-edit:hover{
    border-color:var(--brand);
    background:rgba(5,149,184,.06);
}

.sales-inline-message{
    margin:10px 0;
    padding:9px 12px;
    border-radius:9px;
    font-size:11px;
    font-weight:700;
}

.sales-inline-message.success{
    background:#e7f8f2;
    color:#187a59;
    border:1px solid #bfe9da;
}

.sales-inline-message.error{
    background:#fff0f1;
    color:#a43d48;
    border:1px solid #f2c9ce;
}

@media(max-width:900px){

    .form-group:has(.campaign-province-check) > div{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .sales-inline-sheet{
        min-width:1380px;
    }
}

/* === CAMPAIGN SALES PHASE 2 END === */

/* === SALES PHASE 2.1 ACTIONS === */

.sales-row-actions,
.assignment-row-actions{
    display:flex;
    align-items:center;
    gap:5px;
    white-space:nowrap;
}

.sales-inline-delete,
.assignment-delete-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:31px;
    height:31px;
    padding:0 7px;
    border:1px solid #efc7cc !important;
    border-radius:8px;
    background:#fff5f6 !important;
    color:#a83e49 !important;
    font-family:inherit;
    cursor:pointer;
}

.sales-inline-delete:hover,
.assignment-delete-btn:hover{
    background:#ffe8eb !important;
    border-color:#dc9099 !important;
}

.sales-inline-delete:disabled{
    opacity:.45;
    cursor:not-allowed;
}



/* === MOBILE PHASE 1 START === */

@media (max-width: 768px){

    html{
        -webkit-text-size-adjust:100%;
    }

    body{
        font-size:14px;
        overflow-x:hidden;
    }

    /* =========================
       TOPBAR
       ========================= */

    .topbar{
        min-height:64px;
        height:64px;
        padding:0 10px;
        gap:6px;
    }

    .top-title{
        min-width:0;
        flex:1;
    }

    .top-title h1{
        font-size:14px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .top-title p{
        display:none;
    }

    .top-actions{
        margin-right:auto;
        gap:4px;
    }

    .icon-btn{
        width:42px;
        height:42px;
        min-width:42px;
        border-radius:11px;
    }

    .user-chip{
        padding:2px;
    }

    .user-chip strong,
    .user-chip small{
        display:none;
    }

    .user-chip img,
    .user-chip .avatar-fallback{
        width:40px;
        height:40px;
        border-radius:11px;
    }

    .logout-btn{
        min-height:40px;
        padding:7px 9px;
        font-size:11px;
    }


    /* =========================
       SIDEBAR
       ========================= */

    .sidebar{
        width:min(86vw,320px);
        padding:18px 14px;
        z-index:120;
        box-shadow:-18px 0 45px rgba(7,31,42,.18);
    }

    .sidebar .brand-block{
        padding-bottom:16px;
    }

    .sidebar .nav-list{
        margin-top:14px;
    }

    .sidebar .nav-item{
        min-height:46px;
        padding:11px 12px;
        font-size:13px;
    }

    .sidebar-collapse,
    .sidebar-expand-fab{
        display:none !important;
    }

    .sidebar-backdrop{
        z-index:110;
    }


    /* =========================
       PAGE LAYOUT
       ========================= */

    .page-wrap{
        padding:14px 12px 90px;
        max-width:100%;
    }

    .page-head,
    .page-head.compact{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
        margin-bottom:16px;
    }

    .page-head h2{
        font-size:22px;
        line-height:1.35;
        margin:3px 0 5px;
    }

    .page-head p{
        font-size:12px;
        line-height:1.7;
    }

    .head-date{
        align-self:flex-start;
    }

    .kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
        margin-bottom:12px;
    }

    .kpi-card{
        padding:14px 12px;
        border-radius:14px;
    }

    .kpi-card strong{
        font-size:24px;
        margin:8px 0 5px;
    }

    .content-grid,
    .two-col{
        grid-template-columns:1fr;
        gap:12px;
    }

    .panel{
        border-radius:14px;
    }

    .panel-head{
        padding:15px 14px;
        gap:10px;
        flex-wrap:wrap;
    }

    .panel-head h3{
        font-size:14px;
    }

    .panel-head p{
        font-size:11px;
    }


    /* =========================
       FORMS
       ========================= */

    .form-panel{
        padding:14px;
    }

    .form-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .field-input,
    .chat-search-wrap input,
    .chat-compose textarea{
        font-size:16px;
    }

    .field-input{
        min-height:46px;
        padding:11px 12px;
    }

    textarea.field-input{
        min-height:110px;
    }

    .form-actions{
        flex-direction:column-reverse;
        align-items:stretch;
        gap:8px;
    }

    .form-actions .btn{
        width:100%;
    }

    .btn{
        min-height:44px;
        padding:10px 14px;
    }

    .permission-list ul{
        grid-template-columns:1fr;
    }


    /* =========================
       TABLES
       ========================= */

    .table-toolbar{
        padding:10px;
        flex-wrap:wrap;
    }

    .table-toolbar .field-input,
    .table-toolbar .search-input{
        max-width:none;
        width:100%;
    }

    .table-wrap{
        width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .data-table{
        min-width:760px;
    }

    .data-table th,
    .data-table td{
        padding:11px 12px;
    }


    /* =========================
       FLASH / NOTIFICATIONS
       ========================= */

    .flash-stack{
        left:10px;
        right:10px;
        top:72px;
    }

    .flash{
        width:100%;
    }


    /* =========================
       INTERNAL CHAT
       MOBILE APP MODE
       ========================= */

    .internal-chat{
        z-index:300;
    }

    .chat-launcher{
        width:58px;
        height:58px;
        left:14px;
        bottom:14px;
        border-radius:18px;
    }

    .chat-panel{
        position:fixed !important;
        inset:0 !important;
        width:100% !important;
        max-width:none !important;
        height:100vh !important;
        height:100dvh !important;
        max-height:none !important;
        border-radius:0 !important;
        z-index:320 !important;
    }

    .chat-panel-head{
        min-height:64px;
        padding:10px 12px;
        flex:0 0 auto;
    }

    .chat-panel-head strong{
        font-size:15px;
    }

    .chat-panel-head small{
        font-size:10px;
    }

    .chat-close,
    .chat-back{
        width:44px;
        height:44px;
        min-width:44px;
        border-radius:12px;
    }

    .chat-contact-screen,
    .chat-thread-screen{
        min-height:0;
        height:100%;
    }

    .chat-contact-screen{
        overflow:hidden;
    }

    .chat-search-wrap{
        padding:10px 12px;
    }

    .chat-search-wrap input{
        min-height:46px;
        border-radius:13px;
        padding:10px 12px;
    }

    .chat-contact-list{
        flex:1;
        min-height:0;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    .chat-contact-item{
        min-height:70px;
        padding:10px 12px;
    }

    .chat-contact-avatar,
    .chat-person-avatar{
        width:46px;
        height:46px;
        min-width:46px;
        border-radius:14px;
    }

    .chat-contact-copy strong{
        font-size:13px;
    }

    .chat-contact-copy small{
        font-size:11px;
    }

    .chat-thread-screen{
        display:flex;
        flex-direction:column;
        overflow:hidden;
    }

    .chat-thread-screen[hidden]{
        display:none !important;
    }

    .chat-thread-head{
        min-height:64px;
        flex:0 0 auto;
        padding:8px 10px;
    }

    .chat-messages{
        flex:1 1 auto;
        min-height:0;
        overflow-y:auto;
        padding:14px 10px 20px;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
    }

    .chat-message{
        max-width:86%;
        font-size:13px;
        line-height:1.6;
        padding:9px 11px;
        border-radius:15px;
    }

    .chat-message time{
        font-size:9px;
    }

    .chat-compose{
        flex:0 0 auto;
        padding:
            9px
            9px
            max(9px, env(safe-area-inset-bottom));
        gap:7px;
        background:#fff;
        border-top:1px solid var(--line);
    }

    .chat-compose textarea{
        min-height:46px;
        max-height:120px;
        padding:11px 12px;
        border-radius:14px;
        resize:none;
    }

    .chat-compose button{
        width:48px;
        height:48px;
        min-width:48px;
        border-radius:14px;
    }

}


@media (max-width: 480px){

    .kpi-grid{
        grid-template-columns:1fr;
    }

    .page-wrap{
        padding-inline:10px;
    }

    .logout-btn{
        display:none;
    }

}

/* === MOBILE PHASE 1 END === */

/* === MOBILE INPUT ZOOM FIX === */
@media (max-width: 768px){

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea{
        font-size:16px !important;
    }

    .chat-compose textarea,
    .chat-search-wrap input,
    .field-input{
        font-size:16px !important;
    }

}


/* === MOBILE ZOOM FINAL FIX === */

@media (max-width: 768px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    input,
    textarea,
    select,
    button{
        -webkit-text-size-adjust:100%;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    textarea,
    select,
    .field-input,
    .chat-compose textarea,
    .chat-search-wrap input{
        font-size:16px !important;
        line-height:1.4 !important;
    }

    input,
    textarea,
    select,
    button,
    a{
        touch-action:manipulation;
    }

}

/* === MOBILE ZOOM FINAL FIX END === */


/* === CAMPAIGN PROMOTION UI PHASE 2 === */

.campaign-content-panel{
    margin-bottom:18px;
}

.campaign-content-list{
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.campaign-content-card{
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
    overflow:hidden;
}

.campaign-content-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:17px 18px;
    background:#fbfdfd;
    border-bottom:1px solid var(--line);
}

.campaign-content-title{
    display:flex;
    align-items:center;
    gap:13px;
    min-width:0;
}

.content-sequence{
    width:44px;
    height:44px;
    min-width:44px;
    border-radius:13px;
    display:grid;
    place-items:center;
    background:#e6f6f6;
    color:var(--brand-dark);
    font-weight:900;
}

.campaign-content-title h4{
    margin:6px 0 4px;
    font-size:15px;
}

.campaign-content-title small{
    color:var(--muted);
    font-size:10px;
}

.content-head-actions{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.content-mini-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1px;
    background:var(--line);
    border-bottom:1px solid var(--line);
}

.content-mini-stats>div{
    background:#fff;
    padding:12px 16px;
}

.content-mini-stats span,
.content-mini-stats strong{
    display:block;
}

.content-mini-stats span{
    color:var(--muted);
    font-size:9px;
}

.content-mini-stats strong{
    margin-top:4px;
    font-size:17px;
    color:var(--navy);
}

.promotion-list{
    padding:8px 16px;
}

.promotion-row{
    display:grid;
    grid-template-columns:
        minmax(180px,1.2fr)
        minmax(180px,1fr)
        90px
        110px
        auto;
    gap:12px;
    align-items:center;
    padding:13px 3px;
    border-bottom:1px solid var(--line);
}

.promotion-row:last-child{
    border-bottom:0;
}

.promotion-main{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
}

.promotion-main>strong{
    direction:ltr;
    font-size:12px;
    color:var(--brand-dark);
}

.promotion-main small{
    width:100%;
    color:var(--muted);
    font-size:9px;
}

.promotion-provinces{
    display:flex;
    gap:5px;
    flex-wrap:wrap;
}

.promotion-provinces span{
    background:#edf6f7;
    color:#24656d;
    padding:5px 8px;
    border-radius:99px;
    font-size:9px;
}

.promotion-result span,
.promotion-result strong,
.promotion-money span,
.promotion-money strong{
    display:block;
}

.promotion-result span,
.promotion-money span{
    color:var(--muted);
    font-size:9px;
}

.promotion-result strong,
.promotion-money strong{
    margin-top:4px;
    color:var(--navy);
}

.promotion-empty{
    padding:18px 3px;
    color:var(--muted);
    font-size:11px;
}

.finance-card{
    background:
        linear-gradient(
            145deg,
            #fff,
            #f0faf8
        );
}

.promotion-context{
    margin-bottom:16px;
    padding:16px 20px;
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:14px;
}

.promotion-context>div{
    padding-left:14px;
    border-left:1px solid var(--line);
}

.promotion-context span,
.promotion-context strong{
    display:block;
}

.promotion-context span{
    color:var(--muted);
    font-size:9px;
}

.promotion-context strong{
    margin-top:5px;
    font-size:12px;
}

@media(max-width:950px){

    .promotion-row{
        grid-template-columns:
            1fr 1fr;
    }

    .promotion-context{
        grid-template-columns:1fr;
    }

    .promotion-context>div{
        border-left:0;
        border-bottom:1px solid var(--line);
        padding:5px 0 12px;
    }

}

@media(max-width:650px){

    .campaign-content-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .content-head-actions{
        width:100%;
    }

    .content-head-actions .btn{
        flex:1;
    }

    .content-mini-stats{
        grid-template-columns:1fr;
    }

    .promotion-row{
        grid-template-columns:1fr;
    }

}

/* === END CAMPAIGN PROMOTION UI PHASE 2 === */