@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap');

html{

  -webkit-text-size-adjust:100%;

  -webkit-tap-highlight-color:transparent;

  touch-action:manipulation;

  scroll-behavior:smooth;

  /* iOS safe area variables */

  --safe-top:env(safe-area-inset-top, 0px);

  --safe-bottom:env(safe-area-inset-bottom, 0px);

  --safe-left:env(safe-area-inset-left, 0px);

  --safe-right:env(safe-area-inset-right, 0px);

}

*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

*:focus-visible{outline:2px solid var(--org);outline-offset:2px}

button,a,input,select,textarea,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* Prevent iOS zoom on input focus by ensuring 16px+ */

input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="datetime-local"],input[type="time"],input[type="search"],input[type="tel"],input[type="url"],select,textarea{font-size:16px}

/* Disable pull-to-refresh on iOS Safari to feel native */

body, html { overscroll-behavior-y: none; }

@media (hover:hover){input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="datetime-local"],input[type="time"],input[type="search"],input[type="tel"],input[type="url"],select,textarea{font-size:14px}}

:root{

  --org:#6d28d9;--org-l:#ede9fe;--org-d:#5b21b6;

  --brown:#5b21b6;--brown-l:#ece7f7;

  --green:#1a7a4a;--green-l:#e8f5ee;

  --red:#8B1a1a;--red-l:#fef0f0;

  --blue:#1a4a7a;--blue-l:#e8f0f8;

  --purple:#6a1b9a;--purple-l:#f3e5f5;

  --yellow:#f57f17;--yellow-l:#fff9c4;

  --pink:#c2185b;--pink-l:#fce4ec;

  --gray:#607d8b;--gray-l:#eceff1;

  --dark:#150F26;--text: #ffffff;--muted:#7d768f;--bdr:#ebe7f5;--bg: #100a20;

}

html[lang="en"]{font-family:'Inter',sans-serif}

html[lang="ar"]{font-family:'Tajawal',sans-serif}

body{background:var(--bg);color:var(--text);font-size:13.5px;min-height:100vh;line-height:1.62;letter-spacing:-0.01em}

/* THEME CONTRAST FIX
   The app shell (.main-content) and all pop-up modals sit on LIGHT (cream)
   surfaces, but text inherited the old dark-theme white. Scope a dark,
   readable colour to those light regions: --text covers rules that use
   var(--text); the explicit `color` covers everything that merely INHERITS
   (plain text + line icons). Elements that need white on a coloured/dark
   background (buttons, badges, dark headers, sidebar, auth screens) set their
   own explicit white, which still wins over this inherited dark. */
.main-content, .modal-overlay { --text: #211B2E; color: #211B2E; }

strong,b{font-weight:800}

button,input,select,textarea{letter-spacing:inherit}



/* ============ MARK MAP LOGO ============ */

.dal-logo{display:inline-flex;align-items:center;gap:6px;font-weight:900;letter-spacing:-1px}

.dal-logo svg{display:block}



/* ============ SETUP SCREEN ============ */

.setup-screen{position:fixed;inset:0;background:#150f26;z-index:10000;display:none;align-items:center;justify-content:center;padding:1.5rem;overflow-y:auto}

.setup-box{max-width:560px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:32px;color:white}

.setup-icon{font-size:50px;text-align:center;margin-bottom:14px}

.setup-title{font-size:20px;font-weight:900;text-align:center;color:var(--org);margin-bottom:6px}

.setup-sub{text-align:center;color:rgba(255,255,255,.6);font-size:12px;margin-bottom:20px}

.setup-step{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px;margin-bottom:10px;font-size:12px;line-height:1.7}

.setup-step strong{color:var(--org)}

.setup-step code{background:rgba(109,40,217,.15);color:#ffb380;padding:2px 6px;border-radius:4px;font-size:12px;direction:ltr;display:inline-block}



/* ============ LOGIN SCREEN ============ */

.login-screen{position:fixed;inset:0;background:linear-gradient(135deg,#050b14 0%,#0a192f 50%,#000000 100%);z-index:9999;display:none;align-items:center;justify-content:center;padding:1rem;overflow-y:auto}

.login-bg-pattern{position:absolute;inset:0;opacity:.18;background-image:none;background-size:cover;background-position:center;pointer-events:none;mix-blend-mode:overlay}

.login-bg-pattern::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(167,139,250,.15) 0%,transparent 45%),radial-gradient(circle at 80% 70%,rgba(0,100,255,.15) 0%,transparent 45%);pointer-events:none}

.login-box{background:rgba(255,255,255,.04);backdrop-filter:blur(28px);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:40px 34px;max-width:420px;width:100%;text-align:center;position:relative;z-index:1;box-shadow:0 30px 80px rgba(0,0,0,.6)}

.login-logo-wrap{margin-bottom:14px;display:flex;justify-content:center}

.login-tagline{color:rgba(255,255,255,.5);font-size:11px;margin-bottom:24px;letter-spacing:2px;text-transform:uppercase}

.team-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(26,122,74,.2);border:1px solid rgba(26,122,74,.4);color:#7fd9a8;font-size:10px;font-weight:700;padding:3px 9px;border-radius:12px;margin-bottom:20px;letter-spacing:.5px}

.login-form-row{margin-bottom:14px;text-align:start}

.login-label{display:block;font-size:10px;font-weight:700;color:rgba(255,255,255,.6);margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}

.login-input{width:100%;padding:12px 14px;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1);border-radius:10px;color:white;font-family:inherit;font-size:14px;transition:all .2s}

.login-input:focus{outline:none;border-color:var(--org);background:rgba(255,255,255,.1)}

.login-input::placeholder{color:rgba(255,255,255,.3)}

.password-wrapper{position:relative}

[dir="rtl"] .password-toggle{left:12px;right:auto}

[dir="ltr"] .password-toggle{right:12px;left:auto}

.password-toggle{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;color:rgba(255,255,255,.5);font-size:16px;padding:4px}

.password-toggle:hover{color:white}

[dir="rtl"] .login-input.has-toggle{padding-left:38px}

[dir="ltr"] .login-input.has-toggle{padding-right:38px}

.login-btn{width:100%;padding:13px;background:var(--org);color:white;border:none;border-radius:10px;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;transition:all .15s;margin-top:6px}

.login-btn:hover{background:var(--org-d);transform:translateY(-1px);box-shadow:0 8px 20px rgba(109,40,217,.4)}

.login-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

.login-error{background:rgba(139,26,26,.2);border:1px solid rgba(220,80,80,.4);color:#ff8080;padding:10px;border-radius:8px;font-size:12px;margin-bottom:14px;display:none}

.login-error.show{display:block;animation:shake .3s}

@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

.lang-switch-login{position:absolute;top:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:white;padding:6px 12px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}

[dir="rtl"] .lang-switch-login{left:20px}

[dir="ltr"] .lang-switch-login{right:20px}

.lang-switch-login:hover{background:rgba(255,255,255,.12)}

.login-foot{margin-top:18px;font-size:10px;color:rgba(255,255,255,.4);line-height:1.6}



/* ============ APP ============ */

.app{display:none}

.app.active{display:block}



.topbar{background:var(--dark);padding:12px 1.5rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;position:sticky;top:0;z-index:100}

.brand{color:white;font-size:14px;font-weight:800;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.sync-pill{background:rgba(26,122,74,.15);color:#7fd9a8;border:1px solid rgba(26,122,74,.4);padding:3px 9px;border-radius:12px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;gap:5px}

.sync-pill.syncing{background:rgba(245,127,23,.15);color:#ffd180;border-color:rgba(245,127,23,.4)}

.sync-pill.offline{background:rgba(139,26,26,.2);color:#ff9999;border-color:rgba(139,26,26,.5)}

.sync-dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}

.sync-pill.live .sync-dot{animation:pulse 2s infinite}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

.user-badge{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:5px}

.topbar-right{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

.btn{border:none;padding:7px 14px;border-radius:8px;font-family:inherit;font-weight:700;font-size:12px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px}

.btn-primary{background:var(--org);color:white}

.btn-primary:hover{background:var(--org-d)}

.btn-ghost{background:rgba(255,255,255,.1);color:white}

.btn-ghost:hover{background:rgba(255,255,255,.2)}

.btn-danger{background:var(--red);color:white}

.btn-primary{background:linear-gradient(135deg,var(--org),var(--brown));color:white;box-shadow:0 4px 12px rgba(109,40,217,.35)}

.btn-primary:hover{box-shadow:0 6px 16px rgba(109,40,217,.5)}

.btn-success{background:linear-gradient(135deg,#10b981,#059669);color:white;box-shadow:0 4px 12px rgba(16,185,129,.35)}

.btn-success:hover{box-shadow:0 6px 16px rgba(16,185,129,.5)}

.btn-warning{background:linear-gradient(135deg,#f59e0b,#d97706);color:white;box-shadow:0 4px 12px rgba(245,158,11,.35)}

.btn-warning:hover{box-shadow:0 6px 16px rgba(245,158,11,.5)}

.btn-danger:hover{background:#6d0e0e}

.btn-sm{padding:4px 9px;font-size:11px}



/* TABS */

.tabs-bar{background:white;border-bottom:1px solid var(--bdr);padding:0 1.5rem;display:flex;gap:4px;position:sticky;top:54px;z-index:99;overflow-x:auto}

.tab{padding:12px 20px;border:none;background:transparent;color:var(--muted);font-family:inherit;font-weight:700;font-size:12px;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;transition:all .15s;display:flex;align-items:center;gap:6px}

.tab-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#ece7f7,#fff);font-size:14px;line-height:1;box-shadow:0 1px 3px rgba(109,40,217,.08),inset 0 1px 0 rgba(255,255,255,.6);transition:all .25s;border:1px solid rgba(109,40,217,.08)}

.tab:hover .tab-icon{transform:translateY(-1px) scale(1.05);box-shadow:0 3px 8px rgba(109,40,217,.18),inset 0 1px 0 rgba(255,255,255,.6);background:linear-gradient(135deg,#ffe9cc,#fff)}

.tab.active .tab-icon{background:linear-gradient(135deg,var(--org),var(--brown));box-shadow:0 4px 10px rgba(109,40,217,.45);border-color:transparent;filter:drop-shadow(0 0 0 #fff)}

.tab.active .tab-icon{filter:saturate(1.2)}

.tab:hover{color:var(--text)}

.tab.active{color:var(--org-d);border-bottom-color:var(--org)}



/* STATS BAR */

.stats-bar{background:white;border-bottom:2px solid var(--bdr);padding:10px 1.5rem;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.stat{display:flex;flex-direction:column;align-items:center;min-width:50px}

.stat-n{font-size:18px;font-weight:900;color:var(--org);line-height:1}

.stat-l{font-size:10px;color:var(--muted);font-weight:600;margin-top:2px;text-align:center}

.stat-divider{width:1px;height:25px;background:var(--bdr)}

.search-box{flex:1;min-width:180px;max-width:280px;position:relative}

.search-input{width:100%;padding:7px 12px;border:1.5px solid var(--bdr);border-radius:8px;font-family:inherit;font-size:12px;background:#f9f8fc}

[dir="rtl"] .search-input{padding-left:32px}

[dir="ltr"] .search-input{padding-right:32px}

.search-input:focus{outline:none;border-color:var(--org)}
.search-box-icon{position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:11px;color:var(--muted);font-size:15px;pointer-events:none}

.search-icon{position:absolute;top:8px;font-size:14px;color:var(--muted)}

[dir="rtl"] .search-icon{left:10px}

[dir="ltr"] .search-icon{right:10px}

.filter-select{padding:7px 12px;border:1.5px solid var(--bdr);border-radius:8px;font-family:inherit;font-size:12px;background:white;cursor:pointer}



.main{max-width:1400px;margin:0 auto;padding:1.5rem}

.tab-content{display:none}

.tab-content.active{display:block}



.intro{background:linear-gradient(135deg,var(--org-l),#fff);border:1.5px solid var(--org);border-radius:14px;padding:14px 18px;margin-bottom:1.25rem;display:flex;gap:12px;align-items:flex-start}

.intro-icon{font-size:24px}

.intro-title{font-size:14px;font-weight:800;color:var(--org-d);margin-bottom:4px}

.intro-body{font-size:12px;color:var(--text);line-height:1.7}



/* ============ DASHBOARD ============ */

.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:1.25rem}

.dash-card{background:white;border:1px solid var(--bdr);border-radius:14px;padding:18px}

.dash-card-title{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;display:flex;align-items:center;gap:6px}

.dash-big-num{font-size:32px;font-weight:900;color:var(--org-d);line-height:1;margin-bottom:4px}

.dash-sub{font-size:11px;color:var(--muted)}

.status-bars{display:flex;flex-direction:column;gap:6px;margin-top:10px}

.status-bar-row{display:flex;align-items:center;gap:8px;font-size:11px}

.status-bar-label{min-width:75px;font-weight:600}

.status-bar-track{flex:1;height:7px;background:#eeecf4;border-radius:4px;overflow:hidden}

.status-bar-fill{height:100%;border-radius:4px;transition:width .3s}

.status-bar-num{font-weight:800;min-width:25px;text-align:end}

.team-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--bdr);font-size:12px}

.team-row:last-child{border-bottom:none}

.team-name{font-weight:700;color:var(--text)}

.team-num{font-weight:800;color:var(--org-d)}

.alert-list{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto}

.alert-item{display:flex;gap:10px;padding:10px;background:var(--red-l);border:1px solid #ffd0d0;border-radius:8px;font-size:11px}

.alert-item.warn{background:var(--yellow-l);border-color:#ffe680}

.alert-item.info{background:var(--blue-l);border-color:#cfdef0}

.alert-icon{font-size:16px;flex-shrink:0}

.alert-text{flex:1;line-height:1.5}

.alert-text strong{display:block;margin-bottom:2px;font-size:12px}

.alert-meta{color:var(--muted);font-size:10px;margin-top:2px}

.empty-msg{text-align:center;padding:1.5rem 0;color:var(--muted);font-size:11px}



/* ============ DAYS / POSTS ============ */

.day-group{background:white;border:1px solid var(--bdr);border-radius:14px;margin-bottom:14px;overflow:hidden}

.day-header{padding:12px 18px;background:#f9f8fc;border-bottom:1px solid var(--bdr);display:flex;justify-content:space-between;align-items:center;cursor:pointer;flex-wrap:wrap;gap:8px}

.day-header:hover{background:#f4f3f9}

.day-header-left{display:flex;align-items:center;gap:12px}

.day-num{background:var(--dark);color:white;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}

.day-num.weekend{background:var(--org)}

.day-info{display:flex;flex-direction:column}

.day-date{font-size:12px;font-weight:800;color:var(--dark)}

.day-name{font-size:11px;color:var(--muted)}

.day-header-right{display:flex;align-items:center;gap:8px}

.day-count{background:var(--green-l);color:var(--green);font-size:11px;font-weight:700;padding:3px 10px;border-radius:12px}

.day-toggle{font-size:14px;color:var(--muted);transition:transform .2s}

.day-group.expanded .day-toggle{transform:rotate(180deg)}

.posts-container{padding:14px;display:none}

.day-group.expanded .posts-container{display:block}

.post-card{background:#f9f8fc;border:1px solid var(--bdr);border-radius:10px;padding:12px 14px;margin-bottom:10px;position:relative;transition:all .15s;border-left:3px solid var(--bdr)}

[dir="rtl"] .post-card{border-left:none;border-right:3px solid var(--bdr)}

.post-card.s-draft{border-color:#9ca3af}

.post-card.s-review{border-color:#f59e0b}

.post-card.s-approved{border-color:#3b82f6}

.post-card.s-ready{border-color:#8b5cf6}

.post-card.s-published{border-color:#10b981}

.post-card.s-cancelled{border-color:#ef4444;opacity:.65}

.post-card.overdue{background:#fff5f5}

.post-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.06);background:white}

.post-card:last-child{margin-bottom:0}

.post-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px;flex-wrap:wrap}

.post-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

.platform-tag{font-size:10px;font-weight:700;padding:3px 9px;border-radius:8px;display:inline-flex;align-items:center;gap:3px}

.p-snap{background:#fff9c4;color:#f57f17}

.p-tiktok{background:#f5f5f5;color:#000}

.p-insta{background:var(--pink-l);color:var(--pink)}

.p-x{background:#e8eaf6;color:#000}

.p-whatsapp{background:#dcf8c6;color:#075e54}

.p-other{background:var(--gray-l);color:var(--gray)}

.time-tag{font-size:10px;color:var(--muted);font-weight:600}

.type-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px}

.t-post{background:var(--blue-l);color:var(--blue)}

.t-story{background:var(--purple-l);color:var(--purple)}

.t-reel{background:var(--pink-l);color:var(--pink)}

.t-campaign{background:var(--org-l);color:var(--org-d)}

.status-tag{font-size:10px;font-weight:800;padding:3px 9px;border-radius:8px;display:inline-flex;align-items:center;gap:4px}

.status-tag.s-draft{background:#f3f4f6;color:#4b5563}

.status-tag.s-review{background:#fef3c7;color:#92400e}

.status-tag.s-approved{background:#dbeafe;color:#1e40af}

.status-tag.s-ready{background:#ede9fe;color:#5b21b6}

.status-tag.s-published{background:#d1fae5;color:#065f46}

.status-tag.s-cancelled{background:#fee2e2;color:#991b1b}

.assignee-tag{font-size:10px;font-weight:700;padding:3px 9px;border-radius:8px;background:#e0e7ff;color:#3730a3;display:inline-flex;align-items:center;gap:3px}

.deadline-tag{font-size:10px;font-weight:700;padding:3px 9px;border-radius:8px;background:#fef3c7;color:#92400e;display:inline-flex;align-items:center;gap:3px}

.deadline-tag.overdue{background:#fee2e2;color:#991b1b;animation:pulse 2s infinite}

.post-actions{display:flex;gap:4px}

.icon-btn{background:transparent;border:none;cursor:pointer;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);transition:all .15s}

.icon-btn:hover{background:#f4f3f9;color:var(--text)}

.icon-btn.del:hover{background:var(--red-l);color:var(--red)}

.post-title{font-size:12px;font-weight:700;color:var(--dark);margin-bottom:4px}

.post-content{font-size:12px;color:var(--text);line-height:1.6;margin-bottom:6px;white-space:pre-wrap}

.post-hashtags{font-size:10px;color:var(--blue);font-weight:600;line-height:1.5;margin-bottom:6px}

.audit-line{font-size:9px;color:var(--muted);font-weight:600;border-top:1px dashed var(--bdr);padding-top:6px;margin-top:6px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}

.audit-line .who{color:var(--org-d);font-weight:700}

.comments-toggle{font-size:10px;color:var(--blue);font-weight:700;cursor:pointer;margin-top:4px;display:inline-flex;align-items:center;gap:4px}

.comments-toggle:hover{text-decoration:underline}

.comments-section{margin-top:8px;padding-top:8px;border-top:1px dashed var(--bdr);display:none}

.comments-section.show{display:block}

.comment-item{background:white;border:1px solid var(--bdr);border-radius:8px;padding:8px 10px;margin-bottom:6px;font-size:11px}

.comment-author{font-weight:800;color:var(--org-d);font-size:10px;margin-bottom:2px;display:flex;justify-content:space-between}

.comment-time{font-weight:600;color:var(--muted);font-size:9px}

.comment-text{color:var(--text);line-height:1.5}

.comment-form{display:flex;gap:6px;margin-top:6px}

.comment-input{flex:1;padding:6px 10px;border:1px solid var(--bdr);border-radius:8px;font-family:inherit;font-size:11px;background:white}

.comment-input:focus{outline:none;border-color:var(--org)}

.add-post-btn{width:100%;padding:8px;background:transparent;border:1.5px dashed var(--bdr);border-radius:8px;color:var(--muted);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;margin-top:5px}

.add-post-btn:hover{border-color:var(--org);color:var(--org);background:var(--org-l)}

.add-day-section{text-align:center;padding:1.5rem 0}



/* ============ AUTH SCREEN TABS (LOGIN / SIGN-UP) ============ */

.auth-tabs{display:flex;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:3px;margin-bottom:18px}

.auth-tab{flex:1;padding:9px 12px;background:transparent;border:none;color:rgba(255,255,255,.5);font-family:inherit;font-weight:700;font-size:12px;cursor:pointer;border-radius:7px;transition:all .15s}

.auth-tab:hover{color:rgba(255,255,255,.85)}

.auth-tab.active{background:var(--org);color:white;box-shadow:0 4px 12px rgba(109,40,217,.35)}

.auth-form{display:none}

.auth-form.active{display:block;animation:slideIn .25s}



/* ============ PENDING / DISABLED SCREEN ============ */

.status-screen{position:fixed;inset:0;background:linear-gradient(135deg,#050b14 0%,#0a192f 50%,#000000 100%);z-index:9800;display:none;align-items:center;justify-content:center;padding:1.5rem;overflow-y:auto}

.status-screen.active{display:flex}

.status-box{max-width:480px;background:rgba(255,255,255,.05);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:38px 32px;color:white;text-align:center;box-shadow:0 25px 60px rgba(0,0,0,.5)}

.status-icon-big{font-size:64px;margin-bottom:14px;line-height:1;animation:gentle-bounce 3s infinite ease-in-out}

@keyframes gentle-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.status-title{font-size:22px;font-weight:900;color:var(--org);margin-bottom:10px;line-height:1.3}

.status-message{font-size:12px;color:rgba(255,255,255,.75);line-height:1.7;margin-bottom:24px}

.status-info-card{background:rgba(109,40,217,.08);border:1px solid rgba(109,40,217,.25);border-radius:12px;padding:14px;margin-bottom:18px;text-align:start;font-size:12px;color:rgba(255,255,255,.85);line-height:1.7}

.status-info-card strong{color:var(--org)}

.status-info-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:11px;color:rgba(255,255,255,.6)}

.status-info-row:last-child{margin-bottom:0}

.status-info-row .lbl{font-weight:700;min-width:70px}

.status-info-row .val{color:white;font-weight:700}

.status-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

.status-link{color:var(--org);text-decoration:none;font-weight:700;font-size:11px}

.status-link:hover{text-decoration:underline}



/* ============ TEAM MANAGEMENT (ENHANCED) ============ */

.team-mgmt-wrap{background:white;border:1px solid var(--bdr);border-radius:14px;overflow:hidden;margin-top:14px}

.team-mgmt-table{width:100%;border-collapse:collapse}

.team-mgmt-table th{background:#f9f8fc;padding:12px 14px;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px;text-align:start;border-bottom:1.5px solid var(--bdr)}

.team-mgmt-table td{padding:12px 14px;border-bottom:1px solid var(--bdr);font-size:12px;vertical-align:middle}

.team-mgmt-table tr:hover{background:#f9f8fc}

.tm-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--org),var(--brown));color:white;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;flex-shrink:0}

.tm-name-cell{display:flex;align-items:center;gap:10px}

.tm-name-info{display:flex;flex-direction:column}

.tm-name{font-weight:800;color:var(--text);font-size:12px}

.tm-email{font-size:10px;color:var(--muted);direction:ltr}

.tm-role-pill{padding:4px 10px;border-radius:8px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}

/* Permissions matrix */
.pm-descs{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.pm-desc{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dark)}
.pm-role-chip{padding:2px 9px;border-radius:10px;font-size:11px;font-weight:800;white-space:nowrap}
.pm-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.pm-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:480px;background:#fff}
.pm-table th,.pm-table td{padding:10px 12px;border-bottom:1px solid var(--line);color:#0f172a}
.pm-table thead th{background:#f1f5f9;font-weight:800;color:#0f172a}
.pm-table tbody tr:last-child td{border-bottom:none}
.pm-table tbody tr:hover{background:rgba(0,0,0,.02)}

/* Read-only (viewer) role: hide write controls app-wide as a safety net */
body.role-readonly .role-write-only{display:none !important}

/* ===== Campaigns ===== */
.camp-toolbar{display:flex;justify-content:flex-end;margin:14px 0}
.campaigns-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.camp-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.camp-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.camp-card-title{font-weight:900;font-size:15px;color:#0f172a}
.camp-status-pill{font-size:11px;font-weight:800;padding:3px 10px;border-radius:12px;white-space:nowrap}
.camp-goal{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.camp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.camp-stat-num{font-size:18px;font-weight:900;color:#0f172a}
.camp-stat-lbl{font-size:10px;color:var(--muted);margin-top:2px}
.camp-bar-row{display:flex;flex-direction:column;gap:5px}
.camp-bar-label{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}
.camp-bar{height:7px;background:#eef2f6;border-radius:6px;overflow:hidden}
.camp-bar-fill{height:100%;border-radius:6px;transition:width .3s}
.camp-card-actions{display:flex;justify-content:flex-end;gap:4px;margin-top:2px}
.camp-empty{grid-column:1/-1;text-align:center;padding:50px 20px;color:var(--muted)}
.camp-empty-icon{font-size:34px;opacity:.4;margin-bottom:10px}
.camp-empty-title{font-weight:900;font-size:16px;color:#0f172a;margin-bottom:6px}
.camp-empty-sub{font-size:13px;max-width:380px;margin:0 auto}
.camp-field-label{display:block;font-size:12px;font-weight:700;color:var(--dark);margin-bottom:5px}
.campaign-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:10px;white-space:nowrap}

/* ===== INFLUENCERS ===== */
.inf-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inf-filter{height:34px;font-size:12px;padding:4px 10px;min-width:120px}
.inf-catmgr{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.inf-catmgr-title{font-size:12px;font-weight:800;color:var(--dark);display:flex;align-items:center;gap:6px;margin-bottom:8px}
.inf-catmgr-rows{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.inf-catmgr-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--dark);background:#f4f3f9;border:1px solid var(--line);border-radius:20px;padding:3px 10px}
.inf-catmgr-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.inf-catmgr-chip button{background:none;border:none;cursor:pointer;color:#94a3b8;font-size:15px;line-height:1;padding:0 0 0 2px}
.inf-catmgr-chip button:hover{color:#ef4444}
.inf-catmgr-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inf-catmgr-add .ws-info-input{flex:1;min-width:160px;height:38px}

.influencers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.inf-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 3px rgba(0,0,0,.04);transition:box-shadow .15s,transform .15s}
.inf-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-2px)}
.inf-card-head{display:flex;align-items:center;gap:11px}
.inf-avatar{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:20px;flex-shrink:0;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.inf-card-id{min-width:0;flex:1}
.inf-card-name{font-weight:900;font-size:15px;color:#0f172a;line-height:1.2}
.inf-card-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:4px}
.inf-cat{font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:11px}
.inf-followers{font-size:11px;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:3px}
.inf-plats{display:flex;flex-wrap:wrap;gap:7px}
.inf-plat{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;text-decoration:none;color:var(--p,#64748b);background:color-mix(in srgb,var(--p,#64748b) 10%,#fff);border:1.5px solid color-mix(in srgb,var(--p,#64748b) 30%,#fff);border-radius:9px;padding:5px 10px;transition:all .15s}
.inf-plat:hover{background:var(--p,#64748b);color:#fff;border-color:var(--p,#64748b);transform:translateY(-1px)}
.inf-plat i{font-size:15px}
.inf-noplat{font-size:11.5px;color:#94a3b8;display:flex;align-items:center;gap:5px}
.inf-links{display:flex;flex-direction:column;gap:5px}
.inf-links-lbl{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.inf-chips{display:flex;flex-wrap:wrap;gap:5px}
.inf-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--dark);background:#f4f3f9;border:1px solid var(--line);border-radius:8px;padding:2px 8px}
.inf-notes{font-size:12px;color:var(--muted);line-height:1.6;background:#f9f8fc;border-radius:8px;padding:8px 10px;border:1px dashed var(--line)}

/* Influencer modal */
.inf-acc-hint{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-bottom:8px}
.inf-acc-row{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.inf-acc-badge{font-size:19px;width:26px;text-align:center;flex-shrink:0}
.inf-acc-url{flex:1}
.inf-acc-del{background:none;border:none;cursor:pointer;color:#94a3b8;font-size:18px;line-height:1;padding:0 4px;flex-shrink:0}
.inf-acc-del:hover{color:#ef4444}
.inf-checks{display:flex;flex-wrap:wrap;gap:8px;max-height:130px;overflow-y:auto;padding:2px}
.inf-check{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--dark);background:#f4f3f9;border:1px solid var(--line);border-radius:8px;padding:5px 10px;cursor:pointer}
.inf-check input{accent-color:var(--org);cursor:pointer}
.inf-empty-note{font-size:11.5px;color:#94a3b8;font-style:italic}
.inf-section-divider{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.inf-cost-hint{font-size:11px;color:#0e7490;background:#ecfeff;border:1px solid #cffafe;border-radius:8px;padding:7px 10px;display:flex;align-items:center;gap:6px}

/* card additions */
.inf-card-name-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.inf-status{font-size:10px;font-weight:800;padding:2px 8px;border-radius:10px;white-space:nowrap}
.inf-stars{font-size:11px;color:#f59e0b;letter-spacing:1px}
.inf-stars-off{color:#e2e0db}
.inf-bizrow{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.inf-cost{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:9px}
.inf-cost.paid{background:#fff4e6;color:#b45309;border:1px solid #fed7aa}
.inf-cost.free{background:#ecfdf5;color:#047857;border:1px solid #bbf7d0}
.inf-promo{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800;color:#6d28d9;background:#f5f3ff;border:1px dashed #c4b5fd;border-radius:9px;padding:3px 10px;cursor:pointer;font-family:inherit;transition:all .15s}
.inf-promo:hover{background:#ede9fe}
.inf-contacts{display:inline-flex;gap:5px;margin-inline-start:auto}
.inf-contact{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:#f4f3f9;border:1px solid var(--line);color:var(--muted);text-decoration:none;font-size:15px;transition:all .15s}
.inf-contact:hover{background:var(--org);color:#fff;border-color:var(--org)}

/* campaign spend breakdown (influencer costs) */
.camp-breakdown{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-top:5px}
.camp-breakdown.standalone{background:#f9f8fc;border:1px dashed var(--line);border-radius:8px;padding:7px 10px}

/* commission / payment / services */
.inf-cost.comm{background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe}
.inf-pay{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:3px 9px;border-radius:9px}
.inf-pay.paid{background:#ecfdf5;color:#047857;border:1px solid #bbf7d0}
.inf-pay.unpaid{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}
.inf-svc{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#0e7490;background:#ecfeff;border:1px solid #cffafe;border-radius:8px;padding:2px 8px}
.inf-svc-row{display:flex;gap:7px;align-items:center;margin-bottom:7px}
.inf-svc-name{flex:2}.inf-svc-price{flex:1;min-width:0}
.inf-pay-summary{grid-column:1/-1;display:flex;align-items:center;gap:8px;background:#fff7ed;border:1px solid #fed7aa;color:#c2410c;border-radius:10px;padding:10px 14px;font-size:12.5px;font-weight:700;margin-bottom:4px}

/* results / ROI */
.inf-results{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inf-result-stat{font-size:11.5px;color:var(--muted)}
.inf-result-stat b{color:#0f172a;font-weight:900;font-size:13px}
.inf-roi{font-size:11px;font-weight:800;padding:2px 9px;border-radius:9px}
.inf-roi.good{background:#ecfdf5;color:#047857;border:1px solid #bbf7d0}
.inf-roi.bad{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
/* collaboration log rows (modal) */
.inf-collab-row{display:flex;gap:6px;align-items:flex-start;background:#f9f8fc;border:1px dashed var(--line);border-radius:8px;padding:8px;margin-bottom:8px}
.inf-collab-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.inf-collab-grid .ws-info-input{min-width:0;font-size:12px}
/* clickable influencer chip on campaign card */
.inf-chip-btn{cursor:pointer;font-family:inherit;transition:background .15s}
.inf-chip-btn:hover{background:#ede9fe;border-color:#c4b5fd}

/* influencer groups / lists */
.inf-catmgr-hint{font-weight:500;color:var(--muted);font-size:10.5px}
.inf-grp-count{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#e2e0db;color:#0f172a;font-size:9.5px;font-weight:900}
.inf-grp-target{background:none;border:none;cursor:pointer;color:#16a34a;font-size:14px;line-height:1;padding:0 2px}
.inf-grp-target:hover{color:#15803d}
.inf-grp-tags{display:flex;flex-wrap:wrap;gap:5px}
.inf-grp-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;color:var(--g,#9333ea);background:color-mix(in srgb,var(--g,#9333ea) 12%,#fff);border:1px solid color-mix(in srgb,var(--g,#9333ea) 35%,#fff);border-radius:8px;padding:2px 8px}

/* two-factor authentication */
.ws-2fa-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ws-2fa-status{font-size:13px;font-weight:800;display:inline-flex;align-items:center;gap:6px}
.ws-2fa-status.on{color:#047857}
.ws-2fa-status.off{color:#b45309}
.ws-2fa-hint{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.6}
.totp-step{font-size:12.5px;color:var(--dark);font-weight:600;line-height:1.6}
.totp-key{display:inline-block;font-family:monospace;font-size:15px;font-weight:800;letter-spacing:2px;color:#6d28d9;background:#f5f3ff;border:1px dashed #c4b5fd;border-radius:8px;padding:8px 12px;cursor:pointer;word-break:break-all}

/* iOS native: hide subscription purchase (Apple IAP policy) */
body.native-ios .tab[data-tab="subscription"]{display:none !important}
.plan-ios-note{font-size:11.5px;color:var(--muted);background:#f4f3f9;border:1px dashed var(--line);border-radius:9px;padding:8px 10px;display:flex;align-items:center;gap:6px;justify-content:center}

.tm-role-owner{background:linear-gradient(135deg,#fff8e6,#fde68a);color:#5b21b6;border:1px solid #fbbf24}

.tm-role-admin{background:#ede9fe;color:#5b21b6;border:1px solid #c4b5fd}

.tm-role-member{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd}

.tm-status-pill{padding:3px 8px;border-radius:6px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;gap:4px}

.tm-status-active{background:var(--green-l);color:var(--green)}

.tm-status-pending{background:#fef3c7;color:#92400e}

.tm-status-disabled{background:#fee2e2;color:#991b1b}

.tm-pulse{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 2s infinite}

.tm-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}

.tm-action-btn{padding:5px 9px;border-radius:6px;font-size:10px;font-weight:700;border:none;cursor:pointer;font-family:inherit;transition:all .12s;display:inline-flex;align-items:center;gap:3px}

.tm-action-btn.activate{background:var(--green-l);color:var(--green);border:1px solid #a7f3d0}

.tm-action-btn.activate:hover{background:var(--green);color:white}

.tm-action-btn.disable{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}

.tm-action-btn.disable:hover{background:#991b1b;color:white}

.tm-action-btn.role{background:var(--bg);color:var(--text);border:1px solid var(--bdr)}

.tm-action-btn.role:hover{background:var(--org);color:white;border-color:var(--org)}

.tm-action-btn.delete{background:white;color:var(--red);border:1px solid #fecaca}

.tm-action-btn.delete:hover{background:var(--red);color:white}

.tm-pending-banner{background:linear-gradient(135deg,#fef3c7,#fffaeb);border:1.5px solid #f59e0b;border-radius:14px;padding:14px 18px;margin-bottom:14px;display:flex;align-items:center;gap:14px}

.tm-pending-icon{font-size:28px;flex-shrink:0}

.tm-pending-text{flex:1;font-size:12px;color:#78350f;line-height:1.6}

.tm-pending-text strong{font-size:12px;display:block;margin-bottom:2px;color:#5b21b6}



/* Hide elements based on role */

.role-only-owner-admin,.role-only-finance{display:none}

body.role-owner *:not(.tab-content).role-only-owner-admin,

body.role-admin *:not(.tab-content).role-only-owner-admin{display:initial}

body.role-owner .tab-content.role-only-owner-admin.active,

body.role-admin .tab-content.role-only-owner-admin.active{display:block}

body.role-owner .role-only-finance,

body.role-admin .role-only-finance{display:initial}

body.role-owner .tab.role-only-owner-admin,

body.role-admin .tab.role-only-owner-admin{display:inline-flex}

body.role-owner .dash-card.role-only-finance,

body.role-admin .dash-card.role-only-finance{display:block}



@media(max-width:780px){

  .team-mgmt-table{font-size:11px}

  .team-mgmt-table th,.team-mgmt-table td{padding:8px 6px}

  .tm-email{display:none}

  .tm-actions{flex-direction:column;gap:3px}

}



/* ============ WELCOME TOUR (FIRST LOGIN) ============ */

.welcome-overlay{display:none;position:fixed;inset:0;background:rgba(21,15,38,.92);z-index:9500;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(12px)}

.welcome-overlay.active{display:flex}

.welcome-box{background:white;border-radius:24px;max-width:560px;width:100%;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.6);max-height:94vh;display:flex;flex-direction:column}

.welcome-hero{

  background:

    linear-gradient(135deg, rgba(21,15,38,.85) 0%, rgba(45,24,16,.78) 50%, rgba(91,33,182,.65) 100%),

    url('https://images.unsplash.com/photo-1559056199-641a0ac8b55e?auto=format&fit=crop&w=1200&q=80') center/cover;

  padding:36px 30px;color:white;text-align:center;position:relative;overflow:hidden

}

.welcome-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(109,40,217,.45) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(109,40,217,.3) 0%,transparent 50%);pointer-events:none}

.welcome-logo{position:relative;z-index:2;margin-bottom:18px;display:flex;justify-content:center;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}

.welcome-eyebrow{font-size:10px;font-weight:800;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:4px;margin-bottom:10px;position:relative;z-index:2;display:inline-block;padding:4px 12px;background:rgba(109,40,217,.25);border:1px solid rgba(109,40,217,.4);border-radius:100px;backdrop-filter:blur(10px)}

.welcome-title{font-size:26px;font-weight:900;margin-bottom:10px;line-height:1.2;position:relative;z-index:2;text-shadow:0 2px 12px rgba(0,0,0,.3);letter-spacing:-0.3px}

.welcome-subtitle{font-size:14px;color:rgba(255,255,255,.85);line-height:1.65;position:relative;z-index:2;font-weight:500;max-width:380px;margin:0 auto}

.welcome-body{padding:28px 30px;flex:1;overflow-y:auto;background:linear-gradient(180deg,white,#f9f8fc)}

.welcome-step-list{display:flex;flex-direction:column;gap:14px}

.welcome-step{display:flex;gap:14px;align-items:flex-start;padding:16px;background:white;border-radius:14px;border:1.5px solid var(--bdr);transition:all .25s;position:relative;overflow:hidden}

.welcome-step::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,var(--org),var(--brown));transform:scaleY(0);transform-origin:top;transition:transform .25s}

.welcome-step:hover{border-color:var(--org);transform:translateX(2px);box-shadow:0 8px 20px rgba(109,40,217,.08)}

.welcome-step:hover::before{transform:scaleY(1)}

.welcome-step-icon{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--org),var(--brown));color:white;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;box-shadow:0 6px 16px rgba(109,40,217,.35);transition:transform .25s}

.welcome-step:hover .welcome-step-icon{transform:scale(1.05) rotate(-3deg)}

.welcome-step-num{display:inline-block;background:var(--org);color:white;width:18px;height:18px;border-radius:50%;font-size:10px;font-weight:900;line-height:18px;text-align:center;margin-${'inline-end'}:6px}

.welcome-step-text{flex:1}

.welcome-step-title{font-size:14px;font-weight:900;color:var(--dark);margin-bottom:4px;letter-spacing:-0.2px}

.welcome-step-desc{font-size:12px;color:var(--text);line-height:1.7;font-weight:500}

.welcome-progress{display:flex;justify-content:center;gap:6px;margin:20px 0 6px}

.wp-dot{width:8px;height:8px;border-radius:50%;background:var(--bdr);transition:all .25s}

.wp-dot.active{background:var(--org);width:28px;border-radius:4px;box-shadow:0 2px 8px rgba(109,40,217,.4)}

.welcome-foot{padding:18px 28px;background:#f9f8fc;border-top:1px solid var(--bdr);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}

.welcome-skip{background:transparent;border:none;color:var(--muted);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:8px 12px;transition:color .15s}

.welcome-skip:hover{color:var(--text)}

.welcome-actions{display:flex;gap:8px}



/* SLIDE TRANSITIONS */

.welcome-slide{animation:slideIn .4s ease-out}

@keyframes slideIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}



/* ============ GUIDE PAGE ============ */

.guide-hero{

  background:

    linear-gradient(135deg, rgba(21,15,38,.93) 0%, rgba(45,24,16,.85) 50%, rgba(91,33,182,.65) 100%),

    url('https://images.unsplash.com/photo-1442550528053-c431ecb55509?auto=format&fit=crop&w=1600&q=80') center/cover;

  border-radius:22px;padding:54px 38px;color:white;margin-bottom:20px;position:relative;overflow:hidden;

  box-shadow:0 20px 50px rgba(21,15,38,.25)

}

.guide-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 90% 30%,rgba(109,40,217,.45) 0%,transparent 55%);pointer-events:none}

.guide-hero::after{content:'';position:absolute;top:-50%;right:-10%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(109,40,217,.15) 0%,transparent 70%);pointer-events:none}

.guide-hero-content{position:relative;z-index:2}

.guide-eyebrow{font-size:11px;font-weight:800;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:4px;margin-bottom:14px;display:inline-block;padding:6px 14px;background:rgba(109,40,217,.2);border:1px solid rgba(109,40,217,.4);border-radius:100px;backdrop-filter:blur(10px)}

.guide-hero-title{font-size:38px;font-weight:900;margin-bottom:14px;line-height:1.15;letter-spacing:-0.5px;text-shadow:0 2px 20px rgba(0,0,0,.3);max-width:680px}

.guide-hero-sub{font-size:16px;color:rgba(255,255,255,.85);line-height:1.7;max-width:580px;margin-bottom:26px;font-weight:500}

.guide-hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;max-width:600px}

.gh-stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:18px 16px;backdrop-filter:blur(20px);transition:all .25s}

.gh-stat:hover{transform:translateY(-3px);background:rgba(255,255,255,.12);border-color:rgba(109,40,217,.5)}

.gh-stat-num{font-size:30px;font-weight:900;color:var(--org);line-height:1;letter-spacing:-1px;text-shadow:0 0 20px rgba(109,40,217,.4)}

.gh-stat-label{font-size:11px;color:rgba(255,255,255,.7);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-top:4px}



.guide-section{background:white;border:1px solid var(--bdr);border-radius:18px;padding:32px 30px;margin-bottom:18px;box-shadow:0 1px 3px rgba(0,0,0,.04)}

.guide-section-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;padding-bottom:18px;border-bottom:2px solid var(--bdr)}

.gs-num{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--org),var(--brown));color:white;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;flex-shrink:0;box-shadow:0 4px 12px rgba(109,40,217,.35)}

.gs-title{font-size:22px;font-weight:900;color:var(--dark);letter-spacing:-0.3px;line-height:1.3}

.gs-sub{font-size:12px;color:var(--muted);font-weight:600;margin-top:3px;line-height:1.5}



/* Guide Cards Grid */

.guide-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}

.guide-card{background:#f9f8fc;border:1.5px solid var(--bdr);border-radius:14px;padding:20px;transition:all .25s;position:relative;overflow:hidden}

.guide-card::before{content:'';position:absolute;top:-30px;right:-30px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(109,40,217,.06) 0%,transparent 70%);transition:all .3s;pointer-events:none}

.guide-card:hover{border-color:var(--org);background:white;transform:translateY(-4px);box-shadow:0 12px 30px rgba(109,40,217,.12)}

.guide-card:hover::before{transform:scale(1.5);background:radial-gradient(circle,rgba(109,40,217,.12) 0%,transparent 70%)}

.gc-icon{font-size:32px;margin-bottom:10px;line-height:1;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.08))}

.gc-title{font-size:14px;font-weight:900;color:var(--dark);margin-bottom:7px;letter-spacing:-0.2px}

.gc-desc{font-size:12px;color:var(--text);line-height:1.7;font-weight:500}

.gc-tag{display:inline-block;background:var(--org-l);color:var(--org-d);font-size:9.5px;font-weight:800;padding:3px 9px;border-radius:6px;margin-top:8px;text-transform:uppercase;letter-spacing:.8px;border:1px solid rgba(109,40,217,.2)}



/* Workflow Diagram */

.workflow-flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#f9f8fc,white);border:1.5px solid var(--bdr);border-radius:16px;padding:22px 24px;margin-bottom:14px;overflow-x:auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

.wf-step{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:100px;padding:14px 8px;border-radius:12px;background:white;border:2px solid var(--bdr);transition:all .25s;flex:1}

.wf-step:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.08)}

.wf-step.s-draft{border-color:#9ca3af}

.wf-step.s-review{border-color:#f59e0b;background:linear-gradient(180deg,#fffaeb,white)}

.wf-step.s-approved{border-color:#3b82f6;background:linear-gradient(180deg,#eff4fd,white)}

.wf-step.s-ready{border-color:#8b5cf6;background:linear-gradient(180deg,#f3eeff,white)}

.wf-step.s-published{border-color:#10b981;background:linear-gradient(180deg,#e9f7f0,white)}

.wf-icon{font-size:28px;line-height:1;margin-bottom:8px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}

.wf-label{font-size:12px;font-weight:900;color:var(--dark);margin-bottom:3px;letter-spacing:-0.2px}

.wf-desc{font-size:10px;color:var(--muted);font-weight:600;line-height:1.5}

.wf-arrow{font-size:22px;color:var(--org);font-weight:900;flex-shrink:0;opacity:.4}



/* Pro Tips */

.pro-tip{background:linear-gradient(135deg,#fff8e6,#fff);border:1.5px solid #fbbf24;border-radius:14px;padding:16px 18px;margin-top:16px;display:flex;gap:14px;align-items:flex-start;box-shadow:0 2px 8px rgba(251,191,36,.1)}

.pro-tip-icon{font-size:24px;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}

.pro-tip-content{flex:1;font-size:12.5px;color:var(--text);line-height:1.75}

.pro-tip-content strong{color:var(--org-d)}

.pro-tip-label{display:inline-block;background:var(--org);color:white;font-size:9px;font-weight:900;padding:3px 9px;border-radius:6px;margin-${'inline-end'}:8px;text-transform:uppercase;letter-spacing:.8px;box-shadow:0 2px 6px rgba(109,40,217,.3)}



/* Channel Cards (audiences) */

.channel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}

.channel-card{padding:20px;border-radius:14px;border:2px solid var(--bdr);position:relative;overflow:hidden;transition:all .25s}

.channel-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,.08)}

.channel-card.offline{background:linear-gradient(135deg,#e8f5ee,white);border-color:var(--green)}

.channel-card.jahez{background:linear-gradient(135deg,#fee2e2,white);border-color:#ef4444}

.channel-card.pullup{background:linear-gradient(135deg,#ede9fe,white);border-color:#8b5cf6}

.channel-card.website{background:linear-gradient(135deg,#dbeafe,white);border-color:#3b82f6}

.cc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}

.cc-icon{font-size:28px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}

.cc-name{font-size:15px;font-weight:900;color:var(--dark);letter-spacing:-0.2px}

.cc-msg-label{font-size:9.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:5px}

.cc-msg{font-size:12px;color:var(--text);line-height:1.7;background:rgba(255,255,255,.85);padding:10px 12px;border-radius:10px;border:1px dashed rgba(0,0,0,.08);font-weight:500}



/* Roles section */

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

@media(max-width:640px){.roles-grid{grid-template-columns:1fr}}

.role-card{padding:22px;border-radius:16px;border:2px solid var(--bdr);transition:all .25s}

.role-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,.08)}

.role-card.owner{background:linear-gradient(135deg,#fff8e6,white);border-color:var(--org)}

.role-card.team{background:linear-gradient(135deg,#e8f0f8,white);border-color:var(--blue)}

.role-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}

.role-emoji{font-size:38px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.15))}

.role-name{font-size:16px;font-weight:900;color:var(--dark);letter-spacing:-0.3px}

.role-tag{font-size:9px;font-weight:800;padding:3px 9px;border-radius:6px;text-transform:uppercase;letter-spacing:1px;margin-top:3px;display:inline-block}

.role-tag.owner{background:var(--org);color:white;box-shadow:0 2px 6px rgba(109,40,217,.3)}

.role-tag.team{background:var(--blue);color:white;box-shadow:0 2px 6px rgba(26,74,122,.3)}

.role-list{list-style:none;padding:0;margin:0}

.role-list li{font-size:12px;color:var(--text);line-height:1.7;padding:7px 0;display:flex;gap:8px;align-items:flex-start;font-weight:500}

.role-list li::before{content:'✓';color:var(--green);font-weight:900;flex-shrink:0;font-size:12px}



/* ============ CORE VALUES SECTION (NEW) ============ */

.core-values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}

.core-value{position:relative;padding:24px;border-radius:18px;background:white;border:2px solid var(--bdr);overflow:hidden;transition:all .3s}

.core-value::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--org),var(--brown));transform:scaleX(0);transform-origin:left;transition:transform .35s}

.core-value:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(109,40,217,.12);border-color:var(--org)}

.core-value:hover::before{transform:scaleX(1)}

.cv-icon-wrap{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,var(--org-l),#fff);border:1.5px solid rgba(109,40,217,.2);display:flex;align-items:center;justify-content:center;margin-bottom:14px;box-shadow:0 4px 12px rgba(109,40,217,.1);transition:all .3s}

.core-value:hover .cv-icon-wrap{transform:scale(1.08) rotate(-3deg);background:linear-gradient(135deg,var(--org),var(--brown))}

.cv-icon{font-size:28px;line-height:1;transition:filter .3s}

.core-value:hover .cv-icon{filter:brightness(0) invert(1)}

.cv-title{font-size:15px;font-weight:900;color:var(--dark);margin-bottom:8px;letter-spacing:-0.2px;line-height:1.3}

.cv-desc{font-size:12.5px;color:var(--text);line-height:1.75;font-weight:500}

.cv-highlight{display:inline-block;background:var(--org);color:white;font-size:9px;font-weight:900;padding:3px 8px;border-radius:5px;margin-top:10px;text-transform:uppercase;letter-spacing:.8px;box-shadow:0 2px 6px rgba(109,40,217,.3)}



/* Help button on header */

.help-btn{background:rgba(0,0,0,.04);color:var(--muted);width:30px;height:30px;border-radius:8px;border:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:800;transition:all .15s;display:inline-flex;align-items:center;justify-content:center}

.help-btn:hover{background:rgba(109,40,217,.1);color:var(--org-d)}



/* ============ ROADMAP STATS BAR ============ */

.rm-stats-bar{background:linear-gradient(135deg,var(--dark),#1a0f05);border-radius:14px;padding:12px 18px;margin-bottom:14px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;color:white}

.rm-stat{display:flex;flex-direction:column;align-items:center;padding:0 10px;border-${'inline-end'}:1px solid rgba(255,255,255,.1)}

.rm-stat:last-child{border:none}

.rm-stat-num{font-size:20px;font-weight:900;line-height:1;color:white}

.rm-stat-num.warn{color:#ffd180}

.rm-stat-num.danger{color:#ff8080}

.rm-stat-num.success{color:#7fd9a8}

.rm-stat-num.budget{color:var(--org)}

.rm-stat-label{font-size:9px;color:rgba(255,255,255,.6);font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-top:3px;text-align:center}

.rm-spacer{flex:1}

.rm-mine-toggle{padding:7px 14px;border-radius:8px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:white;font-family:inherit;font-weight:700;font-size:11px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px}

.rm-mine-toggle:hover{background:rgba(255,255,255,.12)}

.rm-mine-toggle.active{background:var(--org);border-color:var(--org)}



/* ============ DAY VIEW (TIMELINE) ============ */

.day-view-wrap{background:white;border:1px solid var(--bdr);border-radius:14px;overflow:hidden}

.day-view-header{padding:14px 18px;background:var(--dark);color:white;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}

.dv-date-big{font-size:18px;font-weight:900}

.dv-date-sub{font-size:11px;color:rgba(255,255,255,.6);font-weight:600;margin-top:2px}

.dv-section-title{padding:10px 16px;background:#f9f8fc;font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--bdr)}

.day-timeline{display:grid;grid-template-columns:70px 1fr;gap:0}

.dv-hour{padding:10px 8px;font-size:11px;font-weight:800;color:var(--muted);text-align:center;border-bottom:1px solid var(--bdr);background:#f9f8fc;direction:ltr}

.dv-hour.now{background:var(--org-l);color:var(--org-d)}

.dv-slot{padding:8px;border-bottom:1px solid var(--bdr);min-height:60px;cursor:pointer;transition:background .12s;position:relative;display:flex;flex-direction:column;gap:4px}

.dv-slot:hover{background:#f9f8fc}

.dv-slot.now{background:#fff8e6;box-shadow:inset 0 0 0 2px var(--org)}

.dv-slot:empty::before{content:'+';position:absolute;top:50%;transform:translateY(-50%);color:var(--bdr);font-size:18px;font-weight:900;opacity:0;transition:opacity .15s}

[dir="rtl"] .dv-slot:empty::before{right:14px}

[dir="ltr"] .dv-slot:empty::before{left:14px}

.dv-slot:empty:hover::before{opacity:1;color:var(--org)}

.dv-post{background:#f9f8fc;border:1px solid var(--bdr);border-radius:8px;padding:8px 10px;font-size:11px;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;gap:4px}

[dir="rtl"] .dv-post{border-right:3px solid var(--bdr)}

[dir="ltr"] .dv-post{border-left:3px solid var(--bdr)}

.dv-post:hover{background:white;transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.08)}

.dv-post.s-draft{border-color:#9ca3af}

.dv-post.s-review{border-color:#f59e0b}

.dv-post.s-approved{border-color:#3b82f6}

.dv-post.s-ready{border-color:#8b5cf6}

.dv-post.s-published{border-color:#10b981;background:#e9f7f0}

.dv-post.s-cancelled{border-color:#ef4444;opacity:.55}

.dv-post-top{display:flex;flex-wrap:wrap;gap:4px;align-items:center}

.dv-post-title{font-weight:700;color:var(--text);line-height:1.3}

.dv-post-meta{display:flex;flex-wrap:wrap;gap:4px;font-size:9.5px}

.dv-post-meta .badge{padding:2px 6px;border-radius:6px;font-weight:700}

.dv-post-meta .badge.assignee{background:#e0e7ff;color:#3730a3}

.dv-post-meta .badge.paid{background:#fef3c7;color:#78350f}

.dv-post-meta .badge.products{background:var(--brown-l);color:var(--brown)}

.dv-noTime-section{padding:14px 16px;background:#f9f8fc;border-top:1px solid var(--bdr)}

.dv-noTime-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}



/* ============ ENHANCED WEEK POST (more details) ============ */

.week-post-meta-row{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}

.week-post-meta-row .badge{padding:1px 6px;border-radius:5px;font-size:9px;font-weight:700}

.week-post-meta-row .badge.assignee{background:#e0e7ff;color:#3730a3}

.week-post-meta-row .badge.audience{background:#e8f0f8;color:#1a4a7a}

.week-post-meta-row .badge.products{background:var(--brown-l);color:var(--brown)}



/* ============ ROADMAP (MONTH/WEEK VIEW) ============ */

.roadmap-toolbar{background:white;border:1px solid var(--bdr);border-radius:14px;padding:12px 14px;margin-bottom:14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between}

.view-toggle{display:inline-flex;background:#f9f8fc;border:1.5px solid var(--bdr);border-radius:10px;overflow:hidden;padding:2px}

.vt-btn{padding:7px 16px;border:none;background:transparent;color:var(--muted);font-family:inherit;font-weight:700;font-size:12px;cursor:pointer;border-radius:8px;transition:all .15s;display:inline-flex;align-items:center;gap:5px}

.vt-btn:hover{color:var(--text)}

.vt-btn.active{background:var(--org);color:white}

.roadmap-nav{display:inline-flex;gap:6px;align-items:center}

.nav-btn{width:32px;height:32px;border-radius:8px;border:1.5px solid var(--bdr);background:white;cursor:pointer;font-size:14px;font-family:inherit;color:var(--text);font-weight:700;transition:all .12s;display:inline-flex;align-items:center;justify-content:center}

.nav-btn:hover{border-color:var(--org);color:var(--org)}

.nav-period{font-size:14px;font-weight:800;color:var(--dark);min-width:160px;text-align:center;padding:0 10px}

.today-btn{padding:7px 14px;border-radius:8px;border:1.5px solid var(--org);background:var(--org-l);color:var(--org-d);font-family:inherit;font-weight:700;font-size:12px;cursor:pointer}

.today-btn:hover{background:var(--org);color:white}

.roadmap-filters{display:inline-flex;gap:6px;flex-wrap:wrap}



/* MONTH GRID */

.month-grid-wrap{background:white;border:1px solid var(--bdr);border-radius:14px;overflow:hidden}

.month-headers{display:grid;grid-template-columns:repeat(7,1fr);background:var(--dark);color:white}

.month-header-cell{padding:10px;font-size:11px;font-weight:800;text-align:center;text-transform:uppercase;letter-spacing:1px}

.month-header-cell.weekend{color:#ffd180}

.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--bdr)}

.month-day{min-height:120px;background:#f9f8fc;padding:8px;cursor:pointer;position:relative;transition:background .12s;display:flex;flex-direction:column;gap:4px;overflow:hidden}

.month-day:hover{background:#fff}

.month-day.today{background:var(--org-l);box-shadow:inset 0 0 0 2px var(--org)}

.month-day.other-month{background:#fff;opacity:.35}

.month-day.weekend{background:#fdfaf5}

.month-day.has-overdue::after{content:'âڑ ';position:absolute;top:5px;font-size:11px;color:#ef4444;font-weight:900}

[dir="rtl"] .month-day.has-overdue::after{left:5px;right:auto}

[dir="ltr"] .month-day.has-overdue::after{right:5px;left:auto}

.month-day-number{font-size:12px;font-weight:800;color:var(--dark);display:flex;justify-content:space-between;align-items:center}

.month-day-paid{font-size:10px;color:var(--org-d);font-weight:900}

.month-day-add{opacity:0;width:18px;height:18px;border-radius:50%;background:var(--org);color:white;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;border:none;cursor:pointer;transition:opacity .15s}

.month-day:hover .month-day-add{opacity:1}

.month-mini-list{display:flex;flex-direction:column;gap:2px;flex:1;overflow:hidden}

.month-mini{font-size:9.5px;background:white;padding:2.5px 6px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:3px;line-height:1.3;cursor:pointer;transition:transform .1s}

[dir="rtl"] .month-mini{border-right:3px solid var(--bdr)}

[dir="ltr"] .month-mini{border-left:3px solid var(--bdr)}

.month-mini:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.08)}

.month-mini.s-draft{border-color:#9ca3af}

.month-mini.s-review{border-color:#f59e0b;background:#fef9e6}

.month-mini.s-approved{border-color:#3b82f6;background:#eff4fd}

.month-mini.s-ready{border-color:#8b5cf6;background:#f3eeff}

.month-mini.s-published{border-color:#10b981;background:#e9f7f0}

.month-mini.s-cancelled{border-color:#ef4444;opacity:.5;text-decoration:line-through}

.month-mini-time{font-weight:800;color:var(--muted);font-size:9px}

.month-mini-paid{color:#5b21b6;font-weight:900}

.month-more{font-size:9px;color:var(--muted);font-weight:700;text-align:center;padding:2px;background:#eeecf4;border-radius:5px;cursor:pointer}

.month-more:hover{background:var(--org-l);color:var(--org-d)}



/* WEEK GRID */

.week-grid-wrap{background:white;border:1px solid var(--bdr);border-radius:14px;overflow:hidden}

.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--bdr)}

.week-day{background:white;padding:10px;min-height:380px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:background .12s}

.week-day:hover{background:#f9f8fc}

.week-day.today{background:var(--org-l)}

.week-day.weekend{background:#fdfaf5}

.week-day-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;border-bottom:2px solid var(--bdr)}

.week-day.today .week-day-header{border-bottom-color:var(--org)}

.week-day-name{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px}

.week-day-num{font-size:18px;font-weight:900;color:var(--dark);width:32px;height:32px;border-radius:8px;background:#f9f8fc;display:inline-flex;align-items:center;justify-content:center}

.week-day.today .week-day-num{background:var(--org);color:white}

.week-posts{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto;max-height:340px}

.week-post{background:#f9f8fc;border:1px solid var(--bdr);border-radius:8px;padding:6px 8px;font-size:10.5px;cursor:pointer;transition:all .12s;display:flex;flex-direction:column;gap:3px}

[dir="rtl"] .week-post{border-right:3px solid var(--bdr)}

[dir="ltr"] .week-post{border-left:3px solid var(--bdr)}

.week-post:hover{background:white;transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.06)}

.week-post.s-draft{border-color:#9ca3af}

.week-post.s-review{border-color:#f59e0b}

.week-post.s-approved{border-color:#3b82f6}

.week-post.s-ready{border-color:#8b5cf6}

.week-post.s-published{border-color:#10b981;background:#e9f7f0}

.week-post.s-cancelled{border-color:#ef4444;opacity:.55}

.week-post-top{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:10px}

.week-post-time{font-weight:800;color:var(--muted)}

.week-post-title{font-weight:700;color:var(--text);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.week-post-paid{font-size:9px;color:#5b21b6;font-weight:900}

.week-day-add{margin-top:auto;padding:6px;background:transparent;border:1.5px dashed var(--bdr);border-radius:6px;color:var(--muted);font-family:inherit;font-size:10px;font-weight:700;cursor:pointer;text-align:center}

.week-day-add:hover{border-color:var(--org);color:var(--org);background:var(--org-l)}



/* MOBILE */

@media(max-width:780px){

  .month-day{min-height:80px;padding:5px;gap:2px}

  .month-day-number{font-size:11px}

  .month-mini{font-size:8px;padding:1px 4px}

  .month-mini-time{display:none}

  .month-header-cell{padding:6px 2px;font-size:9px;letter-spacing:0}

  .week-day{min-height:auto;padding:8px}

  .week-grid-wrap .week-grid{grid-template-columns:1fr;display:flex;flex-direction:column;gap:8px;background:transparent}

  .week-day{border-radius:10px;border:1px solid var(--bdr);min-height:auto}

}



/* ============ PRODUCTION STATS ============ */

.prod-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}

.prod-stat-box{background:linear-gradient(180deg,#f9f8fc,white);border:2px solid var(--bdr);border-radius:12px;padding:12px 10px;text-align:center;transition:all .2s;position:relative}

.prod-stat-box:hover{border-color:var(--org);transform:translateY(-2px);box-shadow:0 6px 14px rgba(109,40,217,.08)}

.prod-stat-box.prod-total{background:linear-gradient(135deg,var(--org-l),#fff);border-color:var(--org)}

.prod-stat-icon{font-size:20px;line-height:1;margin-bottom:6px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.08))}

.prod-stat-input{width:100%;padding:6px 4px;border:none;background:transparent;text-align:center;font-family:inherit;font-size:18px;font-weight:900;color:var(--dark);font-size:18px}

.prod-stat-input:focus{outline:none;color:var(--org)}

.prod-stat-input::-webkit-outer-spin-button,.prod-stat-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.prod-stat-input{-moz-appearance:textfield}

.prod-stat-label{font-size:10px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-top:4px}

.prod-stat-box.prod-total .prod-stat-label{color:var(--org-d)}

@media (max-width:600px){

  .prod-stats-grid{grid-template-columns:repeat(2,1fr)}

}



/* ============ DASHBOARD PRODUCTION CARDS ============ */

.prod-month-section{background:linear-gradient(135deg,#f9f8fc,white);border:1.5px solid var(--bdr);border-radius:18px;padding:24px;margin-bottom:18px}

.prod-month-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--bdr);flex-wrap:wrap;gap:10px}

.prod-month-title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:900;color:var(--dark);letter-spacing:-0.3px}

.prod-month-icon{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--org),var(--brown));color:white;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 10px rgba(109,40,217,.35)}

.prod-month-period{font-size:12px;color:var(--muted);font-weight:700}

.prod-month-grand{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:linear-gradient(135deg,var(--org),var(--brown));color:white;border-radius:10px;font-size:12px;font-weight:800;box-shadow:0 4px 12px rgba(109,40,217,.35)}

.prod-month-grand strong{font-size:18px}

.prod-platforms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}

.prod-platform-card{background:white;border:1.5px solid var(--bdr);border-radius:14px;padding:16px;transition:all .2s}

.prod-platform-card:hover{border-color:var(--org);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.05)}

.prod-platform-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--bdr)}

.prod-platform-emoji{width:80px;height:80px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}

.pp-snapchat{background:linear-gradient(135deg,#fff9c4,#fff);color:#f57f17}

.pp-tiktok{background:linear-gradient(135deg,#f0f0f0,#fff);color:#000}

.pp-instagram{background:linear-gradient(135deg,#fce4ec,#fff);color:#c2185b}

.pp-x{background:linear-gradient(135deg,#e8f0f8,#fff);color:#1a4a7a}

.pp-whatsapp{background:linear-gradient(135deg,#e8f5ee,#fff);color:#1a7a4a}

.pp-other{background:linear-gradient(135deg,#f3e5f5,#fff);color:#6a1b9a}

.prod-platform-name{flex:1;font-size:14px;font-weight:900;color:var(--dark);letter-spacing:-0.2px}

.prod-platform-total{font-size:24px;font-weight:900;color:var(--org-d);line-height:1;letter-spacing:-1px}

.prod-platform-total small{font-size:11px;color:var(--muted);font-weight:700;margin-${'inline-start'}:3px}

.prod-platform-breakdown{display:flex;justify-content:space-between;gap:6px;margin-top:6px}

.prod-bd-item{flex:1;text-align:center;padding:8px 6px;background:#f9f8fc;border-radius:8px;border:1px solid var(--bdr)}

.prod-bd-num{font-size:15px;font-weight:900;color:var(--dark);line-height:1}

.prod-bd-label{font-size:9px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-top:3px;display:flex;align-items:center;justify-content:center;gap:3px}

.prod-bd-item.photo .prod-bd-num{color:#1a4a7a}

.prod-bd-item.video .prod-bd-num{color:#c2185b}

.prod-bd-item.text .prod-bd-num{color:#6a1b9a}

.prod-platform-empty{padding:18px 14px;text-align:center;color:var(--muted);font-size:11px;font-weight:600;font-style:italic}

.prod-month-empty{text-align:center;padding:40px 20px;color:var(--muted);font-size:12px}

.prod-month-empty .icon{font-size:42px;margin-bottom:10px;opacity:.5}



/* ============ DASHBOARD PRODUCTION CARDS END ============ */

.budget-request-box{background:linear-gradient(135deg,#fff8e6,#fff);border:2px dashed #fbbf24;border-radius:12px;padding:14px;margin-top:14px}

.budget-status-display{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}

.budget-status-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;font-size:11px;font-weight:800;border:1.5px solid}

.budget-status-pill.status-none{background:#f3f4f6;color:#6b7280;border-color:#d1d5db}

.budget-status-pill.status-pending{background:#fef3c7;color:#92400e;border-color:#fbbf24}

.budget-status-pill.status-approved{background:#d1fae5;color:#065f46;border-color:#10b981}

.budget-status-pill.status-rejected{background:#fee2e2;color:#991b1b;border-color:#ef4444}

.budget-ref{font-size:10px;color:var(--muted);font-weight:700;direction:ltr;font-family:monospace}

.budget-meta-info{font-size:11px;color:var(--text);line-height:1.7;background:rgba(255,255,255,.6);border-radius:8px;padding:8px 12px;margin-top:6px}

.budget-meta-info strong{color:var(--org-d)}

.budget-request-btn{display:block;width:100%;padding:12px;background:linear-gradient(135deg,#6d28d9,#7c3aed);color:white;border:none;border-radius:10px;font-family:inherit;font-weight:800;font-size:12px;cursor:pointer;box-shadow:0 6px 16px rgba(109,40,217,.35);transition:all .2s;margin-top:8px}

.budget-request-btn:hover{box-shadow:0 8px 22px rgba(109,40,217,.5);transform:translateY(-1px)}

.budget-request-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.budget-decision-row{display:flex;gap:8px;margin-top:10px}

.budget-approve-btn{flex:1;padding:11px;background:#10b981;color:white;border:none;border-radius:10px;font-family:inherit;font-weight:800;font-size:12px;cursor:pointer;transition:all .15s;box-shadow:0 4px 10px rgba(16,185,129,.3)}

.budget-approve-btn:hover{background:#059669;box-shadow:0 6px 14px rgba(16,185,129,.45)}

.budget-reject-btn{flex:1;padding:11px;background:white;color:#ef4444;border:1.5px solid #ef4444;border-radius:10px;font-family:inherit;font-weight:800;font-size:12px;cursor:pointer;transition:all .15s}

.budget-reject-btn:hover{background:#ef4444;color:white;box-shadow:0 4px 10px rgba(239,68,68,.35)}

.budget-help-tip{font-size:10.5px;color:var(--muted);line-height:1.6;margin-top:6px;font-style:italic}



/* Post card budget badge */

.budget-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:7px;font-size:10px;font-weight:800;border:1px solid}

.budget-badge.bb-pending{background:#fef3c7;color:#92400e;border-color:#fbbf24}

.budget-badge.bb-approved{background:#d1fae5;color:#065f46;border-color:#10b981}

.budget-badge.bb-rejected{background:#fee2e2;color:#991b1b;border-color:#ef4444}



/* ============ PAID CAMPAIGN SECTION ============ */

.paid-toggle{display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(135deg,#fff8e6,#fff);border:1.5px solid #ffd180;border-radius:10px;cursor:pointer;transition:all .15s}

.paid-toggle:hover{background:linear-gradient(135deg,#fff3cc,#fff8e6)}

.paid-toggle.active{background:linear-gradient(135deg,var(--org-l),#fff);border-color:var(--org)}

.paid-icon-big{font-size:22px}

.paid-toggle-info{flex:1}

.paid-toggle-title{font-size:12px;font-weight:800;color:var(--org-d)}

.paid-toggle-sub{font-size:10px;color:var(--muted);margin-top:2px}

.paid-switch{width:42px;height:24px;background:var(--bdr);border-radius:12px;position:relative;transition:all .2s;flex-shrink:0}

.paid-switch::after{content:'';position:absolute;top:2px;width:20px;height:20px;background:white;border-radius:50%;transition:all .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}

[dir="rtl"] .paid-switch::after{right:2px}

[dir="ltr"] .paid-switch::after{left:2px}

.paid-toggle.active .paid-switch{background:var(--org)}

[dir="rtl"] .paid-toggle.active .paid-switch::after{right:20px}

[dir="ltr"] .paid-toggle.active .paid-switch::after{left:20px}

.paid-fields{display:none;margin-top:14px;padding:14px;background:var(--org-l);border:1.5px dashed var(--org);border-radius:10px}

.paid-fields.show{display:block}

.paid-amount-input-wrap{position:relative}

.paid-currency{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;font-weight:800;color:var(--org-d);pointer-events:none}

[dir="rtl"] .paid-currency{left:12px}

[dir="ltr"] .paid-currency{right:12px}

[dir="rtl"] #postPaidAmount{padding-left:50px}

[dir="ltr"] #postPaidAmount{padding-right:50px}

.paid-tag{font-size:10px;font-weight:800;padding:3px 9px;border-radius:8px;background:linear-gradient(135deg,#fef3c7,#fde68a);color:#78350f;display:inline-flex;align-items:center;gap:3px;border:1px solid #fbbf24}

.paid-amount-tag{font-size:10px;font-weight:800;padding:3px 9px;border-radius:8px;background:#fee2e2;color:#991b1b;direction:ltr}



/* ============ PRODUCT MANAGEMENT TAB ============ */

.products-toolbar{background:white;border:1px solid var(--bdr);border-radius:14px;padding:14px;margin-bottom:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.product-mgmt-table{background:white;border:1px solid var(--bdr);border-radius:14px;overflow:hidden}

.pmt-header{display:grid;grid-template-columns:40px 1fr 1fr 110px 90px 90px;gap:10px;padding:12px 14px;background:#f9f8fc;border-bottom:1.5px solid var(--bdr);font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;align-items:center}

.pmt-row{display:grid;grid-template-columns:40px 1fr 1fr 110px 90px 90px;gap:10px;padding:10px 14px;border-bottom:1px solid var(--bdr);align-items:center;font-size:12px;transition:background .12s}

.pmt-row:hover{background:#f9f8fc}

.pmt-row:last-child{border-bottom:none}

.pmt-cat{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#f9f8fc;font-size:14px}

.pmt-name{font-weight:700;color:var(--text)}

.pmt-name-alt{font-size:10px;color:var(--muted);margin-top:1px}

.pmt-price{font-weight:800;color:var(--green);background:var(--green-l);padding:3px 8px;border-radius:6px;text-align:center;direction:ltr;font-size:11px}

.pmt-price.no-price{background:var(--gray-l);color:var(--muted)}

.pmt-actions{display:flex;gap:4px;justify-content:center}



@media(max-width:700px){

  .pmt-header{display:none}

  .pmt-row{grid-template-columns:1fr;gap:6px;padding:14px}

  .pmt-row > *::before{content:attr(data-label);display:block;font-size:9px;color:var(--muted);font-weight:700;text-transform:uppercase;margin-bottom:2px}

}



/* ============ MULTI-SELECT (PRODUCTS / AUDIENCE) ============ */

.chip-picker{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1.5px dashed var(--bdr);border-radius:10px;background:#f9f8fc;min-height:48px;align-items:center;cursor:pointer;transition:all .15s}



/* Picker thumbnails */

.product-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0}

.product-info-text{flex:1;min-width:0;display:flex;flex-direction:column}

.picker-thumb{width:80px;height:80px;border-radius:8px;object-fit:cover;flex-shrink:0;border:1px solid var(--bdr);background:#f9f8fc}

.picker-thumb-placeholder{width:80px;height:80px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;background:linear-gradient(135deg,#f9f8fc,#eeecf4);border:1px solid var(--bdr)}



/* Selected count badge in picker title */

.selected-count-badge{display:inline-flex;align-items:center;gap:4px;background:var(--org);color:white;font-size:11px;font-weight:800;padding:3px 10px;border-radius:8px;margin-${'inline-start'}:8px;box-shadow:0 2px 6px rgba(109,40,217,.3)}

.selected-count-badge.zero{background:var(--bdr);color:var(--muted);box-shadow:none}



/* Add hint to chip picker when products are selected */

.chip-picker:not(.empty)::after{content:'';display:none}

.chip-picker:hover{border-color:var(--org);background:white}

.chip-picker.empty{justify-content:center;color:var(--muted);font-size:12px;font-style:italic}

.chip{background:var(--org-l);color:var(--org-d);font-size:11px;font-weight:700;padding:4px 10px;border-radius:14px;display:inline-flex;align-items:center;gap:5px;border:1px solid #ffd9b3}

.chip-product{background:var(--brown-l);color:var(--brown);border-color:#e8c8a8}

.chip-audience{background:var(--blue-l);color:var(--blue);border-color:#cfdef0}

.chip .x{cursor:pointer;font-size:14px;line-height:1;opacity:.7;font-weight:900}

.chip .x:hover{opacity:1}

.chip-price{opacity:.7;font-weight:600;font-size:10px}



/* PRODUCT PICKER MODAL */

.picker-search{padding:14px 16px;border-bottom:1px solid var(--bdr);background:white;position:sticky;top:0;z-index:10}

.picker-search-input{width:100%;padding:9px 12px;border:1.5px solid var(--bdr);border-radius:8px;font-family:inherit;font-size:12px;background:#f9f8fc}

.picker-search-input:focus{outline:none;border-color:var(--org);background:white}

.cat-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-top:10px}

.cat-tab{padding:5px 12px;border:1.5px solid var(--bdr);background:white;color:var(--text);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;border-radius:14px;transition:all .15s;display:inline-flex;align-items:center;gap:4px}

.cat-tab:hover{border-color:var(--org)}

.cat-tab.active{background:var(--org);border-color:var(--org);color:white}

.cat-tab-count{background:rgba(0,0,0,.12);padding:1px 7px;border-radius:8px;font-size:10px;font-weight:800}

.cat-tab.active .cat-tab-count{background:rgba(255,255,255,.25)}

.product-list{padding:10px 16px;max-height:50vh;overflow-y:auto}

.product-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:all .12s}

.product-row:hover{background:#f9f8fc;border-color:var(--bdr)}

.product-row.selected{background:var(--org-l);border-color:var(--org)}

.product-check{width:18px;height:18px;border-radius:5px;border:2px solid var(--bdr);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:white;font-size:11px;color:white;font-weight:900}

.product-row.selected .product-check{background:var(--org);border-color:var(--org)}

.product-info{flex:1;min-width:0}

.product-name{font-size:12px;font-weight:700;color:var(--text)}

.product-name-secondary{font-size:10px;color:var(--muted);font-weight:500;margin-top:1px}

.product-price{font-size:11px;font-weight:800;color:var(--green);background:var(--green-l);padding:2px 8px;border-radius:6px;flex-shrink:0;direction:ltr}

.product-price.no-price{background:var(--gray-l);color:var(--muted)}

.cat-section-title{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px;padding:10px 0 6px;border-bottom:1px solid var(--bdr);margin-bottom:6px}

.picker-empty{text-align:center;padding:30px 20px;color:var(--muted);font-size:12px}

.selected-count-bar{padding:10px 16px;background:var(--org-l);border-top:1px solid var(--bdr);font-size:11px;color:var(--org-d);font-weight:700;display:flex;justify-content:space-between;align-items:center}



/* AUDIENCE PICKER */

.audience-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}

.audience-option{padding:12px;border:1.5px solid var(--bdr);border-radius:10px;background:white;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-family:inherit}

.audience-option:hover{border-color:var(--org);background:var(--org-l)}

.audience-option.selected{border-color:var(--org);background:var(--org-l);box-shadow:0 0 0 2px rgba(109,40,217,.2)}

.audience-icon{font-size:24px;line-height:1}

.audience-label{font-size:11px;font-weight:700;color:var(--text)}

.audience-option.selected .audience-label{color:var(--org-d)}



/* TAGS in post card */

.post-tags-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}

.product-tag{font-size:9px;font-weight:600;background:var(--brown-l);color:var(--brown);padding:2px 7px;border-radius:8px;border:1px solid rgba(91,33,182,.15)}

.audience-tag{font-size:9px;font-weight:700;background:var(--blue-l);color:var(--blue);padding:2px 7px;border-radius:8px}



/* ============ MODAL ============ */

.modal-overlay{display:none;position:fixed;inset:0;background:rgba(21,15,38,.6);z-index:200;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(4px)}

.modal-overlay.active{display:flex}

.modal{background:white;border-radius:14px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}

.modal-head{padding:16px 20px;border-bottom:1px solid var(--bdr);display:flex;justify-content:space-between;align-items:center}

.modal-title{font-size:15px;font-weight:800;color:var(--dark)}

.modal-close{background:transparent;border:none;font-size:18px;cursor:pointer;color:var(--muted);width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center}

.modal-close:hover{background:#f4f3f9;color:var(--text)}

.modal-body{padding:18px 20px}

.form-row{margin-bottom:14px}

.form-row.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.form-row.triple{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

.form-label{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}

.form-input,.form-select,.form-textarea{width:100%;padding:9px 12px;border:1.5px solid var(--bdr);border-radius:8px;font-family:inherit;font-size:12px;background:#f9f8fc}

.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--org);background:white}

.form-textarea{min-height:80px;resize:vertical}

.help-tip{font-size:10px;color:var(--muted);margin-top:5px;line-height:1.5}

.modal-footer{padding:14px 20px;border-top:1px solid var(--bdr);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}



/* TEAM TAB */

.team-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}

.team-card{background:white;border:1px solid var(--bdr);border-radius:14px;padding:18px;text-align:center}

.team-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--org),var(--brown));color:white;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;margin:0 auto 10px}

.team-card-name{font-size:14px;font-weight:800;color:var(--dark)}

.team-card-email{font-size:11px;color:var(--muted);margin-bottom:10px}

.team-card-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}

.team-card-stat{padding:8px;background:var(--bg);border-radius:8px}

.team-card-stat-n{font-size:16px;font-weight:900;color:var(--org-d)}

.team-card-stat-l{font-size:9px;color:var(--muted);font-weight:600}



/* ACTIVITY TAB */

.activity-feed{display:flex;flex-direction:column;gap:8px}

.activity-item{display:flex;gap:10px;background:white;border:1px solid var(--bdr);border-radius:10px;padding:10px 12px;align-items:flex-start}

.activity-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}

.activity-icon.create{background:var(--green-l);color:var(--green)}

.activity-icon.edit{background:var(--blue-l);color:var(--blue)}

.activity-icon.delete{background:var(--red-l);color:var(--red)}

.activity-icon.status{background:var(--yellow-l);color:var(--yellow)}

.activity-icon.comment{background:var(--purple-l);color:var(--purple)}

.activity-content{flex:1;font-size:12px;line-height:1.6}

.activity-content strong{color:var(--org-d)}

.activity-time{font-size:10px;color:var(--muted);margin-top:2px}



/* TOAST */

.toast{position:fixed;bottom:20px;background:var(--dark);color:white;padding:10px 16px;border-radius:8px;font-size:12px;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:300;transform:translateY(100px);opacity:0;transition:all .3s}

[dir="rtl"] .toast{right:20px}

[dir="ltr"] .toast{left:20px}

.toast.show{transform:translateY(0);opacity:1}

.toast.success{background:var(--green)}

.toast.error{background:var(--red)}



/* CONFIRM */

.confirm-text{font-size:12px;color:var(--text);line-height:1.7;margin-bottom:8px}

.confirm-detail{font-size:11px;color:var(--muted)}



/* EMPTY/LOADING */

.empty-state{text-align:center;padding:3rem 1rem;color:var(--muted)}

.empty-icon{font-size:40px;margin-bottom:10px;opacity:.5}

.empty-text{font-size:12px}

.loading-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle}

@keyframes spin{to{transform:rotate(360deg)}}



/* ========================================================

   ًں“± MOBILE / RESPONSIVE DESIGN — iPhone, Android, iPad

   ======================================================== */



/* Tablet & medium */

@media (max-width: 1024px){

  .topbar{padding:10px 14px}

  .main{padding:14px}

  .dash-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

}



/* Phones — large + landscape */

@media (max-width: 780px){

  body{font-size:14px}

  .topbar{padding:8px calc(10px + var(--safe-right)) 8px calc(10px + var(--safe-left));padding-top:calc(8px + var(--safe-top));gap:6px;flex-wrap:wrap}

  .topbar-logo svg{width:64px;height:auto}

  .topbar-right{gap:4px}

  .topbar-right .btn{padding:7px 9px;font-size:11px}

  .help-btn{width:34px;height:34px}

  .tabs{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 12px;gap:5px;flex-wrap:nowrap}

  .tabs::-webkit-scrollbar{display:none}

  .tab{padding:10px 14px;font-size:12px;white-space:nowrap;flex-shrink:0;min-height:44px}

  .main{padding:12px;padding-bottom:calc(12px + var(--safe-bottom))}

  .intro{flex-direction:column;align-items:flex-start;padding:14px;gap:10px;text-align:start}

  .intro-icon{font-size:32px}

  .intro-title{font-size:16px}

  .intro-body{font-size:12px}

  .day-card{border-radius:14px;margin-bottom:10px}

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

  .post-card{padding:12px;margin-bottom:8px}

  .post-tags{flex-wrap:wrap;gap:4px}

  .post-title{font-size:12px;line-height:1.5}

  .post-content{font-size:12px;line-height:1.6}

  .post-actions .icon-btn{min-width:36px;min-height:36px}

  .platform-tag,.type-tag,.status-tag,.assignee-tag,.deadline-tag,.paid-tag,.paid-amount-tag,.budget-badge{font-size:10px;padding:2px 7px}

  .dash-grid{grid-template-columns:1fr 1fr;gap:8px}

  .dash-card{padding:14px}

  .dash-card-title{font-size:11px}

  .dash-big-num{font-size:24px}

  /* Modals fullscreen on mobile */

  .modal-overlay{padding:0;align-items:stretch;justify-content:stretch}

  .modal{margin:0;max-width:100%;width:100%;max-height:100%;height:100%;border-radius:0;display:flex;flex-direction:column;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom)}

  .modal-head{padding:14px 16px;flex-shrink:0;position:sticky;top:0;background:white;z-index:5;border-bottom:1px solid var(--bdr)}

  .modal-title{font-size:16px}

  .modal-body{padding:14px 16px;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

  .modal-footer{padding:12px 16px;flex-shrink:0;position:sticky;bottom:0;background:white;border-top:1px solid var(--bdr);box-shadow:0 -2px 8px rgba(0,0,0,.04);gap:6px}

  .modal-footer .btn{flex:1;padding:13px 10px;font-size:12px;min-height:44px}

  .form-row.split,.form-row.triple{grid-template-columns:1fr;gap:10px}

  .form-input,.form-select,.form-textarea{padding:11px 12px}

  .form-label{font-size:12px}

  .login-box{padding:28px 24px;border-radius:18px}

  .login-input{padding:13px 14px;font-size:16px}

  .login-btn{padding:14px;font-size:14px;min-height:48px}

  .auth-tab{padding:11px 8px;font-size:11px;min-height:42px}

  .status-box{padding:30px 22px;border-radius:18px}

  .status-icon-big{font-size:52px}

  .status-title{font-size:18px}

  .welcome-box{max-width:100%;border-radius:18px;margin:8px}

  .welcome-hero{padding:28px 22px}

  .welcome-title{font-size:20px}

  .welcome-body{padding:20px 22px}

  .guide-hero{padding:32px 22px;border-radius:16px}

  .guide-hero-title{font-size:24px}

  .guide-hero-sub{font-size:12px}

  .guide-section{padding:22px 18px;border-radius:14px}

  .gs-title{font-size:18px}

  .guide-cards,.core-values-grid,.channel-grid{grid-template-columns:1fr;gap:10px}

  .core-value{padding:18px}

  .workflow-flow{padding:14px 12px;gap:6px}

  .wf-step{min-width:70px;padding:10px 4px}

  .wf-icon{font-size:22px}

  .wf-label{font-size:10px}

  .wf-desc{display:none}

  .rm-stats-bar{padding:10px 12px;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}

  .rm-stat{padding:0 6px;flex-shrink:0;min-width:60px}

  .rm-stat-num{font-size:16px}

  .rm-stat-label{font-size:8px;letter-spacing:.5px}

  .rm-mine-toggle{padding:6px 10px;font-size:10px}

  .roadmap-toolbar{padding:10px 12px;gap:8px}

  .vt-btn{padding:6px 12px;font-size:11px}

  .nav-period{font-size:12px;min-width:120px}

  .roadmap-filters{flex:1 1 100%;justify-content:flex-start}

  .day-timeline{grid-template-columns:50px 1fr}

  .dv-hour{padding:8px 4px;font-size:10px}

  .dv-slot{padding:6px;min-height:50px}

  .dv-post{padding:7px 9px;font-size:10.5px}

  .team-mgmt-table thead{display:none}

  .team-mgmt-table tr{display:flex;flex-direction:column;padding:14px;border-bottom:8px solid #f9f8fc;gap:8px}

  .team-mgmt-table td{padding:0;border:none;display:block}

  .tm-actions{justify-content:flex-start;flex-wrap:wrap}

  .tm-action-btn{min-height:36px;padding:7px 10px}

  .pmt-row{padding:14px;gap:8px}

  .product-mgmt-table{border-radius:12px}

  .products-toolbar{flex-direction:column;align-items:stretch;gap:8px}

  .products-toolbar .btn{justify-content:center}

  .products-toolbar input,.products-toolbar select{width:100%;font-size:14px}

  .toast{bottom:calc(70px + var(--safe-bottom));left:12px;right:12px;max-width:none}

}



/* Small phones (iPhone SE, mini) */

@media (max-width: 380px){

  body{font-size:12px}

  .main{padding:10px}

  .topbar-logo svg{width:54px}

  .tab{padding:9px 11px;font-size:11px}

  .dash-grid{grid-template-columns:1fr}

  .modal-title{font-size:15px}

  .guide-hero-title{font-size:20px}

  .gs-title{font-size:16px}

}



/* Landscape on phones */

@media (max-width:900px) and (orientation:landscape) and (max-height:500px){

  .topbar{padding:6px 10px}

  .welcome-box{max-height:96vh}

}



/* ============ IMAGE UPLOAD UI ============ */

.image-upload-wrap{margin-top:6px}

.image-preview-card{position:relative;width:100%;aspect-ratio:1;max-width:200px;border-radius:14px;overflow:hidden;background:#f9f8fc;border:2px dashed var(--bdr);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}

.image-preview-card:hover{border-color:var(--org);background:var(--org-l)}

.image-preview-card.has-image{border-style:solid;border-color:var(--org)}

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

.image-preview-empty{text-align:center;padding:14px;color:var(--muted);font-size:11px;font-weight:700;line-height:1.6}

.image-preview-empty .icon{font-size:28px;margin-bottom:6px;display:block}

.image-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}

.img-btn{padding:7px 11px;border-radius:8px;font-size:11px;font-weight:700;border:1.5px solid var(--bdr);background:white;color:var(--text);cursor:pointer;font-family:inherit;transition:all .12s;display:inline-flex;align-items:center;gap:5px;min-height:36px}

.img-btn:hover{border-color:var(--org);color:var(--org)}

.img-btn.danger{border-color:#fecaca;color:#991b1b}

.img-btn.danger:hover{background:#991b1b;color:white;border-color:#991b1b}

.upload-progress{height:4px;background:var(--bdr);border-radius:2px;overflow:hidden;margin-top:8px;display:none}

.upload-progress.active{display:block}

.upload-progress-bar{height:100%;background:linear-gradient(90deg,var(--org),var(--brown));width:0;transition:width .25s;border-radius:2px}

.upload-status{font-size:10px;color:var(--muted);margin-top:4px;font-weight:600}

.pmt-thumb{width:80px;height:80px;border-radius:8px;background:#f9f8fc;object-fit:cover;border:1px solid var(--bdr);flex-shrink:0}

.pmt-thumb-placeholder{width:80px;height:80px;border-radius:8px;background:linear-gradient(135deg,#f9f8fc,#eeecf4);display:inline-flex;align-items:center;justify-content:center;font-size:14px;border:1px solid var(--bdr)}



@media(max-width:600px){

  .topbar{padding:10px 1rem}

  .stats-bar{padding:8px 1rem;gap:10px;overflow-x:auto}

  .tabs-bar{padding:0 .75rem}

  .tab{padding:10px 12px;font-size:11px}

  .main{padding:1rem}

  .form-row.split,.form-row.triple{grid-template-columns:1fr}

  .login-box{padding:28px 22px}

}

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

.app.active { display: flex; height: 100vh; overflow: hidden; background: #f4f3f9; }

.sidebar { 

  width: 260px; 

  background: rgba(21,15,38, 0.95); 

  backdrop-filter: blur(20px); 

  border-left: 1px solid rgba(255,255,255,0.1); 

  display: flex; 

  flex-direction: column; 

  color: white; 

  transition: all 0.3s ease;

  z-index: 1000;

}

.sidebar-header { padding: calc(20px + var(--safe-top, 0px)) 16px 20px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sidebar-header .brand { flex: 1; display: flex; justify-content: center; }
.sidebar-collapse-btn { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 6px 8px; border-radius: 8px; font-size: 18px; line-height: 1; transition: background 0.2s, color 0.2s; flex-shrink: 0; }
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 20px 10px; display: flex; flex-direction: column; gap: 8px; }

.sidebar-nav .tab { 

  background: transparent; 

  border: none; 

  color: rgba(255,255,255,0.6); 

  padding: 12px 16px; 

  text-align: right; 

  border-radius: 12px; 

  cursor: pointer; 

  font-weight: 600; 

  display: flex; 

  align-items: center; 

  gap: 12px; 

  transition: all 0.2s;

}

.sidebar-nav .tab:hover { background: rgba(255,255,255,0.05); color: white; transform: translateX(-5px); }

.sidebar-nav .tab.active { background: rgba(109,40,217,0.15); color: var(--org); border-right: 3px solid var(--org); }

.sidebar-footer { padding: 20px; border-top: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: 15px; }

.user-info { display: flex; flex-direction: column; gap: 8px; }

.sidebar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.main-content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; background: #f4f3f9; position: relative; }

.topbar-glass {

  background: rgba(244,243,249, 0.8);

  backdrop-filter: blur(15px);

  /* reserve the iPhone notch/status-bar height (viewport-fit=cover draws under it) */
  padding: calc(15px + var(--safe-top, 0px)) 30px 15px 30px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  position: sticky;

  top: 0;

  z-index: 90;

  border-bottom: 1px solid rgba(0,0,0,0.05);

}

.topbar-title { font-size: 20px; font-weight: 800; color: var(--dark); }

.glass-effect { backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }



/* Hide old topbar and tabs-bar if they still exist */

.topbar, .tabs-bar { display: none !important; }



/* Adjust main content padding */

.main { padding: 30px; max-width: 1400px; margin: 0 auto; width: 100%; }

.stats-bar { border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); background: white; margin-bottom: 24px; }

/* ============ GLASSMORPHISM ENHANCEMENTS ============ */

.modal, .status-box {

  background: rgba(255, 255, 255, 0.85) !important;

  backdrop-filter: blur(25px);

  -webkit-backdrop-filter: blur(25px);

  border: 1px solid rgba(255, 255, 255, 0.5);

  box-shadow: 0 25px 50px rgba(0,0,0,0.1);

}

.modal-overlay {

  background: rgba(21,15,38, 0.4);

  backdrop-filter: blur(5px);

}

.post-card {

  background: rgba(255, 255, 255, 0.9);

  border: 1px solid rgba(255,255,255,0.8);

  box-shadow: 0 4px 15px rgba(0,0,0,0.03);

  transition: transform 0.2s, box-shadow 0.2s;

}

.post-card:hover {

  transform: translateY(-3px);

  box-shadow: 0 8px 25px rgba(0,0,0,0.08);

}

/* ============ KANBAN BOARD ============ */

.kanban-board {

  display: flex;

  gap: 20px;

  padding: 30px;

  overflow-x: auto;

  height: 100%;

  min-height: 500px;

  align-items: flex-start;

}

.kanban-column {

  background: rgba(255, 255, 255, 0.5);

  border-radius: 16px;

  min-width: 300px;

  max-width: 300px;

  display: flex;

  flex-direction: column;

  max-height: calc(100vh - 150px);

  border: 1px solid rgba(0,0,0,0.05);

  backdrop-filter: blur(10px);

}

.kanban-column-header {

  padding: 15px 20px;

  font-weight: 800;

  font-size: 15px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-bottom: 1px solid rgba(0,0,0,0.05);

  background: rgba(255,255,255,0.7);

  border-radius: 16px 16px 0 0;

}

.kanban-count {

  background: rgba(0,0,0,0.05);

  padding: 2px 8px;

  border-radius: 10px;

  font-size: 12px;

}

.kanban-items {

  padding: 15px;

  flex: 1;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: 12px;

}

.kanban-item {

  background: white;

  border-radius: 12px;

  padding: 15px;

  box-shadow: 0 4px 10px rgba(0,0,0,0.03);

  border: 1px solid rgba(0,0,0,0.05);

  cursor: grab;

  transition: transform 0.2s, box-shadow 0.2s;

}

.kanban-item:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(0,0,0,0.08);

}

.kanban-item:active {

  cursor: grabbing;

}

.kanban-item-title {

  font-weight: 700;

  font-size: 14px;

  margin-bottom: 8px;

}

.kanban-item-meta {

  font-size: 12px;

  color: var(--muted);

  display: flex;

  justify-content: space-between;

}




.plat-icon { width: 20px; height: 20px; vertical-align: middle; display: inline-block; border-radius: 5px; object-fit: contain; }

/* Custom platform dropdown */
.custom-plat-select { position: relative; cursor: pointer; }
.custom-plat-selected { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; font-size: 14px; font-weight: 500; direction: rtl; }
.custom-plat-selected .plat-icon { width: 22px; height: 22px; border-radius: 6px; }
.custom-plat-selected::after { content: '\25BE'; margin-right: auto; color: var(--muted); font-size: 12px; }
.custom-plat-options { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; margin-top: 4px; z-index: 999; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.custom-plat-options.open { display: block; }
.custom-plat-option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background 0.15s; direction: rtl; font-size: 14px; background: #fff; }
.custom-plat-option:hover { background: rgba(109,40,217,0.08); }
.custom-plat-option.active { background: rgba(109,40,217,0.12); font-weight: 600; }
.custom-plat-option .plat-icon { width: 24px; height: 24px; border-radius: 6px; }


/* ═══════════════════════════════════════════════ */
/*  PRODUCT LAUNCH PIPELINE                        */
/* ═══════════════════════════════════════════════ */
.pipe-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.pipe-summary-item{background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:10px 16px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;min-width:120px}
.pipe-summary-item .ps-num{font-size:22px;font-weight:800;color:var(--org)}
.pipe-summary-alert{background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.3);color:#dc2626}
.pipe-board{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;overflow-x:auto;padding-bottom:12px;min-height:400px}
@media(max-width:1200px){.pipe-board{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.pipe-board{grid-template-columns:repeat(2,1fr)}}
.pipe-column{background:rgba(0,0,0,0.02);border-radius:14px;padding:0;min-height:300px;display:flex;flex-direction:column}
.pipe-col-header{padding:12px 14px;font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px;border-bottom:3px solid var(--col-color,#ccc);color:var(--col-color,#333)}
.pipe-col-count{background:var(--col-color,#ccc);color:#fff;border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;margin-right:auto}
.pipe-col-body{flex:1;padding:8px;display:flex;flex-direction:column;gap:8px;min-height:100px}
.pipe-card{background:#fff;border-radius:12px;padding:12px;border:1.5px solid var(--border);cursor:grab;transition:all .2s;position:relative;box-shadow:0 2px 6px rgba(0,0,0,0.04)}
.pipe-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.1);transform:translateY(-2px)}
.pipe-card.dragging{opacity:0.5;transform:rotate(2deg)}
.pipe-card-name{font-weight:700;font-size:13px;margin-bottom:4px;color:var(--dark)}
.pipe-card-desc{font-size:11px;color:var(--muted);line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pipe-card-meta{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted)}
.pipe-card-days{padding:2px 6px;border-radius:6px;font-weight:700;font-size:10px}
.pipe-card-days.ok{background:rgba(16,185,129,0.1);color:#059669}
.pipe-card-days.warn{background:rgba(245,158,11,0.1);color:#d97706}
.pipe-card-days.danger{background:rgba(239,68,68,0.1);color:#dc2626}
.pipe-card-assignee{font-size:10px;color:var(--muted);margin-right:auto}
.pipe-card-progress{height:4px;background:rgba(0,0,0,0.06);border-radius:4px;margin-top:6px;overflow:hidden}
.pipe-card-progress-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--org),#f59e0b);transition:width .3s}
.pipe-card-ref{margin-top:6px;display:flex;gap:4px}
.pipe-card-ref a{font-size:10px;color:var(--org);text-decoration:none}
.pipe-card-ref a:hover{text-decoration:underline}
.pipe-checklist{margin-top:8px}
.pipe-checklist-title{font-size:12px;font-weight:700;color:var(--dark);margin-bottom:6px;display:flex;align-items:center;gap:4px}
.pipe-check-item{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:12px;cursor:pointer}
.pipe-check-item input[type=checkbox]{accent-color:var(--org);width:16px;height:16px}
.pipe-check-item.done{text-decoration:line-through;color:var(--muted)}


/* Hide financials from creatives unless they are admins */
body.role-designer:not(.role-owner):not(.role-admin) .hide-from-creatives,
body.role-photographer:not(.role-owner):not(.role-admin) .hide-from-creatives {
  display: none !important;
}

/* =========================================
   📱 iOS & iPadOS FIXED SCREEN FIXES
   ========================================= */
html, body {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden !important; /* Stop iOS rubber banding and whole-page scroll */
  overscroll-behavior-y: none;
}

.app {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* Momentum scrolling on iOS */
  height: 100%;
}

.tab-content {
  flex: 1;
  overflow-y: visible;
}

/* Ensure sidebars don't bounce */
.sidebar {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Fix modals moving off-screen */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

/* Global Overscroll Fix */
html, body, .app {
  overscroll-behavior: none !important;
  overscroll-behavior-y: none !important;
}

/* ============ MOBILE DRAWER (responsive sidebar) ============ */
.mobile-menu-btn { display: inline-flex; align-items: center; background: none; border: none; font-size: 23px; color: var(--org); cursor: pointer; padding: 2px 8px; line-height: 1; border-radius: 8px; transition: background .15s; }
.mobile-menu-btn:hover { background: rgba(109,40,217,.1); }
.sidebar-backdrop { display: none; }
@media (max-width: 820px) {
  .app.active { display: block; }
  .main-content { width: 100%; height: 100%; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; right: 0; left: auto;
    width: 82%; max-width: 300px;
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 2000;
    box-shadow: -8px 0 30px rgba(0,0,0,.45);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1999; }
  .sidebar-backdrop.open { display: block; }
  .mobile-menu-btn { display: inline-flex; align-items: center; }
}

/* ============ 2026 DESIGN REFRESH (app-wide) ============ */
/* Real Arabic typeface (Cairo) + Latin (Inter), now actually loaded */
html[lang="ar"] { font-family: 'Cairo', 'Tajawal', sans-serif; }
html[lang="en"] { font-family: 'Inter', sans-serif; }
/* Fix the Arabic typography bug: negative tracking breaks cursive joins; give airier lines */
body { letter-spacing: 0; line-height: 1.7; }
[dir="rtl"] *, html[lang="ar"] * { letter-spacing: 0 !important; }
/* Calmer glassmorphism for legibility (keep the dark identity, lose the haze) */
.glass-effect { backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; }

/* ============ CUSTOM AUDIENCES (per-workspace) ============ */
.audience-option { position: relative; }
.aud-del { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: rgba(239,68,68,.15); color: #ef4444; font-size: 15px; line-height: 1; cursor: pointer; display: none; z-index: 2; }
.audience-option:hover .aud-del { display: inline-flex; align-items: center; justify-content: center; }
.audience-add { border: 1.5px dashed var(--org, #6d28d9) !important; opacity: .85; }
.audience-add:hover { opacity: 1; }

/* ============ LINE ICONS (sidebar nav) ============ */
/* Override the emoji "chip" so Tabler line icons render clean + inherit tab color */
.sidebar-nav .tab-icon { background: none !important; box-shadow: none !important; border: none !important; width: 22px; height: 22px; font-size: 21px; color: inherit; filter: none !important; transform: none !important; }
.sidebar-nav .tab:hover .tab-icon { transform: none !important; background: none !important; box-shadow: none !important; }
.sidebar-nav .tab.active .tab-icon { background: none !important; box-shadow: none !important; color: var(--org); }
.tab-icon.ti { line-height: 1; }

/* ============ COMMAND PALETTE (Cmd/Ctrl+K) ============ */
.cmdk-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:6000; align-items:flex-start; justify-content:center; padding-top:12vh; backdrop-filter:blur(4px); }
.cmdk-overlay.open { display:flex; }
.cmdk-box { width:90%; max-width:520px; background:#1a140d; border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.cmdk-search { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.cmdk-search i { font-size:20px; color:rgba(255,255,255,.45); }
.cmdk-search input { flex:1; background:none; border:none; outline:none; color:#fff; font-size:15px; font-family:inherit; }
.cmdk-search kbd { font-size:11px; color:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.2); border-radius:5px; padding:2px 6px; }
.cmdk-list { max-height:52vh; overflow-y:auto; padding:8px; }
.cmdk-item { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:9px; color:rgba(255,255,255,.85); cursor:pointer; font-size:14px; }
.cmdk-item i { font-size:19px; color:rgba(255,255,255,.55); }
.cmdk-item.active, .cmdk-item:hover { background:rgba(109,40,217,.18); color:#fff; }
.cmdk-item.active i, .cmdk-item:hover i { color:var(--org); }
.cmdk-empty { padding:20px; text-align:center; color:rgba(255,255,255,.4); font-size:13px; }

/* ============ POST COMPOSER — LIVE PREVIEW ============ */
.composer-preview { position:sticky; top:0; z-index:3; background:#fff; margin:0 0 14px; padding:4px 0 12px; border-bottom:1px solid var(--bdr,#ebe7f5); }
.cp-label { font-size:12px; font-weight:700; color:var(--muted,#7d768f); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.cp-label i { font-size:15px; color:var(--org); }
.cp-card { background:#f9f8fc; border:1px solid var(--bdr,#ebe7f5); border-radius:14px; padding:13px 15px; }
.cp-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12px; color:var(--muted,#7d768f); }
.cp-head .plat-icon { width:18px; height:18px; vertical-align:middle; }
.cp-type { background:rgba(109,40,217,.1); color:var(--org); padding:2px 10px; border-radius:20px; font-weight:700; }
.cp-title { font-size:15px; font-weight:800; color:var(--dark,#150f26); margin-bottom:6px; word-break:break-word; }
.cp-body { font-size:13.5px; color:#333; line-height:1.7; white-space:pre-wrap; word-break:break-word; min-height:20px; }
.cp-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.cp-hashtags { color:var(--org); font-size:12px; font-weight:600; }
.cp-aud { background:rgba(0,0,0,.05); color:#555; font-size:11px; padding:2px 8px; border-radius:20px; }

/* ============ DESKTOP SIDEBAR COLLAPSE ============ */
@media (min-width: 821px) {
  body.nav-collapsed .sidebar { width: 0; min-width: 0; padding-top: 0; padding-bottom: 0; border: none; overflow: hidden; opacity: 0; }
}

/* ============ CARD INLINE LINE ICONS ============ */
.post-meta .ti, .dv-post-meta .ti, .comments-toggle .ti { font-size: 12.5px; vertical-align: -2px; }
.icon-btn .ti { font-size: 15px; vertical-align: -2px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; flex: 0 0 auto; }
.dv-post-meta .badge { display: inline-flex; align-items: center; gap: 3px; }
.status-bar-label .status-dot { margin-inline-end: 4px; }

/* ============ CATEGORY MANAGER (products screen) ============ */
.cat-manager { background: var(--surface, #fff); border: 1px solid var(--bdr, #e7e2db); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.cat-manager-title { font-size: 12px; font-weight: 800; color: var(--muted, #8a8178); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cat-manager-title .ti { font-size: 15px; }
.cat-manager-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Category management writes the owner/admin-only workspace doc — hide the panel from members/viewers
   (the JS handlers also guard on can('manageSettings') so no phantom category is ever created). */
body:not(.role-owner):not(.role-admin) .cat-manager { display: none; }
.cat-icon-input { width: 46px; text-align: center; font-size: 16px; padding: 8px 4px; border: 1px solid var(--bdr, #e7e2db); border-radius: 8px; background: #fff; }
.cat-name-input { flex: 1; min-width: 160px; padding: 8px 12px; border: 1px solid var(--bdr, #e7e2db); border-radius: 8px; background: #fff; font-size: 13px; font-family: inherit; }
.cat-name-input:focus, .cat-icon-input:focus { outline: none; border-color: var(--org, #6d28d9); }

/* grouped product list */
.pmt-cat-group { margin-bottom: 16px; }
.pmt-cat-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; margin-bottom: 4px; border-bottom: 2px solid var(--bdr, #eee); }
.pmt-cat-group-title { font-size: 14px; font-weight: 800; color: var(--dark, #2b2620); display: flex; align-items: center; gap: 6px; }
.pmt-cat-group-count { font-size: 11px; font-weight: 700; color: var(--muted, #8a8178); background: rgba(0,0,0,0.05); border-radius: 20px; padding: 1px 9px; }
.pmt-cat-empty { font-size: 12px; color: var(--muted, #8a8178); padding: 10px 6px; }

/* ============ WORKSPACE SETTINGS TAB ============ */
.ws-settings-section { background: var(--surface, #fff); border: 1px solid var(--bdr, #e7e2db); border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
.ws-settings-title { font-size: 13px; font-weight: 800; color: var(--dark, #2b2620); display: flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.ws-settings-title .ti { font-size: 16px; color: var(--org, #6d28d9); }

/* Logo upload */
.logo-upload-area { width: 140px; height: 140px; border: 2px dashed var(--bdr, #e7e2db); border-radius: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; margin-bottom: 10px; transition: border-color .2s; }
.logo-upload-area:hover { border-color: var(--org, #6d28d9); }
.logo-preview-img { width: 100%; height: 100%; object-fit: contain; }
.logo-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted, #8a8178); }
.logo-placeholder .ti { font-size: 32px; }
.logo-placeholder span { font-size: 12px; }

/* Company info grid */
.ws-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .ws-info-grid { grid-template-columns: 1fr; } }
.ws-info-label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: var(--muted, #8a8178); }
.ws-info-input { padding: 9px 12px; border: 1px solid var(--bdr, #e7e2db); border-radius: 8px; background: #f9f8fc; font-size: 13px; font-family: inherit; color: var(--dark, #2b2620); transition: border-color .2s; }
.ws-info-input:focus { outline: none; border-color: var(--org, #6d28d9); background: #fff; }
.ws-info-input[readonly] { opacity: .6; cursor: not-allowed; }

/* Audience manager (settings panel) */
.aud-manager { display: flex; flex-direction: column; gap: 8px; }
.aud-mgr-list { display: flex; flex-direction: column; gap: 4px; }
.aud-mgr-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(0,0,0,.04); border-radius: 8px; }
.aud-mgr-icon { font-size: 18px; flex: 0 0 auto; }
.aud-mgr-label { flex: 1; font-size: 13px; font-weight: 600; color: var(--dark, #2b2620); }
.aud-mgr-del { background: none; border: none; color: var(--muted, #8a8178); cursor: pointer; padding: 4px; border-radius: 6px; font-size: 14px; transition: color .2s; }
.aud-mgr-del:hover { color: #ef4444; }
.aud-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.aud-icon-input { width: 46px; text-align: center; font-size: 16px; padding: 8px 4px; border: 1px solid var(--bdr, #e7e2db); border-radius: 8px; background: #fff; }
.aud-name-input { flex: 1; min-width: 160px; padding: 8px 12px; border: 1px solid var(--bdr, #e7e2db); border-radius: 8px; background: #fff; font-size: 13px; font-family: inherit; }
.aud-name-input:focus, .aud-icon-input:focus { outline: none; border-color: var(--org, #6d28d9); }
.aud-mgr-hint { font-size: 11px; color: var(--muted, #8a8178); margin-top: 4px; }

/* Quick links grid */
.ws-quick-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 520px) { .ws-quick-links { grid-template-columns: 1fr 1fr; } }
.ws-quick-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; background: rgba(0,0,0,.03); border: 1px solid var(--bdr, #e7e2db); border-radius: 12px; cursor: pointer; transition: all .2s; font-size: 12px; font-weight: 700; color: var(--dark, #2b2620); font-family: inherit; }
.ws-quick-btn .ti { font-size: 22px; color: var(--org, #6d28d9); }
.ws-quick-btn:hover { background: rgba(109,40,217,.07); border-color: var(--org, #6d28d9); transform: translateY(-2px); }

/* ============ COMMAND CENTER (HOME) ============ */
.hc-greeting { margin-bottom: 18px; }
.hc-greet-text { font-size: 22px; font-weight: 900; color: var(--dark, #2b2620); }
.hc-greet-sub { font-size: 13px; color: var(--muted, #8a8178); margin-top: 4px; }
.hc-event-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 16px; background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(109,40,217,.06)); border: 1px solid var(--bdr, #e7e2db); border-radius: 12px; font-size: 13px; }
.hc-event-banner > .ti { font-size: 22px; color: #7c3aed; }
.hc-event-banner > div { flex: 1; }
.hc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 22px; }
.hc-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; background: var(--surface, #fff); border: 1px solid var(--bdr, #e7e2db); border-radius: 14px; cursor: pointer; transition: all .2s; text-align: start; font-family: inherit; }
.hc-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.hc-card.hc-urgent { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.03); }
.hc-icon { font-size: 22px; }
.hc-count { font-size: 28px; font-weight: 900; color: var(--dark, #2b2620); line-height: 1; }
.hc-label { font-size: 12px; font-weight: 700; color: var(--muted, #8a8178); }
.hc-section { margin-bottom: 22px; }
.hc-section-head { font-size: 14px; font-weight: 800; color: var(--dark, #2b2620); display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.hc-section-head .ti { color: var(--org, #6d28d9); }
.hc-agenda { display: flex; flex-direction: column; gap: 6px; }
.hc-agenda-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--surface, #fff); border: 1px solid var(--bdr, #e7e2db); border-radius: 10px; cursor: pointer; transition: background .15s; }
.hc-agenda-row:hover { background: rgba(0,0,0,.03); }
.hc-agenda-title { flex: 1; font-size: 13px; font-weight: 600; color: var(--dark, #2b2620); }
.hc-agenda-plat { font-size: 16px; }
.hc-empty { padding: 20px; text-align: center; color: var(--muted, #8a8178); font-size: 13px; }
.hc-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.hc-action-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 13px; background: var(--surface, #fff); border: 1px solid var(--bdr, #e7e2db); border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--dark, #2b2620); font-family: inherit; transition: all .2s; }
.hc-action-btn:hover { background: rgba(109,40,217,.07); border-color: var(--org, #6d28d9); }
.hc-action-btn .ti { font-size: 16px; color: var(--org, #6d28d9); }

/* ============ NOTIFICATIONS ============ */
.notif-wrap { position: relative; }
.notif-btn { position: relative; }
.notif-badge { position: absolute; top: 0; inset-inline-end: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; transform: translate(25%, -25%); }
.notif-panel { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: 320px; max-width: 86vw; background: var(--surface, #fff); border: 1px solid var(--bdr, #e7e2db); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.15); z-index: 1000; display: none; overflow: hidden; }
.notif-panel.open { display: block; }
.notif-panel-head { padding: 13px 16px; font-size: 13px; font-weight: 800; color: var(--dark, #2b2620); border-bottom: 1px solid var(--bdr, #e7e2db); display: flex; align-items: center; gap: 7px; }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 16px; border: none; border-bottom: 1px solid rgba(0,0,0,.05); background: none; cursor: pointer; text-align: start; font-family: inherit; transition: background .15s; }
.notif-item:hover { background: rgba(0,0,0,.03); }
.notif-item-icon { font-size: 16px; flex: 0 0 auto; margin-top: 1px; }
.notif-item-text { font-size: 12.5px; color: var(--dark, #2b2620); line-height: 1.5; }
.notif-empty { padding: 28px 16px; text-align: center; color: var(--muted, #8a8178); font-size: 13px; }
.notif-empty .ti { color: #10b981; font-size: 20px; display: block; margin-bottom: 6px; }

/* ============ DAY EVENT BADGE (Saudi occasions) ============ */
.day-event-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 20px; margin-inline-start: 6px; vertical-align: middle; }

/* ============ TRASH ============ */
.trash-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.trash-count { font-size: 12px; font-weight: 700; color: var(--muted, #8a8178); }
.trash-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface, #fff); border: 1px solid var(--bdr, #e7e2db); border-radius: 10px; margin-bottom: 8px; }
.trash-type-icon { font-size: 18px; color: var(--muted, #8a8178); flex: 0 0 auto; }
.trash-info { flex: 1; min-width: 0; }
.trash-title { font-size: 13px; font-weight: 700; color: var(--dark, #2b2620); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-meta { font-size: 11px; color: var(--muted, #8a8178); margin-top: 2px; }

/* ============ SUBSCRIPTION ============ */
.sub-current { background: var(--surface, #fff); border: 2px solid var(--bdr, #e7e2db); border-radius: 16px; padding: 20px; margin-bottom: 20px; }
.sub-current-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.sub-current-label { font-size: 11px; font-weight: 700; color: var(--muted, #8a8178); }
.sub-current-name { font-size: 22px; font-weight: 900; display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.sub-status-pill { font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: 20px; }
.sub-expiry { font-size: 12px; color: var(--muted, #8a8178); margin-bottom: 14px; }
.sub-usages { display: flex; flex-direction: column; gap: 12px; }
.sub-usage-head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--dark, #2b2620); margin-bottom: 5px; }
.sub-usage-track { height: 7px; background: rgba(0,0,0,.07); border-radius: 10px; overflow: hidden; }
.sub-usage-fill { height: 100%; border-radius: 10px; transition: width .3s; }

.sub-cycle-toggle { display: inline-flex; background: rgba(0,0,0,.05); border-radius: 12px; padding: 4px; margin-bottom: 18px; gap: 4px; }
.sub-cycle-toggle button { border: none; background: none; padding: 8px 20px; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--muted, #8a8178); display: flex; align-items: center; gap: 6px; }
.sub-cycle-toggle button.active { background: #fff; color: var(--dark, #2b2620); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.sub-save { font-size: 9px; font-weight: 800; background: #10b981; color: #fff; padding: 2px 6px; border-radius: 6px; }

.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 18px; }
.plan-card { position: relative; background: var(--surface, #fff); border: 2px solid var(--bdr, #e7e2db); border-radius: 16px; padding: 24px 20px; display: flex; flex-direction: column; }
.plan-popular { box-shadow: 0 10px 30px rgba(109,40,217,.12); transform: scale(1.02); }
.plan-badge { position: absolute; top: -11px; inset-inline-start: 50%; transform: translateX(50%); background: var(--org, #6d28d9); color: #fff; font-size: 10px; font-weight: 800; padding: 4px 14px; border-radius: 20px; white-space: nowrap; }
.plan-name { font-size: 18px; font-weight: 900; margin-bottom: 4px; }
.plan-tagline { font-size: 11.5px; color: var(--muted, #8a8178); margin-bottom: 12px; line-height: 1.5; min-height: 32px; }
.plan-price { font-size: 30px; font-weight: 900; color: var(--dark, #2b2620); margin-bottom: 18px; }
.plan-feat-head { font-size: 11px !important; font-weight: 800; color: var(--muted, #8a8178); margin-top: 4px; }
.plan-price span { font-size: 12px; font-weight: 600; color: var(--muted, #8a8178); }
.plan-features { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; display: flex; flex-direction: column; gap: 9px; }
.plan-features li { font-size: 12.5px; color: var(--dark, #2b2620); display: flex; align-items: center; gap: 8px; }
.plan-features .ti { font-size: 15px; flex: 0 0 auto; }
.plan-btn { width: 100%; justify-content: center; font-weight: 800; }
.sub-foot { text-align: center; font-size: 12px; color: var(--muted, #8a8178); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; }
.sub-foot .ti { color: #10b981; }
.sub-trial-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 16px; background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(109,40,217,.07)); border: 1px solid rgba(124,58,237,.25); border-radius: 14px; }
.sub-trial-banner > .ti { font-size: 26px; color: #7c3aed; flex: 0 0 auto; }
.sub-trial-banner strong { font-size: 14px; color: var(--dark, #2b2620); }
.sub-trial-sub { font-size: 12px; color: var(--muted, #8a8178); margin-top: 3px; }
.plan-trial-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; color: #7c3aed; background: rgba(124,58,237,.1); padding: 3px 9px; border-radius: 20px; margin-bottom: 8px; }

/* ============ ADMIN PLANS EDITOR ============ */
.ape-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ape-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.ape-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ape-name { flex: 1; font-size: 15px; font-weight: 800; border: 1px solid #e7e2db; border-radius: 8px; padding: 7px 10px; font-family: inherit; }
.ape-pop { font-size: 11px; color: #666; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.ape-tagline { width: 100%; font-size: 12px; border: 1px solid #e7e2db; border-radius: 8px; padding: 7px 10px; margin-bottom: 10px; font-family: inherit; box-sizing: border-box; }
.ape-row { display: flex; gap: 8px; margin-bottom: 10px; }
.ape-row label { flex: 1; font-size: 10px; font-weight: 700; color: #888; display: flex; flex-direction: column; gap: 3px; }
.ape-row input { border: 1px solid #e7e2db; border-radius: 7px; padding: 6px 8px; font-family: inherit; font-size: 13px; width: 100%; box-sizing: border-box; }
.ape-row input[type="color"] { padding: 2px; height: 32px; cursor: pointer; }
.ape-feat-label { font-size: 10px; font-weight: 700; color: #888; display: block; margin-bottom: 4px; }
.ape-features { width: 100%; border: 1px solid #e7e2db; border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 12px; line-height: 1.6; resize: vertical; box-sizing: border-box; }
.ape-features:focus, .ape-name:focus, .ape-tagline:focus, .ape-row input:focus { outline: none; border-color: var(--org, #6d28d9); }