:root {
  --ink: #17212c;
  --muted: #71808f;
  --line: #e8e8ef;
  --paper: #ffffff;
  --canvas: #f5f6fa;
  --violet: #6f55e8;
  --violet-dark: #583ec9;
  --lavender: #eee9ff;
  --mint: #36b88b;
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, textarea { font: inherit; }
button { color: inherit; }

.app-shell { min-height: 100vh; display: flex; background: var(--canvas); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 5; width: 242px; padding: 30px 18px 20px; display: flex; flex-direction: column; background: #fbfbfd; border-right: 1px solid var(--line); }
.brand-lockup { min-height: 48px; padding: 0 4px; display: flex; align-items: center; }
.brand-lockup img { display: block; width: 100%; height: auto; }
.mobile-brand { display: none; }
.main-nav { margin-top: 46px; }
.eyebrow { margin: 0 0 10px; color: #9aa3ae; font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.main-nav .eyebrow { padding: 0 12px; }
.nav-item { width: 100%; height: 44px; margin: 3px 0; padding: 0 13px; display: flex; align-items: center; gap: 13px; border: 0; border-radius: 12px; color: #667381; background: transparent; font-size: 13px; font-weight: 640; cursor: pointer; text-align: left; }
.nav-item > span { width: 20px; font-size: 17px; text-align: center; }
.nav-item b { margin-left: auto; min-width: 20px; height: 20px; border-radius: 7px; display: grid; place-items: center; background: #eeeafc; color: var(--violet); font-size: 10px; }
.nav-item:hover { color: var(--ink); background: #f1f0f7; }
.nav-item.active { color: var(--violet-dark); background: #eeeafc; box-shadow: inset 3px 0 var(--violet); }
.sidebar-bottom { margin-top: auto; }
.usage-card { display: flex; align-items: center; gap: 11px; margin: 0 3px 14px; padding: 14px 12px; border: 1px solid var(--line); border-radius: 15px; background: white; }
.usage-orbit { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--violet) 72%, #eceaf3 0); position: relative; }
.usage-orbit::after { content: ""; position: absolute; inset: 4px; background: #fff; border-radius: 50%; }
.usage-orbit span { position: relative; z-index: 1; font-size: 8px; font-weight: 800; }
.usage-card strong, .profile-row strong { display: block; font-size: 11px; }
.usage-card small, .profile-row small { display: block; margin-top: 3px; color: #9099a3; font-size: 9px; }
.profile-row { width: 100%; padding: 10px 9px; display: flex; align-items: center; gap: 10px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.profile-row i { margin-left: auto; color: #9da5ae; font-style: normal; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: white; background: linear-gradient(135deg, #8a70ee, #5141bc); font-size: 10px; font-weight: 800; }

.workspace { width: calc(100% - 242px); margin-left: 242px; }
.topbar { height: 104px; padding: 24px 34px 18px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.8); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.date-line { margin: 0 0 5px; color: #8d98a4; font-size: 10px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.demo-badge { margin-left: 7px; padding: 3px 6px; border-radius: 6px; color: #725eca; background: #efecfb; font-size: 7px; letter-spacing: .07em; }
.topbar h1 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.topbar h1 span { color: #f1a84b; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.icon-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; background: white; cursor: pointer; font-size: 20px; }
.notification { position: relative; }
.notification i { position: absolute; top: 8px; right: 8px; width: 5px; height: 5px; background: #ef6f6f; border-radius: 50%; }
.primary-button { height: 42px; padding: 0 17px; display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 12px; color: white; background: var(--violet); box-shadow: 0 8px 18px rgba(94, 68, 201, .22); font-size: 12px; font-weight: 720; cursor: pointer; }
.primary-button:hover { background: var(--violet-dark); transform: translateY(-1px); }
.content-wrap { width: min(1280px, 100%); margin: 0 auto; padding: 26px 34px 52px; }

.welcome-strip { min-height: 142px; padding: 25px 30px; display: flex; align-items: center; gap: 26px; overflow: hidden; position: relative; border-radius: 22px; color: white; background: linear-gradient(112deg, #222637 0%, #403676 62%, #6552b8 100%); box-shadow: 0 20px 50px rgba(55, 48, 97, .13); }
.welcome-strip::before { content: ""; position: absolute; width: 260px; height: 260px; right: 132px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.welcome-strip > div:first-child { position: relative; z-index: 1; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; color: #d6cef9; font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: #6de0b2; box-shadow: 0 0 0 4px rgba(109,224,178,.12); }
.welcome-strip h2 { margin: 10px 0 6px; font-size: 24px; letter-spacing: -.035em; }
.welcome-strip p { margin: 0; color: #cbc8dc; font-size: 12px; }
.welcome-strip p strong { color: #86e0bb; }
.welcome-strip > button { position: relative; z-index: 1; margin-left: auto; padding: 11px 15px; flex: none; border: 1px solid rgba(255,255,255,.22); border-radius: 11px; color: white; background: rgba(255,255,255,.09); font-size: 10px; font-weight: 700; cursor: pointer; }
.welcome-strip > button span { margin-left: 16px; }
.mini-orbit { position: relative; margin-left: auto; width: 100px; height: 100px; flex: none; }
.mini-orbit i { position: absolute; inset: 17px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.mini-orbit i:nth-child(2) { inset: 5px 28px; transform: rotate(58deg); }
.mini-orbit i:nth-child(3) { inset: 5px 28px; transform: rotate(-58deg); }
.mini-orbit span { position: absolute; inset: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.13); }

.metrics-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.metric-card { padding: 17px 18px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); box-shadow: 0 8px 26px rgba(36, 42, 55, .035); }
.metric-heading { margin-top: 14px; display: flex; align-items: center; }
.metric-heading p { margin: 0; color: #73808c; font-size: 10px; font-weight: 650; }
.metric-heading button { margin-left: auto; padding: 0; border: 0; color: #a8afb7; background: transparent; font-size: 10px; }
.metric-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; font-size: 14px; }
.metric-0 { color: #6b56d7; background: #eeeafd; }.metric-1 { color: #e48d54; background: #fff0e7; }.metric-2 { color: #2c9b76; background: #e3f7f0; }.metric-3 { color: #3486c0; background: #e4f2fb; }
.metric-value { margin-top: 4px; display: flex; align-items: baseline; gap: 8px; }
.metric-value strong { font-size: 24px; letter-spacing: -.04em; }
.metric-value span, .chart-summary span { padding: 3px 6px; border-radius: 6px; color: #248264; background: #e6f7f0; font-size: 8px; font-weight: 800; }
.metric-card > small { display: block; margin-top: 4px; color: #a2a8af; font-size: 9px; }

.dashboard-grid { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .9fr); gap: 14px; }
.panel { border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 8px 28px rgba(36, 42, 55, .035); }
.performance-panel, .schedule-panel, .channel-panel { padding: 21px 22px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.panel-heading h3 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.panel-heading .eyebrow { margin-bottom: 5px; }
.period-tabs { padding: 3px; display: flex; border-radius: 9px; background: #f4f3f7; }
.period-tabs button { padding: 5px 8px; border: 0; border-radius: 7px; color: #9a9fa7; background: transparent; font-size: 8px; font-weight: 800; cursor: pointer; }
.period-tabs button.active { color: #5e4ac8; background: white; box-shadow: 0 2px 7px rgba(41,43,50,.08); }
.chart-summary { margin-top: 22px; display: flex; align-items: baseline; gap: 8px; }
.chart-summary strong { font-size: 22px; letter-spacing: -.04em; }.chart-summary small { color: #a2a8af; font-size: 9px; }
.chart { height: 173px; margin-top: 5px; position: relative; }
.chart-lines { position: absolute; inset: 7px 0 23px; display: flex; flex-direction: column; justify-content: space-between; }
.chart-lines i { border-top: 1px dashed #ececf1; }
.chart svg { position: relative; width: 100%; height: 145px; overflow: visible; }
.chart .area { fill: url(#chartFill); }.chart .line { fill: none; stroke: #755be2; stroke-width: 2.5; stroke-linecap: round; }.chart circle { fill: white; stroke: #755be2; stroke-width: 3; }
.chart-labels { display: flex; justify-content: space-between; color: #a4abb3; font-size: 8px; }
.channel-legend { display: flex; gap: 18px; padding-top: 12px; border-top: 1px solid #f0f0f3; }
.channel-legend span { display: flex; align-items: center; gap: 5px; color: #7f8993; font-size: 8px; }.channel-legend i { width: 6px; height: 6px; border-radius: 50%; }.legend-0{background:#745bdc}.legend-1{background:#59a6dc}.legend-2{background:#e68b64}.legend-3{background:#4bb28f}
.text-button { padding: 0; border: 0; color: var(--violet); background: transparent; font-size: 9px; font-weight: 750; cursor: pointer; }
.schedule-list { margin: 22px 0 18px; }
.schedule-row { min-height: 62px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid #f0f0f3; }
.schedule-row time { width: 35px; color: #76828e; font-size: 9px; font-weight: 750; }.status-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 4px currentColor; opacity: .8; }.status-dot.mint { color: rgba(61,187,143,.18); background:#39b588}.status-dot.amber{color:rgba(236,166,72,.18);background:#eba244}.status-dot.lavender{color:rgba(119,88,218,.15);background:#7b62df}
.schedule-copy { min-width: 0; flex: 1; }.schedule-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 10px; }.schedule-copy span { display:block; margin-top:4px; color:#99a1aa; font-size:8px; }
.mini-channels { display: flex; }.mini-channels span { width: 22px; height: 22px; margin-left: -4px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; color: #6650cb; background: #eeebfb; font-size: 7px; font-weight: 850; }
.full-button { width: 100%; height: 38px; border: 1px dashed #cbc4ec; border-radius: 11px; color: #6752d0; background: #faf9ff; font-size: 9px; font-weight: 750; cursor: pointer; }

.channel-panel { margin-top: 14px; }
.channel-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.channel-row { padding: 11px; display: flex; align-items: center; gap: 10px; border: 1px solid #efeff3; border-radius: 13px; }
.channel-row > div:nth-child(2) { min-width: 0; }.channel-row strong, .channel-row small { display: block; }.channel-row strong { font-size: 10px; }.channel-row small { margin-top: 3px; color: #99a1a9; font-size: 8px; }
.channel-mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 10px; color: white; font-size: 9px; font-weight: 850; }.channel-mark.small { width: 24px; height: 24px; border-radius: 8px; font-size: 7px; }.coral{background:linear-gradient(135deg,#ee8a63,#b44f8a)}.blue{background:#4078db}.sky{background:#2e8bbd}.ink{background:#20252b}.slate{background:#111}.red{background:#e95454}
.health { margin-left: auto; padding: 4px 6px; display:flex; align-items:center; gap:4px; border-radius: 7px; color:#2a8d6d; background:#eaf8f3; font-size:7px; font-weight:800; }.health i{width:5px;height:5px;border-radius:50%;background:#43b98e}.health.attention{color:#b2792f;background:#fff4e2}.health.attention i{background:#e8a344}

.feature-view { animation: rise .3s ease; }
.feature-header { min-height: 118px; padding: 4px 2px 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.feature-header h2 { margin: 0; font-size: 28px; letter-spacing: -.045em; }
.feature-header p:not(.eyebrow) { margin: 8px 0 0; color: #788592; font-size: 12px; }
.feature-actions { display: flex; align-items: center; gap: 9px; }
.feature-actions .secondary-button { height: 42px; }
.planner-tools { height: 57px; padding: 0 17px; display: flex; align-items: center; gap: 24px; border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0; background: white; }
.team-filter { display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 750; }.team-filter i { color: #a3a8af; font-style: normal; }.avatar.tiny { width: 26px; height: 26px; border-radius: 8px; font-size: 7px; }
.legend-row { display: flex; gap: 14px; }.legend-row span { display: flex; align-items: center; gap: 6px; color: #77838e; font-size: 8px; }.legend-row i { width: 7px; height: 7px; border-radius: 50%; }.legend-row i.purple{background:#7962df}.legend-row i.mint{background:#4cbb93}.legend-row i.coral{background:#e9856d}
.week-nav { margin-left: auto; display: flex; align-items: center; gap: 11px; }.week-nav strong { font-size: 9px; }.week-nav button { width: 26px; height: 26px; border: 1px solid #e8e7ec; border-radius: 8px; background: white; cursor: pointer; }
.week-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border: 1px solid var(--line); border-radius: 0 0 18px 18px; overflow: hidden; background: white; }
.day-column { min-height: 455px; border-right: 1px solid #eeeeF2; }.day-column:last-child { border-right: 0; }.day-column.today { background: #fbfaff; box-shadow: inset 0 3px var(--violet); }
.day-column > header { height: 64px; display: flex; align-items: center; justify-content: center; gap: 7px; border-bottom: 1px solid #eeeeF2; }.day-column header span { color: #9099a2; font-size: 9px; font-weight: 700; text-transform: uppercase; }.day-column header strong { font-size: 15px; }.day-column.today header strong { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--violet); }
.day-slots { padding: 10px; }.calendar-post { margin-bottom: 9px; padding: 11px; border-left: 3px solid; border-radius: 10px; background: #f7f6fd; }.calendar-post.purple{border-color:#7860df;background:#f4f1ff}.calendar-post.mint{border-color:#46b88f;background:#edfaf5}.calendar-post.coral{border-color:#e58269;background:#fff3ef}.calendar-post.blue{border-color:#549fd3;background:#eef8fe}.calendar-post>div { display: flex; align-items: center; }.calendar-post time { color: #8b949d; font-size: 7px; }.calendar-post>div span { margin-left: auto; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px; color: white; background: #3f4751; font-size: 6px; font-weight: 850; }.calendar-post strong { display: block; margin-top: 8px; font-size: 9px; }.calendar-post small { display: block; margin-top: 4px; color: #9098a1; font-size: 7px; }.day-slots>button { width:100%; height:34px; border:1px dashed #d8d5e2; border-radius:9px; color:#8777cc; background:transparent; font-size:8px; cursor:pointer; opacity:0; }.day-column:hover .day-slots>button,.day-slots>button:focus{opacity:1}
.planner-footer { padding: 15px 3px; display: flex; align-items: center; gap: 20px; color: #7f8994; font-size: 8px; }.planner-footer span { display:flex;align-items:center;gap:6px}.planner-footer i{width:6px;height:6px;border-radius:50%;background:#5ac096}.planner-footer span:nth-child(2) i{background:#e3a24f}.planner-footer button{margin-left:auto;border:0;color:var(--violet);background:transparent;font-size:8px;font-weight:750;cursor:pointer}

.analytics-metrics { margin-top: 0; }.analytics-grid { margin-top: 14px; display: grid; grid-template-columns: minmax(0,1.7fr) minmax(265px,.8fr); gap: 14px; }.channel-performance,.insight-card{padding:22px}.sample-pill { padding: 5px 8px; border-radius: 7px; color: #7a6bc1; background:#f1effb; font-size:7px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.performance-table{margin-top:20px}.table-head,.table-row{display:grid;grid-template-columns:1.5fr repeat(3,.8fr);align-items:center;column-gap:12px}.table-head{padding:0 10px 9px;color:#9ba2aa;font-size:7px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.table-row{min-height:48px;padding:0 10px;border-top:1px solid #f0f0f3;font-size:9px}.table-row>span:first-child{display:flex;align-items:center;gap:8px;font-weight:700}.table-row strong{font-size:9px}.table-row .growth{width:max-content;padding:4px 6px;border-radius:6px;color:#2b896b;background:#eaf8f3;font-size:7px;font-weight:800}
.insight-card{position:relative;overflow:hidden;color:white;background:linear-gradient(145deg,#282b3b,#58459e)}.insight-card::after{content:"";position:absolute;width:190px;height:190px;right:-80px;bottom:-80px;border:1px solid rgba(255,255,255,.12);border-radius:50%}.insight-card .eyebrow{color:#bbb3e6}.insight-card h3{max-width:220px;margin:8px 0 18px;font-size:19px;line-height:1.25;letter-spacing:-.035em}.insight-card>p:not(.eyebrow){color:#c7c3d7;font-size:10px;line-height:1.65}.insight-card>button{margin-top:15px;padding:0;border:0;color:#aee9cf;background:transparent;font-size:9px;font-weight:750;cursor:pointer}.insight-card>button span{margin-left:10px}.insight-visual{height:100px;position:relative;display:flex;align-items:flex-end;gap:9px}.insight-visual span{position:absolute;left:50%;top:5px;transform:translateX(-50%);font-size:25px;font-weight:800}.insight-visual i{width:26%;border-radius:8px 8px 2px 2px;background:linear-gradient(#9b89e9,#6653bd)}.insight-visual i:nth-child(2){height:42%}.insight-visual i:nth-child(3){height:62%}.insight-visual i:nth-child(4){height:86%;background:linear-gradient(#67d5ad,#37a77e)}

.connections-header { padding-right: 4px; }.activation-badge { padding: 9px 12px; display:flex;align-items:center;gap:7px;border-radius:11px;color:#a16f2b;background:#fff3df;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.activation-badge i{width:7px;height:7px;border-radius:50%;background:#e4a142;box-shadow:0 0 0 4px rgba(228,161,66,.14)}
.activation-note { padding: 17px 18px; display:flex;align-items:center;gap:13px;border:1px solid #dcd6f4;border-radius:16px;background:#faf9ff}.activation-note>span{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:10px;color:#6752cb;background:#e9e4ff;font-family:Georgia,serif;font-style:italic;font-weight:800}.activation-note strong{font-size:10px}.activation-note p{margin:4px 0 0;color:#7c8490;font-size:9px;line-height:1.5}.activation-note button{margin-left:auto;flex:none;padding:8px 11px;border:1px solid #cfc8ed;border-radius:9px;color:#6653c4;background:white;font-size:8px;font-weight:750;cursor:pointer}.connector-summary{margin:14px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.connector-summary>div{padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:white}.connector-summary strong{font-size:19px}.connector-summary span{display:block;margin-top:3px;color:#929aa3;font-size:8px}
.connector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.connector-card{padding:16px;border:1px solid var(--line);border-radius:15px;background:white;box-shadow:0 7px 22px rgba(35,40,52,.025)}.connector-top{display:flex;align-items:center}.ready-dot{margin-left:auto;display:flex;align-items:center;gap:5px;color:#6d7781;font-size:7px;font-weight:750}.ready-dot i{width:6px;height:6px;border-radius:50%;background:#d2a34e}.connector-card h3{margin:16px 0 5px;font-size:12px}.connector-card p{min-height:47px;margin:0;color:#89929c;font-size:8px;line-height:1.55}.connector-card>button{width:100%;margin-top:13px;padding:9px 0;border:1px solid #e5e2ef;border-radius:9px;color:#6c56ce;background:#faf9ff;font-size:8px;font-weight:750;cursor:pointer}.connector-card>button span{margin-left:10px}.connector-card>button:hover{border-color:#aa9ae3;background:#f3f0ff}.secure-note{margin-top:14px;padding:14px 17px;display:flex;gap:11px;border-radius:14px;color:#bac2ca;background:#2c303b}.secure-note>span{color:#8f7ce1;font-size:20px}.secure-note strong{color:white;font-size:9px}.secure-note p{margin:4px 0 0;font-size:8px;line-height:1.5}

.modal-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgba(18, 20, 30, .48); backdrop-filter: blur(5px); animation: fade .18s ease; }
.composer { width: min(670px, 100%); max-height: 92vh; overflow: auto; padding: 27px; border-radius: 22px; background: white; box-shadow: 0 30px 90px rgba(21,22,32,.28); animation: lift .22s ease; }
.composer-head { display:flex; align-items:flex-start; justify-content:space-between; }.composer-head h2{margin:0;font-size:22px;letter-spacing:-.035em}.composer-head>button{width:34px;height:34px;border:0;border-radius:10px;background:#f3f2f7;color:#777;font-size:23px;cursor:pointer}.field-label{display:block;margin:23px 0 9px;color:#697580;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.channel-pickers{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.channel-pickers>button{height:43px;padding:0 9px;display:flex;align-items:center;gap:8px;border:1px solid #e8e8ee;border-radius:11px;background:white;font-size:9px;font-weight:700;cursor:pointer}.channel-pickers>button>span:last-child{margin-left:auto;color:#aaa}.channel-pickers>button.selected{border-color:#a896ec;background:#f8f6ff}.channel-pickers>button.selected>span:last-child{color:var(--violet)}
.copy-box{position:relative;border:1px solid #dfdfe7;border-radius:13px;overflow:hidden}.copy-box textarea{width:100%;min-height:125px;padding:14px 15px 30px;border:0;outline:0;resize:vertical;color:#313945;background:white;font-size:12px;line-height:1.65}.copy-box:focus-within{border-color:#9e8be7;box-shadow:0 0 0 3px #f0edff}.copy-box>span{position:absolute;right:12px;bottom:8px;color:#a2a8b0;font-size:8px}
.asset-drop{margin-top:11px;padding:12px;display:flex;align-items:center;gap:11px;border:1px dashed #d5d2df;border-radius:13px;background:#fafafd}.asset-drop>span{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:#745ed7;background:#ece8fb}.asset-drop strong,.asset-drop small{display:block}.asset-drop strong{font-size:9px}.asset-drop small{margin-top:3px;color:#9ca3ab;font-size:8px}.asset-drop button{margin-left:auto;padding:7px 10px;border:1px solid #e3e1e9;border-radius:8px;background:white;font-size:8px;font-weight:750;cursor:pointer}
.composer-options{margin-top:12px;display:flex;gap:7px}.composer-options button{padding:8px 10px;border:1px solid #e7e5ee;border-radius:9px;color:#6955c7;background:white;font-size:8px;font-weight:700;cursor:pointer}.composer-footer{margin:25px -27px -27px;padding:15px 27px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eeeef2;background:#fbfbfc}.secondary-button{padding:0 16px;border:1px solid #e3e1e8;border-radius:11px;background:white;font-size:10px;font-weight:700;cursor:pointer}
.toast{position:fixed;right:24px;bottom:24px;z-index:40;padding:12px 16px;display:flex;align-items:center;gap:9px;border-radius:12px;color:white;background:#222733;box-shadow:0 14px 40px rgba(20,22,30,.23);font-size:10px;font-weight:700}.toast span{width:19px;height:19px;display:grid;place-items:center;border-radius:50%;color:#17372c;background:#65d2aa}
.integration-modal{width:min(560px,100%);max-height:92vh;overflow:auto;padding:27px;border-radius:22px;background:white;box-shadow:0 30px 90px rgba(21,22,32,.28);animation:lift .22s ease}.integration-modal h2{margin:0;font-size:22px;letter-spacing:-.035em}.integration-intro{margin:15px 0 20px;color:#7b8590;font-size:10px;line-height:1.6}.setup-steps{margin:0;padding:0;list-style:none}.setup-steps li{padding:12px 0;display:flex;gap:12px;border-top:1px solid #eeeeF2}.setup-steps li>span{width:27px;height:27px;flex:none;display:grid;place-items:center;border-radius:9px;color:#6b55cf;background:#efecff;font-size:9px;font-weight:800}.setup-steps strong{font-size:10px}.setup-steps p{margin:4px 0 0;color:#9299a2;font-size:8px;line-height:1.45}.permission-box{margin-top:13px;padding:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-radius:12px;background:#f7f7fa}.permission-box strong{margin-right:5px;font-size:8px;text-transform:uppercase;letter-spacing:.07em}.permission-box span{padding:5px 7px;border-radius:7px;color:#6a59be;background:#ebe8f8;font-size:7px;font-weight:700}.integration-footer{margin:22px -27px -27px;padding:15px 27px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #eeeef2;background:#fbfbfc}.integration-footer .secondary-button{height:42px}
@keyframes fade{from{opacity:0}}@keyframes lift{from{opacity:0;transform:translateY(12px) scale(.98)}}@keyframes rise{from{opacity:0;transform:translateY(5px)}}

@media (max-width: 1060px){.metrics-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}.channel-grid{grid-template-columns:repeat(2,1fr)}.mini-orbit{display:none}.welcome-strip>button{margin-left:auto}.connector-grid{grid-template-columns:repeat(3,1fr)}.analytics-grid{grid-template-columns:1fr}.day-column{min-height:400px}}
@media (max-width: 760px){.app-shell{display:block}.sidebar{position:fixed;inset:auto 0 0;width:auto;height:66px;padding:8px 12px;display:block;border-right:0;border-top:1px solid var(--line)}.brand-lockup,.main-nav .eyebrow,.sidebar-bottom{display:none}.main-nav{margin:0;display:flex;justify-content:space-between}.nav-item{width:auto;height:50px;margin:0;padding:0 12px;flex-direction:column;justify-content:center;gap:2px;font-size:8px}.nav-item>span{font-size:16px}.nav-item b{display:none}.nav-item.active{box-shadow:inset 0 -3px var(--violet)}.workspace{width:100%;margin:0;padding-bottom:70px}.topbar{height:94px;padding:12px 18px}.mobile-brand{display:block;width:112px;height:auto;margin:0 0 4px}.date-line{display:none}.topbar h1{font-size:17px}.top-actions .icon-button{display:none}.primary-button{padding:0 13px}.content-wrap{padding:18px}.welcome-strip{padding:22px;min-height:165px}.welcome-strip h2{font-size:21px}.welcome-strip p{max-width:330px;line-height:1.6}.welcome-strip>button{position:absolute;right:18px;bottom:16px}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metric-card{padding:14px}.metric-value strong{font-size:20px}.dashboard-grid{grid-template-columns:1fr}.performance-panel,.schedule-panel,.channel-panel{padding:18px}.channel-grid{grid-template-columns:1fr}.channel-pickers{grid-template-columns:repeat(2,1fr)}.composer{padding:21px}.composer-footer{margin:24px -21px -21px;padding:14px 21px}.feature-header{align-items:flex-start;flex-direction:column}.feature-header h2{font-size:23px}.planner-tools{gap:10px;overflow:auto}.legend-row{display:none}.week-grid{overflow:auto;grid-template-columns:repeat(5,180px)}.connector-grid{grid-template-columns:repeat(2,1fr)}.activation-note{align-items:flex-start}.activation-note button{display:none}.connections-header .activation-badge{align-self:flex-start}.performance-table{overflow:auto}.table-head,.table-row{min-width:520px}.integration-modal{padding:21px}.integration-footer{margin:21px -21px -21px;padding:14px 21px}}
@media (max-width: 430px){.topbar .primary-button{width:42px;padding:0;justify-content:center;font-size:0}.topbar .primary-button span{font-size:18px}.metrics-grid{gap:8px}.metric-heading button,.metric-card>small{display:none}.chart-summary small{display:none}.channel-legend{gap:10px;flex-wrap:wrap}.composer-options{flex-direction:column}.composer-footer .primary-button{flex:1}.sidebar .nav-item{padding:0 9px}.connector-grid{grid-template-columns:1fr}.connector-summary>div{padding:12px 10px}.feature-actions{width:100%}.feature-actions .primary-button{flex:1}.activation-badge{font-size:7px}.integration-footer .primary-button{flex:1}}

@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Laravel/Blade interaction layer */
.view-section[hidden], .modal-backdrop[hidden] { display: none !important; }
.field-input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #dfdfe7; border-radius: 11px; color: var(--ink); background: #fff; font-size: 11px; outline: 0; }
.field-input:focus { border-color: #9e8be7; box-shadow: 0 0 0 3px #f0edff; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.channel-pickers label { min-height: 43px; padding: 7px 9px; display: flex; align-items: center; gap: 8px; border: 1px solid #e8e8ee; border-radius: 11px; background: #fff; font-size: 9px; font-weight: 700; cursor: pointer; }
.channel-pickers label:has(input:checked) { border-color: #a896ec; background: #f8f6ff; }
.channel-pickers input { accent-color: var(--violet); }
.form-errors { margin: 0 0 16px; padding: 12px 16px 12px 30px; border: 1px solid #efc2c2; border-radius: 12px; color: #9e3838; background: #fff2f2; font-size: 10px; line-height: 1.55; }
.empty-state { padding: 28px 16px; color: #89939d; text-align: center; font-size: 10px; }
.connection-form { margin-top: 13px; }
.connection-form button { width: 100%; padding: 9px 0; border: 1px solid #e5e2ef; border-radius: 9px; color: #6c56ce; background: #faf9ff; font-size: 8px; font-weight: 750; cursor: pointer; }
.connection-form button:hover { border-color: #aa9ae3; background: #f3f0ff; }
.planner-status { padding: 14px 3px; color: #7f8994; font-size: 9px; }
.brand-lockup img { max-height: 48px; object-fit: contain; }
.mobile-brand { object-fit: contain; }
.profile-row .logout-button { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 8px; color: #7564c4; background: #f0edfb; cursor: pointer; }
.login-page { min-height: 100vh; padding: 24px; display: grid; place-items: center; background: radial-gradient(circle at 75% 18%, rgba(70, 66, 165, .22), transparent 34%), linear-gradient(145deg, #10182b, #272253 58%, #15436b); }
.login-card { width: min(430px, 100%); padding: 34px; border-radius: 24px; background: rgba(255, 255, 255, .98); box-shadow: 0 32px 90px rgba(4, 9, 24, .38); }
.login-logo { display: block; width: min(280px, 100%); height: auto; margin: 0 auto 26px; }
.login-card h1 { margin: 0; font-size: 26px; letter-spacing: -.04em; }
.login-card > p { margin: 9px 0 24px; color: #788592; font-size: 11px; line-height: 1.6; }
.login-card .field-label { margin-top: 16px; }
.login-options { margin: 14px 0 20px; display: flex; align-items: center; gap: 7px; color: #76828e; font-size: 9px; }
.login-options input { accent-color: var(--violet); }
.login-card .primary-button { width: 100%; justify-content: center; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }