:root {
  color-scheme: dark;
  --bg: #141519;
  --sidebar: #050608;
  --surface: #191a1f;
  --surface-2: #24252b;
  --surface-soft: rgba(255,255,255,.055);
  --line: rgba(255, 255, 255, .13);
  --text: #f4f4f6;
  --muted: #9ca0aa;
  --blue: #6268ff;
  --green: #21c76a;
  --orange: #ffb020;
  --purple: #a75cff;
  --yellow: #ffd000;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #0b0c0f; color: var(--text); }
button, input, select, textarea { font: inherit; }
button { border: 1px solid var(--line); color: var(--text); background: var(--surface-2); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
button:hover { border-color: rgba(255,255,255,.28); }
input, select, textarea { width: 100%; color: var(--text); background: #111217; border: 1px solid var(--line); border-radius: 12px; padding: 10px 11px; outline: none; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 700; }
dialog { border: 1px solid var(--line); border-radius: 20px; padding: 0; background: var(--surface); color: var(--text); box-shadow: 0 22px 90px rgba(0,0,0,.58); }
dialog::backdrop { background: rgba(0,0,0,.68); }
.hidden { display: none !important; }
.primary { background: var(--blue); border-color: var(--blue); color: white; font-weight: 800; }
.ghost { background: transparent; }
.plain { background: transparent; border-color: transparent; color: var(--muted); text-align: left; }
.small { padding: 8px 12px; }
.danger { color: #ff6b6b; }
.error { min-height: 18px; color: #ff7777; font-size: 13px; }

.login-screen { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 50% -20%, #2a2440 0, #0b0c0f 42%); }
.login-panel { width: min(420px, calc(100vw - 32px)); display: grid; gap: 16px; padding: 30px; background: #15161b; border: 1px solid var(--line); border-radius: 22px; }
.login-panel h1 { margin: 0; font-size: 26px; }
.login-panel p { margin: -8px 0 6px; color: var(--muted); }
.brand-mark, .avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: linear-gradient(135deg, #733cff, #2be7ff); font-weight: 900; font-size: 12px; }
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }

.shell { display: grid; grid-template-columns: 284px minmax(880px, 1fr); min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; gap: 22px; padding: 22px 12px; background: var(--sidebar); border-right: 1px solid var(--line); }
.brand-switcher { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; background: transparent; border-color: transparent; text-align: left; }
.brand-switcher span, .brand-switcher div span { color: var(--muted); font-size: 12px; }
nav { display: grid; gap: 8px; }
nav button { text-align: left; background: transparent; border-color: transparent; font-weight: 760; }
nav .nav-active { background: linear-gradient(180deg, #303137, #25262c); border-color: var(--line); border-radius: 12px; }
#logoutBtn { margin-top: auto; }

.workspace { min-width: 0; background: var(--bg); }
.topbar { height: 61px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 32px; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar input { max-width: 410px; border-radius: 999px; background: #1d2528; }
.view { padding: 32px; }
.view-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.view-heading p { margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 800; }

.brand-grid { display: grid; grid-template-columns: repeat(2, minmax(320px, 372px)); gap: 24px; align-items: start; }
.brand-card { min-height: 174px; display: grid; grid-template-columns: 44px 1fr; gap: 12px; text-align: left; padding: 18px; background: var(--surface-soft); border: 1px solid rgba(255,255,255,.18); border-radius: 22px; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.brand-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.08); box-shadow: 0 18px 48px rgba(0,0,0,.22); }
.brand-card.selected-card { border-color: rgba(98,104,255,.9); box-shadow: 0 0 0 1px rgba(98,104,255,.25) inset; }
.brand-avatar { width: 44px; height: 44px; }
.brand-card-body { display: grid; gap: 8px; min-width: 0; }
.brand-card-body strong { font-size: 16px; }
.brand-card-body span, .brand-card-body small { color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.brand-tags { display: flex; gap: 8px; }
.brand-tags span { width: auto; padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12px; color: var(--text); }
.brand-stat { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; margin-top: 8px; }
.brand-progress { height: 16px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
.brand-progress i { display: block; height: 100%; min-width: 18px; border-radius: inherit; background: linear-gradient(90deg, #159b65, #7df0c0); }
.brand-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; opacity: 0; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; }
.brand-card:hover .brand-actions { opacity: 1; transform: translateY(0); }
.brand-actions button { padding: 7px 10px; background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.16); font-size: 12px; font-weight: 800; }

.calendar-toolbar { height: 58px; display: flex; align-items: center; gap: 10px; margin: -32px -32px 0; padding: 0 22px; background: var(--surface); border-bottom: 1px solid var(--line); }
.calendar-toolbar h1 { min-width: 170px; margin: 0; font-size: 22px; }
.toolbar-spacer { flex: 1; }
.weekdays { display: grid; grid-template-columns: repeat(7, 1fr); height: 49px; margin: 0 -32px; background: var(--surface); border-bottom: 1px solid var(--line); }
.weekdays div { display: grid; place-items: center; align-content: center; gap: 2px; color: var(--muted); font-size: 12px; border-right: 1px solid var(--line); }
.weekdays span { color: var(--blue); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 850; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(118px, 1fr)); grid-auto-rows: minmax(118px, calc((100vh - 168px) / 6)); margin: 0 -32px -32px; }
.day-cell { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 9px; background: #15161a; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.day-cell.outside { background: #111217; color: #666b75; }
.day-cell.selected { background: #272b50; }
.day-number { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 14px; }
.today-pill { display: inline-grid; place-items: center; min-width: 27px; height: 22px; border-radius: 999px; background: var(--blue); color: white; }
.entry { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; padding: 7px 9px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12px; font-weight: 720; }
.entry span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-yellow { color: var(--yellow); border-color: rgba(255, 208, 0, .62); background: rgba(255, 208, 0, .12); }
.hover-preview { position: fixed; z-index: 900; width: min(460px, calc(100vw - 24px)); max-height: min(320px, calc(100vh - 24px)); overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; background: #1b1c22; box-shadow: 0 24px 70px rgba(0,0,0,.55); clip-path: inset(0 round 16px); }
.hover-preview::-webkit-scrollbar { display: none; }
.hover-preview-inner { display: grid; gap: 10px; padding: 14px; }
.hover-preview-inner { max-height: inherit; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
.hover-preview-inner::-webkit-scrollbar { width: 8px; }
.hover-preview-inner::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
.hover-preview-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,.26); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
.hover-kicker { color: var(--blue); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.hover-preview h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.hover-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; }
.hover-meta span { padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.11); }
.hover-body { white-space: pre-wrap; color: #e5e7ec; font-size: 14px; line-height: 1.45; }
.hover-media { overflow: hidden; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #090a0d; }
.hover-media img { display: block; width: 100%; height: auto; max-height: 170px; object-fit: contain; }
.status-dot { width: 11px; height: 11px; flex: 0 0 auto; border-radius: 999px; border: 2px solid var(--muted); }
.status-draft { border-color: #b8bcc8; }
.status-in_progress { border-color: var(--orange); }
.status-review { border-color: var(--blue); }
.status-scheduled { background: var(--yellow); border-color: var(--yellow); }
.status-published { background: var(--green); border-color: var(--green); }

.pipeline-toolbar { height: 50px; display: flex; align-items: center; justify-content: space-between; margin: -32px -32px 0; padding: 0 22px; border-bottom: 1px solid var(--line); background: var(--surface); }
.pipeline { display: grid; grid-template-columns: repeat(5, minmax(260px, 1fr)); gap: 12px; min-height: calc(100vh - 112px); margin: 0 -20px -24px; overflow-x: auto; padding: 18px 0; align-items: start; }
.pipeline-column { min-width: 260px; background: #16171c; border-left: 1px solid rgba(255,255,255,.06); padding: 14px 10px; min-height: calc(100vh - 150px); }
.pipeline-column h2 { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; font-size: 15px; font-weight: 780; }
.pipeline-column h2 span { color: var(--muted); font-weight: 700; }
.pipeline-list { display: flex; flex-direction: column; gap: 9px; min-height: calc(100vh - 210px); }
.pipeline-card { display: grid; gap: 8px; min-height: 86px; padding: 12px; background: var(--surface-soft); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; cursor: grab; align-content: start; }
.pipeline-card .card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; font-weight: 780; font-size: 14px; }
.pipeline-card .card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.pipeline-card .card-meta span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 7px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.04); }

.notes-toolbar { height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -32px -32px 0; padding: 0 22px; border-bottom: 1px solid var(--line); background: var(--surface); }
.notes-toolbar div { display: grid; gap: 2px; }
.notes-toolbar span { color: var(--muted); font-size: 13px; }
.notes-board { display: grid; grid-template-columns: repeat(4, minmax(250px, 1fr)); gap: 12px; min-height: calc(100vh - 124px); margin: 0 -20px -24px; overflow-x: auto; padding: 18px 0; align-items: start; }
.note-column { min-width: 250px; min-height: calc(100vh - 160px); padding: 14px 10px; background: #16171c; border-left: 1px solid rgba(255,255,255,.06); }
.note-column h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; }
.note-column h2 span { color: var(--muted); }
.note-list { display: grid; gap: 9px; min-height: 180px; }
.note-card { display: grid; gap: 8px; min-height: 104px; padding: 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(255,255,255,.055); cursor: grab; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.note-card:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.075); }
.note-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.note-card .card-meta { display: flex; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.note-card .card-meta span { padding: 3px 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.04); }
.note-card-yellow { border-color: rgba(255,208,0,.42); }
.note-card-mint { border-color: rgba(33,199,106,.42); }
.note-card-pink { border-color: rgba(255,92,177,.42); }
.note-card-cyan { border-color: rgba(16,199,232,.42); }

.analytics-view { max-width: 1260px; margin: 0 auto; }
.analytics-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.analytics-profile { display: flex; align-items: center; gap: 14px; }
.analytics-profile .avatar { width: 48px; height: 48px; }
.analytics-profile h1 { margin: 0; font-size: 22px; }
.analytics-profile p { margin: 3px 0 0; color: var(--muted); }
.analytics-actions { display: flex; gap: 10px; }
.analytics-actions .connected { color: var(--green); border-color: rgba(33,199,106,.38); background: rgba(33,199,106,.08); }
.analytics-connection { margin: -14px 0 18px; color: var(--muted); font-size: 13px; text-align: center; }
.period-tabs { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 24px; border-bottom: 1px solid var(--line); }
.period-tabs button { background: transparent; border-color: transparent; color: var(--muted); border-radius: 0; padding: 12px 14px; }
.period-tabs .active { color: var(--text); border-bottom: 2px solid var(--blue); }
.analytics-grid { display: grid; gap: 26px; }
.analytics-section { display: grid; gap: 12px; }
.analytics-section h2 { margin: 0; font-size: 20px; }
.analytics-section > p { margin: -6px 0 10px; color: var(--muted); }
.metric-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.analytics-split, .chart-row, .bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.analytics-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-card { min-height: 150px; display: grid; align-content: start; gap: 10px; padding: 18px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.18); border-radius: 24px; overflow: hidden; }
.metric-card.wide { grid-column: span 2; }
.metric-card span { color: var(--muted); font-size: 13px; }
.metric-card strong { font-size: 30px; line-height: 1; }
.metric-card small { color: var(--muted); }
.metric-card h3 { margin: 0; font-size: 16px; }
.metric-card.compact { min-height: 130px; }
.metric-card.compact > div:first-of-type, .chart-card > div:first-of-type { display: flex; align-items: baseline; gap: 8px; }
.positive { color: #00d68a !important; }
.negative { color: #ff4658 !important; }
.mini-bars { display: flex; align-items: end; gap: 16px; height: 54px; margin-top: 6px; }
.mini-bars i { width: 9px; height: 42px; border-radius: 999px 999px 0 0; background: #ff3b4d; }
.mini-bars i:nth-child(2) { height: 26px; }
.mini-bars i:nth-child(3) { height: 50px; }
.sparkline { height: 54px; border-radius: 18px; background: linear-gradient(180deg, rgba(33,199,106,.28), rgba(33,199,106,.04)), linear-gradient(135deg, transparent 0 20%, #20c978 21% 23%, transparent 24% 42%, #20c978 43% 45%, transparent 46% 70%, #20c978 71% 73%, transparent 74%); }
.sparkline.muted-line { background: linear-gradient(180deg, rgba(98,104,255,.26), rgba(98,104,255,.04)), linear-gradient(135deg, transparent 0 18%, #6268ff 19% 21%, transparent 22% 52%, #6268ff 53% 55%, transparent 56%); }
.spark-svg { width: 100%; height: 54px; }
.line-chart { width: 100%; height: 118px; border-top: 1px dashed rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.18); }
.emv-card { min-height: 300px; align-content: space-between; }
.emv-card div:first-child { display: grid; gap: 6px; }
.emv-card strong { font-size: 46px; }
.cpm-line { display: flex; justify-content: space-between; color: var(--muted); }
.emv-bar, .consistency-scale { position: relative; height: 20px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.emv-bar i { display: block; height: 100%; border-radius: inherit; background: var(--blue); }
.consistency-card { min-height: 300px; align-content: center; padding: 32px; }
.consistency-card strong { font-size: 42px; }
.consistency-scale { margin-top: 18px; overflow: visible; }
.consistency-scale::before { content: ""; position: absolute; inset: 7px 0; border-radius: inherit; background: linear-gradient(90deg, #a83232, #ff7a1a, #a8a8a8); }
.consistency-scale i { position: absolute; top: -5px; width: 22px; height: 22px; border-radius: 999px; background: #ff7a1a; transform: translateX(-50%); }
.chart-card { min-height: 210px; }
.donut-card { min-height: 330px; }
.donut { width: 132px; height: 132px; display: grid; place-items: center; justify-self: center; margin: 16px 0; border-radius: 999px; position: relative; }
.donut::after { content: ""; position: absolute; inset: 22px; border-radius: inherit; background: var(--surface); }
.donut span, .donut small { z-index: 1; }
.donut span { font-size: 26px; font-weight: 900; color: var(--text); }
.donut small { align-self: end; margin-bottom: 34px; color: var(--yellow); }
.performance-list { display: grid; gap: 12px; }
.performance-list div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.performance-list span { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text); }
.performance-list i { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; }
.performance-list em { color: var(--muted); font-style: normal; }
.performance-list strong { font-size: 15px; text-align: right; }
.performance-list strong small { display: block; font-size: 11px; }
.ranked b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--blue); font-size: 12px; }
.empty-labels { min-height: 260px; }
.empty-state { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; color: var(--muted); }
.empty-state span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 999px; background: rgba(255,255,255,.04); font-size: 22px; }
.activity-board { min-height: 300px; display: grid; grid-template-columns: repeat(12, minmax(52px, 1fr)); align-items: end; gap: 10px; padding: 26px; border-radius: 18px; background: rgba(255,255,255,.055); }
.activity-month { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 3px; min-height: 230px; }
.activity-month span { grid-column: 1 / -1; order: 5; color: var(--muted); font-size: 12px; transform: rotate(-35deg); transform-origin: left top; }
.activity-bar { align-self: end; width: 100%; min-height: 6px; border-radius: 5px 5px 0 0; opacity: .9; }
.activity-bar.personal { background: var(--purple); }
.activity-bar.educational { background: #2f8cff; }
.activity-bar.organizational { background: #17c48c; }
.activity-bar.promotional { background: #ff8b2b; }
.top-posts { display: grid; gap: 12px; padding: 0; margin: 10px 0 0; list-style: none; }
.top-posts li { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--text); }
.top-posts img, .top-posts i { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; background: rgba(255,255,255,.08); }
.top-posts li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.top-posts li strong { flex: 0 0 auto; font-size: 14px; color: var(--muted); }
.muted-copy { margin: 0; color: var(--muted); line-height: 1.45; }

.empty-view { display: grid; place-content: center; min-height: calc(100vh - 62px); text-align: center; color: var(--muted); }
.empty-view h1 { color: var(--text); margin: 0 0 8px; }
.dialog-form, .day-panel { width: min(640px, calc(100vw - 32px)); padding: 22px; display: grid; gap: 16px; }
.dialog-form h2, .day-panel h2 { margin: 0; }
.dialog-actions { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; }
.day-panel header { display: flex; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.day-panel p { margin: 4px 0 0; color: var(--muted); }
.day-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.overview-card { min-height: 132px; border: 1px solid var(--line); background: #12141a; border-radius: 8px; padding: 13px; }
.overview-card h3 { margin: 0 0 10px; font-size: 14px; }
.overview-card p, .overview-card li { color: var(--muted); font-size: 13px; line-height: 1.4; }
.overview-card ul { margin: 0; padding-left: 18px; }

.editor-dialog { width: min(1460px, calc(100vw - 24px)); height: min(900px, calc(100vh - 24px)); }
.editor { width: 100%; height: 100%; display: grid; grid-template-columns: 310px 1fr; grid-template-rows: 58px 1fr; }
.editor-top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 24px; border-bottom: 1px solid var(--line); }
.editor-top div { display: flex; gap: 10px; }
.save-status { margin-left: auto; color: var(--green); font-size: 13px; font-weight: 850; opacity: 0; transition: opacity .16s ease; }
.save-status.visible { opacity: 1; }
.editor-meta { display: grid; align-content: start; gap: 14px; padding: 22px; border-right: 1px solid var(--line); background: #0f1014; }
.linkedin-preview { max-width: 720px; width: 100%; margin: 0 auto; padding: 72px 32px; }
.linkedin-author { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.linkedin-author span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.post-headline, .post-body { border: 0; background: transparent; border-radius: 0; resize: none; padding: 0; white-space: pre-wrap; color: var(--text); }
.post-headline { height: 71px; min-height: 71px; max-height: 71px; overflow: hidden; font-size: 16px; line-height: 1.48; font-weight: 520; }
.headline-divider { height: 1px; margin: 6px 0 8px; border-top: 1px dashed rgba(255,255,255,.34); }
.post-body { min-height: 430px; font-size: 16px; line-height: 1.48; }
.post-headline:focus, .post-body:focus { outline: none; }
.post-headline::placeholder, .post-body::placeholder { color: rgba(156,160,170,.66); }
.media-drop { margin-top: 18px; display: grid; place-items: center; min-height: 108px; border: 1px dashed rgba(255,255,255,.28); border-radius: 12px; color: var(--muted); cursor: pointer; padding: 12px; transition: border-color .15s ease, background .15s ease; }
.media-drop.drag-over { border-color: var(--blue); background: rgba(98,104,255,.12); }
.media-empty { display: grid; justify-items: center; gap: 5px; text-align: center; }
.media-empty strong { color: var(--text); font-size: 14px; }
.media-empty span { color: var(--muted); font-size: 13px; }
.media-preview { width: 100%; display: grid; gap: 14px; margin-top: 24px; }
.media-preview:empty { display: none; }
.media-item { position: relative; margin: 0; overflow: hidden; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: #101116; }
.media-item img { width: 100%; height: auto; max-height: 620px; object-fit: contain; display: block; background: #08090c; }
.media-item button { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 999px; background: rgba(0,0,0,.68); border-color: rgba(255,255,255,.22); }
.toast { position: fixed; right: 28px; bottom: 28px; z-index: 1000; padding: 12px 16px; border-radius: 10px; background: rgba(33, 199, 106, .94); color: #06110a; font-weight: 850; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; box-shadow: 0 16px 42px rgba(0,0,0,.35); }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .brand-grid { grid-template-columns: 1fr; }
  .editor { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; overflow: auto; }
  .editor-meta { border-right: 0; border-bottom: 1px solid var(--line); }
  .day-overview { grid-template-columns: 1fr; }
  .analytics-grid { grid-template-columns: 1fr; }
  .metric-row, .analytics-split, .chart-row, .bottom-grid, .analytics-cards-3 { grid-template-columns: 1fr; }
  .notes-board { grid-template-columns: 1fr; }
  .metric-card.wide { grid-column: span 1; }
}