:root { --canvas: #f6f2eb; --paper: #fffdfa; --ink: #24221e; --muted: #8c887e; --line: #e8e2d9; --accent: #e66e4f; --accent-dark: #c8553b; --lavender: #ddd5fb; --mint: #cde9d9; --peach: #ffe0ce; --blue: #d6e7f5; --sidebar: #252622; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: Manrope, sans-serif; font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; color: inherit; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 18% 16%, #f3d7c4 0, transparent 29%), radial-gradient(circle at 83% 72%, #d9def5 0, transparent 28%), var(--canvas); }
.auth-card { width: min(420px, 100%); background: #fffdfaee; border: 1px solid #eee4d8; border-radius: 14px; padding: 38px; box-shadow: 0 18px 55px #6e5d4b18; }
.auth-brand { font-size: 18px; font-weight: 800; letter-spacing: -.7px; margin-bottom: 62px; }.auth-brand span:last-child { color: var(--accent); }.auth-card h1 { font-size: 28px; letter-spacing: -1.2px; line-height: 1.13; margin: 0; }.auth-subtitle { color: #979188; font-size: 12px; line-height: 1.55; margin: 11px 0 26px; }.auth-card label { display: block; font-size: 10px; font-weight: 700; color: #6f6a61; margin: 0 0 14px; }.auth-card input { width: 100%; display: block; margin-top: 7px; border: 1px solid var(--line); border-radius: 6px; padding: 12px; outline: 0; background: #fffdfa; font-size: 11px; }.auth-card input:focus { border-color: #df9b85; box-shadow: 0 0 0 3px #f3d7cb66; }.auth-submit { width: 100%; margin-top: 7px; padding: 13px; }.auth-error { min-height: 15px; color: #b65f4c; font-size: 10px; margin: 12px 0 0; text-align: center; }.empty-state { padding: 35px; text-align: center; color: #aaa49b; background: var(--paper); border: 1px dashed var(--line); border-radius: 8px; font-size: 11px; }
.app-shell { display: flex; min-height: 100vh; }
.app-shell[hidden], .auth-screen[hidden] { display: none; }
.sidebar { width: 240px; background: var(--sidebar); color: #f6f1e9; padding: 27px 16px 17px; display: flex; flex-direction: column; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; letter-spacing: -.7px; padding: 0 10px 29px; }
.brand-mark { color: #f4a16b; font-size: 23px; transform: rotate(15deg); }.brand-accent { color: #eb8161; }
.workspace-switcher { display: flex; align-items: center; gap: 9px; padding: 9px; border: 1px solid #41423c; border-radius: 10px; margin-bottom: 28px; }.workspace-switcher strong,.workspace-switcher span { display:block; }.workspace-switcher strong { font-size: 11px; }.workspace-switcher span:not(.chevron) { color: #898a82; font-size: 9px; margin-top: 3px; }.workspace-avatar { width: 30px; height: 30px; background: #e6a37e; color: #32251d; border-radius: 8px; display:grid; place-items:center; font: 500 10px 'DM Mono'; }.chevron { margin-left:auto; color:#8e9087; font-size:17px; }
.nav-label { color:#85877e; font: 500 10px 'DM Mono'; text-transform: uppercase; letter-spacing:1px; margin: 0 10px 9px; }.nav-label-spaced { margin-top: 28px; }.nav-item { display:flex; align-items:center; gap:12px; width:100%; background:transparent; color:#aaa99f; text-align:left; padding: 10px 11px; border-radius:8px; margin: 2px 0; font-size:12px; }.nav-item span { width: 17px; color:#8f9088; font-size:16px; text-align:center; }.nav-item.active { color:#fff7ec; background:#3a3b35; }.nav-item.active span { color:#f1a77b; }.nav-count { margin-left:auto; font: 500 10px 'DM Mono'; color:#f4b28e; background:#5d4439; padding:3px 6px; border-radius:9px; }.nav-count.warm { color:#f3c3a6; background:#54423b; }
.nav-item[hidden] { display: none; }
.sidebar-bottom { margin-top:auto; }.plan-card { background:#34352f; border-radius:10px; padding:14px; margin: 0 2px 15px; }.plan-card-top { display:flex; gap:7px; color:#ffb889; font-size:11px; font-weight:700; }.spark { font-size:14px; }.plan-card p { color:#c8c7bd; font-size:10px; line-height:1.5; margin:10px 0; }.progress-track { height:4px; background:#4c4d46; border-radius:5px; overflow:hidden; }.progress-track span { display:block; width:40%; height:100%; background:#e98b69; border-radius:5px; }.plan-card small { display:block; color:#8f9088; font-size:9px; margin-top:8px; }.profile-button { width:100%; background:transparent; display:flex; align-items:center; gap:9px; color:#eeeae0; padding:6px 7px; text-align:left; }.profile-avatar { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#abc0a5; color:#28322a; font:500 9px 'DM Mono'; }.profile-button strong,.profile-button small { display:block; }.profile-button strong { font-size:10px; }.profile-button small { color:#85877e; font-size:9px; margin-top:2px; }.more { margin-left:auto; color:#888a82; letter-spacing:2px; }
.main-content { flex:1; min-width:0; max-width: 1700px; margin:0 auto; }.topbar { height:77px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding: 0 5.4%; }.breadcrumb { color:#9b968c; font-size:11px; }.breadcrumb i { font-style:normal; margin:0 8px; color:#c1bcb2; }.breadcrumb strong { color:#3a3934; }.top-actions { display:flex; align-items:center; gap:14px; }.icon-button { background:transparent; color:#737067; font-size:22px; position:relative; }.notification em { position:absolute; width:5px; height:5px; background:var(--accent); border:1px solid var(--canvas); border-radius:50%; top:2px; right:0; }.primary-button,.outline-button { border-radius:7px; padding:11px 16px; font-weight:700; font-size:11px; }.primary-button { color:white; background:var(--accent); box-shadow:0 5px 13px #e66e4f2c; }.primary-button:hover { background:var(--accent-dark); }.primary-button.compact { padding:10px 15px; }.outline-button { background:transparent; border:1px solid #d8d1c7; color:#625e57; }.text-button { background:transparent; color:#c15e46; font-size:11px; font-weight:700; }.text-button span,.panel-footer-button { color:var(--accent); }.view { display:none; padding: 37px 5.4% 55px; }.view.active { display:block; }.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:30px; }.eyebrow { color:#a19b90; letter-spacing:1.2px; font:500 9px 'DM Mono'; margin:0 0 9px; }.page-heading h1 { margin:0; font-size:29px; letter-spacing:-1.4px; line-height:1.15; }.heading-subtitle { color:#9b968c; font-size:12px; margin:9px 0 0; }.wave { color:var(--accent); font-size:23px; margin-left:3px; }
.metrics-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:15px; margin-bottom:37px; }.metric-card { background:var(--paper); border:1px solid #eee8df; border-radius:9px; min-height:163px; padding:17px 18px 14px; position:relative; overflow:hidden; }.metric-label { color:#78736b; font-size:10px; display:flex; align-items:center; justify-content:space-between; }.metric-icon { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:13px; color:#605c54; }.lilac { background:var(--lavender); }.peach { background:var(--peach); }.mint { background:var(--mint); }.blue { background:var(--blue); }.metric-card > strong { display:block; font-size:27px; letter-spacing:-1px; margin:13px 0 5px; }.metric-change { display:block; font-size:10px; color:#a19c92; }.metric-change.positive { color:#559b74; }.metric-change i { color:#a19c92; font-style:normal; }.metric-change.neutral { color:#c27d66; }.mini-bars { display:flex; gap:4px; position:absolute; bottom:13px; right:18px; align-items:flex-end; height:31px; }.mini-bars span { background:#dfd7fa; width:6px; border-radius:2px 2px 0 0; }.mini-bars span:last-child { background:#bbaeeb; }.metric-footer-link { position:absolute; bottom:16px; color:#bf694e; font-size:10px; font-weight:700; }.metric-footer-link span { margin-left:5px; }.sparkline { color:#7bb894; position:absolute; left:18px; bottom:14px; width:76%; height:35px; }.sparkline svg { width:100%; height:100%; }.donut-wrap { display:flex; gap:10px; align-items:center; position:absolute; left:18px; bottom:13px; }.donut { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#7cb891 0deg 313deg,#e8eee8 313deg 360deg); position:relative; }.donut:after { content:''; position:absolute; inset:5px; background:var(--paper); border-radius:50%; }.donut span { position:relative; z-index:1; font:500 8px 'DM Mono'; color:#548d6a; }.donut-wrap small { display:block; font-size:8px; color:#7d786e; line-height:1.5; }.donut-wrap .muted { color:#b0aba2; }
.section-heading,.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; }.section-heading { margin-bottom:16px; }.section-heading h2,.panel-heading h2 { margin:0; font-size:14px; letter-spacing:-.3px; }.section-heading p,.panel-heading p { color:#aaa49b; margin:5px 0 0; font-size:10px; }.upcoming-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:36px; }.upcoming-card { background:var(--paper); border:1px solid #eee8df; border-radius:9px; overflow:hidden; }.upcoming-media { height:118px; position:relative; padding:11px; display:flex; align-items:flex-end; background:linear-gradient(135deg,#dbc6ad,#9a725c); }.upcoming-media.orange { background:linear-gradient(135deg,#edb07e,#d4654d); }.upcoming-media.green { background:linear-gradient(145deg,#b3c6a6,#5c8066); }.upcoming-media.blue-bg { background:linear-gradient(135deg,#a5c7d4,#537f8e); }.media-lines { width:70%; height:55%; border:1px solid #fff7; border-radius:2px; transform:rotate(-8deg); background:#fff2; }.media-title { color:#fff; font-weight:800; font-size:14px; letter-spacing:-.6px; position:absolute; top:14px; left:14px; max-width:80%; text-shadow:0 1px 5px #0003; }.post-type { position:absolute; top:9px; right:9px; color:white; background:#262621b8; border-radius:4px; padding:4px 6px; font:500 8px 'DM Mono'; }.upcoming-info { padding:12px 13px; }.upcoming-info p { font-size:10px; margin:0 0 9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.upcoming-meta { display:flex; align-items:center; justify-content:space-between; font-size:9px; color:#aba59b; }.channel-icons { display:flex; gap:4px; }.channel { width:17px; height:17px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:800; }.channel.insta { color:#fff; background:linear-gradient(135deg,#844be5,#e55265,#f4a63a); }.channel.fb { color:white; background:#3177d2; font-family:Arial; }.status-scheduled { color:#7e9a83; }.status-review { color:#ca7458; }
.bottom-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:15px; }.panel { background:var(--paper); border:1px solid #eee8df; border-radius:9px; padding:19px; min-height:240px; }.panel-heading select { background:transparent; border:1px solid var(--line); color:#8c877e; padding:6px 8px; border-radius:5px; font-size:9px; }.chart { display:flex; height:142px; margin-top:22px; }.chart-y { display:flex; flex-direction:column; justify-content:space-between; color:#b0aba2; font:9px 'DM Mono'; padding-bottom:21px; }.chart-area { flex:1; position:relative; margin-left:13px; }.chart-grid-line { position:absolute; left:0; right:0; border-top:1px dashed #e9e3da; }.line-1 { top:0; }.line-2 { top:33%; }.line-3 { top:66%; }.chart-bars { position:absolute; inset:0 19px 22px; display:flex; align-items:flex-end; gap:15%; }.chart-bars span { flex:1; max-width:30px; background:#d6ccf5; border-radius:4px 4px 0 0; position:relative; }.chart-bars span.current { background:#e89978; }.chart-bars i { position:absolute; top:-16px; left:50%; transform:translateX(-50%); font:9px 'DM Mono'; color:#9d7667; font-style:normal; }.chart-x { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; color:#aaa49a; font:9px 'DM Mono'; }.activity-list { margin-top:19px; }.activity { display:flex; gap:10px; margin-bottom:16px; }.activity-avatar { width:27px; height:27px; border-radius:50%; display:grid; place-items:center; font:500 8px 'DM Mono'; flex-shrink:0; }.coral { background:#f2c0ad; color:#7a4f41; }.olive { background:#c6d1b8; color:#53604e; }.blue-avatar { background:#c1d8e8; color:#486579; }.activity strong { font-size:10px; }.activity p { display:inline; color:#8f8a82; font-size:10px; margin:0; }.activity p b { color:#5f5a52; font-weight:700; }.activity small { display:block; color:#b1aba2; font-size:9px; margin-top:4px; }.panel-footer-button { background:transparent; padding:0; font-size:10px; font-weight:700; }
/* Calendar and secondary views */
.calendar-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }.month-switch { display:flex; align-items:center; gap:16px; }.month-switch strong { font-size:13px; }.month-switch button { background:transparent; color:#989187; font-size:20px; }.calendar-filters { display:flex; gap:7px; }.filter-chip,.filter-select { border:1px solid var(--line); background:var(--paper); color:#827d74; border-radius:6px; padding:8px 11px; font-size:10px; }.filter-chip.active { color:#bd654d; border-color:#e6b09e; background:#fff8f4; }.dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px; }.instagram { background:#d86372; }.facebook { background:#4586d5; }.calendar-board { background:var(--paper); border:1px solid var(--line); border-radius:9px; overflow:hidden; }.weekdays,.calendar-days { display:grid; grid-template-columns:repeat(7,1fr); }.weekdays { background:#fbf8f2; border-bottom:1px solid var(--line); }.weekdays span { padding:13px 12px; color:#aaa49a; font:500 9px 'DM Mono'; }.calendar-days { grid-auto-rows:minmax(108px, auto); }.day { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px; min-height:108px; }.day:nth-child(7n) { border-right:0; }.day-number { font:500 10px 'DM Mono'; color:#88837a; }.day.muted-day .day-number { color:#c6c0b7; }.day.today .day-number { color:white; background:var(--accent); width:21px; height:21px; border-radius:50%; display:grid; place-items:center; margin:-4px 0 4px -4px; }.calendar-event { padding:5px 6px; border-radius:4px; font-size:9px; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:3px solid; }.calendar-event.insta-event { background:#fae8e2; border-color:#e27d62; color:#925341; }.calendar-event.fb-event { background:#e5eff9; border-color:#6497cf; color:#4b6f9a; }.calendar-event.review-event { background:#f0eafa; border-color:#a590df; color:#7662a6; }
.library-toolbar { display:flex; gap:9px; margin-bottom:20px; }.search-field { background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:8px 11px; color:#aaa49a; width:250px; }.search-field input { border:0; outline:0; background:transparent; margin-left:6px; font-size:10px; width:200px; }.media-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }.media-card { background:var(--paper); border:1px solid var(--line); border-radius:8px; overflow:hidden; }.media-preview { height:145px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:20px; position:relative; }.media-preview span { position:absolute; bottom:9px; left:10px; font-size:10px; }.media-details { padding:11px; }.media-details strong { display:block; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.media-details small { color:#aaa49b; font-size:9px; }.media-1 { background:linear-gradient(140deg,#c8a483,#665143); }.media-2 { background:linear-gradient(140deg,#efac85,#b55754); }.media-3 { background:linear-gradient(140deg,#acc4a3,#51705d); }.media-4 { background:linear-gradient(140deg,#a3c7d1,#4b8290); }.media-5 { background:linear-gradient(140deg,#ded1ba,#967e61); }.media-6 { background:linear-gradient(140deg,#d6c1e4,#876391); }
.approval-tabs { display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:18px; }.approval-tabs button { padding:0 0 12px; color:#9d988f; background:transparent; font-size:11px; border-bottom:2px solid transparent; }.approval-tabs button.active { color:#c4624b; border-color:var(--accent); }.approval-tabs b { margin-left:4px; font:500 9px 'DM Mono'; background:#f1e9e4; color:#c4624b; padding:3px 5px; border-radius:8px; }.approval-list { display:grid; gap:10px; }.approval-item { background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:12px; display:flex; align-items:center; gap:13px; }.approval-thumb { width:57px; height:57px; border-radius:5px; flex-shrink:0; }.approval-copy { flex:1; }.approval-copy strong { font-size:11px; }.approval-copy p { color:#9b968c; font-size:10px; margin:5px 0; }.approval-copy small { color:#b0aaa0; font-size:9px; }.approval-actions { display:flex; gap:6px; }.small-button { padding:7px 10px; border-radius:5px; font-size:9px; font-weight:700; }.approve { background:#e2f0e4; color:#55815c; }.reject { background:#fbe8e2; color:#b96750; }.edit { background:#f4f0e9; color:#817b70; }.integration-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.integration-card { background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:19px; position:relative; min-height:150px; }.integration-brand { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:white; font-size:22px; font-weight:800; margin-bottom:16px; }.instagram-brand { background:linear-gradient(135deg,#7141c5,#db596d,#f4a33c); }.facebook-brand { background:#3376d3; font-family:Arial; }.tiktok-brand { background:#242622; }.integration-card h3 { font-size:12px; margin:0 0 4px; }.integration-card p { color:#aaa49b; font-size:10px; margin:0; }.status-pill { position:absolute; top:19px; right:17px; padding:4px 7px; border-radius:9px; font:500 8px 'DM Mono'; }.connected-pill { background:#e3f0e4; color:#598060; }.soon-pill { background:#f1eee9; color:#9e988e; }.integration-card button { background:transparent; color:#c0644b; font-size:10px; font-weight:700; margin-top:18px; padding:0; }.integration-card button.disabled { color:#aaa49a; }.integration-note { margin-top:18px; display:flex; gap:10px; padding:13px 15px; background:#f8eee7; border-radius:7px; color:#9d786a; }.integration-note > span { display:grid; place-items:center; background:#e5b49e; color:white; border-radius:50%; width:18px; height:18px; font-weight:800; font-size:11px; }.integration-note p { margin:0; font-size:10px; line-height:1.55; }.integration-note strong { color:#93604f; }
.team-layout { display:grid; grid-template-columns: minmax(260px, .72fr) 1.28fr; gap:15px; }.team-form-panel form { margin-top:23px; }.team-form-panel label { display:block; color:#6f6a61; font-size:10px; font-weight:700; margin-bottom:14px; }.team-form-panel input,.team-form-panel select { display:block; width:100%; border:1px solid var(--line); border-radius:6px; padding:10px; margin-top:7px; background:#fffdfa; outline:none; color:#4c4943; font-size:11px; }.team-form-panel button { margin-top:4px; }.form-message { color:#598060; font-size:10px; min-height:15px; margin:11px 0 0; }.team-total { color:#a29c92; font:500 9px 'DM Mono'; }.team-list { margin-top:21px; display:grid; gap:9px; }.team-member { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--line); border-radius:7px; }.team-member-avatar { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#e7c4b2; color:#795646; font:500 9px 'DM Mono'; }.team-member:nth-child(2n) .team-member-avatar { background:#d3e5d2; color:#557057; }.team-member:nth-child(3n) .team-member-avatar { background:#d6d4f1; color:#5f5a86; }.team-member-info { flex:1; }.team-member-info strong,.team-member-info small { display:block; }.team-member-info strong { font-size:10px; }.team-member-info small { color:#a29c92; font-size:9px; margin-top:3px; }.role-pill { padding:4px 7px; border-radius:10px; font:500 8px 'DM Mono'; }.role-editor { background:#f1eee9; color:#827c72; }.role-approver { background:#e7f1e8; color:#5c8363; }.role-admin { background:#f6e5dc; color:#b96850; }
.role-note { color:#a29c92; font-size:9px; font-weight:700; }
/* Modal */
.modal-backdrop { position:fixed; inset:0; background:#26251e66; display:none; align-items:center; justify-content:center; z-index:10; padding:20px; }.modal-backdrop.open { display:flex; }.modal { background:var(--paper); width:min(520px,100%); max-height:92vh; overflow:auto; border-radius:12px; box-shadow:0 20px 60px #0002; padding:24px; }.modal-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:21px; }.modal-header h2 { margin:0; font-size:21px; letter-spacing:-.8px; }.close-modal { background:transparent; font-size:25px; color:#9b958b; line-height:1; }.modal form > label { display:block; color:#6f6a61; font-size:10px; font-weight:700; margin-bottom:15px; }.modal select,.modal textarea,.modal input[type=datetime-local] { display:block; width:100%; border:1px solid var(--line); border-radius:6px; padding:10px; margin-top:7px; background:#fffdfa; outline:none; color:#4c4943; font-size:11px; }.modal textarea { resize:vertical; }.platform-options { display:flex; gap:8px; margin-top:8px; }.platform-option { border:1px solid var(--line); border-radius:6px; padding:8px 10px; display:flex; align-items:center; gap:6px; font-size:10px; color:#756f67; }.platform-option.selected { border-color:#dfa08c; background:#fff6f2; color:#ae5a44; }.platform-option input { display:none; }.platform-icon { width:16px; height:16px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:10px; }.upload-drop { margin-top:7px; border:1px dashed #d5cec4; border-radius:7px; min-height:64px; display:flex; align-items:center; gap:10px; padding:10px; position:relative; }.upload-drop > span { color:#db8368; font-size:20px; }.upload-drop strong,.upload-drop small { display:block; }.upload-drop strong { font-size:10px; color:#777067; }.upload-drop small { font-size:9px; color:#aaa49b; margin-top:3px; }.upload-drop input { position:absolute; inset:0; opacity:0; cursor:pointer; }.form-footer { display:flex; justify-content:flex-end; gap:8px; padding-top:4px; }.toast { position:fixed; right:25px; bottom:25px; background:#292b26; color:white; padding:12px 15px; border-radius:7px; display:flex; align-items:center; gap:9px; transform:translateY(100px); opacity:0; transition:.25s; z-index:20; box-shadow:0 10px 30px #0002; }.toast.show { transform:translateY(0); opacity:1; }.toast span { color:#99d7a6; }.toast p { margin:0; font-size:11px; }
@media (max-width: 1100px) { .sidebar { width:210px; }.metrics-grid,.upcoming-grid { grid-template-columns:repeat(2,1fr); }.media-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 760px) { .sidebar { width:64px; padding:18px 8px; }.brand { padding:0 8px 28px; }.brand > span:last-child,.workspace-switcher > div:not(.workspace-avatar),.chevron,.nav-label,.nav-item:not(.active) b,.nav-item { font-size:0; }.workspace-switcher { justify-content:center; padding:7px; }.nav-item { justify-content:center; padding:12px 0; }.nav-item span { font-size:17px; }.sidebar-bottom { display:none; }.topbar { padding:0 20px; }.top-actions .icon-button { display:none; }.view { padding:28px 20px 45px; }.page-heading { align-items:flex-start; flex-direction:column; }.metrics-grid,.upcoming-grid,.bottom-grid,.integration-grid { grid-template-columns:1fr; }.calendar-toolbar { align-items:flex-start; flex-direction:column; gap:12px; }.calendar-filters { flex-wrap:wrap; }.calendar-board { overflow-x:auto; }.weekdays,.calendar-days { min-width:700px; }.media-grid { grid-template-columns:repeat(2,1fr); }.approval-item { align-items:flex-start; flex-wrap:wrap; }.approval-actions { margin-left:70px; }.topbar { height:65px; }.breadcrumb { font-size:10px; }.primary-button.compact { padding:9px 10px; font-size:9px; } }