.workspace-mode { background:#f7f8fa; --muted:#777c86; --line:#e9ebef; }
.workspace-mode .portal-header { position:relative; z-index:30; width:100%; max-width:none; height:80px; padding:0 36px; background:white; gap:20px; }
.workspace-mode .portal-brand { display:flex; align-items:center; gap:20px; }
.workspace-mode .portal-brand::after { content:'VERANSTALTER'; padding-left:20px; border-left:1px solid #e3e5e8; color:#8a8d95; font-size:12px; font-weight:600; letter-spacing:.11em; }
.workspace-mode .portal-brand img { width:135px; }
.workspace-mode .portal-header nav { gap:16px; }
.account-menu { position:relative; }
.account-menu summary { display:flex; align-items:center; gap:11px; padding:5px; border-radius:10px; cursor:pointer; list-style:none; }
.account-menu summary::-webkit-details-marker,.entry-menu summary::-webkit-details-marker { display:none; }
.account-menu summary>svg { width:16px; height:16px; margin-left:15px; transform:rotate(90deg); color:#8a8f97; }
.account-menu .profile-avatar { width:38px; height:38px; }
.account-menu .profile-initial { font-size:17px; background:#fff1e9; color:var(--orange); }
.account-identity { display:grid; min-width:0; max-width:180px; line-height:1.45; }
.account-identity strong { font-size:14px; font-weight:600; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.account-identity small { font-size:12px; color:var(--muted); }
.dropdown { position:absolute; right:0; top:calc(100% + 8px); z-index:40; width:210px; padding:6px; border:1px solid var(--line); border-radius:12px; background:white; box-shadow:0 8px 30px #17203515; }
.dropdown button { display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:10px; border:0; border-radius:7px; background:none; text-align:left; font-size:14px; }
.dropdown button:hover { background:#f7f8fa; }
.dropdown svg { width:16px; height:16px; }
.dropdown .dropdown-divider { height:1px; margin:4px; background:var(--line); }
.workspace-layout { display:grid; grid-template-columns:208px minmax(0,1fr); min-height:calc(100vh - 80px); }
.workspace-sidebar { display:flex; flex-direction:column; padding:35px 18px 24px; border-right:1px solid var(--line); background:white; }
.sidebar-label { margin:0 14px 17px; font-size:11px; font-weight:650; letter-spacing:.13em; color:#9a9da6; }
.workspace-sidebar nav { display:grid; gap:6px; }
.sidebar-item { display:flex; align-items:center; gap:12px; width:100%; min-height:45px; padding:12px 14px; border:0; border-radius:8px; background:none; color:#777c86; text-align:left; font-size:14px; font-weight:500; }
.sidebar-item>svg { width:18px; height:18px; }
.sidebar-item small { display:grid; place-items:center; min-width:20px; height:20px; margin-left:auto; padding:0 5px; border-radius:5px; background:#f1f2f5; color:#777; font-size:12px; }
.sidebar-item:hover { background:#fafafa; color:var(--ink); }
.sidebar-item.is-active { background:#fff0e9; color:#e74618; }
.sidebar-bottom { margin-top:auto; padding:60px 14px 0; }
.workspace-status { display:flex; align-items:center; gap:7px; font-size:12px; color:#646b76; }
.workspace-status i { width:5px; height:5px; border-radius:50%; background:#39a36a; }
.sidebar-bottom p { margin-top:10px; color:#9a9da6; font-size:12px; line-height:1.8; }
.sidebar-bottom .text-button { display:flex; align-items:center; gap:8px; margin-top:20px; font-size:13px; }
.sidebar-bottom svg { width:14px; height:14px; }
.workspace-main { width:100%; min-width:0; max-width:1500px; margin:0 auto; padding:24px 40px 40px; }
.workspace-topline { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:30px; color:#898e97; font-size:12px; }
.workspace-topline>span>span { margin:0 9px; color:#c1c4cb; }
.refresh-button { display:flex; align-items:center; gap:6px; color:#7b808a; font-size:12px; }
.refresh-button svg { width:13px; height:13px; }
.workspace-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.workspace-heading h1 { margin:0; font-size:32px; font-weight:600; line-height:1.15; letter-spacing:-.045em; }
.workspace-heading p { margin-top:9px; color:#8a8e98; font-size:14px; }
.workspace-button { flex:none; min-height:42px; padding:12px 17px; gap:8px; border-radius:8px; font-size:13px; font-weight:550; }
.workspace-button svg { width:15px; height:15px; }
.workspace-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-bottom:29px; }
.stat-card { padding:18px 20px 15px; border:1px solid #e7e9ed; border-radius:11px; background:white; text-align:left; box-shadow:0 2px 2px #17203502; }
.stat-card:hover { border-color:#ffb49d; }
.stat-label { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#6a707c; font-size:13px; }
.stat-label svg { width:16px; height:16px; color:#a2a6af; }
.stat-card strong { display:flex; align-items:center; justify-content:space-between; margin:12px 0 4px; font-size:32px; font-weight:550; line-height:1.2; letter-spacing:-.04em; }
.stat-arrow { font-size:16px; color:#bbbfc6; }
.stat-card small { color:#9398a2; font-size:11px; }
.stat-card:first-child .stat-label svg { color:#3c9a71; }
.section-label { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:13px; }
.section-label h2 { font-size:14px; font-weight:550; letter-spacing:-.02em; }
.section-label>span { color:#a0a4ae; font-size:12px; }
.planning-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:25px; }
.planning-card { display:flex; align-items:center; gap:12px; padding:18px; min-width:0; border:1px solid #e7e9ed; border-radius:10px; background:white; text-align:left; transition:border-color .15s,transform .15s; }
.planning-card:hover { border-color:#ffa789; transform:translateY(-2px); }
.planning-card strong { display:block; color:#3c424d; font-size:14px; font-weight:550; }
.planning-card small { display:block; margin-top:4px; color:#9297a0; font-size:11px; }
.planning-card>svg { flex:none; width:15px; height:15px; margin-left:auto; color:#b2b6bd; }
.planning-icon { display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:10px; }
.planning-icon svg { width:20px; height:20px; }
.kind-popup { --kind-color:#e46b36; --kind-background:#fff0e6; color:var(--kind-color); background:var(--kind-background); }
.kind-event { --kind-color:#8270c3; --kind-background:#f1edfc; color:var(--kind-color); background:var(--kind-background); }
.kind-special { --kind-color:#3c947d; --kind-background:#e9f5ef; color:var(--kind-color); background:var(--kind-background); }
.workspace-panel { min-width:0; padding:22px; border:1px solid #e7e9ed; border-radius:11px; background:white; box-shadow:0 2px 2px #17203502; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:22px; }
.panel-heading>div { min-width:0; }
.panel-heading h2,.calendar-heading h2 { font-size:14px; font-weight:600; letter-spacing:-.025em; }
.panel-subtitle { margin-top:5px; color:#969ba5; font-size:12px; }
.panel-link { display:flex; align-items:center; gap:6px; color:#7c828d; font-size:12px; white-space:nowrap; }
.panel-link svg { width:13px; height:13px; }
.overview-columns { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; gap:18px; margin-bottom:22px; }
.agenda-list { display:grid; }
.agenda-entry { display:flex; align-items:center; gap:12px; padding:15px 0; border:0; border-bottom:1px solid #f0f1f3; background:none; text-align:left; }
.agenda-entry:first-child { padding-top:0; }
.agenda-entry:last-child { border-bottom:0; padding-bottom:0; }
.agenda-entry:hover .agenda-title>strong { color:var(--orange); }
.date-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; width:43px; height:48px; border:1px solid #eceef1; border-radius:8px; background:#fbfbfc; line-height:1.15; }
.date-tile small { color:#9399a3; font-size:10px; text-transform:uppercase; }
.date-tile strong { margin-top:4px; font-size:18px; font-weight:550; letter-spacing:-.035em; }
.agenda-title { flex:1; min-width:0; }
.agenda-title>strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:550; }
.agenda-title>small { display:block; margin-top:5px; color:#969ba6; font-size:11px; }
.agenda-entry>svg { flex:none; width:13px; height:13px; color:#b6bbc3; }
.status-badge { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:4px 7px; border-radius:5px; background:#f4f5f7; color:#7e8591; font-size:11px; line-height:1.4; font-weight:500; white-space:nowrap; }
.status-badge>span { flex:none; width:4px; height:4px; border-radius:50%; background:currentColor; }
.status-live { color:#328764; background:#ebf6f0; }
.status-scheduled { color:#6d79b4; background:#eff1fb; }
.status-pending { color:#b5842e; background:#fcf5e5; }
.status-rejected { color:#c36243; background:#fff0e9; }
.draft-banner,.attention-banner { display:flex; align-items:center; gap:12px; width:100%; margin-bottom:23px; padding:14px 18px; border:1px solid #e8e2d2; border-radius:9px; background:#fffaf0; text-align:left; color:#8e723b; }
.draft-banner { border-color:#e1e5ef; background:#f0f3fa; color:#637099; }
.draft-banner>svg,.attention-banner>svg { flex:none; width:18px; height:18px; }
.draft-banner>svg:last-child,.attention-banner>svg:last-child { margin-left:auto; }
.draft-banner strong,.attention-banner strong { display:block; font-size:13px; font-weight:550; }
.draft-banner small,.attention-banner small { display:block; margin-top:3px; font-size:12px; opacity:.8; }
.performance-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.performance-card>span { display:flex; align-items:center; gap:6px; color:#848a95; font-size:12px; }
.performance-card svg { width:13px; height:13px; }
.performance-card>strong { display:block; margin-top:9px; font-size:26px; font-weight:550; line-height:1.2; letter-spacing:-.035em; }
.performance-card>small { display:block; margin-top:7px; color:#a0a5ad; font-size:11px; }
.compact-performance .performance-cards { gap:10px; }
.compact-performance .performance-card>span { font-size:10px; gap:4px; }
.compact-performance .performance-card>small { display:none; }
.compact-performance .performance-card svg { width:11px; height:11px; }
.compact-performance .performance-card>strong { font-size:22px; }
.period-select select { max-width:135px; padding:7px 25px 7px 9px; border:1px solid #e7e9ee; border-radius:6px; background:white; color:#7e8591; font-size:12px; cursor:pointer; }
.chart-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:150px; margin-top:18px; padding:16px; border-radius:8px; background:repeating-linear-gradient(to bottom,#fbfcfd 0,#fbfcfd 36px,#f2f3f6 37px,#fbfcfd 38px); text-align:center; }
.chart-empty>svg { width:24px; height:24px; margin-bottom:4px; color:#b4bac5; }
.chart-empty>strong { color:#7e8590; font-size:13px; font-weight:500; }
.chart-empty>p { max-width:240px; color:#a3a8b1; font-size:11px; }
.measurement-note { display:flex; align-items:flex-start; gap:7px; margin-top:14px; color:#959aa4; font-size:11px; line-height:1.7; }
.measurement-note>svg { flex:none; width:13px; height:13px; margin-top:2px; }
.measurement-note .text-button { flex:none; font-size:12px; color:#7f8795; }
.analytics-panel .performance-cards { margin:30px 0; }
.analytics-panel .performance-card>strong { font-size:38px; }
.analytics-panel .chart-empty { min-height:240px; }
.activity-chart { margin-top:28px; }
.chart-bars { display:flex; align-items:flex-end; gap:4px; height:160px; border-bottom:1px solid var(--line); background:repeating-linear-gradient(to top,transparent 0,transparent 39px,#f2f3f5 39px,#f2f3f5 40px); }
.chart-bar { flex:1; height:100%; display:flex; align-items:flex-end; }
.chart-bar>span { width:100%; min-width:1px; background:#ff855b; border-radius:3px 3px 0 0; }
.chart-axis { display:flex; justify-content:space-between; margin-top:8px; color:#9ba1ac; font-size:11px; }
.performance-ranking { margin-top:30px; padding-top:25px; border-top:1px solid var(--line); }
.performance-ranking h3 { margin:0; font-size:14px; font-weight:550; }
.ranking-scroll { overflow:auto; margin-top:20px; }
.performance-ranking table { width:100%; min-width:650px; border-collapse:collapse; font-size:13px; text-align:right; }
.performance-ranking th,.performance-ranking td { padding:14px 12px; border-bottom:1px solid var(--line); }
.performance-ranking thead th { color:#9399a3; font-size:12px; font-weight:400; }
.performance-ranking th:first-child { min-width:180px; text-align:left; }
.performance-ranking .text-button { font-size:13px; text-align:left; }
.performance-ranking th small { display:block; margin-top:4px; color:#969ba4; font-size:11px; font-weight:400; }
.entry-table-head,.workspace-entry { display:grid; grid-template-columns:minmax(180px,2fr) minmax(120px,1fr) minmax(120px,1fr) 60px 30px; align-items:center; column-gap:15px; }
.overview-entries .entry-table-head,.overview-entries .workspace-entry { grid-template-columns:minmax(180px,2fr) minmax(120px,1fr) minmax(120px,1fr) 30px; }
.entry-table-head { padding:0 0 11px; border-bottom:1px solid var(--line); color:#9399a3; font-size:11px; }
.workspace-entry { min-height:76px; padding:14px 0; border-bottom:1px solid #f0f1f3; }
.workspace-entry:last-child { border-bottom:0; padding-bottom:2px; }
.entry-open { display:flex; align-items:center; gap:11px; width:100%; padding:0; border:0; background:none; text-align:left; }
.entry-open>span:last-child { min-width:0; }
.entry-open:hover strong { color:var(--orange); }
.entry-thumb { display:grid; place-items:center; flex:none; width:39px; height:42px; border-radius:7px; overflow:hidden; }
.entry-thumb img { width:100%; height:100%; object-fit:cover; }
.entry-thumb svg { width:20px; height:20px; }
.entry-open strong { display:block; overflow-wrap:anywhere; font-size:13px; font-weight:550; line-height:1.5; }
.entry-open small,.table-date small,.table-status>small { display:block; margin-top:4px; color:#969ca6; font-size:11px; }
.table-date { font-size:12px; }
.table-status>small { font-size:10px; }
.table-metric { text-align:right; font-size:13px; }
.entry-menu { position:relative; }
.entry-menu summary { display:grid; place-items:center; width:28px; height:28px; border-radius:6px; cursor:pointer; list-style:none; color:#989da7; }
.entry-menu summary:hover { background:#f4f5f7; }
.entry-menu summary svg { width:18px; height:18px; }
.entry-menu[open] { z-index:10; }
.workspace-entry:last-child .entry-menu .dropdown { top:auto; bottom:calc(100% + 6px); }
.entries-panel { min-height:300px; }
.workspace-filters { display:flex; flex-wrap:wrap; align-items:center; gap:9px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.workspace-filters>label { min-width:0; }
.workspace-filters select { min-height:37px; max-width:100%; padding:8px 24px 8px 11px; border:1px solid #e4e7ec; border-radius:7px; background:white; color:#747b87; font-size:13px; cursor:pointer; }
.entry-search { display:flex; align-items:center; gap:8px; flex:1; min-width:150px!important; min-height:37px; padding:8px 11px; border:1px solid #e4e7ec; border-radius:7px; }
.entry-search svg { flex:none; width:15px; height:15px; color:#a5aab3; }
.entry-search input { width:100%; min-width:0; padding:0; border:0; outline:0; background:none; font-size:13px; }
.entry-search:focus-within { outline:2px solid var(--orange); outline-offset:2px; }
.entry-search input::placeholder { color:#a5aab3; }
.entry-search input:focus-visible { outline:none; }
.icon-button { display:grid; place-items:center; flex:none; width:33px; height:33px; padding:7px; border:1px solid #e4e7ec; border-radius:7px; background:white; color:#8e95a0; }
.icon-button svg { display:block; width:16px; height:16px; }
.icon-button:hover { color:var(--orange); border-color:#ffb49d; }
.reverse-icon { transform:rotate(180deg); }
.results-summary { display:flex; justify-content:space-between; gap:10px; padding:17px 0; color:#9198a2; font-size:12px; }
.results-summary>span { font-size:11px; color:#abb0b8; }
.workspace-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:210px; padding:30px 15px; text-align:center; }
.workspace-empty>svg { width:28px; height:28px; color:#c0c5ce; }
.workspace-empty h3 { margin:12px 0 7px; color:#646d7b; font-size:14px; font-weight:500; }
.workspace-empty p { max-width:320px; color:#9ca2ad; font-size:13px; line-height:1.7; }
.workspace-empty>button { margin-top:18px; font-size:13px; }
.visibility-guide { display:flex; align-items:flex-start; gap:10px; max-width:660px; margin-top:18px; color:#949ba6; font-size:12px; line-height:1.8; }
.visibility-guide svg { flex:none; width:15px; height:15px; margin-top:2px; }
.visibility-guide strong { font-weight:500; color:#727b89; }
.workspace-updated { display:flex; align-items:center; justify-content:flex-end; gap:5px; margin-top:20px; color:#a1a7b1; font-size:11px; }
.workspace-updated svg { width:12px; height:12px; }
.calendar-panel { padding-bottom:0; }
.calendar-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:20px 0; }
.month-controls { display:flex; align-items:center; gap:7px; }
.month-controls h2 { min-width:155px; margin-right:15px; }
.outline-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:33px; padding:7px 11px; border:1px solid #e4e7ec; border-radius:7px; background:white; color:#747d8b; font-size:12px; }
.outline-button svg { width:14px; height:14px; }
.outline-button:hover { border-color:#ffb49d; color:var(--orange); }
.today-button { margin-left:5px; }
.calendar-timezone { color:#a1a7b1; font-size:11px; }
.calendar-scroll { position:relative; overflow-x:auto; border:1px solid var(--line); border-radius:8px; }
.calendar-mobile-dots { display:none; }
.calendar-grid { min-width:630px; }
.calendar-weekdays { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); padding:10px 0; border-bottom:1px solid var(--line); background:#fbfcfd; color:#9a9fac; font-size:12px; }
.calendar-weekdays span { padding-left:12px; }
.calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.calendar-day { min-width:0; min-height:105px; padding:7px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.calendar-day:nth-child(7n) { border-right:0; }
.calendar-day:nth-last-child(-n+7) { border-bottom:0; }
.calendar-date { display:grid; place-items:center; width:25px; height:25px; padding:0; margin:0 0 6px; border:0; border-radius:6px; background:none; color:#89919f; font-size:12px; }
.calendar-date:hover { background:#fff0e9; }
.other-month { background:#fcfcfd; }
.other-month .calendar-date { color:#c6cbd4; }
.is-today .calendar-date { background:#ffede5; color:var(--orange); font-weight:600; }
.is-selected { background:#fffaf7; box-shadow:inset 0 0 0 1.5px #ff9b77; }
.is-selected .calendar-date { background:var(--orange); color:white; }
.calendar-chips { display:grid; gap:4px; }
.calendar-chip { display:block; width:100%; min-width:0; padding:5px 6px; border:0; border-radius:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; font-size:10px; }
.calendar-chip>span { display:inline-block; width:3px; height:3px; margin-right:4px; border-radius:50%; background:currentColor; vertical-align:middle; }
.calendar-chip.is-archived { color:#9da4b0; background:#f0f2f5; }
.calendar-chip:hover { outline:1px solid currentColor; }
.calendar-more { padding:0 4px; border:0; background:none; text-align:left; color:#8e97a5; font-size:10px; }
.calendar-legend { display:flex; flex-wrap:wrap; align-items:center; gap:17px; margin:14px 0 22px; color:#9ba2ac; font-size:11px; }
.calendar-legend>span:last-child { margin-left:auto; font-size:10px; }
.legend-popup::before,.legend-event::before,.legend-special::before { content:''; display:inline-block; width:5px; height:5px; margin-right:6px; border-radius:2px; background:#e46b36; }
.legend-event::before { background:#8270c3; }
.legend-special::before { background:#3c947d; }
.day-agenda { margin:0 -22px; padding:22px; border-top:1px solid var(--line); }
.day-agenda .workspace-empty { min-height:150px; }
.dashboard-dialog { width:min(430px,calc(100% - 32px)); padding:28px; border:1px solid #e4e7ec; border-radius:16px; box-shadow:0 20px 70px #17203520; }
.dashboard-dialog::backdrop { background:#171d2c55; backdrop-filter:blur(3px); }
.dashboard-dialog h2 { font-size:21px; font-weight:550; line-height:1.25; letter-spacing:-.03em; }
.dashboard-dialog p { margin-top:14px; color:#818996; font-size:14px; line-height:1.8; }
.dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:25px; }
.dialog-actions .button { min-height:38px; gap:8px; padding:11px 16px; border-radius:7px; font-size:13px; }
.workspace-mode .flow { background:white; }
.workspace-preview-label { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid #f0d8b7; border-radius:5px; background:#fff9ee; color:#af8244; font-size:11px; }
@media(min-width:1650px) { .workspace-main { padding-top:32px; } .workspace-heading h1 { font-size:38px; } .workspace-heading p { font-size:14px; } .stat-label { font-size:14px; } .stat-card small { font-size:13px; } .panel-heading h2 { font-size:17px; } .panel-subtitle { font-size:14px; } .entry-open strong { font-size:14px; } .agenda-title>strong { font-size:14px; } .workspace-entry { min-height:85px; } }
@media(max-width:1200px) { .workspace-main { padding:24px 25px 35px; } .workspace-layout { grid-template-columns:180px minmax(0,1fr); } .workspace-sidebar { padding-inline:12px; } .overview-columns { grid-template-columns:1fr; } .compact-performance .performance-card>span { font-size:13px; } .compact-performance .performance-card>small { display:block; } .compact-performance .chart-empty { min-height:130px; } .planning-card { padding:15px 12px; gap:9px; } .planning-icon { width:32px; height:34px; } .planning-card small { font-size:10px; } }
@media(max-width:950px) { .workspace-layout { grid-template-columns:70px minmax(0,1fr); } .workspace-sidebar { padding:30px 10px; } .sidebar-label,.sidebar-bottom,.sidebar-item>span,.sidebar-item small { display:none; } .sidebar-item { justify-content:center; padding:12px; } .sidebar-item>svg { width:20px; height:20px; } .planning-card small { display:none; } .planning-card strong { font-size:13px; } .planning-card>svg { display:none; } .workspace-stats { gap:10px; } .stat-card { padding:16px 13px; } .stat-card small { font-size:10px; } .workspace-panel { padding:18px; } .day-agenda { margin-inline:-18px; padding:18px; } .entry-table-head,.workspace-entry { grid-template-columns:minmax(160px,2fr) minmax(105px,1fr) minmax(110px,1fr) 30px; gap:10px; } .entry-table .table-metric { display:none; } }
@media(max-width:700px) {
  .workspace-mode .portal-header { height:68px; padding:0 20px; gap:10px; }
  .workspace-mode .portal-brand img { width:116px; }
  .workspace-mode .portal-brand::after { display:none; }
  .account-identity { max-width:125px; }
  .account-identity strong { font-size:13px; }
  .account-identity small { font-size:11px; }
  .account-menu summary { gap:8px; }
  .account-menu summary>svg { margin-left:3px; width:12px; height:12px; }
  .account-menu .profile-avatar { width:32px; height:32px; }
  .workspace-layout { display:block; min-height:calc(100vh - 68px); }
  .workspace-sidebar { padding:0 15px; border-right:0; border-bottom:1px solid var(--line); background:#fff; }
  .workspace-sidebar nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .sidebar-item { flex-direction:column; gap:5px; min-height:63px; padding:12px 3px 10px; border-radius:0; font-size:11px; }
  .sidebar-item.is-active { background:none; box-shadow:inset 0 -2px var(--orange); }
  .sidebar-item>span { display:block; }
  .sidebar-item>svg { width:17px; height:17px; }
  .workspace-main { padding:20px 18px 35px; }
  .workspace-topline { margin-bottom:21px; font-size:11px; }
  .workspace-heading { gap:10px; align-items:flex-start; margin-bottom:21px; }
  .workspace-heading h1 { font-size:27px; }
  .workspace-heading p { max-width:200px; font-size:13px; line-height:1.65; margin-top:7px; }
  .workspace-heading>.button { font-size:0; min-width:39px; min-height:39px; width:39px; height:39px; padding:10px; }
  .workspace-heading>.button svg { width:20px; height:20px; }
  .workspace-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:24px; }
  .stat-card { padding:16px; }
  .stat-label { font-size:12px; }
  .stat-card strong { font-size:29px; margin-top:10px; }
  .stat-card small { font-size:10px; }
  .section-label h2 { font-size:14px; }
  .section-label>span { display:none; }
  .planning-cards { grid-template-columns:1fr; gap:8px; margin-bottom:20px; }
  .planning-card { padding:13px; gap:12px; }
  .planning-card>svg,.planning-card small { display:block; }
  .planning-card small { margin-top:3px; font-size:11px; }
  .planning-card strong { font-size:14px; }
  .planning-icon { width:34px; height:34px; }
  .workspace-panel { padding:17px; }
  .panel-heading { align-items:flex-start; gap:10px; margin-bottom:20px; }
  .panel-heading h2 { font-size:14px; }
  .panel-subtitle { font-size:11px; line-height:1.65; }
  .panel-link { font-size:11px; }
  .overview-columns { gap:16px; margin-bottom:16px; }
  .agenda-entry { gap:10px; }
  .agenda-entry>.status-badge { font-size:10px; padding:4px 5px; }
  .agenda-entry>svg { display:none; }
  .agenda-title>strong { font-size:13px; }
  .agenda-title>small { font-size:10px; line-height:1.6; }
  .date-tile { width:36px; height:43px; }
  .entry-table-head { display:none; }
  .workspace-entry,.overview-entries .workspace-entry { position:relative; grid-template-columns:minmax(0,1fr) auto; row-gap:6px; column-gap:9px; padding:15px 0; }
  .table-title { grid-column:1; grid-row:1; }
  .table-date { grid-column:1; grid-row:2; padding-left:47px; color:#969ca6; font-size:10px; }
  .table-date>span,.table-date>small { display:inline; font-size:10px; margin:0 5px 0 0; }
  .table-status { grid-column:2; grid-row:1; text-align:right; max-width:105px; }
  .table-status .status-badge { font-size:10px; }
  .table-status>small { max-width:90px; margin-left:auto; white-space:normal; font-size:9px; }
  .table-actions { grid-column:2; grid-row:2; justify-self:end; }
  .entry-thumb { width:36px; height:40px; }
  .entry-open { gap:11px; }
  .entry-open strong { font-size:12px; }
  .entry-open small { font-size:10px; }
  .entry-menu summary { height:24px; }
  .workspace-filters { gap:8px; padding-bottom:15px; }
  .entry-search { flex-basis:100%; }
  .workspace-filters select { font-size:12px; max-width:130px; min-height:36px; padding:8px 20px 8px 8px; }
  .sort-select { flex:1 0 140px; min-width:120px!important; }
  .sort-select select { width:100%; max-width:none; }
  .workspace-filters .icon-button { width:30px; height:34px; }
  .results-summary { font-size:11px; flex-wrap:wrap; }
  .results-summary>span { font-size:10px; }
  .performance-cards { gap:20px 12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .compact-performance .performance-card>span { font-size:12px; }
  .compact-performance .performance-card>small { font-size:10px; }
  .analytics-panel .performance-card>strong { font-size:30px; }
  .analytics-panel .performance-card>small { font-size:10px; }
  .measurement-note { font-size:11px; }
  .period-select select { max-width:122px; font-size:11px; }
  .calendar-heading { flex-wrap:wrap; gap:9px; }
  .month-controls { flex:1; flex-wrap:wrap; }
  .month-controls h2 { font-size:14px; min-width:0; margin-right:auto; }
  .month-controls .icon-button { width:28px; height:28px; padding:5px; }
  .month-controls .today-button { min-height:28px; padding:5px 8px; font-size:11px; margin-left:0; }
  .calendar-timezone { width:100%; font-size:10px; }
  .calendar-grid { min-width:0; }
  .calendar-weekdays span { padding-left:0; text-align:center; font-size:10px; }
  .calendar-day { min-height:61px; padding:3px; }
  .calendar-date { position:relative; width:100%; height:54px; margin:0; align-items:start; padding-top:8px; font-size:12px; }
  .calendar-chips { display:none; }
  .calendar-mobile-dots { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:3px; }
  .calendar-mobile-dots i { width:4px; height:4px; border-radius:50%; background:var(--kind-color,#8f98a6); }
  .is-selected .calendar-mobile-dots i { background:white; }
  .calendar-legend { font-size:10px; gap:13px; margin-bottom:16px; }
  .calendar-legend>span:last-child { width:100%; margin-left:0; font-size:10px; }
  .day-agenda { margin-inline:-17px; padding:17px; }
  .day-agenda .panel-heading { display:block; }
  .day-agenda .outline-button { margin-top:14px; font-size:11px; }
  .workspace-updated { margin-top:16px; font-size:10px; }
  .draft-banner,.attention-banner { padding:12px; gap:10px; }
  .draft-banner strong,.attention-banner strong { font-size:12px; }
  .draft-banner small,.attention-banner small { font-size:11px; }
  .workspace-preview-label { max-width:105px; font-size:10px; }
  .workspace-preview-label { position:fixed; bottom:8px; left:8px; z-index:50; max-width:none; font-size:9px; box-shadow:0 2px 10px #17203512; }
  .workspace-heading>.button { width:44px; height:44px; min-width:44px; min-height:44px; }
  .entry-menu summary { width:38px; height:38px; }
}
@media(prefers-reduced-motion:reduce) { .planning-card { transition:none; } }

/* Keep supporting information readable on the light workspace surface. */
.workspace-heading p,.panel-subtitle,.stat-card small,.planning-card small,.agenda-title>small,.entry-open small,.table-date small,.table-status>small,.performance-card>small,.measurement-note,.workspace-topline,.section-label>span,.results-summary,.results-summary>span,.calendar-timezone,.calendar-legend,.visibility-guide,.workspace-updated,.account-identity small,.chart-empty>p,.chart-empty>strong,.sidebar-bottom p { color:#687382; }

/* A quiet planning area follows the same choices and spacing as onboarding. */
.workspace-mode { background:#fff; --muted:#737373; --line:#ecece9; }
.workspace-mode .portal-header { max-width:1120px; height:88px; padding:0 36px; margin:auto; }
.workspace-mode .portal-brand img { width:150px; }
.workspace-mode .portal-brand::after { display:none; }
.account-identity strong { font-size:14px; }
.account-identity small { font-size:11px; }
.simple-workspace { max-width:1000px; padding:0 36px 100px; margin:auto; }
.simple-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:38px; border-bottom:1px solid var(--line); }
.simple-navigation { display:flex; gap:34px; align-items:center; height:80px; }
.simple-navigation>button { align-self:stretch; padding:0 2px; border:0; border-bottom:2px solid transparent; background:none; color:#777; font-size:16px; font-weight:500; }
.simple-navigation>button[aria-current] { color:var(--ink); border-bottom-color:var(--orange); }
.simple-navigation>button:hover { color:var(--orange); }
.simple-workspace h1 { max-width:650px; font-size:40px; font-weight:550; letter-spacing:-.04em; line-height:1.15; }
.simple-intro { max-width:580px; margin:16px 0 30px; color:#777; font-size:16px; line-height:1.7; }
.planning-create-button { display:inline-flex; flex:none; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:10px 19px; border:1px solid var(--orange); border-radius:999px; background:var(--orange); color:#fff; font-size:15px; font-weight:650; line-height:1.25; letter-spacing:-.02em; transition:background .15s,box-shadow .15s; }
.planning-create-button>span { font-size:24px; font-weight:400; line-height:1; }
.planning-create-button:hover { background:#df3100; border-color:#df3100; box-shadow:0 4px 14px #ff3c0026; }
.simple-resume { display:flex; align-items:center; gap:15px; width:100%; margin-top:24px; padding:18px 20px; border:1px solid #eadbca; border-radius:13px; background:#fffaf3; text-align:left; }
.simple-resume>svg { flex:none; width:20px; height:20px; color:#a78350; }
.simple-resume>svg:last-child { margin-left:auto; }
.simple-resume strong { display:block; font-size:14px; font-weight:500; }
.simple-resume small { display:block; margin-top:5px; color:#8a7e6a; font-size:12px; }
.planning-section { margin-top:0; }
.simple-resume+.planning-section { margin-top:32px; }
.planning-section-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.planning-section-heading>h1 { font-size:30px; font-weight:550; letter-spacing:-.035em; }
.planning-browse-controls { display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.planning-view-switch { display:flex; gap:3px; padding:4px; border:1px solid var(--line); border-radius:99px; }
.planning-view-switch button { display:flex; align-items:center; gap:7px; min-height:36px; padding:8px 14px; border:0; border-radius:99px; background:none; color:#777; font-size:13px; }
.planning-view-switch svg { width:15px; height:15px; }
.planning-view-switch button[aria-pressed="true"] { background:#f2f2ef; color:var(--ink); }
.planning-group-tabs { display:flex; align-items:center; gap:26px; }
.planning-group-tabs button { min-height:48px; padding:0 0 12px; border:0; border-bottom:2px solid transparent; background:none; font-size:14px; color:#777; white-space:nowrap; }
.planning-group-tabs button[aria-pressed="true"] { color:var(--ink); border-bottom-color:var(--ink); font-weight:500; }
.planning-filter { padding:16px 0; font-size:13px; color:#777; }
.planning-filter summary { display:flex; align-items:center; gap:8px; width:max-content; padding:7px 0; cursor:pointer; list-style:none; }
.planning-filter summary::-webkit-details-marker { display:none; }
.planning-filter summary svg { width:16px; height:16px; }
.planning-filter-fields { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:12px 0; }
.planning-filter .entry-search { flex:1; min-width:180px; padding:12px 14px; border-color:#dededb; border-radius:10px; }
.planning-filter .entry-search input { font-size:14px; }
.planning-filter select { width:100%; min-height:46px; padding:11px 15px; border:1px solid #dededb; border-radius:10px; background:white; color:var(--ink); font-size:14px; }
.planning-filter .text-button { font-size:13px; }
.planning-list { border-top:1px solid var(--line); }
.planning-item { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:26px 0; border-bottom:1px solid var(--line); }
.planning-item-main { display:flex; align-items:flex-start; gap:18px; min-width:0; }
.planning-item .entry-thumb { width:62px; height:74px; border-radius:11px; margin-top:4px; }
.planning-item .entry-thumb svg { width:26px; height:26px; }
.planning-item-copy { min-width:0; }
.planning-kind { color:#777; font-size:12px; }
.planning-item h3 { margin:3px 0 9px; font-size:18px; font-weight:550; line-height:1.4; letter-spacing:-.02em; overflow-wrap:anywhere; }
.planning-date { display:flex; align-items:center; gap:6px; margin-bottom:11px; color:#666; font-size:13px; line-height:1.7; }
.planning-date svg { flex:none; width:14px; height:14px; }
.planning-hint { max-width:490px; margin-top:9px; color:#777; font-size:12px; line-height:1.7; }
.simple-workspace .status-badge { font-size:12px; padding:5px 8px; border-radius:5px; }
.planning-item-actions { display:flex; flex:none; align-items:center; gap:8px; }
.simple-workspace .outline-button { min-height:44px; padding:11px 17px; border:1px solid #dededb; border-radius:99px; font-size:13px; color:var(--ink); }
.simple-workspace .entry-menu summary { width:40px; height:44px; }
.simple-workspace .dropdown { width:210px; }
.simple-workspace .dropdown button { min-height:46px; font-size:14px; }
.simple-workspace .planning-item:last-child .dropdown { top:auto; bottom:calc(100% + 6px); }
.simple-workspace .workspace-empty { min-height:220px; padding:35px 20px; }
.simple-workspace .workspace-empty h3 { font-size:18px; color:#555; }
.simple-workspace .workspace-empty p { max-width:430px; font-size:14px; color:#777; }
.simple-workspace .workspace-empty>svg { width:28px; height:28px; }
.simple-analytics .analytics-panel { margin-top:38px; }
.simple-analytics .panel-heading h2 { font-size:20px; }
.simple-analytics .panel-subtitle { font-size:14px; }
.simple-analytics .period-select select { min-height:44px; font-size:13px; max-width:170px; }
.simple-analytics .measurement-note { font-size:12px; }
.simple-analytics .performance-card>span { font-size:14px; }
.simple-analytics .performance-card>small { font-size:12px; }
.simple-analytics .chart-empty>strong { font-size:16px; }
.simple-analytics .chart-empty>p { font-size:14px; }
.analytics-unavailable { padding:32px; border:1px solid var(--line); border-radius:16px; background:#fafaf8; }
.analytics-unavailable>svg { width:29px; height:29px; margin-bottom:20px; color:#999; }
.analytics-unavailable h2 { font-size:23px; font-weight:550; line-height:1.3; letter-spacing:-.025em; }
.analytics-unavailable p { max-width:630px; margin-top:12px; color:#777; font-size:15px; line-height:1.8; }
.analytics-unavailable button { margin-top:20px; }
.follower-summary { display:flex; gap:16px; align-items:center; margin-top:30px; padding:5px 0; font-size:18px; }
.follower-summary>svg { width:25px; height:25px; color:#777; }
.follower-summary strong { font-size:24px; font-weight:550; }
.follower-summary small { display:block; margin-top:4px; color:#777; font-size:13px; }
.entry-step-label { margin:5px 0 12px; color:#777; font-size:13px; }
.entry-flow .progress { margin-bottom:30px; }
.entry-flow .review-note { margin:0 0 25px; }
.simple-workspace .calendar-heading { margin:12px 0 22px; }
.simple-workspace .month-controls h2 { min-width:180px; font-size:20px; }
.simple-workspace .calendar-date { font-size:13px; }
.simple-workspace .calendar-chip { font-size:11px; }
.simple-workspace .calendar-weekdays { font-size:13px; }
.simple-workspace .calendar-legend { font-size:12px; }
.simple-workspace .calendar-legend>span:last-child { display:none; }
.simple-workspace .day-agenda { margin:0; padding:24px 0; }
.simple-workspace .day-agenda h2 { font-size:20px; }
.simple-workspace .day-agenda .panel-subtitle { font-size:13px; }
.simple-workspace .agenda-title>strong { font-size:15px; }
.simple-workspace .agenda-title>small { font-size:12px; }
.simple-workspace .agenda-entry { width:100%; min-width:0; padding:18px 0; }
.simple-workspace .calendar-timezone { font-size:11px; }
.workspace-preview-label { font-size:10px; }
@media(max-width:760px) {
  .workspace-mode .portal-header { height:76px; padding:0 24px; }
  .workspace-mode .portal-brand img { width:125px; }
  .workspace-mode .account-identity { max-width:130px; }
  .simple-workspace { padding:0 24px 70px; }
  .simple-toolbar { flex-wrap:wrap; gap:0; margin-bottom:28px; }
  .simple-navigation { order:2; width:100%; height:64px; gap:28px; }
  .simple-navigation>button { font-size:15px; }
  .simple-workspace h1 { font-size:34px; }
  .simple-intro { font-size:15px; margin:15px 0 25px; }
  .planning-section-heading { gap:12px; margin-bottom:20px; }
  .planning-section-heading>h1 { font-size:26px; }
  .planning-browse-controls { flex-wrap:wrap; gap:12px; }
  .planning-group-tabs { order:2; width:100%; }
  .planning-view-switch button { padding:7px 10px; font-size:12px; min-height:35px; }
  .planning-view-switch svg { width:13px; height:13px; }
  .planning-group-tabs { gap:24px; }
  .planning-group-tabs button { font-size:13px; min-height:48px; }
  .planning-filter-fields>.entry-search { flex-basis:100%; }
  .planning-item { display:block; padding:24px 0; }
  .planning-item-main { gap:14px; }
  .planning-item .entry-thumb { width:52px; height:64px; }
  .planning-item h3 { font-size:17px; }
  .planning-date { font-size:12px; }
  .planning-hint { font-size:12px; }
  .planning-item-actions { margin:17px 0 0 66px; }
  .simple-workspace .status-badge { font-size:11px; }
  .simple-workspace .outline-button { font-size:13px; }
  .analytics-unavailable { padding:24px; }
  .analytics-unavailable h2 { font-size:21px; }
  .analytics-unavailable p { font-size:14px; }
  .simple-analytics .performance-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .simple-workspace .month-controls h2 { min-width:0; font-size:17px; }
  .simple-workspace .day-agenda .panel-heading { display:block; }
  .simple-workspace .day-agenda .outline-button { margin-top:16px; }
  .simple-workspace .agenda-title>strong { font-size:13px; }
  .simple-workspace .agenda-title>small { font-size:11px; }
  .simple-workspace .agenda-entry>.status-badge { font-size:10px; }
  .simple-workspace .calendar-grid { min-width:0; }
  .simple-workspace .calendar-chips { display:none; }
  .simple-workspace .calendar-mobile-dots { display:flex; }
}
@media(max-width:420px) {
  .workspace-mode .portal-header { padding:0 20px; }
  .workspace-mode .portal-brand img { width:116px; }
  .simple-workspace { padding-inline:20px; }
  .simple-workspace h1 { font-size:32px; }
  .planning-section-heading>h1 { font-size:24px; }
  .planning-create-button { gap:6px; padding-inline:14px; font-size:14px; }
  .planning-group-tabs { gap:20px; }
  .planning-group-tabs button { font-size:12px; }
}

/* Profile settings use the same focused, spacious layout as onboarding. */
.simple-spot { width:100%; max-width:680px; min-width:0; margin:0 auto; }
.simple-spot h1 { overflow-wrap:anywhere; }
.simple-spot .simple-intro { max-width:590px; }
.spot-preview { overflow:hidden; margin:30px 0 34px; border:1px solid var(--line); border-radius:18px; background:var(--spot-background,#fff); color:var(--spot-foreground,var(--ink)); }
.spot-preview-cover { height:132px; overflow:hidden; background:#f3f3ef; }
.spot-preview-cover>img { width:100%; height:100%; object-fit:cover; }
.spot-preview-cover>span { display:flex; align-items:center; justify-content:center; gap:9px; height:100%; color:#85857e; }
.spot-preview-cover svg { width:21px; height:21px; }
.spot-preview-cover small { font-size:13px; }
.spot-preview-identity { display:flex; align-items:center; gap:17px; min-width:0; padding:22px 25px; }
.spot-preview-identity>div { min-width:0; overflow-wrap:anywhere; }
.spot-preview-identity strong { display:block; font-size:21px; font-weight:550; letter-spacing:-.025em; line-height:1.35; }
.spot-preview-identity>div>span { display:block; margin-top:3px; font-size:13px; opacity:.75; }
.spot-preview-identity p { margin-top:8px; font-size:14px; line-height:1.5; }
.spot-avatar { display:grid; place-items:center; flex:none; overflow:hidden; width:64px; height:64px; border:1px solid #0000000c; border-radius:50%; background:#f2f0e9; color:#777369; }
.spot-avatar>img { width:100%; height:100%; object-fit:cover; }
.spot-avatar>span { font-size:27px; font-weight:500; line-height:1; }
.spot-avatar.is-large { width:104px; height:104px; }
.spot-avatar.is-large>span { font-size:43px; }
.spot-settings { border-top:1px solid var(--line); }
.spot-settings>button { display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; min-width:0; min-height:88px; padding:21px 4px; border:0; border-bottom:1px solid var(--line); background:none; text-align:left; }
.spot-settings>button>span { display:flex; align-items:center; gap:18px; min-width:0; }
.spot-settings>button>span>span { min-width:0; overflow-wrap:anywhere; }
.spot-settings>button>span>svg { flex:none; width:22px; height:22px; color:#777; }
.spot-settings>button>svg { flex:none; width:17px; height:17px; color:#999; }
.spot-settings strong { display:block; font-size:16px; font-weight:500; line-height:1.5; }
.spot-settings small { display:block; margin-top:4px; color:#777; font-size:13px; line-height:1.6; }
.spot-settings>button:hover strong,.spot-settings>button:hover>svg { color:var(--orange); }
.spot-color-dot { flex:none; width:22px; height:22px; border:1px solid #00000020; border-radius:50%; }
.spot-editor { max-width:660px; }
.spot-back { display:inline-flex; align-items:center; min-height:40px; margin:0 0 24px; color:#777; font-size:14px; }
.spot-editor .simple-intro { margin-bottom:36px; }
.spot-editor form { min-width:0; }
.spot-editor .field { margin-bottom:26px; }
.spot-editor .field textarea { min-height:104px; }
.spot-form-actions,.spot-crop-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:36px; padding-top:25px; border-top:1px solid var(--line); }
.spot-form-actions .button,.spot-crop-actions .button { min-width:0; max-width:100%; gap:22px; }
.spot-form-actions>.text-button,.spot-crop-actions>.text-button { min-height:44px; color:#777; }
.spot-picture-setting { margin:0 0 30px; padding:0 0 30px; border-bottom:1px solid var(--line); }
.spot-picture-setting h2,.spot-crop-editor h2 { margin:0; font-size:19px; font-weight:550; letter-spacing:-.025em; }
.spot-picture-setting>div>p,.spot-crop-editor>p { margin-top:8px; color:#777; font-size:14px; line-height:1.7; }
.spot-avatar-picker { display:flex; align-items:center; gap:25px; margin-top:24px; }
.spot-avatar-picker>div { display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-width:0; }
.spot-remove { min-height:32px; color:#777; font-size:13px; }
.spot-cover-picker { display:grid; place-items:center; width:100%; aspect-ratio:16/9; margin-top:23px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#f7f7f3; }
.spot-cover-picker>img { width:100%; height:100%; object-fit:cover; }
.spot-cover-picker>span { display:flex; align-items:center; justify-content:center; gap:9px; padding:20px; color:#85857e; font-size:13px; line-height:1.6; text-align:center; }
.spot-cover-picker svg { flex:none; width:20px; height:20px; }
.spot-cover-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:18px; }
.spot-crop-editor { min-width:0; }
.spot-crop-editor canvas { display:block; max-width:100%; height:auto; margin:26px auto; border:1px solid var(--line); background:#f5f5f1; touch-action:none; cursor:grab; }
.spot-crop-editor canvas:active { cursor:grabbing; }
.spot-crop-editor .avatar-crop { width:280px; aspect-ratio:1; border-radius:50%; }
.spot-crop-editor .cover-crop { width:100%; aspect-ratio:16/9; border-radius:14px; }
.spot-zoom { display:flex; align-items:center; gap:20px; max-width:420px; margin:0 auto 12px; color:#777; font-size:13px; }
.spot-zoom input { flex:1; min-width:0; min-height:32px; margin:0; accent-color:var(--orange); }
.spot-crop-editor>.field-note { max-width:420px; margin:0 auto; font-size:12px; }
.spot-color-preview { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:204px; padding:28px; border:1px solid #0000000d; border-radius:17px; text-align:center; overflow-wrap:anywhere; }
.spot-color-preview .spot-avatar { width:58px; height:58px; }
.spot-color-preview strong { max-width:100%; font-size:23px; font-weight:550; line-height:1.35; letter-spacing:-.025em; }
.spot-color-preview>span { max-width:100%; font-size:13px; opacity:.8; }
.spot-palette { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px 12px; margin:28px 0; }
.spot-palette>button { display:flex; flex-direction:column; gap:7px; min-width:0; padding:6px; border:1px solid transparent; border-radius:12px; background:none; text-align:center; }
.spot-palette>button>span { display:grid; place-items:center; width:100%; height:67px; border:1px solid #0000000b; border-radius:8px; font-size:26px; font-weight:550; letter-spacing:-.035em; }
.spot-palette small { width:100%; color:#73736d; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.spot-palette>button:hover { border-color:#d6d6d0; background:#fafaf7; }
.spot-palette>button[aria-pressed="true"] { border-color:var(--orange); background:#fff8f4; box-shadow:0 0 0 1px var(--orange); }
.spot-palette>button[aria-pressed="true"] small { color:var(--ink); }
.spot-custom-colors { padding:19px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.spot-custom-colors summary { width:fit-content; max-width:100%; padding:4px 0; color:#555; font-size:14px; cursor:pointer; }
.spot-color-inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:22px 0; }
.spot-color-inputs label { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; color:#666; font-size:14px; }
.spot-color-inputs input { flex:none; width:52px; height:44px; padding:3px; border:1px solid #dededb; border-radius:9px; background:white; cursor:pointer; }
.spot-color-inputs input:disabled { cursor:default; }
.spot-auto-color { display:flex; align-items:center; gap:10px; color:#666; font-size:13px; line-height:1.6; }
.spot-auto-color input { flex:none; width:18px; height:18px; margin:0; accent-color:var(--orange); }
.spot-color-scope { display:flex; align-items:flex-start; gap:9px; margin-top:22px; color:#777; font-size:13px; line-height:1.75; }
.spot-color-scope svg { flex:none; width:17px; height:17px; margin-top:3px; }
@media(max-width:760px) {
  .spot-preview { margin:25px 0 27px; border-radius:15px; }
  .spot-preview-cover { height:112px; }
  .spot-preview-identity { gap:14px; padding:19px; }
  .spot-preview-identity strong { font-size:19px; }
  .spot-preview-identity p { font-size:13px; }
  .spot-avatar { width:56px; height:56px; }
  .spot-settings>button { gap:15px; min-height:86px; padding:20px 2px; }
  .spot-settings>button>span { gap:15px; }
  .spot-settings strong { font-size:15px; }
  .spot-settings small { font-size:12px; }
  .spot-back { margin-bottom:20px; }
  .spot-editor .simple-intro { margin-bottom:30px; }
  .spot-avatar-picker { gap:20px; }
  .spot-avatar.is-large { width:90px; height:90px; }
  .spot-cover-picker>span { flex-direction:column; }
  .spot-color-preview { min-height:190px; padding:25px 20px; }
  .spot-palette { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 8px; margin:24px 0; }
  .spot-palette>button { gap:6px; padding:4px; border-radius:10px; }
  .spot-palette>button>span { height:58px; font-size:24px; }
  .spot-palette small { font-size:11px; }
  .spot-color-inputs { gap:14px; }
  .spot-color-inputs label { gap:8px; font-size:13px; }
  .spot-color-inputs input { width:42px; height:40px; }
}
@media(max-width:480px) {
  .spot-preview-cover { height:96px; }
  .spot-preview-identity { padding:17px; }
  .spot-preview-identity strong { font-size:18px; }
  .spot-preview-identity>div>span { font-size:12px; }
  .spot-form-actions,.spot-crop-actions { flex-direction:column-reverse; align-items:stretch; gap:12px; margin-top:30px; padding-top:22px; }
  .spot-form-actions .button,.spot-crop-actions .button { width:100%; gap:16px; padding-inline:18px; font-size:13px; }
  .spot-form-actions>.text-button,.spot-crop-actions>.text-button { align-self:center; padding:9px 12px; }
  .spot-avatar-picker { gap:17px; }
  .spot-avatar-picker .upload-button { padding:11px 15px; font-size:13px; }
  .spot-crop-editor .avatar-crop { width:min(260px,100%); }
  .spot-zoom { gap:14px; }
  .spot-color-inputs { gap:12px; }
  .spot-color-inputs label { flex-direction:column; align-items:flex-start; gap:8px; }
}