:root{--ink:#19211d;--muted:#7a827e;--line:#e8ebe8;--bg:#f7f8f6;--panel:#fff;--green:#0c7b57;--green2:#16a071;--purple:#7a64e8;--soft-green:#e8f6f0;--shadow:0 10px 30px rgba(28,45,36,.055)}body.dark{--ink:#eef4f0;--muted:#99a69f;--line:#2c3932;--bg:#101612;--panel:#18211c;--soft-green:#20372d;--shadow:none}body.dark .sidebar,body.dark .topbar,body.dark .metric-card,body.dark .panel,body.dark .agent-control,body.dark .credits,body.dark .icon-btn,body.dark .outline-btn,body.dark .modal{background:var(--panel);color:var(--ink)}body.dark .search,body.dark .settings-link,body.dark .tabs,body.dark .modal input,body.dark .modal select{background:#111914;color:var(--ink)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Tajawal",Arial,sans-serif;font-size:14px}.app-shell{display:flex;min-height:100vh}.sidebar{width:248px;background:#fff;border-left:1px solid var(--line);padding:27px 18px 18px;display:flex;flex-direction:column;position:fixed;right:0;top:0;height:100vh;z-index:30}.brand{display:flex;align-items:center;gap:11px;padding:0 7px 28px}.brand-mark{width:40px;height:40px;border-radius:13px;background:linear-gradient(145deg,#168b65,#075f45);display:grid;place-items:center;color:white;font-size:23px;font-weight:800;box-shadow:0 7px 18px #0c7b5733}.brand strong,.brand span{display:block}.brand strong{font-size:20px}.brand span{font-size:11px;color:#929a95;margin-top:1px}.close-menu{display:none;margin-right:auto}.nav-list{display:flex;flex-direction:column;gap:4px}.nav-label{color:#acb2ae;font-size:11px;font-weight:700;padding:13px 13px 5px;margin:0}.nav-item{position:relative;text-decoration:none;color:#59625d;border-radius:11px;padding:11px 12px;display:flex;align-items:center;gap:12px;font-weight:600;transition:.2s}.nav-item:hover{background:#f4f7f5;color:var(--green)}.nav-item.active{background:var(--soft-green);color:var(--green)}.nav-item.active:after{content:"";position:absolute;right:-18px;top:9px;height:25px;width:3px;border-radius:3px;background:var(--green)}.nav-icon{width:20px;text-align:center;font-size:17px}.nav-badge{margin-right:auto;font-size:9px;background:#ece8ff;color:#7058d8;padding:3px 7px;border-radius:10px}.count-badge{margin-right:auto;color:white;background:#e86e65;border-radius:20px;width:20px;height:20px;display:grid;place-items:center;font-size:10px}.sidebar-footer{margin-top:auto}.upgrade-card{position:relative;background:linear-gradient(145deg,#eff9f3,#e7f4ed);padding:17px 15px;border-radius:15px;overflow:hidden}.upgrade-card:after{content:"";position:absolute;width:100px;height:100px;border:20px solid #ffffff5e;border-radius:50%;left:-40px;bottom:-55px}.upgrade-card .sparkle{color:var(--green);font-size:18px}.upgrade-card strong{display:block;margin:7px 0 3px}.upgrade-card p{font-size:11px;color:#6f7e75;margin:0 0 11px;line-height:1.5}.upgrade-card button{width:100%;padding:8px;border:0;border-radius:8px;color:white;background:var(--green);font-family:inherit;font-weight:700;cursor:pointer;position:relative;z-index:2}.user-mini{display:flex;align-items:center;gap:9px;padding:17px 5px 0}.avatar{width:36px;height:36px;border-radius:12px;background:linear-gradient(145deg,#ddc4ab,#9f7255);display:grid;place-items:center;color:white;font-weight:700}.user-mini strong,.user-mini span{display:block}.user-mini strong{font-size:12px}.user-mini span{font-size:10px;color:var(--muted)}.more-btn{border:0;background:transparent;color:#9ba19d;margin-right:auto;cursor:pointer}.main{width:calc(100% - 248px);margin-right:248px}.topbar{height:75px;background:#ffffffdd;backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:20}.topbar-start{display:flex;align-items:center;gap:12px}.search{height:40px;width:340px;border:1px solid var(--line);border-radius:11px;background:#f9faf9;display:flex;align-items:center;padding:0 13px;color:#9fa6a2;gap:8px}.search input{border:0;outline:0;background:transparent;font-family:inherit;width:100%;font-size:12px}.search kbd{font-family:inherit;border:1px solid #e2e5e2;border-radius:5px;padding:2px 5px;font-size:9px;background:white;white-space:nowrap}.top-actions{display:flex;align-items:center;gap:9px}.credits,.icon-btn,.primary-btn,.outline-btn,.plain-link,.review-btn,.settings-link{font-family:inherit;cursor:pointer}.credits{height:39px;display:flex;gap:7px;align-items:center;border:1px solid #e5e9e6;border-radius:10px;background:white;padding:0 11px;color:#65706a;font-size:11px}.credits b{color:var(--ink);font-size:13px}.coin{width:23px;height:23px;background:#fff4d9;color:#d99919;border-radius:50%;display:grid;place-items:center}.icon-btn{width:39px;height:39px;border:1px solid var(--line);background:white;border-radius:10px;color:#647069;position:relative}.bell i{position:absolute;width:6px;height:6px;border-radius:50%;background:#eb625e;top:7px;right:7px;border:1px solid white}.primary-btn{border:0;border-radius:10px;background:var(--green);color:white;font-weight:700;padding:11px 16px;box-shadow:0 6px 14px #0c7b5723}.menu-btn{display:none}.content{padding:31px 34px 45px;max-width:1550px;margin:auto}.welcome-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.eyebrow{font-size:11px;color:#949b97;margin:0 0 6px}.welcome-row h1{margin:0;font-size:26px;letter-spacing:-.5px}.welcome-row h1 span{font-size:22px}.welcome-row>div>p:last-child{margin:7px 0 0;color:#7e8781;font-size:12px}.welcome-row p strong{color:var(--green)}.agent-control{min-width:225px;border:1px solid #dcebe3;background:white;border-radius:14px;padding:11px 13px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow)}.agent-orb{position:relative;width:39px;height:39px;border-radius:12px;background:linear-gradient(145deg,#157e5c,#0f5e46);display:grid;place-items:center;color:white}.agent-orb i{width:8px;height:8px;border-radius:50%;background:#66dfaa;border:2px solid white;position:absolute;bottom:-2px;left:-2px}.agent-control strong,.agent-control .agent-label{display:block}.agent-label{font-size:10px;color:#929995}.agent-control strong{font-size:12px;margin-top:2px}.switch{margin-right:auto;position:relative;width:39px;height:23px;display:block}.switch input{position:absolute;opacity:0}.switch>span,.switch>i{position:absolute;inset:0;border-radius:20px;background:#dfe4e1;transition:.25s;cursor:pointer}.switch>span:after,.switch>i:after{content:"";width:17px;height:17px;background:white;position:absolute;top:3px;right:3px;border-radius:50%;box-shadow:0 1px 4px #0002;transition:.25s}.switch input:checked+span,.switch input:checked+i{background:var(--green2)}.switch input:checked+span:after,.switch input:checked+i:after{right:19px}.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:15px}.metric-card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.metric-card{padding:17px 18px;min-height:155px}.metric-head{display:flex;align-items:center;justify-content:space-between}.metric-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700}.purple{background:#eeeaff;color:#7961e6}.blue{background:#e8f3fa;color:#3982b0}.green{background:#e4f5ed;color:#168b65}.orange{background:#fff0df;color:#dc8738}.trend{font-size:10px;padding:4px 7px;border-radius:8px}.trend.up{color:#16835f;background:#ebf8f2}.trend.neutral{color:#909692;background:#f4f5f4}.metric-card p{color:#7e8782;margin:13px 0 4px;font-size:11px}.metric-card h2{margin:0;font-size:25px}.metric-card h2 small{font-size:11px;color:#7f8983;font-weight:500}.progress{height:5px;border-radius:5px;background:#edf0ee;margin-top:12px;overflow:hidden}.progress i{height:100%;display:block;border-radius:5px;background:linear-gradient(90deg,#8365e9,#a292ef)}.hint{display:block;color:#9aa19d;font-size:9px;margin-top:6px}.plain-link{border:0;background:none;color:#6d7771;font-size:10px}.mini-avatars{display:flex;align-items:center;margin-top:12px}.mini-avatars i,.faces i{width:23px;height:23px;border-radius:50%;background:#d9e9e0;border:2px solid white;display:grid;place-items:center;font-size:8px;font-style:normal;margin-left:-5px;color:#466454}.mini-avatars i:nth-child(2){background:#f1dfce}.mini-avatars i:nth-child(3){background:#dcd8f3}.mini-avatars span{font-size:9px;color:#9ba19e;margin-right:10px}.bars{height:32px;display:flex;align-items:end;gap:4px;margin-top:8px;direction:ltr}.bars i{width:12%;background:#c6e6d7;border-radius:3px 3px 1px 1px}.bars i:nth-last-child(-n+2){background:#49ac86}.approval-line{display:flex;gap:12px;margin-top:13px;color:#89908c;font-size:9px}.dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-left:4px}.dot.approved{background:#39a67d}.dot.pending{background:#eaa248}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(290px,.75fr);gap:15px;margin-bottom:15px}.panel{padding:19px}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.panel-title h3{margin:0;font-size:15px}.panel-title p{font-size:10px;color:#979e9a;margin:4px 0 0}.outline-btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 11px;color:#68726c;font-size:10px}.project-row{display:grid;grid-template-columns:47px minmax(145px,1.5fr) minmax(112px,1fr) minmax(100px,1fr) 65px 20px;gap:11px;align-items:center;padding:12px 0;border-top:1px solid #f0f2f0}.project-thumb{width:45px;height:45px;border-radius:11px;display:grid;place-items:center;overflow:hidden;color:white;font-size:9px;font-weight:700}.thumb-one{background:linear-gradient(145deg,#a9caba,#527866)}.thumb-two{background:linear-gradient(145deg,#c79160,#603b24)}.thumb-three{background:linear-gradient(145deg,#d9c6a8,#806d56)}.project-name strong,.project-name span,.project-status small{display:block}.project-name strong{font-size:11px}.project-name span,.project-status small{font-size:9px;color:#9aa09d;margin-top:4px}.status{font-size:8px;padding:4px 7px;border-radius:7px;white-space:nowrap}.in-progress{background:#e8f5ef;color:#177e5c}.review{background:#fff4df;color:#c17c20}.scheduled{background:#eeeaff;color:#725cd3}.project-progress{display:flex;align-items:center;gap:7px}.project-progress div{height:4px;background:#edf0ee;border-radius:4px;flex:1;overflow:hidden}.project-progress i{height:100%;display:block;background:#4eab87}.project-progress span{font-size:9px;color:#828b85}.faces{display:flex}.live{font-size:9px;color:#17815f;background:#e9f7f1;border-radius:8px;padding:5px 8px}.live i{width:5px;height:5px;background:#23af7d;border-radius:50%;display:inline-block;margin-left:4px;box-shadow:0 0 0 3px #76d5b34d}.task-list{display:flex;flex-direction:column}.task-item{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid #f0f2f0;cursor:pointer}.task-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}.task-item strong,.task-item small{display:block}.task-item strong{font-size:11px}.task-item small{font-size:8px;color:#99a09b;margin-top:3px}.violet{background:#eeeaff;color:#7963df}.pink{background:#fae9f0;color:#d46491}.sky{background:#e6f3f9;color:#438caf}.amber{background:#fff1df;color:#d88a35}.switch.small{width:34px;height:20px}.switch.small>i:after{width:14px;height:14px}.switch.small input:checked+i:after{right:17px}.settings-link{border:0;background:#f5f7f5;color:#617069;border-radius:9px;width:100%;padding:9px;font-size:10px;margin-top:6px}.bottom-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:15px;margin-bottom:15px}.tabs{background:#f3f5f3;padding:3px;border-radius:8px}.tabs button{border:0;background:transparent;padding:5px 12px;border-radius:6px;font-family:inherit;color:#8a928d;font-size:9px;cursor:pointer}.tabs button.active{background:white;color:var(--green);box-shadow:0 2px 6px #0000000d}.studio-body{height:164px;background:linear-gradient(135deg,#eff7f2,#f6f4fb);border-radius:12px;display:flex;overflow:hidden}.studio-copy{padding:20px 22px;width:52%;position:relative;z-index:2}.magic-icon{color:#705bd4}.studio-copy h4{margin:7px 0 4px;font-size:14px}.studio-copy p{font-size:9px;line-height:1.7;color:#78837d;margin:0 0 11px;max-width:290px}.studio-copy .primary-btn{padding:8px 13px;font-size:10px}.mosaic{width:48%;position:relative;overflow:hidden}.tile{position:absolute;border:3px solid white;box-shadow:0 8px 20px #465c5030;display:grid;place-items:center;color:white;font-weight:700}.tile1{width:105px;height:125px;right:22px;top:21px;transform:rotate(5deg);background:linear-gradient(145deg,#bad4c7,#3b7159)}.tile2{width:82px;height:102px;right:108px;top:45px;transform:rotate(-8deg);background:linear-gradient(145deg,#edcfab,#98704c)}.tile3{width:76px;height:85px;right:170px;top:14px;transform:rotate(8deg);background:linear-gradient(145deg,#cbbcea,#5d4a9a);font-size:10px}.schedule-item{display:flex;align-items:center;padding:9px 0;border-top:1px solid #f0f2f0;gap:10px}.date-box{width:45px;border:1px solid #e6e9e7;border-radius:9px;text-align:center;padding:5px}.date-box strong,.date-box span{display:block}.date-box strong{font-size:14px}.date-box span{font-size:7px;color:#969d98}.schedule-line{display:flex;align-items:center;gap:9px;min-width:0;flex:1}.schedule-line i{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:10px}.instagram{background:#f6e9f2;color:#bb5485}.tiktok{background:#ebf2f3;color:#273d40}.x-icon{background:#edf0f0;color:#18201d}.schedule-line strong,.schedule-line span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.schedule-line strong{font-size:10px}.schedule-line span{font-size:8px;color:#9ba19d;margin-top:3px}.ready,.review-dot,.draft{font-size:8px;border-radius:7px;padding:4px 6px}.ready{background:#e8f5ef;color:#187d5c}.review-dot{background:#fff4df;color:#bd781d}.draft{background:#f0f1f0;color:#777e7a}.approval-strip{background:linear-gradient(100deg,#0c6f51,#0a5f47);color:white;border-radius:16px;padding:19px 22px;display:flex;align-items:center;gap:28px;box-shadow:0 12px 28px #0b674d26}.approval-copy{display:flex;align-items:center;gap:11px;min-width:220px}.approval-icon{width:38px;height:38px;background:#ffffff1c;border:1px solid #ffffff35;border-radius:11px;display:grid;place-items:center}.approval-copy h3{margin:0;font-size:14px}.approval-copy p{font-size:9px;color:#c0dbd0;margin:4px 0 0}.steps{display:flex;align-items:center;justify-content:center;flex:1}.step{display:flex;align-items:center;gap:7px;color:#a9cfc0}.step i{font-style:normal;width:25px;height:25px;border-radius:50%;border:1px solid #ffffff48;display:grid;place-items:center;font-size:9px}.step span,.step small{display:block;white-space:nowrap}.step span{font-size:9px}.step small{font-size:7px;color:#a9cfc0;margin-top:3px}.step.done,.step.current{color:white}.step.done i{background:#56b993;border-color:#56b993}.step.current i{background:white;color:var(--green);border-color:white}.steps>b{display:block;width:50px;height:1px;background:#ffffff39;margin:0 10px}.review-btn{border:0;background:white;color:var(--green);font-weight:700;font-size:10px;border-radius:9px;padding:10px 14px;white-space:nowrap}.toast{position:fixed;bottom:25px;left:25px;background:#17221d;color:white;padding:12px 18px;border-radius:10px;box-shadow:0 12px 30px #0003;transform:translateY(80px);opacity:0;transition:.3s;z-index:100;font-size:12px}.toast.show{transform:none;opacity:1}
.owner-link{color:var(--green);text-decoration:none;font-size:10px;font-weight:700;border-right:1px solid var(--line);padding-right:12px}.operations-grid,.service-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:15px;margin-top:15px}.campaign-head,.campaign-row{display:grid;grid-template-columns:1.2fr .8fr 1.2fr .8fr .8fr;gap:12px;align-items:center}.campaign-head{color:#9aa19d;font-size:9px;border-bottom:1px solid var(--line);padding:0 7px 8px}.campaign-row{padding:13px 7px;border-bottom:1px solid #f0f2f0;font-size:10px}.campaign-row span>b,.campaign-row span>small{display:block}.campaign-row span>small{color:#9ba19d;margin-top:3px}.safe-note{background:#eef7f3;color:#4e7565;border:1px solid #dfeee6;border-radius:9px;padding:9px 11px;margin-top:12px;font-size:9px}.channel-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.channel-grid>div{display:flex;align-items:center;gap:8px;border:1px solid #edf0ee;border-radius:10px;padding:10px}.channel-grid i{width:28px;height:28px;border-radius:8px;background:#f1f3f2;display:grid;place-items:center;font-style:normal}.channel-grid strong,.channel-grid small{display:block}.channel-grid strong{font-size:10px}.channel-grid small{font-size:8px;color:#99a09c}.channel-grid b{margin-right:auto;font-size:8px;color:#198261}.conversation{width:100%;display:flex;align-items:center;text-align:right;border:0;border-top:1px solid #f0f2f0;background:#fff;padding:10px 7px;gap:9px;font-family:inherit;cursor:pointer}.conversation.active{background:#f2f8f5;border-radius:10px}.conversation span:nth-child(2){min-width:0;flex:1}.conversation strong,.conversation small{display:block}.conversation strong{font-size:10px}.conversation small{font-size:8px;color:#8f9792;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conversation time{font-size:8px;color:#a1a7a3}.lavender{background:#d9d0f4}.coral{background:#efd0c3}.blue-avatar{background:#c9dfea}.analytics-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.analytics-kpis span,.analytics-kpis strong,.analytics-kpis small{display:block}.analytics-kpis span{font-size:8px;color:#8e9691}.analytics-kpis strong{font-size:17px;margin:3px 0}.analytics-kpis small{font-size:8px;color:#16815f}.chart-area{height:80px;margin-top:13px;background:repeating-linear-gradient(to bottom,#eef1ef 0,#eef1ef 1px,transparent 1px,transparent 25px)}.chart-area svg{width:100%;height:100%}.billing-strip{margin-top:15px;display:flex;align-items:center;gap:12px}.billing-strip>div:first-child{display:flex;align-items:center;gap:10px;min-width:210px}.billing-strip strong,.billing-strip small{display:block}.billing-strip small{font-size:8px;color:#969d99}.usage{flex:1}.usage>span{display:flex;justify-content:space-between;font-size:9px}.usage>div{height:5px;background:#edf0ee;border-radius:5px;margin-top:6px;overflow:hidden}.usage i{height:100%;display:block;background:#8068e4}.modal-backdrop{position:fixed;inset:0;background:#13211b99;z-index:200;display:none;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px)}.modal-backdrop.open{display:flex}.modal{width:min(440px,100%);background:white;border-radius:18px;padding:25px;position:relative}.modal-close{position:absolute;left:15px;top:13px;border:0;background:#f2f4f2;width:30px;height:30px;border-radius:8px}.modal-icon{width:40px;height:40px;border-radius:11px;background:#e8f5ef;color:var(--green);display:grid;place-items:center}.modal h2{margin:12px 0 4px}.modal>p{font-size:10px;color:#7e8782}.modal label{font-size:10px;font-weight:700;display:block;margin-top:11px}.modal input,.modal select{width:100%;height:40px;margin-top:5px;border:1px solid var(--line);border-radius:9px;padding:0 10px;font-family:inherit;background:#fafbfa}.form-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.confirm-row{display:flex!important;gap:7px;background:#fff8e9;padding:10px;border-radius:9px;line-height:1.5;color:#806329}.confirm-row input{width:15px;height:15px;margin:1px 0}.full{width:100%;margin-top:14px}.full:disabled{opacity:.45}.toast.show{transform:none;opacity:1}
.details-toggle{width:100%;margin-top:15px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:13px 16px;display:flex;align-items:center;text-align:right;color:var(--ink);font-family:inherit;cursor:pointer}.details-toggle span{display:block}.details-toggle b,.details-toggle small{display:block}.details-toggle b{font-size:11px}.details-toggle small{font-size:8px;color:var(--muted);margin-top:3px}.details-toggle i{margin-right:auto;font-style:normal;font-size:9px;color:var(--green);font-weight:700}.operations-grid,.service-grid,.billing-strip{display:none}.show-details .operations-grid,.show-details .service-grid{display:grid}.show-details .billing-strip{display:flex}.nav-list{overflow:auto;padding-left:3px}.nav-item{padding-top:8px;padding-bottom:8px}.nav-label{padding-top:8px}.upgrade-card{padding:12px}.upgrade-card p{display:none}@media(max-width:1150px){.metrics-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.bottom-grid,.operations-grid,.service-grid{grid-template-columns:1fr}.steps>b{width:25px}.approval-strip{flex-wrap:wrap}.steps{order:3;width:100%}}
@media(max-width:800px){.sidebar{transform:translateX(110%);transition:.3s;box-shadow:-10px 0 30px #0002}.sidebar.open{transform:none}.close-menu,.menu-btn{display:block}.main{width:100%;margin-right:0}.topbar{padding:0 16px}.search{width:220px}.search kbd{display:none}.content{padding:22px 16px}.welcome-row{align-items:flex-start}.agent-control{min-width:auto}.agent-control .agent-label{display:none}.metrics-grid{grid-template-columns:1fr 1fr}.project-row{grid-template-columns:42px 1fr auto}.project-status,.project-progress,.faces{display:none}.approval-strip{gap:16px}.approval-copy{min-width:0}.steps{overflow-x:auto;justify-content:flex-start;padding-bottom:3px}}
@media(max-width:560px){.search{display:none}.credits span:last-child{display:none}.primary-btn{padding:10px}.primary-btn>span+span{display:none}.welcome-row{display:block}.agent-control{margin-top:17px;width:100%}.agent-control .agent-label{display:block}.metrics-grid{grid-template-columns:1fr}.metric-card{min-height:140px}.panel{padding:15px}.studio-body{height:auto;min-height:190px}.studio-copy{width:65%;padding:18px 15px}.mosaic{width:35%}.tile1{right:0}.tile2{right:55px}.tile3{display:none}.schedule-item>span:last-child{display:none}.steps{width:calc(100vw - 64px)}.step span{display:none}.steps>b{width:44px}.review-btn{margin-right:auto}.welcome-row h1{font-size:23px}}