:root {
  color-scheme: dark;
  --bg: #0a131d;
  --sidebar: #0c1722;
  --panel: #101e2b;
  --panel-light: #172837;
  --line: rgba(194, 216, 232, .13);
  --text: #f1f5f7;
  --muted: #a7b5c1;
  --dim: #758695;
  --blue: #2f91f4;
  --cyan: #62c9e2;
  --teal: #3ea9b9;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); font-family: var(--sans); background: var(--bg); }
button, input, textarea { color: inherit; font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 252px minmax(0, 1fr); }
.sidebar { position: relative; z-index: 5; display: flex; flex-direction: column; min-height: 100vh; max-height: 100vh; padding: 18px 13px 13px; overflow: hidden; background: linear-gradient(180deg, #101e2b 0%, #0b1722 56%, #0a141e 100%); border-right: 1px solid rgba(195, 216, 230, .12); box-shadow: 12px 0 38px rgba(0, 0, 0, .12); }
.brand { height: 66px; margin: 0 2px 15px; display: flex; align-items: center; gap: 13px; padding: 0 13px; text-decoration: none; color: var(--text); border: 1px solid rgba(200, 219, 231, .13); border-radius: 18px; background: linear-gradient(145deg, rgba(30, 53, 72, .74), rgba(13, 27, 40, .82)); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.brand-mark { width: 33px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; color: #081924; background: linear-gradient(135deg, #88e5f4 4%, #46b9e4 54%, #2685d4 100%); clip-path: polygon(48% 0, 100% 100%, 75% 100%, 49% 46%, 25% 100%, 0 100%); font-size: 0; filter: drop-shadow(0 0 11px rgba(69, 188, 229, .25)); }
.brand-word strong { display: block; font-size: 14px; letter-spacing: .26em; font-weight: 650; }
.brand-word small { display: block; margin-top: 5px; color: #8093a4; font-size: 7px; letter-spacing: .14em; white-space: nowrap; }
.primary-nav { display: grid; gap: 3px; overflow: auto; scrollbar-width: thin; scrollbar-color: #263d50 transparent; padding: 0 0 9px; }
.nav-item { min-height: 34px; display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #c2cdd5; text-align: left; font-size: 11px; cursor: pointer; transition: background .18s, color .18s, border .18s; }
.nav-item:hover { background: rgba(125, 166, 194, .09); color: #f5fbff; }
.nav-item.active { border-color: rgba(92, 174, 237, .24); background: linear-gradient(100deg, #1876cf, #246dc1); color: white; box-shadow: 0 7px 20px rgba(15, 96, 178, .19), inset 0 1px rgba(255,255,255,.13); }
.nav-item.planned { color: #94a5b1; }
.nav-icon { width: 17px; text-align: center; font-size: 16px; line-height: 1; color: #d2e0e9; }
.nav-tag { margin-left: auto; padding: 2px 5px; border-radius: 5px; color: #718595; background: rgba(141, 164, 181, .09); font-size: 8px; }
.conversation-section { min-height: 100px; flex: 1 1 auto; display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 9px; overflow: hidden; }
.section-label-row { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 7px; }
.side-label { color: #8193a2; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.icon-button { display: grid; place-items: center; border: 1px solid rgba(198, 218, 231, .14); border-radius: 9px; background: rgba(159, 190, 211, .08); color: #d8e6ef; cursor: pointer; }
.icon-button:hover { background: rgba(159, 190, 211, .16); }
.icon-button.small { width: 23px; height: 23px; font-size: 16px; }
.conversation-search { display: flex; align-items: center; gap: 7px; height: 31px; padding: 0 9px; border: 1px solid rgba(191, 214, 229, .10); border-radius: 8px; color: #90a2b0; background: rgba(4, 12, 19, .25); }
.conversation-search span { font-size: 17px; }
.conversation-search input, .global-search input { min-width: 0; width: 100%; border: 0; outline: 0; color: #eaf2f7; background: transparent; font-size: 10px; }
.conversation-search input::placeholder, .global-search input::placeholder { color: #899cab; }
.conversation-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; padding-top: 6px; }
.conversation-item { width: 100%; overflow: hidden; padding: 8px 9px; border: 0; border-radius: 7px; background: transparent; color: #93a2ae; text-align: left; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.conversation-item:hover, .conversation-item.active { background: rgba(169, 203, 224, .09); color: #e3edf4; }
.conversation-empty { margin: 8px 5px; color: #70818e; font-size: 10px; line-height: 1.5; }
.sidebar-bottom { flex: 0 0 auto; }
.network-state { display: flex; align-items: center; gap: 8px; padding: 11px 7px 13px; color: #a4b5c1; font-size: 10px; }
.status-dot, .context-dot { width: 7px; height: 7px; border-radius: 50%; background: #39ce91; box-shadow: 0 0 10px rgba(57, 206, 145, .65); }
.profile-card { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 12px 5px 3px; border-top: 1px solid var(--line); }
.avatar { width: 31px; height: 31px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(201, 222, 235, .35); border-radius: 50%; color: #f0f7fc; background: linear-gradient(145deg, #637d8e, #283b4b); font-size: 10px; }
.profile-copy { min-width: 0; flex: 1; }
.profile-copy strong, .profile-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy strong { color: #e1ebf1; font-size: 10px; font-weight: 600; }
.profile-copy small { margin-top: 3px; color: #8193a0; font-size: 8px; }
.profile-menu { width: 25px; height: 25px; border: 0; border-radius: 7px; color: #97a9b6; background: transparent; cursor: pointer; }
.profile-menu:hover { background: rgba(184, 207, 222, .10); color: white; }

.main-panel { position: relative; min-width: 0; height: 100vh; min-height: 600px; display: flex; flex-direction: column; overflow: hidden; background: #0d1925; }
.topbar { z-index: 3; position: absolute; top: 0; left: 0; right: 0; height: 61px; display: flex; align-items: center; gap: 18px; padding: 0 27px; }
.global-search { width: min(405px, 42vw); height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid rgba(218, 232, 242, .21); border-radius: 10px; color: #e1ebf2; background: rgba(9, 24, 38, .52); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); backdrop-filter: blur(16px); }
.global-search > span { font-size: 21px; line-height: 1; }
.global-search input { flex: 1; font-size: 11px; }
kbd { padding: 3px 5px; border: 1px solid rgba(221, 235, 244, .15); border-radius: 4px; color: #c7d3dc; background: rgba(255,255,255,.06); font: 9px var(--sans); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 21px; }
.topbar-context { display: flex; align-items: center; gap: 8px; color: #d3e0e9; font-size: 10px; text-shadow: 0 1px 4px #09131e; }
.context-dot { width: 6px; height: 6px; }
.topbar time { color: #edf4f8; font-size: 10px; text-shadow: 0 1px 5px #09131e; white-space: nowrap; text-transform: capitalize; }
.background-open { height: 33px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid rgba(218, 232, 242, .22); border-radius: 9px; color: #edf5f9; background: rgba(9, 24, 38, .46); box-shadow: 0 7px 22px rgba(0,0,0,.12); backdrop-filter: blur(14px); font-size: 9px; cursor: pointer; }
.background-open > span:first-child { color: #9ddff0; font-size: 16px; }
.background-open:hover { border-color: rgba(163, 223, 243, .48); background: rgba(17, 52, 72, .65); }
.mobile-menu, .mobile-brand { display: none; }

.home-view { min-height: 0; flex: 1; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2b4457 transparent; }
.home-hero { position: relative; isolation: isolate; min-height: 405px; flex: 0 0 405px; overflow: hidden; display: grid; place-items: center; padding: 74px 28px 24px; background: linear-gradient(180deg, #203b53 0%, #486077 23%, #a87062 47%, #d59b68 60%, #185565 68%, #0d3548 100%); }
.home-hero.has-background { background: #101e2b; }
.hero-background { position: absolute; z-index: -2; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-background[hidden] { display: none; }
.home-hero.has-background::before { z-index: -1; background: linear-gradient(90deg, rgba(6, 17, 28, .34), rgba(7, 19, 29, .13) 48%, rgba(7, 18, 27, .27)), linear-gradient(0deg, rgba(5, 15, 25, .62), transparent 63%, rgba(5, 15, 25, .25)); }
.home-hero.has-background::after { opacity: .16; }
.home-hero.has-background .hero-skyline { display: none; }
.home-hero.has-background .hero-wash { background: linear-gradient(0deg, rgba(5, 15, 25, .25), transparent 48%); }
.home-hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(ellipse 39% 27% at 78% 39%, rgba(255, 205, 122, .82), rgba(243, 155, 100, .2) 44%, transparent 75%), radial-gradient(ellipse 38% 20% at 42% 29%, rgba(39, 53, 79, .9), transparent 72%), radial-gradient(ellipse 27% 17% at 17% 31%, rgba(23, 39, 59, .9), transparent 74%), linear-gradient(180deg, transparent 0%, rgba(7, 18, 29, .15) 61%, rgba(5, 18, 27, .55) 100%); }
.home-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .46; background: repeating-linear-gradient(174deg, transparent 0 76px, rgba(255,255,255,.035) 77px 78px, transparent 79px 106px); mix-blend-mode: screen; }
.hero-wash { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(9, 22, 35, .32), transparent 55%, rgba(8, 20, 30, .2)), linear-gradient(0deg, rgba(7, 17, 26, .55), transparent 43%); }
.hero-skyline { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 48%; overflow: hidden; }
.moon { position: absolute; z-index: 1; top: 4%; left: 69%; width: 15px; height: 15px; border-radius: 50%; background: #ffd788; box-shadow: 0 0 28px 9px rgba(255, 194, 119, .36); }
.ridge { position: absolute; display: block; left: -4%; right: -5%; bottom: 19%; height: 76%; clip-path: polygon(0 68%, 8% 48%, 13% 56%, 23% 22%, 30% 55%, 40% 19%, 47% 53%, 57% 30%, 67% 64%, 75% 39%, 84% 61%, 92% 31%, 100% 59%, 100% 100%, 0 100%); }
.ridge-back { background: linear-gradient(180deg, #374252, #263446 72%, #273c48); opacity: .95; transform: scaleY(.86); transform-origin: bottom; }
.ridge-front { bottom: 5%; height: 63%; clip-path: polygon(0 40%, 9% 25%, 17% 48%, 25% 21%, 34% 52%, 43% 26%, 52% 54%, 63% 30%, 70% 56%, 80% 18%, 90% 46%, 100% 29%, 100% 100%, 0 100%); background: linear-gradient(180deg, #172a35, #102733 70%, #0b2633); opacity: .97; }
.sea { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(180deg, rgba(26, 101, 119, .34), rgba(7, 40, 55, .88)); clip-path: polygon(0 16%, 10% 24%, 23% 18%, 35% 26%, 48% 17%, 61% 28%, 74% 18%, 87% 24%, 100% 16%, 100% 100%, 0 100%); }
.hero-content { position: relative; z-index: 2; width: min(770px, 100%); text-align: center; margin-top: 19px; }
.eyebrow { margin: 0 0 13px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #f1e7d9; font-size: 10px; font-weight: 650; letter-spacing: .25em; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.eyebrow-line { width: 45px; height: 1px; display: inline-block; background: linear-gradient(90deg, transparent, rgba(255,255,255,.72)); }
.hero-content h1 { margin: 0; color: #fff; font-size: clamp(34px, 4.2vw, 55px); font-weight: 480; line-height: 1.08; letter-spacing: -.047em; text-shadow: 0 2px 18px rgba(6, 17, 26, .42); }
.hero-subtitle { margin: 10px 0 23px; color: #f3f4f4; font-size: clamp(14px, 1.6vw, 19px); text-shadow: 0 2px 12px rgba(6, 17, 26, .65); }
.hero-prompt { width: min(650px, 100%); min-height: 58px; display: flex; align-items: center; gap: 12px; margin: 0 auto; padding: 7px 9px 7px 18px; border: 1px solid rgba(245, 250, 253, .73); border-radius: 34px; background: linear-gradient(105deg, rgba(14, 41, 58, .82), rgba(26, 36, 48, .75) 66%, rgba(43, 42, 43, .69)); box-shadow: 0 12px 36px rgba(4, 14, 23, .3), inset 0 1px rgba(255,255,255,.10); backdrop-filter: blur(18px); text-align: left; }
.prompt-search { color: #e5f4fc; font-size: 24px; line-height: 1; }
.hero-prompt input { flex: 1; min-width: 0; border: 0; outline: 0; color: white; background: transparent; font-size: 14px; }
.hero-prompt input::placeholder { color: rgba(238, 245, 248, .81); }
.hero-prompt button { width: 42px; height: 42px; flex: 0 0 auto; border: 0; border-radius: 50%; color: white; background: linear-gradient(145deg, #37a2ff, #1876e6); box-shadow: 0 4px 16px rgba(9, 90, 183, .42); font-size: 20px; cursor: pointer; transition: transform .18s, filter .18s; }
.hero-prompt button:hover { transform: translateX(2px); filter: brightness(1.13); }
.hero-prompt button:disabled { opacity: .52; cursor: wait; }
.quick-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.quick-actions button { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid rgba(222, 236, 246, .22); border-radius: 20px; color: #edf3f6; background: rgba(10, 27, 40, .58); backdrop-filter: blur(12px); font-size: 9px; cursor: pointer; }
.quick-actions button:hover { background: rgba(32, 82, 113, .73); border-color: rgba(225, 241, 250, .43); }
.quick-actions button span { color: #90d9f4; font-size: 12px; }
.hero-note { position: absolute; z-index: 2; right: max(28px, calc((100% - 1250px) / 2)); top: 39%; width: 190px; padding: 18px 18px 16px; border: 1px solid rgba(244, 224, 207, .28); border-radius: 16px; background: linear-gradient(145deg, rgba(42, 38, 39, .66), rgba(18, 26, 33, .72)); box-shadow: 0 13px 36px rgba(9, 16, 24, .22); backdrop-filter: blur(16px); }
.note-sun { color: #ffc55c; font-size: 22px; }
.hero-note p { margin: 8px 0 10px; color: white; font-size: 16px; line-height: 1.35; }
.hero-note small { display: block; padding-top: 9px; border-top: 1px solid rgba(240, 231, 220, .25); color: #d3d1cf; font-size: 9px; line-height: 1.5; }

.dashboard-content { width: min(1560px, 100%); margin: 0 auto; padding: 13px 20px 16px; }
.module-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px; }
.module-card { position: relative; min-height: 112px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; overflow: hidden; padding: 11px 10px; border: 1px solid rgba(203, 221, 233, .18); border-radius: 11px; text-align: left; background: linear-gradient(145deg, rgba(29, 52, 69, .96), rgba(13, 28, 41, .98)); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 9px 24px rgba(0,0,0,.11); }
.module-card::before { content: ""; position: absolute; top: -40px; right: -25px; width: 135px; height: 110px; border-radius: 50%; background: radial-gradient(ellipse, rgba(60, 137, 175, .22), transparent 70%); }
.module-card.module-chat { cursor: pointer; transition: transform .18s, border-color .18s, filter .18s; background: linear-gradient(145deg, rgba(23, 89, 136, .88), rgba(12, 42, 64, .98)); }
.module-chat:hover { transform: translateY(-2px); border-color: rgba(99, 188, 241, .49); filter: brightness(1.08); }
.module-symbol { position: absolute; right: 14px; top: 12px; color: #a9ddf3; font-size: 21px; text-shadow: 0 0 15px rgba(71, 166, 214, .35); }
.module-card strong { position: relative; z-index: 1; margin-top: 24px; color: #f0f5f7; font-size: 11px; font-weight: 620; }
.module-card small { position: relative; z-index: 1; margin-top: 4px; color: #aab9c4; font-size: 8px; line-height: 1.35; }
.module-arrow { position: absolute; right: 13px; bottom: 12px; color: #8ed8f2; font-size: 15px; }
.module-state { position: absolute; top: 12px; left: 12px; color: #8499a8; font-size: 8px; letter-spacing: .02em; }
.planned-card { cursor: default; }
.dashboard-lower { display: grid; grid-template-columns: 1.17fr .88fr 1fr; gap: 9px; margin-top: 9px; }
.dash-panel { min-width: 0; min-height: 158px; padding: 14px 15px 12px; border: 1px solid rgba(195, 215, 228, .16); border-radius: 11px; background: linear-gradient(145deg, rgba(25, 43, 57, .90), rgba(14, 28, 40, .95)); box-shadow: inset 0 1px rgba(255,255,255,.026), 0 8px 24px rgba(0,0,0,.1); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-kicker { display: block; margin-bottom: 4px; color: #80a1b7; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.panel-heading h2 { margin: 0; color: #eaf1f5; font-size: 14px; font-weight: 580; letter-spacing: -.015em; }
.panel-state, .live-label { display: inline-flex; align-items: center; gap: 6px; color: #9aabba; font-size: 8px; white-space: nowrap; }
.panel-state { padding: 5px 7px; border: 1px solid rgba(190, 211, 224, .11); border-radius: 10px; background: rgba(189, 214, 230, .035); }
.live-label { color: #64d99d; }
.live-label i, .panel-state i { width: 6px; height: 6px; border-radius: 50%; background: #45d391; box-shadow: 0 0 9px rgba(69, 211, 145, .5); }
.empty-state { min-height: 81px; display: flex; align-items: center; gap: 12px; margin-top: 7px; padding: 11px 8px 5px; }
.empty-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(108, 174, 211, .2); border-radius: 10px; color: #80c8eb; background: rgba(54, 130, 173, .12); font-size: 17px; }
.empty-state strong { display: block; color: #d4e0e7; font-size: 10px; font-weight: 570; }
.empty-state p { max-width: 340px; margin: 5px 0 0; color: #8fa1ad; font-size: 9px; line-height: 1.5; }
.status-panel { background: linear-gradient(145deg, rgba(22, 48, 64, .93), rgba(12, 28, 40, .97)); }
.status-row { min-width: 0; display: flex; align-items: center; gap: 9px; margin-top: 12px; padding: 0 2px; }
.status-orb { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(95, 211, 178, .23); border-radius: 8px; color: #79edcb; background: rgba(42, 168, 134, .15); font-size: 13px; }
.status-row > div { min-width: 0; flex: 1; }
.status-row strong, .status-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-row strong { color: #d8e6ed; font-size: 9px; font-weight: 570; }
.status-row small { margin-top: 3px; color: #7f9aaa; font-size: 8px; }
.status-check { color: #42d392; font-size: 9px; }
.muted-row { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(204, 223, 234, .08); }
.planned-orb { color: #9aafbd; border-color: rgba(157, 183, 199, .18); background: rgba(142, 168, 185, .08); }
.status-pending { color: #708493; font-size: 13px; }
.panel-footnote { margin: 10px 0 0 38px; color: #748a99; font-size: 8px; }
.compact-empty { min-height: 82px; }
.dashboard-footer { display: flex; justify-content: space-between; gap: 10px; padding: 11px 3px 1px; color: #738697; font-size: 8px; }

.chat-view { min-height: 0; flex: 1; display: flex; flex-direction: column; padding: 83px 0 0; background: radial-gradient(ellipse at 53% 15%, rgba(42, 85, 111, .16), transparent 46%), #0d1925; }
.chat-heading { width: min(850px, 100%); display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin: 0 auto; padding: 10px 34px 17px; }
.chat-heading .panel-kicker { color: #75a8c5; }
.chat-heading h1 { margin: 0; color: #eff5f8; font-size: 27px; font-weight: 500; letter-spacing: -.04em; }
.chat-heading p { margin: 7px 0 0; color: #91a4b1; font-size: 11px; }
.secondary-button { flex: 0 0 auto; padding: 9px 12px; border: 1px solid rgba(182, 210, 228, .18); border-radius: 9px; color: #c5d6e1; background: rgba(166, 200, 222, .07); font-size: 10px; cursor: pointer; }
.secondary-button:hover { background: rgba(166, 200, 222, .13); }
.chat-stage { width: min(850px, 100%); min-height: 0; flex: 1; margin: 0 auto; padding: 10px 34px; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2c4659 transparent; }
.welcome { max-width: 650px; margin: auto; padding: 12px 0 21px; text-align: center; }
.orbit-mark { position: relative; width: 85px; height: 85px; display: grid; place-items: center; margin: 0 auto 14px; }
.atlas-core { width: 47px; height: 47px; display: grid; place-items: center; border: 1px solid rgba(163, 232, 247, .53); border-radius: 16px; color: #09202d; background: linear-gradient(145deg, #8ae2ef, #39b2db 64%, #277dcc); box-shadow: 0 0 40px rgba(74, 184, 224, .28), inset 0 1px rgba(255,255,255,.6); font-size: 22px; font-weight: 800; }
.orbit-ring { position: absolute; inset: 8px 0; border: 1px solid rgba(103, 197, 225, .2); border-radius: 50%; transform: rotate(-28deg); }
.ring-two { inset: 0 9px; transform: rotate(46deg); border-color: rgba(229, 178, 121, .22); }
.orbit-star { position: absolute; color: #f1be7b; font-size: 12px; }
.star-one { top: 13px; right: 5px; }
.star-two { left: 3px; bottom: 13px; color: #6dcfe8; font-size: 19px; }
.welcome .eyebrow { margin-bottom: 9px; color: #8eb4ca; font-size: 8px; }
.welcome h2 { margin: 0; color: #edf5f8; font-size: clamp(25px, 4vw, 37px); font-weight: 470; letter-spacing: -.045em; }
.welcome-copy { margin: 10px 0 20px; color: #91a4b1; font-size: 11px; }
.suggestions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.suggestions button { padding: 9px 11px; border: 1px solid rgba(191, 214, 228, .14); border-radius: 18px; color: #b6c5cf; background: rgba(255,255,255,.035); font-size: 9px; cursor: pointer; transition: .18s; }
.suggestions button:hover { border-color: rgba(87, 189, 231, .35); color: #f1f7fa; background: rgba(75, 160, 196, .1); }
.suggestions button span { margin-right: 5px; color: #74d5ed; }
.messages { display: flex; flex-direction: column; gap: 15px; padding: 15px 3px 28px; }
.message { max-width: 88%; display: flex; align-items: flex-start; gap: 10px; }
.message.user { align-self: flex-end; flex-direction: row-reverse; }
.message-mark { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(139, 216, 235, .32); border-radius: 8px; color: #09202d; background: linear-gradient(145deg, #8ae2ef, #319ec9); font-size: 12px; font-weight: 800; }
.message.user .message-mark { border-color: rgba(189, 213, 228, .15); color: #cbd9e2; background: #263c4c; font-size: 9px; }
.message-body { padding: 10px 13px; border: 1px solid rgba(197, 220, 235, .11); border-radius: 4px 13px 13px 13px; color: #d8e2e8; background: rgba(255,255,255,.035); font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.user .message-body { border-color: rgba(78, 169, 218, .22); border-radius: 13px 4px 13px 13px; background: rgba(54, 125, 168, .14); }
.message-status { display: block; margin-top: 6px; color: #77cfe7; font-size: 9px; }
.composer-wrap { width: min(790px, 100%); margin: 0 auto; padding: 8px 34px 16px; }
.composer { padding: 11px 13px 8px 16px; border: 1px solid rgba(186, 214, 230, .17); border-radius: 15px; background: rgba(20, 37, 51, .94); box-shadow: 0 14px 44px rgba(0,0,0,.2); }
.composer:focus-within { border-color: rgba(89, 190, 231, .48); box-shadow: 0 0 0 3px rgba(75, 170, 214, .07), 0 14px 44px rgba(0,0,0,.2); }
textarea { width: 100%; min-height: 32px; max-height: 180px; padding: 4px 0; border: 0; outline: 0; resize: none; color: #edf4f7; background: transparent; font-size: 12px; line-height: 1.5; }
textarea::placeholder { color: #8297a5; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
.composer-hint { color: #718593; font-size: 8px; }
.composer-footer button { width: 30px; height: 30px; border: 0; border-radius: 9px; color: white; background: linear-gradient(145deg, #43b9e9, #247bd8); box-shadow: 0 3px 13px rgba(34, 122, 196, .2); font-size: 18px; cursor: pointer; }
.composer-footer button:disabled { opacity: .52; cursor: wait; }
.privacy-note { margin: 9px 0 0; color: #6f8391; text-align: center; font-size: 8px; }
.privacy-note span { padding-right: 4px; color: #68cce5; }
.privacy-note b { padding: 0 4px; color: #92a2ae; font-weight: 400; }
.memory-view { min-height: 0; flex: 1; overflow-y: auto; padding: 88px 30px 30px; background: radial-gradient(ellipse at 52% 12%, rgba(42, 85, 111, .12), transparent 44%), #0d1925; }
.memory-page { width: min(850px, 100%); margin: 0 auto; }
.memory-heading { margin-bottom: 21px; }
.memory-heading .panel-kicker { color: #76b0c8; }
.memory-heading h1 { margin: 0; color: #edf5f8; font-size: 34px; font-weight: 500; letter-spacing: -.045em; }
.memory-heading > p { margin: 8px 0 12px; color: #96aab7; font-size: 11px; }
.memory-privacy { display: flex; align-items: center; gap: 7px; color: #7d9eaa; font-size: 9px; }
.memory-privacy span { color: #52d3a0; font-size: 8px; }
.memory-form { padding: 17px; border: 1px solid rgba(193, 216, 230, .16); border-radius: 13px; background: linear-gradient(145deg, rgba(25, 44, 58, .93), rgba(14, 28, 40, .96)); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 12px 32px rgba(0,0,0,.12); }
.memory-form-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.memory-form-heading strong, .memory-form-heading small { display: block; }
.memory-form-heading strong { color: #e0eaf0; font-size: 12px; font-weight: 600; }
.memory-form-heading small { margin-top: 4px; color: #8fa3b0; font-size: 9px; }
.memory-count { color: #718897; font-size: 8px; white-space: nowrap; }
.memory-form textarea { display: block; min-height: 76px; max-height: 220px; padding: 11px 12px; border: 1px solid rgba(187, 214, 230, .13); border-radius: 9px; color: #e8f1f5; background: rgba(6, 17, 27, .43); font-size: 11px; resize: vertical; }
.memory-form textarea:focus { border-color: rgba(89, 190, 231, .4); }
.memory-form textarea::placeholder { color: #748c9b; }
.memory-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; }
.memory-form-footer > p { margin: 0; color: #7d929f; font-size: 8px; line-height: 1.45; }
.memory-form-footer > div { display: flex; align-items: center; gap: 7px; }
.memory-save, .memory-cancel { padding: 8px 11px; border: 1px solid rgba(80, 172, 215, .3); border-radius: 8px; color: #e5f4f8; background: rgba(37, 125, 167, .27); font-size: 9px; cursor: pointer; }
.memory-save:hover { background: rgba(37, 125, 167, .46); }
.memory-cancel { border-color: rgba(180, 204, 219, .16); color: #a7bbc7; background: transparent; }
.memory-list-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 25px 2px 11px; }
.memory-list-heading .panel-kicker { margin-bottom: 4px; }
.memory-list-heading h2 { margin: 0; color: #e0eaf0; font-size: 15px; font-weight: 570; }
.memory-list-heading > span { color: #8197a5; font-size: 8px; }
.memory-list { display: grid; gap: 8px; }
.memory-card { display: flex; align-items: flex-start; gap: 14px; padding: 13px 14px; border: 1px solid rgba(193, 216, 230, .12); border-radius: 11px; background: rgba(22, 39, 53, .8); }
.memory-card-copy { min-width: 0; flex: 1; }
.memory-card-copy p { margin: 0; color: #d9e4ea; font-size: 11px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.memory-provenance { display: block; margin-top: 7px; color: #7c94a3; font-size: 8px; }
.memory-card-actions { flex: 0 0 auto; display: flex; gap: 5px; }
.memory-card-actions button { padding: 6px 8px; border: 1px solid rgba(185, 211, 226, .12); border-radius: 7px; color: #9fb2bf; background: rgba(255,255,255,.025); font-size: 8px; cursor: pointer; }
.memory-card-actions button:hover { color: #e2edf2; background: rgba(172, 201, 220, .09); }
.memory-card-actions .memory-delete:hover { border-color: rgba(218, 120, 133, .3); color: #f2b1b8; background: rgba(138, 54, 65, .17); }
.memory-empty { padding: 19px; border: 1px dashed rgba(187, 213, 228, .18); border-radius: 10px; color: #8ea3af; font-size: 10px; line-height: 1.55; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.message-memory { display: block; margin: 9px 0 0 auto; padding: 3px 7px; border: 1px solid rgba(192, 220, 235, .14); border-radius: 8px; color: #8ed5eb; background: rgba(7, 22, 33, .22); font-size: 8px; cursor: pointer; }
.message-memory:hover { color: #dff9ff; border-color: rgba(99, 196, 226, .35); }

.toast { position: fixed; z-index: 20; left: 50%; bottom: 23px; max-width: calc(100vw - 32px); padding: 11px 15px; transform: translate(-50%, 14px); border: 1px solid rgba(192, 219, 235, .19); border-radius: 10px; color: #e0ebf0; background: #1b3141; box-shadow: 0 12px 30px rgba(0,0,0,.28); font-size: 11px; opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.background-dialog { width: min(650px, calc(100vw - 28px)); max-width: none; max-height: min(760px, calc(100dvh - 30px)); padding: 0; overflow: auto; border: 1px solid rgba(193, 217, 231, .18); border-radius: 18px; color: var(--text); background: #101e2b; box-shadow: 0 30px 100px rgba(0,0,0,.52); }
.background-dialog::backdrop { background: rgba(3, 10, 16, .72); backdrop-filter: blur(8px); }
.background-dialog-card { padding: 21px; }
.background-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.background-dialog-header .panel-kicker { color: #72b1cc; }
.background-dialog-header h2 { margin: 0; color: #eef5f8; font-size: 21px; font-weight: 520; letter-spacing: -.03em; }
.background-dialog-header p { margin: 6px 0 0; color: #9aadb9; font-size: 10px; line-height: 1.5; }
.dialog-close { width: 30px; height: 30px; flex: 0 0 auto; font-size: 19px; }
.background-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.background-item { position: relative; min-width: 0; }
.background-option { position: relative; min-width: 0; overflow: hidden; padding: 0; border: 1px solid rgba(193, 216, 230, .15); border-radius: 11px; color: #e9f1f5; background: #152737; text-align: left; cursor: pointer; }
.background-option:hover { border-color: rgba(102, 194, 230, .45); }
.background-option.selected { border-color: #53b7eb; box-shadow: 0 0 0 2px rgba(69, 168, 218, .15); }
.background-option-preview { position: relative; display: block; width: 100%; aspect-ratio: 16 / 8; overflow: hidden; background: linear-gradient(180deg, #314e67, #ce946f 55%, #124357); }
.background-option-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.background-option-name { display: block; overflow: hidden; padding: 8px 9px; color: #c7d5de; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.background-option-standard .background-option-preview { background: linear-gradient(180deg, #304962 0%, #8c6670 43%, #db9b68 59%, #126174 69%, #0b2839 100%); }
.background-option-standard .background-option-preview::before { content: ""; position: absolute; inset: 17% 0 0; opacity: .9; background: linear-gradient(150deg, transparent 30%, #263744 30.5% 42%, transparent 42.5%), linear-gradient(25deg, transparent 34%, #172a36 34.5% 55%, transparent 55.5%); }
.background-selected-mark { position: absolute; top: 7px; left: 7px; padding: 4px 6px; border-radius: 10px; color: #fff; background: rgba(13, 31, 44, .78); font-size: 8px; }
.background-delete { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 1px solid rgba(255,255,255,.23); border-radius: 7px; color: white; background: rgba(10, 20, 29, .72); font-size: 14px; cursor: pointer; }
.background-delete:hover { background: #8b3641; }
.background-empty { grid-column: 1 / -1; padding: 16px; border: 1px dashed rgba(187, 213, 228, .2); border-radius: 10px; color: #91a5b2; font-size: 10px; line-height: 1.55; }
.rotation-setting { display: flex; align-items: center; gap: 11px; margin-top: 15px; padding: 11px 12px; border: 1px solid rgba(190, 214, 228, .12); border-radius: 10px; background: rgba(143, 177, 198, .045); cursor: pointer; }
.rotation-switch { position: relative; width: 35px; height: 20px; flex: 0 0 auto; }
.rotation-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.rotation-track { position: absolute; inset: 0; border: 1px solid rgba(181, 205, 220, .21); border-radius: 12px; background: #273744; transition: background .18s, border-color .18s; }
.rotation-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #a2b4bf; box-shadow: 0 1px 4px rgba(0,0,0,.24); transition: transform .18s, background .18s; }
.rotation-switch input:checked + .rotation-track { border-color: rgba(82, 186, 224, .54); background: #176384; }
.rotation-switch input:checked + .rotation-track::after { transform: translateX(15px); background: #e5faff; }
.rotation-switch input:focus-visible + .rotation-track { outline: 2px solid var(--cyan); outline-offset: 3px; }
.rotation-switch input:disabled + .rotation-track { opacity: .42; }
.rotation-copy strong, .rotation-copy small { display: block; }
.rotation-copy strong { color: #d7e5ec; font-size: 10px; font-weight: 600; }
.rotation-copy small { margin-top: 4px; color: #8399a8; font-size: 8px; line-height: 1.45; }
.background-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); }
.upload-copy strong, .upload-copy span, .upload-copy small { display: block; }
.upload-copy strong { color: #d9e5eb; font-size: 10px; font-weight: 600; }
.upload-copy span { margin-top: 4px; color: #8ea3b0; font-size: 8px; }
.upload-copy small { margin-top: 5px; color: #70c9e4; font-size: 9px; }
.upload-button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 1px solid rgba(85, 174, 218, .3); border-radius: 9px; color: #e3f3f8; background: rgba(38, 123, 164, .24); font-size: 10px; cursor: pointer; }
.upload-button:hover { background: rgba(38, 123, 164, .4); }
.upload-button span { color: #7bd5f1; font-size: 15px; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 52% 20%, rgba(37, 106, 148, .2), transparent 48%), var(--bg); }
.auth-card { width: min(420px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 20px; background: rgba(16, 31, 44, .95); box-shadow: 0 24px 90px rgba(0,0,0,.28); }
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 42px; letter-spacing: .18em; font-size: 12px; }
.auth-card .eyebrow { justify-content: flex-start; margin-bottom: 13px; color: #82bad2; font-size: 8px; }
.auth-card h1 { margin: 0; color: #edf4f7; font-size: 34px; font-weight: 500; letter-spacing: -.04em; }
.auth-copy { margin: 12px 0 24px; color: #9aabb6; font-size: 12px; line-height: 1.6; }
.auth-form { display: flex; flex-direction: column; gap: 9px; }
.auth-form[hidden] { display: none; }
.auth-form label { margin-top: 6px; color: #b5c4cd; font-size: 10px; }
.auth-form input { width: 100%; padding: 12px 13px; border: 1px solid rgba(191, 215, 230, .16); border-radius: 10px; outline: 0; color: #e8f1f5; background: #0b1823; font-size: 12px; }
.auth-form input:focus { border-color: rgba(85, 190, 230, .5); box-shadow: 0 0 0 3px rgba(62, 166, 210, .07); }
.auth-form button { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 13px 15px; border: 0; border-radius: 10px; color: #f7fbfd; background: linear-gradient(110deg, #177ac5, #258ee0); font-size: 11px; font-weight: 650; cursor: pointer; }
.auth-form button span { font-size: 17px; }
.auth-footnote { margin: 20px 0 0; color: #778b99; font-size: 9px; line-height: 1.5; }

@media (min-width: 1400px) {
  .home-hero { min-height: 415px; flex-basis: 415px; }
  .dashboard-content { padding-left: 22px; padding-right: 22px; }
  .module-card { min-height: 120px; }
  .dash-panel { min-height: 164px; }
}
@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 224px minmax(0, 1fr); }
  .hero-note { right: 24px; width: 160px; }
  .hero-content { width: min(660px, calc(100% - 150px)); margin-right: 80px; }
  .dashboard-content { padding-right: 14px; padding-left: 14px; }
  .dashboard-lower { grid-template-columns: 1fr 1fr; }
  .projects-panel { grid-column: 1 / -1; min-height: 118px; }
  .module-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .module-card { min-height: 101px; padding: 11px; }
}
@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 260px; min-height: 100dvh; max-height: 100dvh; transform: translateX(-102%); transition: transform .23s ease; box-shadow: 20px 0 55px rgba(0,0,0,.38); }
  .sidebar.mobile-open { transform: translateX(0); }
  .main-panel { height: 100dvh; min-height: 560px; }
  .topbar { height: 58px; gap: 9px; padding: 0 14px; background: linear-gradient(180deg, rgba(11,24,36,.50), transparent); }
  .mobile-menu { width: 31px; height: 31px; display: grid; flex: 0 0 auto; font-size: 14px; }
  .mobile-brand { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; color: #eff6fa; font-size: 10px; letter-spacing: .16em; }
  .mobile-brand .brand-mark { width: 22px; height: 24px; }
  .global-search { width: min(270px, 42vw); height: 34px; margin-left: auto; }
  .global-search kbd { display: none; }
  .topbar-right { margin-left: 0; }
  .topbar-context { display: none; }
  .topbar time { font-size: 8px; }
  .background-open { width: 30px; height: 30px; justify-content: center; padding: 0; }
  .background-open-label { display: none; }
  .home-hero { min-height: 410px; flex-basis: auto; padding: 73px 20px 23px; }
  .hero-content { width: min(660px, 100%); margin: 10px 0 0; }
  .hero-note { top: auto; right: 17px; bottom: 18px; width: auto; max-width: 155px; padding: 9px 11px; }
  .hero-note p { margin: 3px 0 6px; font-size: 12px; }
  .hero-note small, .note-sun { display: none; }
  .hero-subtitle { margin-bottom: 19px; }
  .quick-actions { max-width: 560px; margin: 13px auto 0; }
  .dashboard-content { padding: 11px 12px 12px; }
  .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .module-card { min-height: 93px; }
  .module-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .module-card:nth-child(n+5) { display: none; }
  .dashboard-lower { grid-template-columns: 1fr 1fr; }
  .projects-panel { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .topbar { gap: 7px; padding: 0 10px; }
  .mobile-brand { font-size: 9px; }
  .mobile-brand .brand-mark { width: 18px; height: 20px; }
  .global-search { width: 34px; flex: 0 0 34px; justify-content: center; padding: 0; border-color: transparent; background: rgba(9, 24, 38, .44); }
  .global-search > span { font-size: 20px; }
  .global-search input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .global-search:focus-within { position: absolute; left: 52px; right: 110px; width: auto; z-index: 4; justify-content: flex-start; padding: 0 10px; border-color: rgba(218, 232, 242, .3); background: #102232; }
  .global-search:focus-within input { position: static; opacity: 1; }
  .topbar time { max-width: 99px; overflow: hidden; text-overflow: ellipsis; }
  .background-open { width: 28px; height: 28px; border-color: transparent; background: transparent; box-shadow: none; }
  .home-hero { min-height: 393px; padding: 67px 14px 20px; }
  .hero-content h1 { font-size: 34px; }
  .hero-subtitle { max-width: 330px; margin: 9px auto 20px; font-size: 13px; line-height: 1.45; }
  .hero-prompt { min-height: 53px; gap: 9px; padding-left: 13px; }
  .hero-prompt input { font-size: 12px; }
  .hero-prompt button { width: 38px; height: 38px; }
  .quick-actions { padding: 0 2px; gap: 6px; }
  .quick-actions button { padding: 7px 9px; font-size: 8px; }
  .hero-note { right: 12px; bottom: 12px; max-width: 129px; }
  .hero-skyline { height: 40%; }
  .dashboard-content { padding: 9px 9px 12px; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .module-card { min-height: 88px; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-card:nth-child(n+5) { display: flex; }
  .module-card:nth-child(n+7) { display: none; }
  .module-card strong { font-size: 11px; }
  .module-card small { font-size: 8px; }
  .dashboard-lower { grid-template-columns: 1fr; gap: 7px; margin-top: 7px; }
  .dash-panel { min-height: 125px; padding: 12px; }
  .projects-panel { grid-column: auto; min-height: 122px; }
  .empty-state { min-height: 66px; }
  .dashboard-footer { flex-direction: column; gap: 4px; padding: 10px 2px; }
  .chat-view { padding-top: 65px; }
  .chat-heading { align-items: flex-start; padding: 10px 17px 12px; }
  .chat-heading h1 { font-size: 23px; }
  .chat-heading p { max-width: 225px; font-size: 10px; }
  .secondary-button { padding: 8px 9px; font-size: 9px; }
  .chat-stage { padding: 7px 16px; }
  .welcome { padding-bottom: 12px; }
  .orbit-mark { transform: scale(.83); margin-bottom: 7px; }
  .welcome-copy { font-size: 10px; line-height: 1.5; }
  .suggestions { gap: 6px; }
  .suggestions button { padding: 8px 9px; font-size: 8px; }
  .composer-wrap { padding: 6px 11px 11px; }
  .composer-hint { font-size: 7px; }
  .auth-card { padding: 28px 23px; }
  .memory-view { padding: 70px 13px 20px; }
  .memory-heading h1 { font-size: 28px; }
  .memory-heading > p { line-height: 1.5; }
  .memory-form { padding: 13px; }
  .memory-form-heading { flex-direction: column; gap: 7px; }
  .memory-form-footer { align-items: flex-start; flex-direction: column; }
  .memory-form-footer > div { width: 100%; }
  .memory-save, .memory-cancel { flex: 1; }
  .memory-card { flex-direction: column; gap: 10px; }
  .memory-card-actions { align-self: flex-end; }
  .background-dialog-card { padding: 16px; }
  .background-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .background-dialog-header h2 { font-size: 18px; }
  .background-dialog-footer { align-items: flex-start; flex-direction: column; }
  .upload-button { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.workspace-view { min-height: 0; flex: 1; overflow-y: auto; padding: 88px 30px 30px; background: radial-gradient(ellipse at 52% 12%, rgba(42, 85, 111, .12), transparent 44%), #0d1925; }
.workspace-page { width: min(850px, 100%); margin: 0 auto; }
.workspace-heading { margin-bottom: 22px; }
.workspace-heading .panel-kicker, .workspace-panel-heading .panel-kicker { color: #76b0c8; }
.workspace-heading h1 { margin: 0; color: #edf5f8; font-size: 34px; font-weight: 500; letter-spacing: -.045em; }
.workspace-heading > p { margin: 8px 0 0; color: #96aab7; font-size: 11px; }
.workspace-panel { margin-bottom: 12px; padding: 18px; border: 1px solid rgba(193, 216, 230, .14); border-radius: 13px; background: linear-gradient(145deg, rgba(25, 44, 58, .93), rgba(14, 28, 40, .96)); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 12px 32px rgba(0,0,0,.12); }
.workspace-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.workspace-panel-heading h2 { margin: 3px 0 0; color: #e0eaf0; font-size: 15px; font-weight: 570; }
.workspace-panel-heading p { margin: 5px 0 0; color: #8fa3b0; font-size: 9px; line-height: 1.5; }
.workspace-meta { color: #8197a5; font-size: 8px; text-align: right; }
.connection-indicator { color: #8197a5; font-size: 14px; }
.connection-indicator.connected { color: #55d59e; }
.calendar-form { display: grid; margin-top: 17px; }
.calendar-form[hidden] { display: none; }
.calendar-form label { margin: 0 0 6px; color: #c6d5dd; font-size: 9px; }
.calendar-form input { min-width: 0; margin-bottom: 12px; padding: 10px 11px; border: 1px solid rgba(187,214,230,.16); border-radius: 8px; outline: 0; color: #e7f0f4; background: rgba(6,17,27,.43); font: inherit; font-size: 10px; }
.calendar-form input:focus { border-color: rgba(89,190,231,.48); }
.calendar-form input::placeholder { color: #718897; }
.workspace-note { margin: 0 0 13px; color: #8298a6; font-size: 8px; line-height: 1.6; }
.workspace-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.primary-button, .secondary-button, .quiet-button { min-height: 32px; padding: 0 12px; border: 1px solid rgba(80,172,215,.3); border-radius: 8px; color: #e5f4f8; background: rgba(37,125,167,.27); font: inherit; font-size: 9px; cursor: pointer; }
.primary-button:hover, .secondary-button:hover { background: rgba(37,125,167,.45); }
.primary-button:disabled, .secondary-button:disabled { opacity: .55; cursor: wait; }
.quiet-button { border-color: rgba(180,204,219,.14); color: #9db0bc; background: transparent; }
.quiet-button:hover { border-color: rgba(180,204,219,.3); color: #e4edf2; }
.workspace-feedback { min-height: 12px; margin: 10px 0 0; color: #8eb0bd; font-size: 8px; line-height: 1.45; }
.calendar-events { display: grid; gap: 7px; margin-top: 13px; }
.workspace-empty { padding: 19px 12px; border: 1px dashed rgba(193,216,230,.13); border-radius: 9px; color: #8298a6; font-size: 9px; text-align: center; }
.calendar-event { display: flex; align-items: center; gap: 13px; padding: 10px 11px; border: 1px solid rgba(193,216,230,.1); border-radius: 9px; background: rgba(7,18,28,.32); }
.calendar-event time { width: 70px; flex: 0 0 auto; display: grid; gap: 3px; color: #8fb3c4; font-size: 8px; }
.calendar-event time strong { color: #cde5ef; font-size: 9px; font-weight: 600; }
.calendar-event-content { min-width: 0; display: grid; gap: 4px; }
.calendar-event-content strong { overflow: hidden; color: #e0eaf0; font-size: 10px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event-content small { overflow: hidden; color: #8197a5; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-list { display: grid; gap: 7px; margin-top: 15px; }
.admin-user { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 11px; border: 1px solid rgba(193,216,230,.1); border-radius: 9px; background: rgba(7,18,28,.32); }
.admin-user-identity { min-width: 0; flex: 1; display: grid; gap: 4px; }
.admin-user-identity strong { overflow: hidden; color: #e0eaf0; font-size: 10px; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-identity small { overflow: hidden; color: #8197a5; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.admin-role { padding: 5px 7px; border: 1px solid rgba(180,204,219,.12); border-radius: 99px; color: #9db0bc; font-size: 8px; white-space: nowrap; }
.admin-role.admin { border-color: rgba(82,211,160,.21); color: #65d7a9; background: rgba(45,157,112,.09); }
.role-button { min-height: 27px; padding: 0 8px; font-size: 8px; white-space: nowrap; }
.admin-security-panel { margin-top: 18px; }
.home-calendar-link { padding: 4px 0; border: 0; color: #70bfe8; background: transparent; font: inherit; font-size: 8px; cursor: pointer; white-space: nowrap; }
.home-calendar-link:hover { color: #c8efff; }
.home-agenda { min-height: 86px; }
.home-agenda .empty-state { min-height: 86px; }
.home-agenda-list { display: grid; gap: 5px; padding-top: 8px; }
.home-agenda-item { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 5px 4px; border-bottom: 1px solid rgba(204,223,234,.07); }
.home-agenda-item time { flex: 0 0 42px; color: #69bfe7; font-size: 8px; font-variant-numeric: tabular-nums; }
.home-agenda-item strong { min-width: 0; overflow: hidden; color: #d4e0e7; font-size: 9px; font-weight: 540; text-overflow: ellipsis; white-space: nowrap; }
.home-agenda-more { padding: 4px 4px 0 55px; color: #7c93a2; font-size: 8px; }
.home-task-list, .task-list { display: grid; gap: 6px; margin-top: 12px; }
.home-task-list .workspace-empty { padding: 16px 9px; }
.home-task-empty { padding: 18px 8px; color: #8fa1ad; font-size: 9px; }
.task-row { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid rgba(193,216,230,.1); border-radius: 9px; background: rgba(7,18,28,.32); }
.task-row.compact { padding: 6px 5px; border: 0; border-bottom: 1px solid rgba(204,223,234,.07); border-radius: 0; background: transparent; }
.task-row input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: #36b884; cursor: pointer; }
.task-copy { min-width: 0; display: grid; gap: 4px; }
.task-copy strong { overflow: hidden; color: #dce7ec; font-size: 10px; font-weight: 540; text-overflow: ellipsis; }
.task-row.compact .task-copy strong { font-size: 9px; }
.task-copy small { color: #8197a5; font-size: 8px; }
.task-row.complete .task-copy strong { color: #728795; text-decoration: line-through; }
.home-task-more { justify-self: start; padding: 4px 5px; border: 0; color: #70bfe8; background: transparent; font: inherit; font-size: 8px; cursor: pointer; }
.action-card { margin-top: 12px; padding: 11px 12px; border: 1px solid rgba(100,187,219,.24); border-radius: 10px; color: #dce9ef; background: linear-gradient(145deg, rgba(22,60,78,.6), rgba(12,32,45,.7)); }
.action-card > strong { display: block; font-size: 10px; font-weight: 650; }
.action-type { display: block; margin-top: 4px; color: #83b8cf; font-size: 8px; }
.action-card ul { display: grid; gap: 4px; margin: 9px 0 0; padding-left: 16px; color: #c2d3dc; font-size: 9px; line-height: 1.45; }
.action-card-buttons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.action-card-buttons .primary-button, .action-card-buttons .quiet-button { min-height: 28px; padding: 0 9px; font-size: 8px; }
.action-result { margin: 8px 0 0; color: #9eb0bb; font-size: 8px; }
.action-result.success { color: #73ddb0; }
.action-approved { border-color: rgba(82,211,160,.17); }
.action-rejected, .action-expired { opacity: .7; }
.action-failed { border-color: rgba(240,135,119,.25); }
.reminders-sync-controls { display: grid; justify-items: start; gap: 10px; margin-top: 15px; }
.reminders-sync-controls .workspace-note { margin: 0; }
.reminders-setup { width: 100%; display: grid; gap: 7px; padding: 13px; border: 1px solid rgba(193,216,230,.12); border-radius: 9px; background: rgba(6,17,27,.35); }
.reminders-setup[hidden] { display: none; }
.reminders-setup label { color: #c6d5dd; font-size: 9px; }
.reminders-setup input { min-width: 0; width: 100%; padding: 9px 10px; border: 1px solid rgba(187,214,230,.14); border-radius: 7px; color: #e7f0f4; background: rgba(6,17,27,.6); font: inherit; font-size: 9px; }
.reminders-setup input[readonly] { color: #a9c4d0; }
.reminders-setup small { color: #8298a6; font-size: 8px; line-height: 1.5; }
.reminders-token-row { min-width: 0; display: flex; gap: 7px; }
.reminders-token-row .secondary-button { flex: 0 0 auto; }
@media (max-width: 560px) {
  .workspace-view { padding: 70px 13px 20px; }
  .workspace-heading h1 { font-size: 28px; }
  .workspace-panel { padding: 13px; }
  .admin-user { align-items: flex-start; flex-wrap: wrap; }
  .admin-role { margin-left: auto; }
  .role-button { margin-left: auto; }
}