@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root {
  --ink: #19172a;
  --muted: #77738b;
  --line: #ebe9f2;
  --surface: #ffffff;
  --canvas: #f7f7fb;
  --violet: #6c4cf5;
  --violet-dark: #5735df;
  --violet-soft: #eeeaff;
  --orange: #ff7a59;
  --orange-soft: #fff0eb;
  --green: #1eae76;
  --green-soft: #e9f8f2;
  --blue: #3679ef;
  --blue-soft: #eaf2ff;
  --shadow: 0 18px 50px rgba(38, 31, 78, 0.08);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, select { cursor: pointer; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.svg-sprite #i-grid path { fill: currentColor; stroke: none; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, strong { font-family: 'Manrope', sans-serif; }
.is-hidden { display: none !important; }
.muted { color: var(--muted); }

.brand { display: flex; align-items: center; gap: 10px; font-family: 'Manrope', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -1px; }
.brand-mark { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #7d5cf9, #5937dd); box-shadow: 0 7px 16px rgba(108, 76, 245, .28); }
.brand-dot { color: var(--orange); }
.brand--light { color: #fff; }
.brand--light .brand-mark { color: #6c4cf5; background: #fff; box-shadow: none; }
.official-logo { position: relative; flex: 0 0 auto; display: inline-block; width: 180px; height: 46px; overflow: hidden; }
.official-logo img { position: absolute; width: 166.667%; max-width: none; height: auto; left: 0; top: 0; transform: translate(-19.9%, -43.2%); }
.official-logo--on-dark { width: 230px; height: 58px; }
.official-logo--on-dark img { width: 150%; transform: translate(-19.9%, -42.4%); filter: drop-shadow(0 7px 13px rgba(25,15,77,.18)); }
.official-logo--sidebar { width: 176px; height: 45px; }
.official-logo--header { width: 156px; height: 40px; }
.official-logo--invoice { width: 108px; height: 28px; margin-bottom: 25px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--violet); font-size: 11px; font-weight: 800; letter-spacing: 1.3px; }
.eyebrow > span { width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.eyebrow--light { color: #d9d0ff; }

/* Login */
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(440px, 1.05fr) minmax(460px, .95fr); background: #fff; }
.login-story { position: relative; min-height: 100vh; padding: 42px 6vw; color: #fff; overflow: hidden; background: radial-gradient(circle at 12% 15%, rgba(255,255,255,.14), transparent 22%), radial-gradient(circle at 80% 72%, rgba(255,122,89,.35), transparent 30%), linear-gradient(145deg, #332273, #6240de 55%, #7357ed); }
.login-story::before { content: ''; position: absolute; width: 430px; height: 430px; left: -220px; bottom: -170px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.02); }
.login-copy { position: relative; z-index: 1; margin-top: 14vh; max-width: 570px; }
.login-copy h1 { margin: 22px 0 20px; font-size: clamp(42px, 4.2vw, 68px); line-height: 1.04; letter-spacing: -3px; }
.login-copy h1 em { color: #ffad94; font-style: normal; }
.login-copy > p { max-width: 520px; color: #ddd6fb; font-size: 19px; line-height: 1.65; }
.feature-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 32px; color: #f6f3ff; font-size: 14px; }
.feature-row span { display: inline-flex; align-items: center; gap: 7px; }
.feature-row svg { width: 16px; height: 16px; padding: 2px; border-radius: 50%; color: #39247e; background: #b7f1d8; }
.login-preview { position: absolute; z-index: 2; width: min(540px, 70vw); height: 310px; right: -65px; bottom: -70px; border: 1px solid rgba(255,255,255,.18); border-radius: 19px; background: rgba(255,255,255,.96); box-shadow: 0 32px 70px rgba(24, 14, 70, .35); transform: rotate(-3deg); }
.preview-top { display: flex; gap: 5px; padding: 13px 15px; border-bottom: 1px solid #efedf5; }
.preview-top span { width: 7px; height: 7px; border-radius: 50%; background: #dedbe9; }
.preview-body { display: grid; grid-template-columns: 90px 1fr; height: calc(100% - 34px); }
.preview-sidebar { background: #f1effb; border-radius: 0 0 0 19px; }
.preview-content { padding: 28px; }
.preview-heading { width: 42%; height: 12px; border-radius: 5px; background: #d9d5e9; }
.preview-cards { display: flex; gap: 12px; margin: 22px 0; }
.preview-cards i { width: 30%; height: 57px; border-radius: 10px; background: #f0edff; }
.preview-cards i:nth-child(2) { background: #fff0e8; }
.preview-cards i:nth-child(3) { background: #e9f7f2; }
.preview-chart { height: 90px; display: flex; align-items: end; gap: 18px; padding: 0 20px; border-bottom: 1px solid #e7e4ef; }
.preview-chart b { flex: 1; border-radius: 5px 5px 0 0; background: #7b5cf2; }
.preview-chart b:nth-child(1) { height: 35%; }.preview-chart b:nth-child(2) { height: 62%; }.preview-chart b:nth-child(3) { height: 46%; }.preview-chart b:nth-child(4) { height: 78%; }.preview-chart b:nth-child(5) { height: 58%; }.preview-chart b:nth-child(6) { height: 92%; background: #ff8b6f; }
.login-panel { display: grid; place-items: center; padding: 40px; background: #fbfbfd; }
.login-card { width: min(440px, 100%); }
.mobile-brand { display: none; margin-bottom: 45px; }
.login-card h2 { margin: 13px 0 8px; font-size: 35px; letter-spacing: -1.2px; }
.login-card > .muted { margin-bottom: 32px; }
.form-stack { display: grid; gap: 20px; }
label { display: grid; gap: 8px; color: #3e3a52; font-size: 13px; font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid #dfdce8; border-radius: 11px; outline: none; color: var(--ink); background: #fff; transition: border-color .2s, box-shadow .2s; }
input, select { height: 48px; padding: 0 14px; }
textarea { padding: 13px 14px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(108,76,245,.11); }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 50px; }
.password-field button { position: absolute; right: 5px; top: 5px; width: 38px; height: 38px; border: 0; color: var(--muted); background: transparent; }
.form-row { display: flex; align-items: center; gap: 12px; }
.form-row--between { justify-content: space-between; }
.check-label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.check-label input { width: 16px; height: 16px; accent-color: var(--violet); }
.text-button { display: inline-flex; align-items: center; gap: 6px; border: 0; color: var(--violet); background: none; font-size: 13px; font-weight: 700; }
.text-button svg { width: 15px; height: 15px; }
.button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 17px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 700; transition: transform .15s, background .2s, box-shadow .2s; }
.button:hover { transform: translateY(-1px); }
.button svg { width: 17px; height: 17px; }
.button--primary { color: #fff; background: linear-gradient(135deg, #7455f5, #5e3ce2); box-shadow: 0 8px 18px rgba(108,76,245,.2); }
.button--primary:hover { box-shadow: 0 10px 24px rgba(108,76,245,.3); }
.button--soft { color: var(--violet); background: var(--violet-soft); }
.button--ghost { border-color: var(--line); color: #4f4a63; background: #fff; }
.button--wide { width: 100%; }
.form-stack .button--primary { height: 50px; margin-top: 4px; }
.demo-access { margin-top: 32px; padding-top: 25px; border-top: 1px solid var(--line); }
.demo-access > span { display: block; margin-bottom: 12px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.demo-access > div { display: grid; grid-template-columns: 1fr; gap: 8px; }
.demo-button { display: flex; align-items: center; gap: 10px; padding: 11px; text-align: left; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.demo-button:hover { border-color: #cfc7ff; background: #faf9ff; }
.demo-button > b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--violet); background: var(--violet-soft); font-size: 11px; }
.demo-button:nth-child(2) > b { color: #cf593c; background: var(--orange-soft); }
.demo-button span { display: grid; gap: 2px; }
.demo-button strong { font-size: 12px; }
.demo-button small { color: var(--muted); font-size: 10px; }
.login-legal { display: block; margin-top: 23px; color: #aaa6b5; text-align: center; font-size: 10px; }

/* Admin shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 28px 22px 18px; border-right: 1px solid var(--line); background: #fff; }
.sidebar .brand, .sidebar > .official-logo { margin: 0 8px 43px; }
.sidebar-label { margin: 0 12px 11px; color: #aaa6b8; font-size: 9px; font-weight: 800; letter-spacing: 1.1px; }
.main-nav { display: grid; gap: 5px; }
.nav-item { position: relative; width: 100%; height: 47px; display: flex; align-items: center; gap: 12px; padding: 0 13px; border: 0; border-radius: 10px; color: #777287; background: transparent; font-size: 14px; font-weight: 600; text-align: left; }
.nav-item svg { width: 19px; height: 19px; }
.nav-item b { margin-left: auto; padding: 2px 7px; border-radius: 9px; color: #fff; background: var(--orange); font-size: 10px; }
.nav-item .nav-count--violet { background: var(--violet); }
.nav-item:hover { color: var(--ink); background: #f8f7fc; }
.nav-item.is-active { color: var(--violet); background: var(--violet-soft); }
.nav-item.is-active::before { content: ''; position: absolute; left: -22px; width: 3px; height: 25px; border-radius: 0 3px 3px 0; background: var(--violet); }
.sidebar-help { margin-top: auto; display: grid; justify-items: center; padding: 18px 13px; border-radius: 14px; background: linear-gradient(145deg, #f3f0ff, #fbfaff); text-align: center; }
.sidebar-help > span { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 9px; border-radius: 50%; color: #fff; background: var(--violet); font-family: 'Manrope'; font-weight: 800; }
.sidebar-help strong { font-size: 12px; }.sidebar-help small { margin: 3px 0 11px; color: var(--muted); font-size: 10px; }
.sidebar-help button { border: 0; color: var(--violet); background: transparent; font-size: 11px; font-weight: 800; }
.sidebar-user { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 15px 3px 0; border-top: 1px solid var(--line); }
.avatar { flex: 0 0 auto; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #ff977d, #ee6d4c); font-family: 'Manrope'; font-size: 10px; font-weight: 800; }
.sidebar-user > span:nth-child(2), .client-user > span:nth-child(3) { min-width: 0; display: grid; gap: 2px; }
.sidebar-user strong, .client-user strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user small, .client-user small { color: var(--muted); font-size: 9px; }
.sidebar-user .icon-button { margin-left: auto; }
.icon-button { width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; color: #777287; background: #fff; }
.icon-button svg { width: 17px; height: 17px; }
.workspace { min-width: 0; padding: 0 34px 42px; }
.topbar { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.topbar h2 { margin: 6px 0 0; font-size: 24px; letter-spacing: -.7px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.search-field { width: 205px; height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.search-field svg { flex: 0 0 auto; width: 17px; color: #aaa5b5; }
.search-field input { height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 12px; }
.notification-button { position: relative; }
.notification-button span { position: absolute; width: 7px; height: 7px; top: 7px; right: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--orange); }
.view-section { display: none; padding-top: 28px; }
.view-section.is-active { display: block; animation: rise .3s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.intro-row, .section-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.intro-row h3, .section-toolbar h3 { margin-bottom: 4px; font-size: 19px; }.intro-row p, .section-toolbar p { margin-bottom: 0; font-size: 12px; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid #d8f3e8; border-radius: 20px; color: #148b5d; background: #f4fcf8; font-size: 11px; font-weight: 700; }
.live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #29bd84; box-shadow: 0 0 0 4px rgba(41,189,132,.12); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: 14px; }
.stat-card { position: relative; min-height: 174px; display: flex; flex-direction: column; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 7px 22px rgba(35,29,68,.035); }
.stat-card > span { margin: 14px 0 5px; color: #706b82; font-size: 11px; font-weight: 600; }
.stat-card > strong { font-size: 28px; letter-spacing: -1px; }.stat-card > small { color: #9b97a8; font-size: 9px; }.stat-card > small b { color: var(--green); }
.stat-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--violet); background: var(--violet-soft); }
.stat-icon svg { width: 17px; }.stat-icon--orange { color: #dc5b3d; background: var(--orange-soft); }.stat-icon--green { color: var(--green); background: var(--green-soft); }.stat-icon--blue { color: var(--blue); background: var(--blue-soft); }
.stat-card--violet { color: #fff; border-color: transparent; background: linear-gradient(145deg, #7455ef, #5d3ddb); box-shadow: 0 13px 30px rgba(97,65,220,.2); }
.stat-card--violet .stat-icon { color: #fff; background: rgba(255,255,255,.16); }.stat-card--violet > span, .stat-card--violet > small { color: #ddd6ff; }.stat-card--violet > small b { color: #bcffdf; }
.stat-shape { position: absolute; width: 150px; height: 150px; right: -68px; bottom: -76px; border: 25px solid rgba(255,255,255,.07); border-radius: 50%; }
.card-link { display: flex; align-items: center; gap: 4px; margin-top: auto; padding: 0; border: 0; color: var(--violet); background: transparent; font-size: 10px; font-weight: 800; }.card-link svg { width: 13px; height: 13px; }
.dashboard-grid { display: grid; grid-template-columns: 1.35fr .9fr; gap: 16px; margin-top: 16px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 8px 28px rgba(38,31,78,.035); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.panel-heading h3 { margin-bottom: 4px; font-size: 15px; }.panel-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); padding: 13px 22px; border-bottom: 1px solid var(--line); }
.week-strip button { display: grid; justify-items: center; gap: 5px; padding: 5px; border: 0; border-radius: 9px; background: none; }.week-strip span { color: #a6a2b2; font-size: 8px; font-weight: 800; }.week-strip b { display: grid; place-items: center; width: 27px; height: 27px; font-size: 11px; }
.week-strip .is-today span { color: var(--violet); }.week-strip .is-today b { border-radius: 8px; color: #fff; background: var(--violet); box-shadow: 0 5px 12px rgba(108,76,245,.25); }
.upcoming-list { padding: 9px 22px 14px; }
.upcoming-item { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid #f1eff5; }.upcoming-item:last-child { border: 0; }
.social-thumb { position: relative; width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #fc9f73, #9d56dc); font-family: 'Manrope'; font-size: 10px; font-weight: 800; }.social-thumb img { width: 22px; height: 22px; object-fit: contain; }.social-thumb--blue { background: linear-gradient(135deg, #edf5ff, #dceaff); }.social-thumb--green { background: linear-gradient(135deg, #eaf9f3, #d6f2e8); }
.upcoming-item > div { min-width: 0; }.upcoming-item h4 { margin: 0 0 4px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.upcoming-item p { margin: 0; color: var(--muted); font-size: 9px; }
.upcoming-item time { display: grid; gap: 3px; text-align: right; font-size: 10px; font-weight: 800; }.upcoming-item time small { color: var(--muted); font-size: 8px; font-weight: 500; }
.activity-panel { padding-bottom: 16px; }.activity-list { padding: 5px 22px 8px; }
.activity-item { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; padding: 13px 0; }.activity-item:not(:last-child)::after { content: ''; position: absolute; left: 16px; top: 47px; width: 1px; height: 18px; background: var(--line); }
.activity-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; }.activity-icon svg { width: 15px; }.activity-icon--green { color: var(--green); background: var(--green-soft); }.activity-icon--blue { color: var(--blue); background: var(--blue-soft); }.activity-icon--orange { color: #df603e; background: var(--orange-soft); }.activity-icon--violet { color: var(--violet); background: var(--violet-soft); }
.activity-item p { margin: 1px 0 3px; font-size: 10px; line-height: 1.35; }.activity-item small { color: var(--muted); font-size: 8px; }.activity-item time { padding-top: 3px; color: #aaa6b5; font-size: 8px; white-space: nowrap; }
.activity-panel > .button { width: calc(100% - 44px); margin: 0 22px; min-height: 37px; font-size: 10px; }

/* Social analytics */
.metrics-overview { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }.metric-overview-card { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }.metric-overview-card span { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }.metric-overview-card strong { font-size: 25px; letter-spacing: -.7px; }.metric-overview-card small { color: var(--green); font-size: 8px; }.metric-overview-card.is-featured { color: #fff; border-color: transparent; background: linear-gradient(145deg, #7657f2, #5534cf); }.metric-overview-card.is-featured span, .metric-overview-card.is-featured small { color: #ded8ff; }
.analytics-layout { display: grid; grid-template-columns: 1.45fr .7fr; gap: 16px; }.analytics-chart-card { overflow: hidden; }.analytics-chart { height: 260px; display: flex; align-items: end; gap: 9px; padding: 30px 24px 22px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 51px, #f0eef5 52px); }.analytics-chart > i { height: var(--chart-height); flex: 1; display: grid; align-items: end; position: relative; }.analytics-chart > i b { height: 100%; border-radius: 7px 7px 2px 2px; background: linear-gradient(to top, #6545dd, #9278ff); opacity: .9; }.analytics-chart > i:nth-child(3n) b { background: linear-gradient(to top, #eb6e52, #ffad8e); }.analytics-chart > i span { position: absolute; left: 50%; bottom: -16px; color: var(--muted); font-size: 7px; transform: translateX(-50%); }.audience-card { overflow: hidden; }.audience-breakdown { position: relative; min-height: 260px; display: grid; align-content: start; gap: 12px; padding: 23px; }.audience-breakdown > div:not(.audience-ring) { display: flex; align-items: center; justify-content: space-between; font-size: 10px; }.audience-breakdown span { display: flex; align-items: center; gap: 7px; color: var(--muted); }.audience-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }.audience-dot--coral { background: var(--orange); }.audience-ring { width: 135px; height: 135px; align-self: end; justify-self: center; display: grid; place-items: center; align-content: center; border: 17px solid #eeeaff; border-right-color: var(--orange); border-bottom-color: var(--violet); border-radius: 50%; text-align: center; }.audience-ring strong { font-size: 21px; }.audience-ring small { color: var(--muted); font-size: 8px; }.metrics-heading { margin: 30px 0 14px; }.network-metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); gap: 14px; }.network-metric-card { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 7px 22px rgba(35,29,68,.035); }.network-metric-head { display: flex; align-items: center; gap: 10px; }.network-metric-head > span { display: grid; gap: 2px; }.network-metric-head strong { font-size: 11px; }.network-metric-head small { color: var(--muted); font-size: 7px; }.network-metric-head > b { margin-left: auto; color: var(--green); font-size: 9px; }.network-metric-main { display: grid; gap: 5px; margin: 20px 0 16px; }.network-metric-main > span { color: var(--muted); font-size: 8px; }.network-metric-main > strong { font-size: 25px; }.network-metric-main > i { height: 5px; overflow: hidden; border-radius: 5px; background: #efedf4; }.network-metric-main > i b { display: block; width: var(--metric-width); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), #a58eff); }.network-metric-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border-radius: 9px; background: var(--line); }.network-metric-details div { display: grid; gap: 3px; padding: 10px; background: #fafafd; }.network-metric-details span { color: var(--muted); font-size: 7px; }.network-metric-details b { font-size: 10px; }

/* Tables, clients and settings */
.segmented { display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.segmented button { min-width: 82px; height: 32px; border: 0; border-radius: 7px; color: var(--muted); background: none; font-size: 11px; font-weight: 700; }.segmented button.is-active { color: var(--violet); background: var(--violet-soft); }
.content-mode { display: none; }.content-mode.is-active { display: block; animation: rise .25s ease; }
.toolbar-group { display: flex; align-items: center; gap: 9px; }.toolbar-group select { width: auto; min-width: 155px; height: 40px; font-size: 11px; }
.table-panel { overflow: hidden; }.table-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; }th { padding: 13px 18px; color: #9b97a8; background: #fbfbfd; font-size: 9px; letter-spacing: .6px; text-align: left; text-transform: uppercase; }td { padding: 14px 18px; border-top: 1px solid #f0eef4; font-size: 11px; vertical-align: middle; }tbody tr:hover { background: #fdfcff; }
.table-primary { display: grid; gap: 3px; }.table-primary strong { max-width: 260px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.table-primary small { color: var(--muted); font-size: 9px; }
.channel { display: inline-flex; align-items: center; gap: 6px; }.social { width: 25px; height: 25px; display: inline-grid; place-items: center; overflow: hidden; border-radius: 7px; font-family: 'Manrope'; font-size: 8px; font-weight: 800; }.social img { width: 14px; height: 14px; object-fit: contain; }.social--ig { color: #9e3f85; background: #f9e9f5; }.social--fb { color: #2469d3; background: #eaf2ff; }.social--in { color: #1667a9; background: #e6f3fc; }.social--tk { color: #2e2b3f; background: #eeeef2; }.social--yt { color: #d12f29; background: #ffeded; }.social--x, .social--th { color: #fff; background: #ececf0; }.social--pi { background: #ffeded; }.social--gbp { background: #eef5ff; }.social--bs { background: #eaf6ff; }.social--bi { background: #eafaff; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 14px; font-size: 9px; font-weight: 700; white-space: nowrap; }.status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }.status--approval { color: #d45e3e; background: var(--orange-soft); }.status--scheduled { color: var(--violet); background: var(--violet-soft); }.status--paid { color: #16895c; background: var(--green-soft); }.status--draft { color: #777287; background: #f0eff3; }.status--changes { color: #b9780d; background: #fff6dc; }.status--sent { color: var(--blue); background: var(--blue-soft); }.status--overdue { color: #cc4053; background: #fdecef; }
.row-actions { display: flex; justify-content: flex-end; gap: 5px; }.row-actions .icon-button { width: 32px; height: 32px; }.row-actions .button { min-height: 32px; padding: 0 10px; font-size: 9px; }
.client-grid { display: grid; grid-template-columns: repeat(3, minmax(230px, 1fr)); gap: 16px; }
.client-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 7px 22px rgba(35,29,68,.035); }
.client-card-top { display: flex; align-items: center; gap: 12px; }.client-logo { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #7a5bf2, #5334c9); font-family: 'Manrope'; font-size: 12px; font-weight: 800; }.client-card:nth-child(3n+2) .client-logo { background: linear-gradient(145deg, #ff9578, #e35f3e); }.client-card:nth-child(3n+3) .client-logo { background: linear-gradient(145deg, #4bc79b, #19795e); }
.client-card-top > span { display: grid; gap: 3px; }.client-card-top strong { font-size: 13px; }.client-card-top small { color: var(--muted); font-size: 9px; }.client-card-top .icon-button { margin-left: auto; border: 0; }
.client-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 18px 0; overflow: hidden; border-radius: 10px; background: var(--line); }.client-meta div { display: grid; gap: 4px; padding: 11px; background: #fafafe; }.client-meta span { color: var(--muted); font-size: 8px; text-transform: uppercase; }.client-meta b { font-size: 11px; }
.client-footer { display: flex; align-items: center; justify-content: space-between; }.client-footer > span { display: flex; }.client-footer .social { margin-right: -4px; border: 2px solid #fff; }.client-footer .text-button { font-size: 10px; }
.billing-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 16px; }.billing-stats article { display: grid; gap: 5px; padding: 19px 21px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }.billing-stats span { color: var(--muted); font-size: 10px; }.billing-stats strong { font-size: 23px; }.billing-stats small { color: var(--muted); font-size: 9px; }.billing-stats .positive { color: var(--green); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.settings-card { display: grid; grid-template-columns: 45px 1fr; gap: 15px; padding: 23px; }.settings-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 12px; color: var(--violet); background: var(--violet-soft); }.settings-icon--blue { color: var(--blue); background: var(--blue-soft); }.settings-icon--green { color: var(--green); background: var(--green-soft); }.settings-icon svg { width: 20px; height: 20px; }.settings-card h3 { margin-bottom: 6px; font-size: 16px; }.settings-card > div > p { color: var(--muted); font-size: 11px; line-height: 1.55; }
.compact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 20px; }.compact-form label:nth-child(3), .compact-form button { grid-column: 1 / -1; }.compact-form input, .compact-form select { height: 41px; font-size: 11px; }
.integration-list { display: grid; gap: 9px; margin-top: 20px; }.integration-list > div { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; }.integration-list > div > span:nth-child(2) { display: grid; gap: 2px; }.integration-list strong { font-size: 10px; }.integration-list small { color: var(--muted); font-size: 8px; }.integration-list .button { min-height: 32px; margin-left: auto; padding: 0 10px; font-size: 9px; }

/* Calendar */
.content-calendar { overflow: hidden; }.calendar-heading { align-items: center; }.calendar-actions { display: flex; align-items: center; gap: 8px; }.calendar-actions .icon-button { font-size: 22px; font-weight: 500; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(105px, 1fr)); min-width: 735px; overflow-x: auto; background: #f3f1f8; gap: 1px; }
.calendar-weekday { padding: 11px 12px; color: #928da1; background: #fafafd; font-size: 9px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.calendar-day { min-height: 124px; padding: 9px; background: #fff; }.calendar-day.is-outside { background: #fbfbfd; }.calendar-day.is-outside .calendar-day-number { color: #c7c3cf; }.calendar-day.is-today { box-shadow: inset 0 0 0 2px rgba(108,76,245,.35); }
.calendar-day-number { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-bottom: 5px; color: #656075; font-size: 10px; font-weight: 800; }.calendar-day.is-today .calendar-day-number { border-radius: 8px; color: #fff; background: var(--violet); }
.calendar-events { display: grid; gap: 4px; }.calendar-event { display: grid; gap: 2px; padding: 6px 7px; overflow: hidden; border-left: 3px solid var(--violet); border-radius: 6px; color: #51496f; background: #f2efff; font-size: 8px; line-height: 1.25; }.calendar-event--ig { border-color: #c04cae; background: #fbf0f8; }.calendar-event--fb { border-color: #3975e7; background: #edf3ff; }.calendar-event--in { border-color: #1471a6; background: #edf7fb; }.calendar-event--tk, .calendar-event--x { border-color: #2c2939; background: #f1f1f3; }.calendar-event--yt { border-color: #e13f39; background: #fff0ef; }.calendar-event strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }.calendar-event small { color: #898498; font-size: 7px; }
.calendar-event--th { border-color: #27252e; background: #f2f1f4; }.calendar-event--pi { border-color: #d82632; background: #fff0f1; }.calendar-event--gbp, .calendar-event--bs { border-color: #3889e8; background: #eef7ff; }.calendar-event--bi { border-color: #21a4c7; background: #ecfbff; }.calendar-event strong { display: flex; align-items: center; gap: 4px; }.calendar-event strong img { width: 10px; height: 10px; flex: 0 0 auto; }

/* Comments inbox */
.inbox-layout { min-height: 560px; display: grid; grid-template-columns: 330px 1fr; overflow: hidden; }.inbox-list { border-right: 1px solid var(--line); background: #fbfbfd; }.comment-item { width: 100%; display: grid; grid-template-columns: 38px 1fr auto; align-items: start; gap: 10px; padding: 16px; border: 0; border-bottom: 1px solid var(--line); text-align: left; background: transparent; }.comment-item:hover, .comment-item.is-active { background: #fff; }.comment-item.is-active { box-shadow: inset 3px 0 0 var(--violet); }.comment-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg,#8c6bf5,#5533cf); font-family: 'Manrope'; font-size: 10px; font-weight: 800; }.comment-item > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }.comment-item strong { font-size: 10px; }.comment-item small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.comment-item time { color: #a5a1af; font-size: 7px; }.comment-unread { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--orange); }
.inbox-thread { display: flex; flex-direction: column; min-width: 0; }.thread-heading { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); }.thread-heading > span:nth-child(2) { display: grid; gap: 3px; }.thread-heading strong { font-size: 12px; }.thread-heading small { color: var(--muted); font-size: 9px; }.thread-heading .channel { margin-left: auto; }.thread-post { margin: 20px 24px 10px; padding: 14px 16px; border-radius: 11px; color: #696376; background: #f7f6fa; font-size: 10px; line-height: 1.5; }.thread-post b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 9px; }.message-stream { flex: 1; display: grid; align-content: start; gap: 12px; padding: 15px 24px; }.message-bubble { max-width: 76%; padding: 12px 14px; border-radius: 12px 12px 12px 3px; background: #f1eff6; }.message-bubble.is-reply { justify-self: end; border-radius: 12px 12px 3px 12px; color: #fff; background: linear-gradient(135deg,#7455f5,#5e3ce2); }.message-bubble strong { display: block; margin-bottom: 4px; font-size: 9px; }.message-bubble p { margin: 0; font-size: 10px; line-height: 1.5; }.message-bubble small { display: block; margin-top: 5px; color: #9792a4; font-size: 7px; }.message-bubble.is-reply small { color: #d9d2ff; }.reply-form { display: flex; gap: 10px; padding: 17px 24px; border-top: 1px solid var(--line); }.reply-form textarea { min-height: 70px; resize: none; }.reply-form .button { align-self: end; min-width: 105px; }

/* Social channels */
.channels-hero { position: relative; min-height: 176px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 30px 34px; overflow: hidden; border-radius: 19px; color: #fff; background: radial-gradient(circle at 78% 15%, rgba(255,255,255,.16), transparent 24%), linear-gradient(135deg, #2f216b, #6441dc 62%, #795bf0); box-shadow: 0 16px 34px rgba(68,42,157,.18); }
.channels-hero::after { content: ''; position: absolute; width: 170px; height: 170px; right: -58px; bottom: -106px; border: 26px solid rgba(255,255,255,.07); border-radius: 50%; }
.channels-hero h3 { margin: 13px 0 8px; font-size: 25px; letter-spacing: -.8px; }
.channels-hero p { max-width: 620px; margin: 0; color: #ded8fb; font-size: 12px; line-height: 1.6; }
.channel-health { position: relative; z-index: 1; min-width: 160px; display: grid; gap: 3px; padding: 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.channel-health > span { font-family: 'Manrope'; font-size: 23px; font-weight: 800; }.channel-health small { color: #dcd5fa; font-size: 9px; }
.channel-health i { height: 5px; margin-top: 10px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.16); }.channel-health b { display: block; width: 0; height: 100%; border-radius: 5px; background: #ff9a7f; transition: width .3s ease; }
.security-note { display: flex; align-items: center; gap: 12px; margin: 16px 0 26px; padding: 14px 17px; border: 1px solid #dcefe8; border-radius: 13px; background: #f5fbf8; }
.security-note > span { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--green); background: #e3f7ef; }.security-note svg { width: 15px; }
.security-note div { display: grid; gap: 3px; }.security-note strong { color: #207a5b; font-size: 11px; }.security-note p { margin: 0; color: #628477; font-size: 9px; line-height: 1.5; }
.organization-section { margin-bottom: 27px; }.organization-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 13px; }.organization-heading h3 { margin: 7px 0 3px; font-size: 16px; }.organization-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.organization-tabs { display: grid; grid-template-columns: repeat(3, minmax(210px, 1fr)); gap: 12px; }.organization-tab { position: relative; min-height: 80px; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; text-align: left; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }.organization-tab:hover { transform: translateY(-1px); border-color: #d7d0f6; }.organization-tab.is-active { border-color: #bdb0ff; box-shadow: 0 7px 22px rgba(90,61,204,.1); }.organization-tab.is-active::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--violet); }
.organization-avatar { width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #7858f2, #5232ca); font-family: 'Manrope'; font-size: 11px; font-weight: 800; }.organization-avatar--coral { background: linear-gradient(145deg, #ff8e73, #e2583b); }.organization-avatar--blue { background: linear-gradient(145deg, #4a91ee, #2457b7); }.organization-avatar--green { background: linear-gradient(145deg, #43c093, #187759); }
.organization-tab > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }.organization-tab strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.organization-tab small { color: var(--muted); font-size: 8px; }.organization-tab > svg { width: 15px; margin-left: auto; color: #aaa5b6; }.organization-tab.is-active > svg { color: var(--violet); }
.channel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }.channel-heading h3 { margin-bottom: 4px; font-size: 17px; }.channel-heading p { margin: 0; font-size: 11px; }
.demo-pill { padding: 6px 10px; border-radius: 15px; color: #8a651d; background: #fff4d7; font-size: 9px; font-weight: 800; }
.channel-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 14px; }.channel-card { display: flex; flex-direction: column; min-height: 218px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 7px 22px rgba(35,29,68,.035); }
.channel-card-top { display: flex; align-items: center; gap: 11px; }.network-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #fff; font-family: 'Manrope'; font-size: 13px; font-weight: 800; }
.network-icon img { width: 23px; height: 23px; object-fit: contain; }.network-icon--meta { background: linear-gradient(145deg, #f0eaff, #e7efff); }.network-icon--linkedin { background: #e7f4fc; }.network-icon--tiktok, .network-icon--x, .network-icon--threads { background: #f0eff3; }.network-icon--youtube, .network-icon--pinterest { background: #ffeded; }.network-icon--googlebusinessprofile { background: #eef5ff; }.network-icon--bluesky { background: #eaf6ff; }.network-icon--bilibili { background: #e8faff; }
.channel-card-top > span:nth-child(2) { display: grid; gap: 3px; }.channel-card-top strong { font-size: 12px; }.channel-card-top small { color: var(--muted); font-size: 8px; }
.connection-dot { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: #d5d2de; }.connection-dot.is-connected { background: var(--green); box-shadow: 0 0 0 4px rgba(30,174,118,.12); }
.channel-card > p { min-height: 38px; margin: 18px 0 13px; color: var(--muted); font-size: 10px; line-height: 1.55; }.channel-capabilities { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.channel-capabilities span { padding: 4px 7px; border-radius: 8px; color: #777187; background: #f3f2f7; font-size: 8px; }.channel-card .button { width: 100%; min-height: 38px; margin-top: auto; font-size: 10px; }
.channel-card.is-connected { border-color: #cfeade; }.channel-card.is-connected .button { color: #167f57; background: var(--green-soft); }
.connected-profile { display: flex; align-items: center; gap: 7px; margin: -3px 0 14px; color: #16855b; font-size: 9px; font-weight: 700; }.connected-profile svg { width: 13px; height: 13px; }
.publishing-flow { margin-top: 18px; }.flow-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 15px; padding: 24px; }
.flow-steps > div { display: grid; justify-items: center; gap: 5px; text-align: center; }.flow-steps > div > span { width: 31px; height: 31px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 9px; color: var(--violet); background: var(--violet-soft); font-family: 'Manrope'; font-size: 11px; font-weight: 800; }
.flow-steps strong { font-size: 10px; }.flow-steps small { color: var(--muted); font-size: 8px; line-height: 1.4; }.flow-steps > i { color: #c2becd; }.flow-steps > i svg { width: 15px; }

/* Client portal */
.client-shell { min-height: 100vh; background: #f8f8fc; }
.client-header { height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 5vw; border-bottom: 1px solid var(--line); background: #fff; }
.client-header nav { display: flex; align-self: stretch; gap: 8px; }.client-nav { position: relative; padding: 0 13px; border: 0; color: var(--muted); background: none; font-size: 12px; font-weight: 700; }.client-nav.is-active { color: var(--violet); }.client-nav.is-active::after { content: ''; position: absolute; height: 3px; left: 13px; right: 13px; bottom: 0; border-radius: 3px 3px 0 0; background: var(--violet); }
.client-user { display: flex; align-items: center; justify-self: end; gap: 10px; }.client-user .icon-button { border: 0; }.client-user .avatar { background: linear-gradient(145deg, #8b6afd, #5937d2); }
.client-content { width: min(1160px, calc(100% - 40px)); margin: auto; padding: 55px 0; }.client-welcome { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }.client-welcome h1 { margin: 10px 0 8px; font-size: 34px; letter-spacing: -1.2px; }.client-welcome p { margin: 0; color: var(--muted); font-size: 13px; }
.client-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 36px; }.client-summary article { display: flex; align-items: center; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }.summary-number { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 12px; color: #d65b3b; background: var(--orange-soft); font-family: 'Manrope'; font-size: 20px; font-weight: 800; }.summary-number--green { color: var(--green); background: var(--green-soft); }.summary-number--violet { color: var(--violet); background: var(--violet-soft); }.client-summary article > span:last-child { display: grid; gap: 3px; }.client-summary strong { font-size: 12px; }.client-summary small { color: var(--muted); font-size: 9px; }
.client-section-heading h2 { margin-bottom: 5px; font-size: 20px; }.client-section-heading p { color: var(--muted); font-size: 11px; }
.approval-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }.approval-card { display: grid; grid-template-columns: 170px 1fr; min-height: 235px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; }.approval-art { position: relative; display: grid; place-items: center; padding: 20px; color: #fff; background: linear-gradient(145deg, #4c2aa4, #9874ff); text-align: center; }.approval-art--warm { background: linear-gradient(145deg, #d35c42, #ffb073); }.approval-art::after { content: ''; position: absolute; width: 120px; height: 120px; right: -45px; bottom: -55px; border: 18px solid rgba(255,255,255,.12); border-radius: 50%; }.approval-art b { position: relative; z-index: 1; max-width: 120px; font-size: 18px; line-height: 1.1; }.approval-art small { position: absolute; left: 15px; top: 15px; padding: 4px 7px; border-radius: 10px; background: rgba(0,0,0,.18); font-size: 8px; }
.approval-info { display: flex; flex-direction: column; padding: 18px; }.approval-meta { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 9px; }.approval-info h3 { margin: 12px 0 7px; font-size: 13px; }.approval-info p { display: -webkit-box; overflow: hidden; color: #645f75; font-size: 10px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.approval-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }.approval-actions .button { min-height: 36px; font-size: 9px; }.approve-button { color: #fff; background: var(--green); }.change-button { border-color: var(--line); background: #fff; }
.approval-art small { display: flex; align-items: center; gap: 5px; }.approval-art small .social { width: 18px; height: 18px; background: rgba(255,255,255,.9); }.approval-art small .social img { width: 11px; height: 11px; }
.client-tab { display: none; }.client-tab.is-active { display: block; animation: rise .3s ease; }.empty-state { display: grid; justify-items: center; padding: 80px 20px; text-align: center; }.empty-state > svg { width: 45px; height: 45px; padding: 10px; border-radius: 13px; color: var(--violet); background: var(--violet-soft); }.empty-state h2 { margin: 17px 0 7px; font-size: 19px; }.empty-state p { max-width: 470px; color: var(--muted); font-size: 12px; }
.account-card { max-width: 720px; display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 28px; }.account-card h2 { margin-bottom: 6px; font-size: 20px; }.account-card > div > p { color: var(--muted); font-size: 11px; }.account-form { max-width: 470px; margin-top: 24px; }.account-form .button { justify-self: start; min-width: 190px; }.optional { color: var(--muted); font-size: 9px; font-weight: 500; }
.subscription-summary { margin: 20px 0 18px; }.subscription-summary article { display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 14px; padding: 20px; border: 1px solid #d9d0ff; border-radius: 15px; background: linear-gradient(135deg, #fff, #faf8ff); }.subscription-summary article > div { display: grid; gap: 4px; }.subscription-summary article > div > span { color: var(--muted); font-size: 7px; font-weight: 800; }.subscription-summary article > div > strong { font-size: 18px; }.subscription-summary article > div > small { color: var(--muted); font-size: 9px; }.subscription-catalog { display: grid; gap: 18px; }.plan-catalog-group { display: grid; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }.plan-catalog-group--managed { border-color: #d9d0ff; background: linear-gradient(135deg,#fbfaff,#f4f0ff); }.plan-catalog-heading { display: flex; align-items: center; gap: 11px; }.plan-catalog-heading > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: var(--violet); background: var(--violet-soft); font-size: 8px; font-weight: 800; }.plan-catalog-heading > div { display: grid; gap: 3px; }.plan-catalog-heading strong { font-size: 12px; }.plan-catalog-heading small { color: var(--muted); font-size: 8px; }.subscription-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }.subscription-plans--managed { grid-template-columns: minmax(250px, 430px); }.plan-card { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }.plan-card.is-current { border-color: #b9aaff; box-shadow: 0 10px 28px rgba(91,61,207,.1); }.plan-card--custom { color: #fff; border-color: #5135be; background: linear-gradient(145deg,#3d287f,#7454df); }.plan-card--custom > span { color: #fff; background: rgba(255,255,255,.16); }.plan-card--custom p, .plan-card--custom .management-price, .plan-card--custom li, .plan-card--custom > strong small { color: #ded7ff; }.plan-card--custom li::before { color: #9df0c5; }.plan-card--custom .button { color: #4f34b7; background: #fff; }.plan-card > span { align-self: start; padding: 5px 7px; border-radius: 8px; color: var(--violet); background: var(--violet-soft); font-size: 7px; font-weight: 800; }.plan-card h3 { margin: 16px 0 5px; font-size: 19px; }.plan-card p { min-height: 30px; margin: 0; color: var(--muted); font-size: 9px; }.plan-card > strong { margin: 18px 0; font-size: 26px; }.plan-card > strong small { color: var(--muted); font-size: 9px; font-weight: 500; }.custom-plan-price { display: grid; gap: 3px; }.plan-card ul { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }.plan-card li { color: #625d71; font-size: 9px; }.plan-card li::before { content: '✓'; margin-right: 7px; color: var(--green); font-weight: 800; }.plan-card .button { width: 100%; margin-top: auto; }.client-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.form-grid label.is-disabled { opacity: .55; }.form-grid label.is-disabled textarea { background: #f3f2f6; }

/* Modals and feedback */
.modal { width: min(760px, calc(100% - 32px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; border: 0; border-radius: 18px; box-shadow: 0 30px 90px rgba(24,18,60,.3); }.modal--small { width: min(620px, calc(100% - 32px)); }.modal--composer { width: min(1120px, calc(100% - 32px)); }.modal::backdrop { background: rgba(25,20,52,.48); backdrop-filter: blur(4px); }.modal-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding: 23px 26px 19px; border-bottom: 1px solid var(--line); }.modal-heading h2 { margin: 7px 0 4px; font-size: 23px; }.modal-heading p { margin: 0; color: var(--muted); font-size: 10px; }.modal-body { padding: 22px 26px; }.modal-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 26px; border-top: 1px solid var(--line); background: #fbfbfd; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }.form-span { grid-column: 1 / -1; }.form-grid input, .form-grid select { height: 43px; font-size: 11px; }.form-grid textarea { font-size: 11px; }.upload-area { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px dashed #cfc9e5; border-radius: 11px; background: #faf9ff; }.upload-area > svg { width: 32px; height: 32px; padding: 7px; border-radius: 9px; color: var(--violet); background: var(--violet-soft); }.upload-area > span { display: grid; gap: 3px; }.upload-area strong { font-size: 10px; }.upload-area small { color: var(--muted); font-size: 8px; }.upload-area .button { margin-left: auto; min-height: 33px; font-size: 9px; }
.media-validation { display: grid; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fafafd; }.media-validation > strong { font-size: 10px; }.media-validation > p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }.media-validation.is-empty { border-style: dashed; }.media-validation.is-loading { color: var(--violet); border-color: #d9d0ff; background: #faf8ff; }.media-validation.is-valid { border-color: #cdebdc; background: #f7fcf9; }.media-validation.is-error { border-color: #f0d4d8; background: #fff8f8; }.media-file-summary { display: flex; align-items: center; gap: 9px; }.media-file-summary > span { padding: 5px 7px; border-radius: 7px; color: var(--violet); background: var(--violet-soft); font-size: 7px; font-weight: 800; }.media-file-summary > div { min-width: 0; display: grid; gap: 2px; }.media-file-summary strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.media-file-summary small { color: var(--muted); font-size: 7px; }.media-file-summary button { margin-left: auto; }.media-check-list { display: grid; gap: 6px; }.media-check { display: grid; grid-template-columns: 25px 1fr 20px; align-items: center; gap: 8px; padding: 8px; border-radius: 9px; background: #fff; }.media-check > span { min-width: 0; display: grid; gap: 2px; }.media-check strong { font-size: 8px; }.media-check small { color: var(--muted); font-size: 7px; line-height: 1.4; }.media-check > b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 9px; }.media-check.is-valid > b { color: #16895c; background: var(--green-soft); }.media-check.is-error > b { color: #c94c5c; background: #fdecef; }
.composer-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr); gap: 26px; align-items: start; }.composer-fields { min-width: 0; }.channel-selector { min-width: 0; display: grid; gap: 9px; margin: 0; padding: 0; border: 0; }.channel-selector-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.channel-selector-heading > span { color: #3e3a52; font-size: 13px; font-weight: 700; }.channel-selector-heading .text-button { font-size: 10px; }
.post-channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }.post-channel-option { position: relative; min-height: 64px; display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }.post-channel-option:hover { transform: translateY(-1px); border-color: #cfc6fb; }.post-channel-option.is-selected { border-color: #a997fb; background: #f7f5ff; box-shadow: inset 0 0 0 1px #c8bcff; }.post-channel-option.is-disabled { opacity: .48; cursor: not-allowed; transform: none; }.post-channel-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }.post-channel-option .social { flex: 0 0 auto; }.post-channel-option > span:last-child { min-width: 0; display: grid; gap: 2px; }.post-channel-option strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.post-channel-option small { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.schedule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.recurrence-panel { display: grid; gap: 8px; padding: 14px; border: 1px solid #e2ddf6; border-radius: 12px; background: #faf9ff; }.recurrence-grid { display: grid; grid-template-columns: 1fr .7fr 1.35fr; gap: 12px; align-items: end; }.custom-interval { display: grid; grid-template-columns: .7fr 1fr; gap: 8px; }.custom-interval label { min-width: 0; }
.post-preview-panel { position: sticky; top: 0; min-height: 590px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #f7f7fb; }.preview-panel-heading { display: grid; gap: 6px; padding: 17px 18px 13px; background: #fff; border-bottom: 1px solid var(--line); }.preview-panel-heading small { color: var(--muted); font-size: 8px; }.post-preview-tabs { display: flex; gap: 5px; padding: 10px; overflow-x: auto; border-bottom: 1px solid var(--line); background: #fff; }.post-preview-tab { min-width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: #fff; font-size: 8px; font-weight: 800; }.post-preview-tab .social { width: 24px; height: 24px; background: transparent; }.post-preview-tab.is-active { color: var(--violet); border-color: #c7bbff; background: var(--violet-soft); }
.post-preview { padding: 18px; }.preview-empty { min-height: 440px; display: grid; place-items: center; align-content: center; gap: 10px; padding: 30px; color: var(--muted); text-align: center; }.preview-empty svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: var(--violet); background: var(--violet-soft); }.preview-empty strong { color: var(--ink); font-size: 12px; }.preview-empty p { margin: 0; font-size: 9px; line-height: 1.5; }
.network-preview-card { overflow: hidden; border: 1px solid #e2dfe9; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(31,25,61,.07); }.network-preview-head { display: flex; align-items: center; gap: 9px; padding: 13px; }.network-preview-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#ff8c70,#6847e5); font-family: 'Manrope'; font-size: 9px; font-weight: 800; }.network-preview-head > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }.network-preview-head strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.network-preview-head small { color: var(--muted); font-size: 7px; }.network-preview-head .social { margin-left: auto; }.network-preview-media { position: relative; aspect-ratio: 1 / .82; display: grid; place-items: center; overflow: hidden; color: #fff; background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.23), transparent 24%), linear-gradient(145deg,#4a2ba0,#8a68ee 55%,#ff8d70); }.network-preview-media::after { content: ''; position: absolute; width: 150px; height: 150px; right: -70px; bottom: -75px; border: 18px solid rgba(255,255,255,.12); border-radius: 50%; }.network-preview-media b { position: relative; z-index: 1; max-width: 220px; padding: 25px; text-align: center; font-size: 18px; line-height: 1.15; }.network-preview-media span { position: absolute; z-index: 2; top: 11px; left: 11px; padding: 5px 8px; border-radius: 10px; background: rgba(0,0,0,.25); font-size: 7px; font-weight: 800; }.network-preview-copy { display: grid; gap: 8px; padding: 13px; }.network-preview-copy p { margin: 0; color: #514c61; font-size: 9px; line-height: 1.5; white-space: pre-wrap; }.network-preview-copy .preview-hashtags { color: #5b51be; }.network-preview-comment { margin: 0 13px 13px; padding: 10px; border-radius: 9px; color: #625d70; background: #f5f4f8; font-size: 8px; line-height: 1.45; }.network-preview-comment b { display: block; margin-bottom: 3px; color: var(--ink); font-size: 8px; }.network-preview-comment.is-warning { color: #8d6a1a; background: #fff6dc; }.network-preview-card.is-story { max-width: 280px; margin: auto; }.network-preview-card.is-story .network-preview-media { aspect-ratio: 9 / 12; }
.network-preview-media::after { pointer-events: none; }.network-preview-media img, .network-preview-media video { width: 100%; height: 100%; object-fit: cover; }.network-preview-copy button { justify-self: start; min-height: 28px; padding: 0 11px; border: 0; border-radius: 7px; color: #fff; background: var(--violet); font-size: 8px; font-weight: 800; pointer-events: none; }.network-preview--pi { border-radius: 18px; }.network-preview--pi .network-preview-media { aspect-ratio: 2 / 3; }.network-preview--gbp .network-preview-copy button { color: #1769d2; background: #eef5ff; }.network-preview--x { border-radius: 0; }.network-preview--bs { border-color: #cfeaff; }.network-preview-card.is-story .network-preview-media { aspect-ratio: 9 / 16; }
.channel--multiple { gap: 0; }.channel--multiple .social { margin-right: -4px; border: 2px solid #fff; }.channel--multiple > b { display: grid; place-items: center; width: 25px; height: 25px; margin-left: 6px; border-radius: 7px; color: var(--violet); background: var(--violet-soft); font-size: 8px; }
.invoice-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 23px; }.invoice-preview { padding: 21px; border-radius: 13px; color: #514c64; background: #f7f5ff; }.mini-brand { margin-bottom: 28px; color: var(--ink); font-family: 'Manrope'; font-size: 14px; font-weight: 800; }.mini-brand span { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-right: 5px; border-radius: 7px; color: #fff; background: var(--violet); }.invoice-preview > p { margin-bottom: 17px; color: #9893ab; font-size: 8px; font-weight: 800; letter-spacing: 1px; }.invoice-preview > div { display: flex; justify-content: space-between; gap: 15px; margin: 10px 0; font-size: 10px; }.invoice-preview hr { margin: 18px 0 13px; border: 0; border-top: 1px solid #dcd7ef; }.invoice-preview .invoice-total { color: var(--ink); font-size: 15px; }.invoice-preview > small { display: block; margin-top: 25px; color: #9994a9; font-size: 8px; line-height: 1.5; }
.field-hint { color: var(--muted); font-size: 8px; font-weight: 500; line-height: 1.35; }
.oauth-explainer { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; }.oauth-explainer > div { display: grid; gap: 2px; }.oauth-explainer strong { font-size: 12px; }.oauth-explainer small { color: var(--muted); font-size: 9px; }.oauth-explainer > .status { margin-left: auto; }
.prototype-note { margin: 14px 0 18px; padding: 13px 15px; border-radius: 11px; color: #675217; background: #fff7df; }.prototype-note strong { font-size: 10px; }.prototype-note p { margin: 4px 0 0; font-size: 9px; line-height: 1.55; }.connection-fields { margin-top: 4px; }
.toast { position: fixed; z-index: 50; right: 25px; bottom: 25px; min-width: 330px; display: flex; align-items: center; gap: 11px; padding: 14px 17px; border: 1px solid #dff1e9; border-radius: 13px; background: #fff; box-shadow: var(--shadow); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .25s, transform .25s; }.toast.is-visible { opacity: 1; transform: translateY(0); }.toast > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--green); background: var(--green-soft); }.toast > span svg { width: 16px; }.toast > div { display: grid; gap: 2px; }.toast strong { font-size: 11px; }.toast small { color: var(--muted); font-size: 9px; }

/* Planes, empresas y acceso progresivo */
.status--published { color: #08764d; background: #e3f8ed; }.plan-modal-badge { align-self: center; margin-right: auto; padding: 6px 9px; border-radius: 9px; color: var(--violet); background: var(--violet-soft); font-size: 8px; font-weight: 800; }.plan-access-strip { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 16px 0; padding: 12px 14px; border: 1px solid #ddd6ff; border-radius: 12px; color: #5d5671; background: linear-gradient(135deg,#fff,#f8f6ff); font-size: 9px; }.plan-access-strip > b { color: var(--violet); }.plan-access-strip > span { margin-left: auto; padding: 5px 8px; border-radius: 8px; color: #6a6479; background: #eeecf4; font-size: 7px; font-weight: 800; }.plan-access-strip.is-unlocked > span { color: #147652; background: var(--green-soft); }.client-publisher-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; padding: 25px; background: linear-gradient(135deg,#fff,#f9f7ff); }.client-publisher-card h3 { margin: 8px 0 6px; font-size: 18px; }.client-publisher-card p { max-width: 690px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }.brand-logo { width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 12px; color: #fff; background: linear-gradient(145deg,#7858f2,#5232ca); font-size: 10px; font-weight: 800; }.brand-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }.organization-tab.is-locked { opacity: .62; }.organization-tab.is-locked::before { content: 'PLAN'; position: absolute; right: 11px; top: 9px; padding: 3px 5px; border-radius: 6px; color: #7d6f32; background: #fff4c9; font-size: 6px; font-weight: 800; }.plan-feature-matrix { margin: 20px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }.plan-feature-matrix table { min-width: 650px; }.plan-feature-matrix th, .plan-feature-matrix td { padding: 12px 14px; text-align: center; }.plan-feature-matrix th:first-child, .plan-feature-matrix td:first-child { text-align: left; }.feature-yes { color: var(--green); font-weight: 800; }.feature-no { color: #bbb5c5; }.plan-card .management-price { display: block; min-height: 26px; color: var(--muted); font-size: 8px; line-height: 1.4; }.plan-card li.is-locked { color: #aaa4b4; }.plan-card li.is-locked::before { content: '—'; color: #bbb5c5; }
.channel-card.is-locked { opacity: .64; background: #faf9fc; }.channel-card.is-locked::after { content: 'PLAN'; position: absolute; right: 15px; top: 12px; padding: 4px 6px; border-radius: 7px; color: #806c28; background: #fff3c6; font-size: 6px; font-weight: 800; }.channel-card { position: relative; }
.quote-request-banner { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px 17px; border: 1px solid #dfd7ff; border-radius: 13px; color: #4d397e; background: #f7f4ff; }.quote-request-banner > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--violet); }.quote-request-banner > div { display: grid; gap: 3px; }.quote-request-banner strong { font-size: 10px; }.quote-request-banner small { color: var(--muted); font-size: 8px; }.quote-request-banner > b { margin-left: auto; padding: 5px 8px; border-radius: 8px; color: #7a6421; background: #fff1bd; font-size: 7px; }
.subscription-lock-banner, .checkout-request-banner { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px 17px; border-radius: 13px; }.subscription-lock-banner > span, .checkout-request-banner > span { width: 35px; height: 35px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; font-size: 13px; font-weight: 800; }.subscription-lock-banner > div, .checkout-request-banner > div { display: grid; gap: 3px; }.subscription-lock-banner strong, .checkout-request-banner strong { font-size: 10px; }.subscription-lock-banner small, .checkout-request-banner small { font-size: 8px; }.subscription-lock-banner > b, .checkout-request-banner > b { margin-left: auto; padding: 5px 8px; border-radius: 8px; font-size: 7px; white-space: nowrap; }.subscription-lock-banner { color: #7a3540; border: 1px solid #f1cbd1; background: #fff4f5; }.subscription-lock-banner > span { background: #fbe1e5; }.subscription-lock-banner small { color: #98636c; }.subscription-lock-banner > b { color: #a33143; background: #f9d9de; }.checkout-request-banner { color: #66521f; border: 1px solid #ecdca8; background: #fffaf0; }.checkout-request-banner > span { color: #fff; background: #bc8b16; }.checkout-request-banner small { color: #8b7a52; }.checkout-request-banner > b { color: #806319; background: #ffefba; }

/* Modos de servicio y redes separadas por empresa */
.network-mode-banner, .managed-approval-banner { display: flex; align-items: center; gap: 14px; margin: 16px 0; padding: 16px 18px; border-radius: 14px; }.network-mode-banner > span, .managed-approval-banner > span { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #fff; font-size: 11px; font-weight: 800; }.network-mode-banner > div, .managed-approval-banner > div { display: grid; gap: 4px; }.network-mode-banner strong, .managed-approval-banner strong { font-size: 11px; }.network-mode-banner p, .managed-approval-banner p { margin: 0; font-size: 9px; line-height: 1.5; }.network-mode-banner > b, .managed-approval-banner > b { margin-left: auto; padding: 6px 9px; border-radius: 8px; font-size: 7px; white-space: nowrap; }.network-mode-banner.is-managed, .managed-approval-banner { color: #574a2a; border: 1px solid #f0ddb0; background: #fff9e9; }.network-mode-banner.is-managed > span, .managed-approval-banner > span { background: linear-gradient(145deg,#ef775b,#c94e34); }.network-mode-banner.is-managed > b, .managed-approval-banner > b { color: #8b6617; background: #ffedb7; }.network-mode-banner.is-self { color: #4f4474; border: 1px solid #dcd3ff; background: #f8f6ff; }.network-mode-banner.is-self > span { background: linear-gradient(145deg,#7d5df0,#5133bd); }.network-mode-banner.is-self > b { color: #5d43bd; background: #e9e2ff; }
.network-brand-tabs { display: flex; gap: 9px; margin: 18px 0 12px; overflow-x: auto; padding-bottom: 4px; }.network-brand-tab { min-width: 190px; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; text-align: left; background: #fff; }.network-brand-tab .brand-logo { width: 35px; height: 35px; border-radius: 9px; }.network-brand-tab > span:nth-child(2) { display: grid; gap: 3px; }.network-brand-tab strong { font-size: 9px; }.network-brand-tab small { color: var(--muted); font-size: 7px; }.network-brand-tab.is-active { border-color: #aa9afb; background: #f7f5ff; box-shadow: inset 0 0 0 1px #cec5ff; }.network-operations-summary { display: flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 12px 14px; overflow-x: auto; border: 1px dashed #d8d4df; border-radius: 12px; color: #948e9f; background: #faf9fb; }.network-operations-summary > div { min-width: 145px; display: grid; gap: 2px; margin-right: auto; }.network-operations-summary strong { color: var(--ink); font-size: 10px; }.network-operations-summary small { font-size: 7px; }.network-operations-summary > span { flex: 0 0 auto; padding: 6px 8px; border-radius: 8px; background: #efedf2; font-size: 7px; font-weight: 800; }.network-operations-summary.is-active { color: #217b5c; border-style: solid; border-color: #cce9dc; background: #f7fcf9; }.network-operations-summary.is-active > span { background: #e2f5eb; }
.managed-reply-note { margin: 12px 18px 18px; padding: 12px 14px; border-radius: 10px; color: #675217; background: #fff7df; }.managed-reply-note strong { font-size: 9px; }.managed-reply-note p { margin: 4px 0 0; font-size: 8px; line-height: 1.5; }

/* Enlaces y calendario de aprobación para autogestión */
.self-approval-hero { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 18px; padding: 26px; border-radius: 17px; color: #fff; background: radial-gradient(circle at 92% 10%,rgba(255,255,255,.15),transparent 27%),linear-gradient(135deg,#3f267f,#7355dc); }.self-approval-hero h2 { margin: 9px 0 6px; font-size: 24px; }.self-approval-hero p { max-width: 720px; margin: 0; color: #e1dcfa; font-size: 10px; line-height: 1.55; }.self-approval-hero > span { padding: 8px 11px; border-radius: 10px; background: rgba(255,255,255,.14); font-size: 8px; font-weight: 800; white-space: nowrap; }.approval-portal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.approval-portal-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }.approval-portal-head { display: flex; align-items: center; gap: 10px; }.approval-portal-head > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }.approval-portal-head strong { font-size: 11px; }.approval-portal-head small { color: var(--muted); font-size: 8px; }.approval-portal-head > b { margin-left: auto; }.approval-portal-card > label { display: grid; gap: 6px; color: var(--muted); font-size: 7px; font-weight: 800; }.share-link-row { display: flex; gap: 7px; }.share-link-row input { min-width: 0; flex: 1; height: 34px; color: #625a78; background: #f8f7fb; font-size: 8px; }.share-link-row .button { min-height: 34px; }.approval-portal-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.approval-portal-stats span { display: grid; gap: 3px; padding: 9px; border-radius: 9px; color: var(--muted); background: #f8f7fb; font-size: 7px; }.approval-portal-stats b { color: var(--ink); font-size: 14px; }.approval-link-empty { display: grid; place-items: start; gap: 12px; min-height: 150px; align-content: center; padding: 18px; border: 1px dashed #d8d2e9; border-radius: 11px; background: #faf9fd; }.approval-link-empty p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.modal--approval-demo { width: min(1040px,calc(100% - 32px)); }.approval-demo-content { background: #f7f7fa; }.approval-demo-brand { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }.approval-demo-brand > div { display: grid; gap: 3px; }.approval-demo-brand > div > span { color: var(--violet); font-size: 7px; font-weight: 800; }.approval-demo-brand h3 { margin: 0; font-size: 16px; }.approval-demo-brand p { margin: 0; color: var(--muted); font-size: 8px; }.approval-demo-brand > b { margin-left: auto; padding: 6px 9px; border-radius: 8px; color: #147652; background: var(--green-soft); font-size: 7px; }.approval-demo-link { margin: 10px 0 15px; padding: 9px 12px; border-radius: 9px; color: #655b7e; background: #eeecf4; font-size: 8px; }.approval-demo-calendar { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; }.approval-demo-day { min-height: 125px; display: flex; flex-direction: column; gap: 6px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.approval-demo-day > span { color: var(--muted); font-size: 7px; }.approval-demo-day > b { font-size: 15px; }.approval-demo-day > i { margin-top: auto; color: #bbb5c5; font-size: 7px; font-style: normal; }.approval-mini-post { display: grid; grid-template-columns: 20px 1fr; gap: 4px 6px; padding: 6px; border: 0; border-radius: 7px; text-align: left; background: #f2efff; }.approval-mini-post .social { width: 20px; height: 20px; grid-row: span 2; }.approval-mini-post strong { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.approval-mini-post small { color: var(--muted); font-size: 6px; }.approval-mini-post--changes { background: #fff5d9; }.approval-mini-post--scheduled { background: #e9f8f0; }.approval-demo-list, .approval-feedback { margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }.approval-demo-list > h3, .approval-feedback > h3 { margin: 0 0 13px; font-size: 14px; }.approval-demo-list > article { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: start; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); }.approval-demo-list > article > div:nth-child(2) { display: grid; gap: 4px; }.approval-demo-list > article strong { font-size: 10px; }.approval-demo-list > article small { color: var(--muted); font-size: 7px; }.approval-demo-list > article p { margin: 3px 0 0; color: #625d70; font-size: 8px; line-height: 1.45; }.approval-demo-actions { grid-column: 2 / -1; display: flex; justify-content: flex-end; gap: 7px; }.approval-demo-actions .button { min-height: 32px; font-size: 8px; }.approval-feedback-list { display: grid; gap: 8px; }.approval-feedback-list > div { display: grid; grid-template-columns: 30px 1fr; gap: 8px; }.approval-feedback-list > div > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--violet); font-size: 7px; font-weight: 800; }.approval-feedback-list p { display: grid; gap: 3px; margin: 0; padding: 9px 11px; border-radius: 9px; color: #625d70; background: #f7f6f9; font-size: 8px; }.approval-feedback-list strong { color: var(--ink); font-size: 8px; }.approval-feedback form { display: flex; gap: 8px; margin-top: 13px; }.approval-feedback textarea { min-height: 72px; flex: 1; }
.basic-client-access { display: grid; gap: 7px; padding: 12px; border: 1px solid #cee9dc; border-radius: 11px; background: #f7fcf9; }.basic-client-access > span:first-child { color: #167653; font-size: 7px; font-weight: 800; }.basic-client-access p { margin: 0; color: #638276; font-size: 8px; line-height: 1.45; }.basic-client-access.is-locked { border-color: #eadfb9; background: #fffaf0; }.basic-client-access.is-locked > span:first-child { color: #8a6b20; }.basic-client-access.is-locked > b { width: fit-content; padding: 5px 7px; border-radius: 7px; color: #82641c; background: #fff0bd; font-size: 7px; }.client-access-row { align-items: center; }.client-access-pin { flex: 0 0 auto; padding: 8px; border-radius: 8px; color: #126b4a; background: #e2f5eb; font-size: 8px; }.client-oauth-access { margin-top: 16px; padding: 18px; border: 1px solid #cde8db; border-radius: 13px; background: #fff; }.client-oauth-access.is-locked { border-color: #e7dcb6; background: #fffaf0; }.client-oauth-heading { display: flex; align-items: center; gap: 10px; }.client-oauth-heading > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #157552; background: var(--green-soft); font-size: 8px; font-weight: 800; }.client-oauth-heading > div { display: grid; gap: 3px; }.client-oauth-heading strong { font-size: 12px; }.client-oauth-heading small { color: var(--muted); font-size: 7px; }.client-oauth-heading > b { margin-left: auto; padding: 5px 8px; border-radius: 8px; color: #147652; background: var(--green-soft); font-size: 7px; }.client-oauth-access.is-locked .client-oauth-heading > span, .client-oauth-access.is-locked .client-oauth-heading > b { color: #82641c; background: #fff0bd; }.oauth-security-copy { display: flex; align-items: center; gap: 10px; margin: 13px 0 4px; padding: 11px 13px; border-radius: 10px; color: #527468; background: #f1faf6; }.oauth-security-copy > span { font-size: 16px; }.oauth-security-copy p { margin: 0; font-size: 8px; line-height: 1.5; }.oauth-security-copy strong { color: #176f50; }.client-oauth-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.client-oauth-card { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }.client-oauth-card.is-connected { border-color: #cce7da; background: #f9fdfa; }.client-oauth-card .network-icon { width: 34px; height: 34px; border-radius: 9px; }.client-oauth-card .network-icon img { width: 19px; height: 19px; }.client-oauth-card > div { min-width: 0; display: grid; gap: 3px; }.client-oauth-card strong { font-size: 9px; }.client-oauth-card small { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.client-oauth-card .button { min-height: 31px; padding: 0 9px; font-size: 8px; }.client-access-locked-copy { margin: 13px 0 0; color: #786c4d; font-size: 9px; line-height: 1.5; }

/* Analítica web e informes */
.website-analytics { margin-top: 22px; }.website-card { display: grid; grid-template-columns: minmax(250px,.8fr) 1.2fr; gap: 20px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }.website-card h3 { margin: 8px 0 5px; font-size: 17px; }.website-card p { margin: 0 0 14px; color: var(--muted); font-size: 9px; line-height: 1.55; }.website-form { display: flex; gap: 8px; }.website-form input { min-width: 0; flex: 1; }.website-kpis { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }.website-kpis div { display: grid; gap: 4px; padding: 13px; border-radius: 11px; background: #f8f7fb; }.website-kpis span { color: var(--muted); font-size: 7px; }.website-kpis b { font-size: 16px; }.website-plugin-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 8px; border-radius: 8px; color: #7b6625; background: #fff6d7; font-size: 7px; font-weight: 800; }.network-metric-details { grid-template-columns: repeat(3,1fr); }.network-metric-card.is-basic .network-metric-details div:nth-child(n+5) { display: none; }

/* Previsualizaciones fieles al ecosistema de cada red */
.platform-bar { display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: 7px 12px; border-bottom: 1px solid #eee; font-size: 9px; font-weight: 800; }.platform-bar span { display: flex; align-items: center; gap: 6px; }.platform-bar .social { width: 20px; height: 20px; }.platform-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 9px 12px; border-top: 1px solid #f0eef3; color: #4f4a5c; font-size: 9px; }.platform-actions span { display: flex; align-items: center; gap: 7px; }.platform-action { padding: 5px 7px; border-radius: 8px; background: #f7f6f9; font-size: 8px; }.platform-micro { padding: 0 12px 10px; color: #6c6679; font-size: 7px; }.network-preview--ig .platform-bar { justify-content: center; font-family: 'Manrope'; }.network-preview--fb .network-preview-copy { order: 1; }.network-preview--fb .network-preview-media { order: 2; }.network-preview--fb .platform-actions { color: #65676b; }.network-preview--in { border-radius: 4px; }.network-preview--in .platform-actions { justify-content: space-around; }.network-preview--tk { color: #fff; border-color: #111; background: #090909; }.network-preview--tk .network-preview-media { aspect-ratio: 9/13; }.network-preview--tk .network-preview-head { position: absolute; z-index: 3; left: 0; right: 45px; bottom: 18px; color: #fff; background: linear-gradient(transparent,rgba(0,0,0,.75)); }.network-preview--tk .network-preview-head small { color: #ddd; }.network-preview--tk .network-preview-copy { color: #fff; background: #090909; }.network-preview--tk .network-preview-copy p { color: #fff; }.tiktok-frame { position: relative; }.tiktok-rail { position: absolute; z-index: 4; right: 9px; bottom: 16px; display: grid; gap: 11px; text-align: center; }.tiktok-rail span { display: grid; gap: 2px; font-size: 7px; }.tiktok-rail b { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.45); font-size: 16px; }.network-preview--yt { border-radius: 0; }.network-preview--yt .network-preview-media { aspect-ratio: 16/9; background: #111; }.youtube-meta { display: grid; grid-template-columns: 30px 1fr; gap: 9px; padding: 11px 12px; }.youtube-meta > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #e62117; font-size: 8px; font-weight: 800; }.youtube-meta strong { display: block; font-size: 10px; }.youtube-meta small { color: var(--muted); font-size: 7px; }.network-preview--x, .network-preview--th, .network-preview--bs { padding: 4px 0; border-radius: 0; }.network-preview--x .network-preview-media, .network-preview--th .network-preview-media, .network-preview--bs .network-preview-media { margin: 0 12px; border-radius: 12px; }.network-preview--pi { position: relative; }.network-preview--pi .pinterest-save { position: absolute; z-index: 5; right: 12px; top: 48px; padding: 9px 12px; border: 0; border-radius: 18px; color: #fff; background: #e60023; font-size: 8px; font-weight: 800; }.network-preview--gbp { border-radius: 7px; }.network-preview--gbp .platform-bar { color: #3c4043; }.network-preview--gbp .platform-actions { color: #1a73e8; }.network-preview--bi .network-preview-media { aspect-ratio: 16/9; background: #151515; }.network-preview--bi .platform-bar { color: #00aeec; }.preview-brand-logo { overflow: hidden; }.preview-brand-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

/* Comunidad escalonada */
.community-client-tabs { width: fit-content; margin: 14px 0; }.locked-community { min-height: 350px; display: grid; place-items: center; align-content: center; gap: 10px; padding: 35px; text-align: center; }.locked-community > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--violet); background: var(--violet-soft); font-size: 20px; }.locked-community h3 { margin: 4px 0 0; font-size: 18px; }.locked-community p { max-width: 480px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }

@media (max-width: 1180px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .client-grid, .channel-grid, .organization-tabs { grid-template-columns: repeat(2, 1fr); }
  .metrics-overview { grid-template-columns: repeat(3, 1fr); }.network-metrics-grid { grid-template-columns: repeat(2, 1fr); }.analytics-layout { grid-template-columns: 1fr; }
  .approval-card { grid-template-columns: 135px 1fr; }
  .topbar-actions .search-field { display: none; }
  .composer-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }.post-channel-grid { grid-template-columns: repeat(2, 1fr); }.recurrence-grid { grid-template-columns: 1fr 1fr; }.custom-interval { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .login-shell { grid-template-columns: 1fr; }.login-story { display: none; }.mobile-brand { display: flex; }.login-panel { min-height: 100vh; }
  .app-shell { display: block; }.sidebar { position: fixed; z-index: 20; width: 100%; height: 70px; top: auto; bottom: 0; display: block; padding: 8px 8px; border-top: 1px solid var(--line); border-right: 0; }.sidebar > .brand, .sidebar > .official-logo, .sidebar-label, .sidebar-help, .sidebar-user { display: none; }.main-nav { grid-template-columns: repeat(8, 1fr); height: 100%; }.nav-item { height: 54px; display: grid; justify-items: center; align-content: center; gap: 3px; padding: 0; font-size: 7px; }.nav-item svg { width: 17px; height: 17px; }.nav-item b { position: absolute; top: 1px; right: calc(50% - 19px); }.nav-item.is-active::before { width: 25px; height: 3px; left: calc(50% - 12px); top: -8px; border-radius: 0 0 3px 3px; }
  .workspace { padding: 0 18px 95px; }.topbar { min-height: 87px; }.topbar-actions .button--soft, .topbar-actions .notification-button { display: none; }.topbar h2 { font-size: 20px; }.topbar .eyebrow { display: none; }
  .settings-grid, .approval-grid { grid-template-columns: 1fr; }.client-header { grid-template-columns: auto 1fr; padding: 0 20px; }.client-header nav { position: fixed; z-index: 15; height: 60px; left: 0; right: 0; bottom: 0; justify-content: flex-start; overflow-x: auto; padding: 0 10px; border-top: 1px solid var(--line); background: #fff; }.client-nav { flex: 0 0 auto; padding: 0 10px; font-size: 9px; }.client-user > span:nth-child(3) { display: none; }.client-user { justify-self: end; }.client-content { padding: 35px 0 90px; }.client-summary { grid-template-columns: 1fr; }.client-welcome { align-items: start; }.client-welcome .button { font-size: 0; }.client-welcome .button svg { transform: rotate(180deg); }.flow-steps { grid-template-columns: repeat(4, 1fr); }.flow-steps > i { display: none; }.channels-hero { align-items: flex-start; flex-direction: column; }.channel-health { width: 100%; }.inbox-layout { grid-template-columns: 270px 1fr; }
  .modal--composer { width: min(760px, calc(100% - 24px)); }.composer-layout { grid-template-columns: 1fr; }.post-preview-panel { position: static; min-height: 0; }.post-preview { max-width: 390px; margin: auto; }.website-card { grid-template-columns: 1fr; }.approval-demo-content { overflow-x: auto; }.approval-demo-calendar { min-width: 720px; }
}

@media (max-width: 620px) {
  .stat-grid, .client-grid, .channel-grid, .organization-tabs, .billing-stats, .metrics-overview, .network-metrics-grid, .subscription-plans, .approval-portal-grid, .client-oauth-grid { grid-template-columns: 1fr; }.topbar-actions .open-post { width: 42px; padding: 0; font-size: 0; }.section-toolbar { align-items: stretch; flex-direction: column; }.toolbar-group { flex-wrap: wrap; }.toolbar-group select { flex: 1; }.panel-heading { align-items: flex-start; padding: 17px; }.panel-heading .toolbar-group { justify-content: flex-end; }.week-strip { padding: 12px 8px; }.upcoming-list, .activity-list { padding-left: 16px; padding-right: 16px; }.activity-item { grid-template-columns: 34px 1fr; }.activity-item time { display: none; }.form-grid, .invoice-layout { grid-template-columns: 1fr; }.form-span { grid-column: auto; }.modal-body, .modal-heading, .modal-footer { padding-left: 18px; padding-right: 18px; }.login-panel { padding: 28px 22px; }.demo-access > div { grid-template-columns: 1fr; }.form-row--between { align-items: flex-start; flex-direction: column; }.client-welcome, .client-publisher-card, .self-approval-hero, .network-mode-banner, .managed-approval-banner { align-items: stretch; flex-direction: column; }.network-mode-banner > b, .managed-approval-banner > b, .self-approval-hero > span { align-self: flex-start; margin-left: 0; }.approval-card { grid-template-columns: 110px 1fr; }.approval-art b { font-size: 14px; }.client-header .official-logo { width: 120px; height: 32px; }.client-header { grid-template-columns: auto 1fr; }.client-content { width: calc(100% - 28px); }.toast { min-width: 0; left: 15px; right: 15px; bottom: 85px; }.flow-steps { grid-template-columns: 1fr 1fr; }.channels-hero { padding: 24px; }.organization-heading { align-items: stretch; flex-direction: column; }.calendar-heading { flex-direction: column; }.calendar-actions { width: 100%; }.calendar-actions .button--primary { margin-left: auto; }.inbox-layout { grid-template-columns: 1fr; }.inbox-list { max-height: 260px; overflow-y: auto; border-right: 0; border-bottom: 1px solid var(--line); }.inbox-thread { min-height: 500px; }.reply-form, .approval-feedback form { flex-direction: column; }.reply-form .button, .approval-feedback .button { width: 100%; }.account-card { grid-template-columns: 1fr; }.calendar-grid { min-width: 700px; }.schedule-grid, .recurrence-grid, .post-channel-grid, .website-kpis { grid-template-columns: 1fr; }.custom-interval { grid-template-columns: 1fr 1fr; }.composer-fields .form-span { grid-column: auto; }.subscription-summary article { grid-template-columns: 45px 1fr; }.subscription-summary article > b { grid-column: 1 / -1; }.upload-area { align-items: flex-start; flex-wrap: wrap; }.upload-area .button { width: 100%; margin-left: 0; }.plan-modal-badge { width: 100%; margin: 0 0 5px; }.modal-footer { flex-wrap: wrap; }.network-metric-details { grid-template-columns: repeat(2,1fr); }.quote-request-banner, .subscription-lock-banner, .checkout-request-banner { align-items: flex-start; flex-wrap: wrap; }.quote-request-banner > b, .subscription-lock-banner > b, .checkout-request-banner > b { margin-left: 0; }.client-access-row { align-items: stretch; flex-direction: column; }.client-access-pin { width: fit-content; }.client-oauth-card { grid-template-columns: 34px 1fr; }.client-oauth-card .button { grid-column: 1 / -1; width: 100%; }.plan-catalog-group { padding: 13px; }
}
:root .change-inbox{border:1px solid #dce7de;background:white;border-radius:14px;padding:22px;margin-bottom:24px}.change-inbox-heading,.real-review-entry{display:flex;align-items:center;justify-content:space-between;gap:20px}.change-inbox h3{margin:0 0 8px}.change-inbox p{font-size:13px;color:#718477}.change-count{display:inline-flex;background:#fff0db;color:#9b6525;border-radius:8px;padding:3px 8px;font-size:13px}.change-inbox-card{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-top:1px solid #e5ece7}.change-inbox-card>div:first-child{min-width:0}.change-inbox-card h4{margin:7px 0}.change-inbox-card p{white-space:pre-wrap;overflow-wrap:anywhere}.change-inbox-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.change-inbox-card small,.change-inbox-card>div>span,.change-demo-note{font-size:12px;color:#78897d}.post-change-form{display:grid;gap:12px;padding:18px;background:#f3f8f4;border-radius:12px;margin-top:16px;grid-column:1 / -1;flex-basis:100%;width:100%}.post-change-form label{display:grid;gap:10px;font-size:13px;font-weight:600}.post-change-form textarea{width:100%;min-height:110px;padding:12px;border:1px solid #c8d9ce;border-radius:8px;resize:vertical;font:inherit}.post-change-form>div{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.change-form-error{color:#aa3d2b}.change-form-error:empty{display:none}.change-history{margin-top:20px;font-size:13px}.change-history summary{cursor:pointer;font-weight:600}.change-history-item{background:#f5f8f4;padding:15px;border-radius:10px;margin-top:12px}.change-history-item>div{display:flex;flex-wrap:wrap;gap:10px}.change-history-item p{white-space:pre-wrap;overflow-wrap:anywhere}.change-history-item time{font-size:11px;color:#738779}.change-response{border-top:1px solid #dce7dd;margin-top:12px;padding-top:12px;display:block!important}.notification-button.has-change-requests{background:#fff0d7}@media(max-width:700px){.change-inbox-heading,.change-inbox-card,.real-review-entry{align-items:flex-start;flex-direction:column}.change-inbox-actions{flex-wrap:wrap}.post-change-form>div>.button{width:100%}}