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

:root {
  color-scheme: light;
  --night-950: #090712;
  --night-900: #100d1c;
  --night-800: #1a1729;
  --aura-cyan: #55e9ff;
  --aura-lilac: #a99aff;
  --aura-magenta: #f36ccb;
  --brand-white: #f7f6fc;
  --brand-muted: #b7b6c7;
  --canvas: #f6f7fa;
  --surface: #ffffff;
  --bg: var(--canvas);
  --panel: var(--surface);
  --ink: #242833;
  --ink-soft: #424855;
  --muted: #858b98;
  --faint: #a5aab4;
  --line: #eceef2;
  --line-strong: #e2e5eb;
  --accent: #6654d8;
  --accent-deep: #5041ad;
  --accent-soft: #f0edff;
  --brand-gradient: linear-gradient(110deg, var(--aura-cyan) 0%, var(--aura-lilac) 52%, var(--aura-magenta) 100%);
  --coral: #d56d5f;
  --coral-soft: #fff0ed;
  --blue: #577cc5;
  --blue-soft: #edf4ff;
  --green: #428b72;
  --green-soft: #eaf5f0;
  --amber: #bd8a36;
  --amber-soft: #fff5e4;
  --shadow: 0 2px 10px rgba(35, 42, 58, .035), 0 14px 32px rgba(35, 42, 58, .025);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "DM Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(85,69,194,.18); outline-offset: 2px; }
h1, h2, h3, p { margin-top: 0; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 3; display: flex; flex-direction: column; width: 244px; padding: 25px 15px 16px; background: var(--night-900); border-right: 1px solid #292536; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 9px; margin-bottom: 40px; border: 0; background: transparent; text-align: left; }
.brand-logo { display: block; width: 194px; height: auto; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: #fff; background: #252631; border-radius: 12px; font: 800 16px Manrope, sans-serif; letter-spacing: -1px; }
.brand-mark span { color: #b4a9ff; }
.brand-name { font: 800 16px Manrope, sans-serif; letter-spacing: 1.2px; }
.brand-name small { display: block; padding-top: 2px; color: #a6a9b1; font: 700 8px "DM Sans", sans-serif; letter-spacing: 1.5px; }
.side-label, .eyebrow { color: #a0a5af; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; }
.sidebar .side-label { color: #828093; }
.side-label { padding: 0 12px; margin-bottom: 12px; }
.nav-list { display: grid; gap: 4px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 43px; padding: 0 12px; color: #aaa8b8; background: transparent; border: 0; border-radius: 9px; text-align: left; transition: background .15s ease, color .15s ease; }
.nav-item:hover { background: rgba(255,255,255,.055); color: var(--brand-white); }
.nav-item.active { color: var(--brand-white); background: linear-gradient(100deg, rgba(85,233,255,.09), rgba(169,154,255,.17) 56%, rgba(243,108,203,.09)); box-shadow: inset 2px 0 0 var(--aura-cyan); font-weight: 700; }
.nav-icon { width: 18px; color: #888699; font-size: 18px; line-height: 1; text-align: center; }
.nav-item.active .nav-icon { color: var(--aura-lilac); }
.nav-count { min-width: 22px; margin-left: auto; padding: 3px 6px; color: #c4c1d1; background: rgba(255,255,255,.09); border-radius: 6px; font-size: 10px; text-align: center; }
.side-spacer { flex: 1; }
.sidebar-footer { display: flex; align-items: center; gap: 10px; padding: 13px 6px 2px; border-top: 1px solid #2b2839; }
.avatar { display: grid; width: 34px; height: 34px; place-items: center; color: #eeeaff; background: linear-gradient(145deg, #4f4778, #242238); border: 1px solid rgba(169,154,255,.35); border-radius: 50%; font-weight: 700; }
.user-label { display: grid; min-width: 0; gap: 3px; }
.user-label strong { overflow: hidden; color: #efedf6; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.user-label span { color: #9f9cac; font-size: 11px; }
.sidebar-footer .icon-button { color: #aaa8b8; }
.sidebar-footer .icon-button:hover { color: var(--aura-cyan); background: rgba(255,255,255,.06); }
.sidebar-footer .icon-button { margin-left: auto; transform: rotate(45deg); }

.main { min-height: 100vh; margin-left: 244px; }
.topbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 67px; padding: 0 38px; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.breadcrumbs { display: flex; align-items: center; gap: 10px; color: #9b9fac; font-size: 12px; }
.breadcrumbs strong { color: #424754; font-weight: 600; }
.crumb-separator { color: #d5d8df; }
.top-actions { display: flex; align-items: center; gap: 13px; }
.search-wrap { display: flex; align-items: center; gap: 9px; width: min(320px, 32vw); height: 37px; padding: 0 10px; color: #a0a5af; background: #f8f9fb; border: 1px solid var(--line); border-radius: 8px; }
.search-wrap > span { font-size: 19px; }
.search { width: 100%; min-width: 0; padding: 0; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 12px; }
.search::placeholder { color: #a5aab4; }
kbd { display: inline-grid; min-width: 20px; height: 20px; place-items: center; color: #9ca1ab; background: #fff; border: 1px solid #e7e9ee; border-radius: 5px; font: 10px "DM Sans", sans-serif; }
.page-content { max-width: 1510px; padding: 34px 38px 54px; margin: 0 auto; }
.welcome-row, .page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.welcome-row h1, .page-heading h1 { margin: 8px 0 6px; color: #252833; font: 700 28px/1.2 Manrope, sans-serif; letter-spacing: -.8px; }
.welcome-row p, .page-heading p { margin: 0; font-size: 13px; }
.welcome-dot { color: var(--accent); }
.muted { color: var(--muted); }
.eyebrow { margin-bottom: 8px; }

.primary, .secondary, .icon-button, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; transition: all .15s ease; }
.primary { min-height: 39px; padding: 0 15px; color: #fff; background: linear-gradient(105deg, #6252cb, #7957c9); border: 1px solid #6b55c9; border-radius: 8px; box-shadow: 0 3px 10px rgba(102,84,216,.18); }
.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.primary.compact { min-height: 36px; padding: 0 12px; font-size: 12px; }
.primary.full { justify-content: space-between; width: 100%; min-height: 45px; }
.secondary { min-height: 38px; padding: 0 12px; color: #595f6b; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 12px; }
.secondary:hover { color: var(--accent); border-color: #cec9f2; }
.secondary.compact { min-height: 33px; }
.icon-button { width: 32px; height: 32px; color: #959aa5; background: transparent; border: 0; border-radius: 7px; font-size: 17px; }
.icon-button:hover { color: var(--accent); background: #f2f1fb; }
.icon-button.tiny { width: 25px; height: 25px; }
.text-button { padding: 4px 0; color: var(--accent); background: transparent; border: 0; font-size: 11px; }
.text-button:hover { color: var(--accent-deep); }

.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 17px; }
.stat-card { position: relative; display: flex; flex-direction: column; min-height: 154px; padding: 15px 17px 13px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 2px 5px rgba(30,36,50,.02); text-align: left; transition: transform .15s ease, box-shadow .15s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.stat-top { display: flex; align-items: center; justify-content: space-between; color: #727884; font-size: 11px; font-weight: 600; }
.stat-icon { display: grid; width: 30px; height: 30px; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 8px; font-size: 15px; }
.stat-card.coral .stat-icon { color: var(--coral); background: var(--coral-soft); }
.stat-card.blue .stat-icon { color: var(--blue); background: var(--blue-soft); }
.stat-card.green .stat-icon { color: var(--green); background: var(--green-soft); }
.stat-card > strong { margin-top: 8px; color: #292c37; font: 700 28px Manrope, sans-serif; letter-spacing: -.8px; }
.stat-description { margin-top: 0; color: #777d89; font-size: 11px; }
.stat-link { display: flex; justify-content: space-between; margin-top: auto; padding-top: 10px; color: #9a9fab; border-top: 1px solid #f1f2f5; font-size: 10px; }
.stat-link b { color: #a8acb6; font-size: 13px; font-weight: 500; }

.home-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr); gap: 16px; margin-bottom: 16px; }
.panel { min-width: 0; padding: 19px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 2px 5px rgba(30,36,50,.02); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.panel-heading h2, .subsection-head h2 { margin: 0; color: #30333d; font: 700 16px Manrope, sans-serif; letter-spacing: -.3px; }
.panel-heading .eyebrow, .subsection-head .eyebrow { margin-bottom: 5px; }
.task-list { display: grid; gap: 1px; margin-top: 14px; }
.task-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 13px 2px; border-bottom: 1px solid #f0f1f4; }
.task-row:last-child { border-bottom: 0; }
.check-task { flex: 0 0 auto; width: 17px; height: 17px; padding: 0; background: #fff; border: 1.5px solid #d6d9e0; border-radius: 50%; }
.check-task:hover { border-color: var(--accent); }
.check-task.checked { background: var(--green); border-color: var(--green); }
.task-row-main { display: grid; min-width: 0; gap: 4px; }
.task-row-main strong { overflow: hidden; color: #444956; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.task-row-meta { display: flex; gap: 5px; color: #9a9fab; font-size: 10px; }
.task-row-meta .overdue { color: var(--coral); }
.priority-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; }
.priority-high i, .priority-dot.priority-high { background: #d77766; }
.priority-medium i, .priority-dot.priority-medium { background: #d6a047; }
.priority-low i, .priority-dot.priority-low { background: #99a0aa; }
.area-shortcuts { display: grid; gap: 2px; margin-top: 11px; }
.area-shortcut { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 0; background: transparent; border: 0; border-bottom: 1px solid #f0f1f4; text-align: left; }
.area-shortcut:last-child { border-bottom: 0; }
.area-shortcut:hover .area-shortcut-copy strong { color: var(--accent); }
.area-icon { display: grid; flex: 0 0 auto; width: 31px; height: 31px; place-items: center; border-radius: 9px; font-size: 15px; }
.area-icon.tone-violet, .project-dot.tone-violet { color: #6657be; background: #efedff; }
.area-icon.tone-blue, .project-dot.tone-blue { color: #5478bc; background: #edf4ff; }
.area-icon.tone-green, .project-dot.tone-green { color: #438870; background: #e9f5ee; }
.area-icon.tone-amber, .project-dot.tone-amber { color: #ad843d; background: #fff5e6; }
.area-icon.tone-gray, .project-dot.tone-gray { color: #7b8089; background: #f0f1f3; }
.area-shortcut-copy { display: grid; min-width: 0; gap: 3px; }
.area-shortcut-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.area-shortcut-copy small { color: #a0a5af; font-size: 10px; }
.shortcut-count { margin-left: auto; color: #9b9fac; font-size: 10px; }
.shortcut-arrow { color: #babec7; font-size: 13px; }
.project-panel { padding-bottom: 15px; }
.project-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.project-tile { min-width: 0; padding: 12px; background: #fff; border: 1px solid #eceef2; border-radius: 9px; text-align: left; transition: border-color .15s ease, background .15s ease; }
.project-tile:hover { background: #fcfbff; border-color: #d2cdf4; }
.project-tile-top { display: flex; align-items: center; gap: 6px; margin-bottom: 11px; }
.project-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.project-parent { overflow: hidden; color: #9a9fab; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.project-more { margin-left: auto; color: #b8bbc4; font-size: 12px; }
.project-tile > strong { display: block; overflow: hidden; color: #4b505d; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.project-progress { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.project-progress > span { flex: 1; height: 4px; overflow: hidden; background: #f0f1f4; border-radius: 5px; }
.project-progress i { display: block; height: 100%; background: #8d81db; border-radius: 5px; }
.project-progress small { color: #9da2ad; font-size: 9px; white-space: nowrap; }

.page-heading { margin-bottom: 23px; }
.page-heading h1 { font-size: 25px; }
.area-layout { display: grid; grid-template-columns: 246px minmax(0, 1fr); align-items: start; gap: 17px; }
.area-list-panel { position: sticky; top: 84px; padding: 16px 11px; }
.area-list-panel > .eyebrow { padding: 0 8px; }
.area-select-list { display: grid; gap: 3px; margin-top: 10px; }
.area-select { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 8px; background: transparent; border: 0; border-radius: 8px; text-align: left; }
.area-select.selected { background: #f5f3ff; }
.area-select > span:nth-child(2) { display: grid; min-width: 0; gap: 4px; }
.area-select strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.area-select small { color: #9ba0aa; font-size: 9px; }
.area-select > b { margin-left: auto; color: #9298a3; font-size: 10px; font-weight: 500; }
.area-detail { display: grid; gap: 17px; }
.area-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px; }
.area-hero-title { display: flex; align-items: center; gap: 14px; }
.large-icon { width: 48px; height: 48px; font-size: 21px; }
.area-hero .pill { display: inline-block; padding: 4px 7px; color: #737987; background: #f7f8fa; border: 1px solid #eff0f3; border-radius: 5px; font-size: 9px; }
.area-hero h2 { margin: 7px 0 4px; font: 700 19px Manrope, sans-serif; }
.area-hero p { margin: 0; font-size: 11px; }
.area-hero-numbers { display: flex; gap: 20px; }
.area-hero-numbers div { display: grid; gap: 3px; text-align: right; }
.area-hero-numbers strong { font: 700 17px Manrope, sans-serif; }
.area-hero-numbers span { color: #999eaa; font-size: 9px; }
.subsection-head { display: flex; align-items: center; justify-content: space-between; margin: 0 1px -7px; }
.subsection-head h2 { font-size: 15px; }
.child-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.child-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 9px; text-align: left; }
.child-card:hover, .child-card.chosen { border-color: #cfcaf3; box-shadow: 0 0 0 2px rgba(85,69,194,.05); }
.child-card-icon { display: grid; width: 29px; height: 29px; flex: 0 0 auto; place-items: center; color: var(--accent); background: #f1efff; border-radius: 8px; }
.child-card-copy { display: grid; min-width: 0; gap: 3px; }
.child-card-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.child-card-copy small { color: #9da2ad; font-size: 9px; }
.child-open-count { margin-left: auto; color: #989eaa; font-size: 9px; white-space: nowrap; }
.child-arrow { color: #b5b9c2; }
.detail-tasks { padding: 17px; }
.detail-tasks .task-list { margin-top: 8px; }

.board-toolbar { display: flex; align-items: center; justify-content: space-between; margin: -5px 0 13px; }
.board-summary { display: flex; align-items: center; gap: 8px; color: #8b909c; font-size: 11px; }
.summary-dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.filter-select { width: auto; min-width: 150px; min-height: 34px; padding: 0 9px; color: #686e7a; background: #fff; border: 1px solid var(--line); border-radius: 7px; font-size: 10px; }
.board-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 11px; }
.board-column { min-width: 0; padding: 10px; background: #f0f1f5; border-radius: 10px; }
.column-heading { display: flex; align-items: center; gap: 8px; padding: 3px 2px 11px; color: #5e6470; font-size: 11px; }
.column-status { width: 8px; height: 8px; border-radius: 50%; }
.column-status.status-todo { background: #8d929c; }
.column-status.status-progress { background: #6788c5; }
.column-status.status-blocked { background: #d49a43; }
.column-status.status-done { background: #56a082; }
.column-count { display: grid; min-width: 19px; height: 19px; place-items: center; margin-left: auto; color: #848995; background: #e4e6eb; border-radius: 6px; font-size: 9px; }
.column-cards { display: grid; gap: 8px; }
.board-card { min-width: 0; padding: 11px; background: #fff; border: 1px solid #e9ebf0; border-radius: 8px; box-shadow: 0 2px 5px rgba(30,36,50,.025); }
.board-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.priority-label { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; }
.priority-label i { width: 6px; height: 6px; border-radius: 50%; }
.priority-label.priority-high { color: #c56c60; }
.priority-label.priority-medium { color: #b3863f; }
.priority-label.priority-low { color: #888e99; }
.board-card > strong { display: block; color: #444956; font-size: 11px; line-height: 1.5; }
.board-card > p { margin: 5px 0 9px; color: #9297a2; font-size: 10px; line-height: 1.45; }
.board-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 12px 0 8px; }
.client-chip { display: inline-flex; align-items: center; gap: 5px; overflow: hidden; color: #898e99; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.client-chip .project-dot { width: 6px; height: 6px; }
.due-chip { color: #8d929c; font-size: 9px; white-space: nowrap; }
.due-chip.overdue { color: var(--coral); }
.status-select { width: 100%; min-height: 27px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; font-size: 9px; }
.status-select.status-todo { color: #747a86; background: #f3f4f6; }
.status-select.status-progress { color: #5879b5; background: #edf3ff; }
.status-select.status-blocked { color: #aa7a30; background: #fff4df; }
.status-select.status-done { color: #44876d; background: #eaf5ef; }
.column-empty { padding: 20px 5px; color: #a8adb7; font-size: 10px; text-align: center; }

.calendar-panel { padding: 20px; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.calendar-toolbar h2 { margin: 0; font: 700 17px Manrope, sans-serif; text-transform: capitalize; }
.calendar-toolbar h2 span { color: #999eaa; font-weight: 500; }
.calendar-nav { display: flex; gap: 7px; }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.day-column { min-width: 0; min-height: 390px; border-right: 1px solid var(--line); }
.day-column:first-child { border-left: 1px solid var(--line); }
.day-column.today { background: #faf9ff; }
.day-heading { display: grid; justify-items: center; gap: 6px; padding: 12px 3px; border-bottom: 1px solid var(--line); color: #989daa; font-size: 9px; text-transform: uppercase; }
.day-heading strong { display: grid; width: 27px; height: 27px; place-items: center; color: #5f6572; border-radius: 50%; font-size: 11px; }
.day-column.today .day-heading strong { color: #fff; background: var(--accent); }
.day-items { display: grid; align-content: start; gap: 6px; padding: 8px 5px; }
.calendar-item { position: relative; display: grid; gap: 5px; padding: 8px 7px; border-radius: 6px; }
.event-item { background: #f1efff; border-left: 2px solid #9083dc; }
.task-item { background: #eff6f2; border-left: 2px solid #70aa8f; }
.calendar-item-time { color: #858b97; font-size: 9px; }
.calendar-item strong { color: #4a4f5c; font-size: 9px; line-height: 1.4; }
.calendar-item small { overflow: hidden; color: #969ba5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-item button { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; color: #999eaa; background: transparent; border: 0; opacity: 0; }
.calendar-item:hover button { opacity: 1; }
.calendar-empty { padding: 16px 0; color: #d2d5dc; text-align: center; }

.notes-area-filter { display: flex; flex-wrap: wrap; gap: 7px; margin: -5px 0 16px; }
.filter-chip { min-height: 29px; padding: 0 10px; color: #828793; background: transparent; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 10px; }
.filter-chip.active, .filter-chip:hover { color: var(--accent); background: var(--accent-soft); border-color: #d9d4f5; }
.notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.note-card { min-height: 203px; padding: 15px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.note-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.small-icon { width: 27px; height: 27px; font-size: 13px; }
.note-card .eyebrow { overflow: hidden; margin: 0 0 8px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.note-card h2 { margin: 0 0 8px; color: #414652; font: 700 13px Manrope, sans-serif; }
.note-card p { min-height: 36px; color: #858b96; font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.note-card-foot { display: flex; justify-content: space-between; padding-top: 10px; color: #a0a5af; border-top: 1px solid #f0f1f4; font-size: 9px; }
.note-card-foot span { color: var(--accent); }

.search-results { display: grid; gap: 12px; max-width: 780px; }
.search-results .panel { padding: 15px 17px; }
.search-result { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 0; background: transparent; border: 0; border-bottom: 1px solid #f0f1f4; text-align: left; }
.search-result:last-child { border-bottom: 0; }
.search-result > span:nth-child(2) { display: grid; gap: 4px; }
.search-result strong { font-size: 11px; }
.search-result small { color: #999eaa; font-size: 9px; }
.search-result > b, .search-result > .pill { margin-left: auto; }
.search-result-mark { display: grid; width: 27px; height: 27px; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 7px; }
.empty-state { display: grid; justify-items: center; padding: 38px 14px; color: #999eaa; text-align: center; }
.empty-state > span { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 10px; color: var(--accent); background: var(--accent-soft); border-radius: 12px; font-size: 18px; }
.empty-state > strong { color: #606572; font-size: 12px; }
.empty-state p { max-width: 270px; margin: 5px 0 0; font-size: 10px; line-height: 1.5; }

.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(34,37,48,.4); backdrop-filter: blur(3px); }
.modal { width: min(520px, 100%); max-height: min(90vh, 780px); overflow: auto; padding: 21px; background: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 13px; box-shadow: 0 22px 80px rgba(26,27,43,.2); }
.modal-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.modal-heading h2 { margin: 0; font: 700 18px Manrope, sans-serif; }
.modal .field { display: grid; gap: 7px; margin-top: 14px; }
.modal label, .login-panel label { color: #747a86; font-size: 10px; font-weight: 700; }
.input, .select, .textarea { width: 100%; min-height: 39px; padding: 9px 10px; color: var(--ink); background: #fbfbfc; border: 1px solid #e7e9ee; border-radius: 7px; }
.input, .select { font-size: 11px; }
.textarea { min-height: 72px; resize: vertical; font-size: 11px; }
.note-editor { min-height: 125px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }

.login-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; background: #fff; }
.login-aside { position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 10vw; color: #fff; background: radial-gradient(ellipse at 78% 77%, rgba(243,108,203,.10), transparent 46%), radial-gradient(ellipse at 18% 70%, rgba(85,233,255,.09), transparent 40%), var(--night-900); }
.brand-logo-large { position: relative; z-index: 1; display: block; width: min(290px, 100%); height: auto; }
.login-tag { margin-top: 50px; color: var(--aura-cyan); font-size: 9px; font-weight: 700; letter-spacing: 1.4px; }
.login-aside p { z-index: 1; margin: 13px 0 0; font: 700 clamp(25px, 3.5vw, 42px)/1.25 Manrope, sans-serif; letter-spacing: -1px; }
.login-orbit { position: absolute; right: -130px; bottom: -180px; width: 520px; height: 520px; border: 1px solid rgba(169,154,255,.22); border-radius: 50%; box-shadow: 0 0 42px rgba(85,233,255,.045), inset 0 0 48px rgba(243,108,203,.035); }
.login-orbit::before, .login-orbit::after { position: absolute; inset: 38px; border: 1px solid rgba(169,154,255,.16); border-radius: 50%; content: ""; }
.login-orbit::after { inset: 82px; }
.login-panel { align-self: center; width: min(400px, 84%); padding: 25px 0; margin: 0 auto; }
.login-panel h1 { margin: 10px 0 8px; font: 700 27px Manrope, sans-serif; letter-spacing: -.6px; }
.login-panel > p { font-size: 12px; line-height: 1.55; }
.login-panel .field { display: grid; gap: 8px; margin-top: 18px; }
.login-panel .input { min-height: 43px; }
.login-footnote { margin-top: 20px; color: #a1a6b0; font-size: 9px !important; text-align: center; }

/* UN1TY cosmic workspace — refined from the original halo and its cyan/lilac/magenta palette. */
:root {
  color-scheme: dark;
  --night-950: #070812;
  --night-900: #0b0e1b;
  --night-800: #121629;
  --canvas: #090b15;
  --surface: #101321;
  --bg: var(--canvas);
  --panel: rgba(17, 20, 36, .88);
  --ink: #f3f2fa;
  --ink-soft: #d0cfdd;
  --muted: #9295aa;
  --faint: #777b91;
  --line: rgba(184, 190, 226, .11);
  --line-strong: rgba(184, 190, 226, .2);
  --accent: #a99aff;
  --accent-deep: #8b7ce5;
  --accent-soft: rgba(169,154,255,.12);
  --coral: #ff928e;
  --coral-soft: rgba(255,146,142,.12);
  --blue: #80bfff;
  --blue-soft: rgba(128,191,255,.12);
  --green: #79ddb5;
  --green-soft: rgba(121,221,181,.12);
  --amber: #f4c36b;
  --amber-soft: rgba(244,195,107,.12);
  --shadow: 0 18px 52px rgba(0,0,0,.25), 0 0 36px rgba(102,92,190,.06);
}
body {
  min-height: 100vh;
  background: radial-gradient(ellipse at 76% 2%, rgba(88,70,155,.14), transparent 34%), radial-gradient(ellipse at 95% 78%, rgba(139,49,124,.09), transparent 31%), radial-gradient(ellipse at 20% 100%, rgba(31,122,153,.08), transparent 35%), var(--bg);
  color: var(--ink);
}
body::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(1px 1px at 14% 20%,rgba(255,255,255,.34) 50%,transparent 100%),radial-gradient(1px 1px at 72% 14%,rgba(169,154,255,.44) 50%,transparent 100%),radial-gradient(1px 1px at 84% 67%,rgba(85,233,255,.34) 50%,transparent 100%),radial-gradient(1px 1px at 43% 78%,rgba(255,255,255,.22) 50%,transparent 100%),radial-gradient(1px 1px at 8% 82%,rgba(243,108,203,.28) 50%,transparent 100%); content: ""; opacity: .55; }
.sidebar { background: linear-gradient(180deg,rgba(13,15,29,.97),rgba(9,11,21,.98)); border-right-color: var(--line); box-shadow: 12px 0 42px rgba(0,0,0,.13); }
.brand { margin-bottom: 43px; }
.brand-logo { width: 184px; }
.sidebar .side-label { color: #777b93; }
.nav-item { min-height: 44px; color: #a3a5b7; border-radius: 10px; }
.nav-item.active { background: linear-gradient(100deg,rgba(85,233,255,.1),rgba(169,154,255,.12) 58%,rgba(243,108,203,.07)); box-shadow: inset 2px 0 0 var(--aura-cyan), 0 0 24px rgba(169,154,255,.045); }
.nav-item.active .nav-icon { color: var(--aura-cyan); }
.nav-icon { color: #777b91; }
.nav-count { color: #d2cee7; background: rgba(169,154,255,.13); }
.sidebar-footer { border-color: var(--line); }
.avatar { color: #f7f6fc; background: linear-gradient(145deg,rgba(85,233,255,.28),rgba(169,154,255,.3) 52%,rgba(243,108,203,.26)); border-color: rgba(169,154,255,.4); box-shadow: 0 0 18px rgba(169,154,255,.12); }
.topbar { background: rgba(9,11,21,.76); border-color: var(--line); backdrop-filter: blur(20px) saturate(145%); }
.breadcrumbs { color: #777b91; }
.breadcrumbs strong { color: #e5e4ef; }
.crumb-separator { color: #50536a; }
.search-wrap { color: #888ba1; background: rgba(255,255,255,.035); border-color: var(--line); border-radius: 10px; }
.search-wrap:focus-within { border-color: rgba(85,233,255,.42); box-shadow: 0 0 0 3px rgba(85,233,255,.08),0 0 24px rgba(85,233,255,.06); }
.search { color: var(--ink); }
.search::placeholder { color: #767a90; }
kbd { color: #9699ad; background: rgba(255,255,255,.055); border-color: var(--line); }
.page-content { padding-top: 39px; }
.welcome-row h1, .page-heading h1 { color: #f4f2fc; letter-spacing: -1.1px; }
.welcome-row p, .page-heading p { color: #9b9db0; }
.welcome-dot { color: var(--aura-cyan); text-shadow: 0 0 18px rgba(85,233,255,.55); }
.eyebrow { color: #888aa2; letter-spacing: 1.35px; }
.primary { color: #111321; background: linear-gradient(105deg,#7ceaff,#afa1ff 58%,#f087d2); border: 0; border-radius: 10px; box-shadow: 0 5px 22px rgba(116,112,224,.2); }
.primary:hover { color: #080a13; background: linear-gradient(105deg,#a2f1ff,#c3baff 58%,#ff9bdd); box-shadow: 0 7px 28px rgba(116,112,224,.3); transform: translateY(-1px); }
.secondary { color: #d1d1df; background: rgba(255,255,255,.045); border-color: var(--line-strong); border-radius: 9px; }
.secondary:hover { color: var(--aura-cyan); background: rgba(85,233,255,.055); border-color: rgba(85,233,255,.35); }
.icon-button { color: #9396aa; }
.icon-button:hover { color: var(--aura-cyan); background: rgba(85,233,255,.09); }
.text-button { color: var(--aura-cyan); }
.text-button:hover { color: #b1f4ff; }
.stats-grid { gap: 15px; margin-bottom: 18px; }
.stat-card, .panel, .note-card { background: linear-gradient(145deg,rgba(20,23,41,.94),rgba(14,17,30,.92)); border-color: var(--line); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.025); }
.stat-card { min-height: 161px; overflow: hidden; padding: 17px 18px 14px; transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.stat-card::before { position: absolute; top: -52px; right: -38px; width: 120px; height: 120px; background: radial-gradient(circle,rgba(169,154,255,.13),transparent 70%); content: ""; pointer-events: none; }
.stat-card:hover, .panel:hover { border-color: rgba(169,154,255,.21); }
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(0,0,0,.23),0 0 28px rgba(169,154,255,.08); }
.stat-top { color: #afb0c1; }
.stat-icon { color: #c1b7ff; background: rgba(169,154,255,.13); }
.stat-card.coral .stat-icon { color: var(--coral); background: var(--coral-soft); }
.stat-card.blue .stat-icon { color: var(--blue); background: var(--blue-soft); }
.stat-card.green .stat-icon { color: var(--green); background: var(--green-soft); }
.stat-card > strong { color: #f5f3fc; font-size: 30px; }
.stat-description { color: #9396aa; }
.stat-link { color: #85899f; border-color: rgba(184,190,226,.09); }
.stat-link b { color: #a9a0da; }
.home-grid { gap: 17px; margin-bottom: 17px; }
.panel { padding: 20px; transition: border-color .2s ease,box-shadow .2s ease; }
.panel-heading h2, .subsection-head h2 { color: #eeeefa; }
.task-row { border-color: rgba(184,190,226,.09); }
.check-task { background: rgba(255,255,255,.035); border-color: #555a72; }
.check-task:hover { border-color: var(--aura-cyan); box-shadow: 0 0 0 3px rgba(85,233,255,.08); }
.check-task.checked { background: #50c99b; border-color: #50c99b; }
.task-row-main strong { color: #d9d9e7; }
.task-row-meta, .area-shortcut-copy small { color: #85899f; }
.task-row-meta .overdue { color: #ff928e; }
.area-shortcut { border-color: rgba(184,190,226,.09); }
.area-shortcut:hover .area-shortcut-copy strong { color: var(--aura-cyan); }
.area-icon.tone-violet, .project-dot.tone-violet { color: #c0b5ff; background: rgba(169,154,255,.14); }
.area-icon.tone-blue, .project-dot.tone-blue { color: #94c9ff; background: rgba(128,191,255,.13); }
.area-icon.tone-green, .project-dot.tone-green { color: #87e3bb; background: rgba(121,221,181,.13); }
.area-icon.tone-amber, .project-dot.tone-amber { color: #f4ca7e; background: rgba(244,195,107,.13); }
.area-icon.tone-gray, .project-dot.tone-gray { color: #c1c4d2; background: rgba(193,196,210,.11); }
.area-shortcut-copy strong, .shortcut-count { color: #d6d6e4; }
.shortcut-arrow { color: #70758c; }
.project-tile { background: rgba(255,255,255,.025); border-color: rgba(184,190,226,.11); border-radius: 10px; }
.project-tile:hover { background: rgba(169,154,255,.07); border-color: rgba(169,154,255,.34); transform: translateY(-2px); }
.project-parent, .project-progress small { color: #8e91a5; }
.project-more { color: #9a9cb1; }
.project-tile > strong { color: #deddea; }
.project-progress > span { background: rgba(255,255,255,.08); }
.project-progress i { background: linear-gradient(90deg,var(--aura-cyan),var(--aura-lilac),var(--aura-magenta)); box-shadow: 0 0 10px rgba(169,154,255,.3); }
.area-select { color: #c4c5d4; }
.area-select.selected { color: #eeeaff; background: linear-gradient(100deg,rgba(85,233,255,.07),rgba(169,154,255,.12)); box-shadow: inset 2px 0 var(--aura-cyan); }
.area-select small, .area-select > b { color: #8b8ea3; }
.area-hero .pill { color: #c5c0e0; background: rgba(169,154,255,.09); border-color: rgba(169,154,255,.16); }
.area-hero h2, .area-hero-numbers strong { color: #f1effa; }
.area-hero-numbers span { color: #8c90a5; }
.child-card { color: #e0dfeb; background: rgba(255,255,255,.025); border-color: var(--line); border-radius: 10px; }
.child-card:hover, .child-card.chosen { background: rgba(169,154,255,.06); border-color: rgba(169,154,255,.36); box-shadow: 0 0 0 2px rgba(169,154,255,.06); }
.child-card-icon { color: #c8bfff; background: rgba(169,154,255,.14); }
.child-card-copy small, .child-open-count { color: #898da2; }
.child-arrow { color: #9c96c4; }
.board-summary { color: #a0a2b5; }
.summary-dot { background: var(--aura-cyan); box-shadow: 0 0 12px rgba(85,233,255,.42); }
.filter-select { color: #d5d5e3; background: #141729; border-color: var(--line-strong); }
.board-column { background: rgba(255,255,255,.035); border: 1px solid rgba(184,190,226,.07); border-radius: 12px; }
.column-heading { color: #c9c9d9; }
.column-count { color: #a8aabe; background: rgba(255,255,255,.08); }
.board-card { background: linear-gradient(150deg,#191d31,#121625); border-color: rgba(184,190,226,.12); border-radius: 9px; box-shadow: 0 4px 12px rgba(0,0,0,.15); transition: transform .18s ease,border-color .18s ease; }
.board-card:hover { transform: translateY(-2px); border-color: rgba(169,154,255,.3); }
.priority-label.priority-high { color: #ff9c96; }
.priority-label.priority-medium { color: #f0c56f; }
.priority-label.priority-low { color: #a5a8b9; }
.board-card > strong { color: #e3e2ee; }
.board-card > p { color: #989bae; }
.client-chip, .due-chip { color: #a2a4b7; }
.due-chip.overdue { color: #ff928e; }
.status-select.status-todo { color: #b7bbca; background: rgba(193,196,210,.1); }
.status-select.status-progress { color: #a4ceff; background: rgba(128,191,255,.12); }
.status-select.status-blocked { color: #f3ca7f; background: rgba(244,195,107,.12); }
.status-select.status-done { color: #8de3bd; background: rgba(121,221,181,.12); }
.column-empty { color: #83869a; }
.calendar-panel { overflow: hidden; }
.calendar-toolbar h2 { color: #eeeefa; }
.calendar-toolbar h2 span { color: #9598ad; }
.week-grid { border-color: var(--line); }
.day-column { border-color: var(--line); }
.day-column.today { background: rgba(169,154,255,.055); }
.day-heading { color: #9295aa; border-color: var(--line); }
.day-heading strong { color: #d8d8e5; }
.day-column.today .day-heading strong { color: #111321; background: linear-gradient(135deg,var(--aura-cyan),var(--aura-lilac)); box-shadow: 0 0 16px rgba(169,154,255,.25); }
.event-item { background: rgba(169,154,255,.11); border-left-color: var(--aura-lilac); }
.task-item { background: rgba(121,221,181,.09); border-left-color: var(--green); }
.calendar-item-time, .calendar-item small { color: #a3a5b8; }
.calendar-item strong { color: #e2e1ed; }
.calendar-item button { color: #ced0df; }
.calendar-empty { color: #60647a; }
.filter-chip { color: #a5a7ba; border-color: var(--line-strong); }
.filter-chip.active, .filter-chip:hover { color: var(--aura-cyan); background: rgba(85,233,255,.08); border-color: rgba(85,233,255,.28); }
.note-card { transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.note-card:hover { transform: translateY(-3px); border-color: rgba(169,154,255,.3); box-shadow: var(--shadow); }
.note-card h2 { color: #e7e5f1; }
.note-card p, .note-card-foot { color: #a0a2b4; }
.note-card-foot { border-color: rgba(184,190,226,.09); }
.note-card-foot span { color: var(--aura-cyan); }
.search-result { color: #e0dfeb; border-color: rgba(184,190,226,.09); }
.search-result:hover strong, .search-result > b { color: var(--aura-cyan); }
.search-result small { color: #989bae; }
.search-result-mark, .empty-state > span { color: #c0b5ff; background: rgba(169,154,255,.13); }
.empty-state { color: #999caf; }
.empty-state > strong { color: #d9d8e5; }
.empty-state p { color: #999caf; }
.modal-backdrop { background: rgba(4,5,12,.76); backdrop-filter: blur(12px); }
.modal { color: var(--ink); background: linear-gradient(145deg,#191d31,#111423); border-color: rgba(184,190,226,.18); border-radius: 16px; box-shadow: 0 28px 90px rgba(0,0,0,.55),0 0 45px rgba(126,107,220,.1); }
.modal-heading { border-color: var(--line); }
.modal-heading h2 { color: #f1effa; }
.modal label, .login-panel label { color: #b9bbcb; }
.input, .select, .textarea { color: #f2f1fa; background: rgba(5,7,16,.42); border-color: rgba(184,190,226,.16); border-radius: 9px; }
.input::placeholder, .textarea::placeholder { color: #777b91; }
.input:focus, .select:focus, .textarea:focus { border-color: rgba(85,233,255,.5); outline-color: rgba(85,233,255,.17); box-shadow: 0 0 0 3px rgba(85,233,255,.07); }
.modal-actions { border-color: var(--line); }
.login-shell { color: var(--ink); background: radial-gradient(ellipse at 75% 20%,rgba(88,70,155,.15),transparent 38%),#080a13; }
.login-aside { background: radial-gradient(ellipse at 78% 77%,rgba(243,108,203,.14),transparent 46%),radial-gradient(ellipse at 18% 70%,rgba(85,233,255,.13),transparent 40%),linear-gradient(145deg,#0b0e1b,#101024); }
.login-orbit { animation: orbit-breathe 8s ease-in-out infinite; }
.login-orbit::before, .login-orbit::after { border-color: rgba(169,154,255,.2); }
.login-panel { padding: 36px; background: linear-gradient(145deg,rgba(21,24,41,.96),rgba(13,16,29,.96)); border: 1px solid rgba(184,190,226,.15); border-radius: 20px; box-shadow: 0 22px 70px rgba(0,0,0,.28),0 0 40px rgba(169,154,255,.06); }
.login-panel h1 { color: #f4f2fc; }
.login-panel > p { color: #a1a3b6; }
.login-panel .field { margin-top: 20px; }
.login-footnote { color: #85899e; }
@keyframes orbit-breathe { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.025); opacity: 1; } }
::selection { color: #090b15; background: rgba(85,233,255,.75); }
@media (hover: hover) {
  .area-shortcut, .search-result, .child-card, .project-tile, .nav-item, .secondary, .primary { transition-duration: .2s; }
}
@media (max-width: 640px) {
  .sidebar { background: rgba(10,12,23,.94); border-top-color: var(--line); box-shadow: 0 -10px 32px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
  .nav-item { color: #999caf; }
  .nav-item.active { color: #f5f3fc; background: rgba(169,154,255,.11); box-shadow: inset 0 2px var(--aura-cyan); }
  .search-wrap:focus-within { background: #111525; border-color: rgba(85,233,255,.4); }
  .login-shell { background: #080a13; }
  .login-panel { width: calc(100% - 32px); padding: 27px 22px 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* A dream-first project map: every orbit is an entry point; progress stays visible. */
.universe-intro { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 250px; overflow: hidden; padding: 36px 42px; margin: 0 0 18px; background: radial-gradient(ellipse at 78% 22%,rgba(121,97,205,.23),transparent 39%),radial-gradient(ellipse at 94% 82%,rgba(243,108,203,.14),transparent 35%),linear-gradient(112deg,#11162b,#12172b 56%,#1b1732); border: 1px solid rgba(190,182,255,.18); border-radius: 22px; box-shadow: 0 20px 58px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.045); }
.universe-intro::before,.universe-intro::after { position:absolute; width:340px;height:340px;right:3%;top:-70px;border:1px solid rgba(169,154,255,.12);border-radius:50%;content:"";pointer-events:none; }
.universe-intro::after { width:430px;height:430px;right:-1%;top:-114px;border-color:rgba(85,233,255,.08); }
.universe-copy { position:relative;z-index:1;max-width:630px; }
.universe-copy .eyebrow { color:#bcb1ff; }
.universe-copy h1 { margin:13px 0 9px;color:#fbfaff;font:700 clamp(29px,3.1vw,43px)/1.12 Manrope,sans-serif;letter-spacing:-1.6px; }
.universe-copy p { max-width:510px;margin-bottom:22px;color:#b6b7ca;font-size:14px;line-height:1.7; }
.xp-track { max-width:410px; }
.xp-track>div { display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;color:#d6d4ed;font-size:11px; }
.xp-track>div span { color:#9ef0fb; }
.xp-track>div strong { color:#9396ae;font-size:10px;font-weight:500; }
.xp-rail,.progress-long { display:block;height:7px;overflow:hidden;background:rgba(255,255,255,.09);border-radius:10px; }
.xp-rail i,.progress-long i { display:block;height:100%;background:linear-gradient(90deg,var(--aura-cyan),var(--aura-lilac) 62%,var(--aura-magenta));border-radius:inherit;box-shadow:0 0 14px rgba(169,154,255,.54);transition:width .8s cubic-bezier(.2,.8,.2,1); }
.level-orbit { position:relative;z-index:1;display:grid;align-content:center;justify-items:center;flex:0 0 auto;width:142px;height:142px;margin:0 3.5% 0 24px;color:#f5f1ff;border:1px solid rgba(180,165,255,.48);border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.2),rgba(14,16,33,.36) 68%);box-shadow:0 0 0 10px rgba(169,154,255,.035),0 0 44px rgba(143,112,244,.18),inset 0 0 35px rgba(85,233,255,.08);animation:level-float 6s ease-in-out infinite; }
.level-orbit::before,.level-orbit::after { position:absolute;inset:-10px;border:1px solid rgba(85,233,255,.18);border-radius:50%;transform:rotate(-30deg) scaleY(.35);content:""; }
.level-orbit::after { inset:-17px;border-color:rgba(243,108,203,.16);transform:rotate(48deg) scaleY(.34); }
.level-orbit span { color:#a8eefa;font-size:9px;font-weight:700;letter-spacing:2px; }
.level-orbit strong { margin:1px 0;color:#fff;font:700 48px/.95 Manrope,sans-serif;letter-spacing:-2px;text-shadow:0 0 28px rgba(169,154,255,.65); }
.level-orbit small { color:#b6b2d1;font-size:9px; }
.reward-front { position:relative;display:flex;align-items:center;gap:21px;min-height:112px;overflow:hidden;padding:19px 22px;margin-bottom:40px;background:linear-gradient(100deg,rgba(27,29,49,.96),rgba(31,26,49,.91));border:1px solid rgba(243,108,203,.2);border-radius:16px;box-shadow:0 12px 38px rgba(0,0,0,.13); }
.reward-front::after { position:absolute;right:9%;top:-94px;width:260px;height:260px;border:1px solid rgba(243,108,203,.13);border-radius:50%;box-shadow:0 0 0 22px rgba(169,154,255,.025),0 0 0 48px rgba(85,233,255,.02);content:"";pointer-events:none; }
.reward-orb { position:relative;z-index:1;display:grid;place-items:center;flex:0 0 auto;width:59px;height:59px;color:#0e1020;background:linear-gradient(140deg,#8ef1ff,#b7a9ff 62%,#fa8dd7);border-radius:50%;box-shadow:0 0 26px rgba(169,154,255,.3),0 0 48px rgba(243,108,203,.16);font-size:24px; }
.reward-front-copy { position:relative;z-index:1;min-width:0;flex:1; }
.reward-front-copy .eyebrow { margin-bottom:6px;color:#d8a8ee; }
.reward-front-copy p { max-width:700px;margin:0;color:#fff;font:600 17px/1.35 Manrope,sans-serif;letter-spacing:-.25px; }
.reward-front-copy small { display:block;margin-top:6px;color:#9696ad;font-size:10px; }
.reward-cta { position:relative;z-index:1;display:inline-flex;align-items:center;gap:15px;min-height:43px;padding:0 16px;color:#f1eaff;background:rgba(169,154,255,.1);border:1px solid rgba(169,154,255,.28);border-radius:10px;font-size:11px;font-weight:700;white-space:nowrap;transition:.2s ease; }
.reward-cta span { color:var(--aura-cyan);font-size:16px; }
.reward-cta:hover { color:#0b0d18;background:linear-gradient(105deg,var(--aura-cyan),var(--aura-lilac));border-color:transparent;transform:translateY(-2px);box-shadow:0 8px 24px rgba(169,154,255,.2); }
.reward-edit { position:absolute;z-index:2;top:9px;right:10px;width:26px;height:26px;color:#aaa0cb;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);border-radius:8px;opacity:0;transition:opacity .2s ease; }
.reward-front:hover .reward-edit,.reward-edit:focus-visible { opacity:1; }
.hub-heading { display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:17px; }
.hub-heading h2 { margin:0;color:#f4f2fc;font:700 22px Manrope,sans-serif;letter-spacing:-.65px; }
.hub-hint { color:#888ca3;font-size:10px; }
.hub-hint b { padding-left:6px;color:var(--aura-cyan);font-size:14px; }
.venture-groups { display:grid;gap:16px; }
.venture-group { position:relative;padding:18px 19px 19px;background:linear-gradient(140deg,rgba(17,20,36,.9),rgba(14,16,29,.72));border:1px solid rgba(184,190,226,.1);border-radius:17px;animation:rise-in .55s both;animation-delay:calc(var(--group-index,0) * 70ms);transition:border-color .2s ease,box-shadow .2s ease; }
.venture-group:hover { border-color:rgba(169,154,255,.2);box-shadow:0 16px 46px rgba(0,0,0,.12); }
.venture-head { display:flex;align-items:center;gap:13px;margin-bottom:15px; }
.venture-symbol { display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;border-radius:13px;font-size:18px; }
.venture-symbol.tone-violet { color:#d0c6ff;background:linear-gradient(145deg,rgba(169,154,255,.2),rgba(104,90,188,.12));box-shadow:inset 0 1px rgba(255,255,255,.08); }
.venture-symbol.tone-blue { color:#9bd3ff;background:linear-gradient(145deg,rgba(128,191,255,.18),rgba(70,118,173,.1)); }
.venture-symbol.tone-green { color:#9ce9ca;background:linear-gradient(145deg,rgba(121,221,181,.17),rgba(48,136,115,.1)); }
.venture-head>div { min-width:0; }
.venture-head>div>span { color:#8f91a8;font-size:9px;letter-spacing:.7px;text-transform:uppercase; }
.venture-head h3 { margin:2px 0 2px;color:#eeeefa;font:700 15px Manrope,sans-serif; }
.venture-head p { margin:0;color:#888ca1;font-size:10px; }
.venture-enter { display:grid;place-items:center;width:34px;height:34px;margin-left:auto;color:#a99aff;background:rgba(169,154,255,.07);border:1px solid rgba(169,154,255,.13);border-radius:10px;font-size:16px;transition:.2s ease; }
.venture-enter:hover { color:#0b0d18;background:var(--aura-cyan);transform:translate(2px,-2px); }
.venture-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:10px; }
.space-card { position:relative;display:flex;flex-direction:column;min-height:164px;overflow:hidden;padding:14px;text-align:left;color:var(--ink);background:linear-gradient(145deg,rgba(27,31,53,.86),rgba(17,20,35,.92));border:1px solid rgba(184,190,226,.1);border-radius:13px;transition:transform .23s cubic-bezier(.2,.8,.2,1),border-color .23s ease,box-shadow .23s ease; }
.space-card::before { position:absolute;right:-55px;top:-70px;width:150px;height:150px;background:radial-gradient(circle,rgba(169,154,255,.1),transparent 70%);content:"";transition:transform .4s ease; }
.space-card:hover { transform:translateY(-4px) scale(1.012);border-color:rgba(85,233,255,.33);box-shadow:0 13px 32px rgba(0,0,0,.24),0 0 25px rgba(85,233,255,.055); }
.space-card:hover::before { transform:scale(1.55); }
.space-card-top { position:relative;z-index:1;display:flex;justify-content:space-between;margin-bottom:10px; }
.space-type { color:#a7a1c7;font-size:9px;letter-spacing:.65px;text-transform:uppercase; }
.space-open { display:grid;place-items:center;width:23px;height:23px;color:#9da1b8;background:rgba(255,255,255,.045);border-radius:7px;font-size:12px;transition:all .18s ease; }
.space-card:hover .space-open { color:#0a0c17;background:var(--aura-cyan);transform:rotate(45deg); }
.space-card>strong { position:relative;z-index:1;color:#f1effa;font:700 15px Manrope,sans-serif; }
.space-vision { display:-webkit-box;overflow:hidden;margin-top:5px;color:#8d91a7;font-size:10px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2; }
.space-progress { display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px; }
.space-progress>i { height:4px;flex:1;overflow:hidden;background:rgba(255,255,255,.09);border-radius:5px; }
.space-progress>i>b { display:block;height:100%;background:linear-gradient(90deg,var(--aura-cyan),var(--aura-lilac),var(--aura-magenta));border-radius:inherit;transition:width .6s ease; }
.space-progress small { color:#a5a4bb;font-size:9px; }
.space-card-foot { display:flex;justify-content:space-between;gap:6px;margin-top:7px;color:#83879c;font-size:9px; }
.space-reward { color:#c9b6ec; }
.project-topline { display:flex;align-items:center;justify-content:space-between;margin:0 1px 16px; }
.back-to-hub { display:flex;align-items:center;gap:9px;padding:6px 0;color:#b8b2d9;background:none;border:0;font-size:12px;font-weight:600;transition:color .18s ease; }
.back-to-hub:hover { color:var(--aura-cyan); }
.project-parent-label { color:#777b92;font-size:10px; }
.project-parent-label b { padding:0 5px;color:#b29ddc; }
.project-hero { position:relative;display:flex;align-items:center;justify-content:space-between;min-height:231px;overflow:hidden;padding:30px 36px;background:radial-gradient(ellipse at 77% 28%,rgba(112,84,191,.2),transparent 36%),radial-gradient(ellipse at 99% 98%,rgba(243,108,203,.13),transparent 34%),linear-gradient(110deg,#14182c,#18172f 68%,#20172f);border:1px solid rgba(169,154,255,.19);border-radius:21px;box-shadow:0 18px 50px rgba(0,0,0,.2); }
.project-hero::before,.project-hero::after { position:absolute;right:11%;top:-80px;width:360px;height:360px;border:1px solid rgba(169,154,255,.12);border-radius:50%;content:"";pointer-events:none; }
.project-hero::after { right:7%;top:-100px;width:400px;height:400px;border-color:rgba(85,233,255,.07); }
.project-hero-copy { position:relative;z-index:1;max-width:680px; }
.project-hero-copy .eyebrow { color:#b9b0f2; }
.project-hero-copy h1 { margin:9px 0 7px;color:#fff;font:700 clamp(27px,3vw,39px)/1.12 Manrope,sans-serif;letter-spacing:-1.2px; }
.project-hero-copy>p { max-width:580px;margin-bottom:18px;color:#b8b6cc;font-size:12px;line-height:1.6; }
.hero-reward-line { display:grid;gap:5px; }
.hero-reward-line span { color:#dda8e4;font-size:8px;font-weight:700;letter-spacing:1.4px; }
.hero-reward-line strong { color:#fff;font:600 14px/1.45 Manrope,sans-serif; }
.hero-progress-orbit { position:relative;z-index:1;display:grid;place-items:center;flex:0 0 auto;width:128px;height:128px;margin:0 3% 0 18px;background:conic-gradient(from 220deg,var(--aura-cyan) 0,var(--aura-lilac) var(--progress),rgba(255,255,255,.07) var(--progress),rgba(255,255,255,.07) 78%,var(--aura-magenta) 100%);border-radius:50%;box-shadow:0 0 32px rgba(169,154,255,.13); }
.hero-progress-orbit::before { position:absolute;inset:7px;background:#17182d;border-radius:50%;content:""; }
.hero-progress-orbit>div { position:relative;display:grid;justify-items:center;gap:2px; }
.hero-progress-orbit span { color:#b0abc9;font-size:8px;letter-spacing:1.3px; }
.hero-progress-orbit strong { color:#fff;font:700 34px/.98 Manrope,sans-serif;letter-spacing:-1.5px; }
.hero-progress-orbit small { color:#a2a1b9;font-size:8px; }
.hero-edit { position:absolute;z-index:2;top:14px;right:16px;width:29px;height:29px;color:#cec7e9;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:8px;opacity:.5;transition:opacity .2s ease; }
.project-hero:hover .hero-edit,.hero-edit:focus-visible { opacity:1; }
.hero-planet { position:absolute;border-radius:50%;pointer-events:none; }
.planet-one { right:27%;top:23%;width:6px;height:6px;background:var(--aura-cyan);box-shadow:0 0 16px 4px rgba(85,233,255,.5); }
.planet-two { right:16%;bottom:23%;width:4px;height:4px;background:var(--aura-magenta);box-shadow:0 0 14px 4px rgba(243,108,203,.42); }
.project-tabs { display:flex;gap:6px;overflow:auto;padding:7px;margin:17px 0;background:rgba(255,255,255,.027);border:1px solid rgba(184,190,226,.08);border-radius:13px;scrollbar-width:none; }
.project-tabs::-webkit-scrollbar { display:none; }
.project-tab { position:relative;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;color:#9599ad;background:transparent;border:1px solid transparent;border-radius:9px;font-size:11px;font-weight:600;white-space:nowrap;transition:all .2s ease; }
.project-tab:hover { color:#e7e3f5;background:rgba(255,255,255,.045); }
.project-tab.active { color:#f7f5ff;background:linear-gradient(100deg,rgba(85,233,255,.1),rgba(169,154,255,.13));border-color:rgba(169,154,255,.16);box-shadow:0 4px 16px rgba(0,0,0,.11); }
.project-tab.active:first-letter { color:var(--aura-cyan); }
.project-tab small { display:grid;place-items:center;min-width:19px;height:19px;color:#cfc5ff;background:rgba(169,154,255,.16);border-radius:6px;font-size:9px; }
.project-content { animation:rise-in .3s ease both; }
.project-dashboard { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:13px; }
.vision-panel,.reward-card { position:relative;min-height:284px;overflow:hidden;padding:22px;background:linear-gradient(145deg,rgba(18,22,39,.96),rgba(14,16,30,.96));border:1px solid var(--line);border-radius:16px; }
.vision-panel { grid-row:span 2; }
.vision-panel>.eyebrow { color:#b1a5ef; }
.vision-panel h2 { position:relative;z-index:1;max-width:520px;margin:12px 0;color:#f6f4ff;font:600 clamp(21px,2vw,30px)/1.3 Manrope,sans-serif;letter-spacing:-.8px; }
.vision-panel>p { position:relative;z-index:1;max-width:460px;color:#a3a5b8;font-size:11px;line-height:1.7; }
.dream-landscape { position:absolute;inset:auto 0 0;height:150px;overflow:hidden;background:linear-gradient(180deg,transparent,rgba(81,71,140,.12)); }
.dream-landscape::before,.dream-landscape::after { position:absolute;left:-8%;bottom:-132px;width:116%;height:210px;border:1px solid rgba(169,154,255,.17);border-radius:50% 50% 0 0 / 26% 26% 0 0;transform:rotate(-3deg);content:""; }
.dream-landscape::after { left:38%;bottom:-158px;width:90%;height:230px;border-color:rgba(85,233,255,.14);transform:rotate(5deg); }
.dream-sun { position:absolute;right:14%;bottom:41px;width:86px;height:86px;background:linear-gradient(145deg,rgba(85,233,255,.76),rgba(169,154,255,.55) 58%,rgba(243,108,203,.5));border-radius:50%;box-shadow:0 0 42px rgba(169,154,255,.3);opacity:.65; }
.dream-landscape i { position:absolute;z-index:1;left:10%;bottom:32px;width:4px;height:4px;background:white;border-radius:50%;box-shadow:0 0 9px white; }
.dream-landscape i:nth-of-type(2) { left:42%;bottom:75px;width:3px;height:3px; }
.dream-landscape i:nth-of-type(3) { left:73%;bottom:115px;background:var(--aura-cyan); }
.vision-edit { position:absolute;z-index:2;left:22px;bottom:18px;display:flex;align-items:center;gap:10px;min-height:33px;padding:0 11px;color:#d1c8f4;background:rgba(12,13,26,.7);border:1px solid rgba(169,154,255,.18);border-radius:8px;font-size:9px; }
.vision-edit:hover { color:var(--aura-cyan);border-color:rgba(85,233,255,.35); }
.reward-card { display:flex;flex-direction:column;min-height:284px;background:radial-gradient(ellipse at 91% 8%,rgba(243,108,203,.18),transparent 40%),linear-gradient(145deg,#21192f,#151525);border-color:rgba(243,108,203,.2); }
.reward-card .eyebrow { position:relative;z-index:1;color:#e7b4e1; }
.reward-glyph { position:relative;z-index:1;display:grid;place-items:center;width:50px;height:50px;margin:17px 0 9px;color:#1a1325;background:linear-gradient(140deg,#a8f1ff,#c6aaff 60%,#ff9edb);border-radius:16px;box-shadow:0 0 26px rgba(243,108,203,.16);font-size:23px; }
.reward-card h2 { position:relative;z-index:1;margin:0 0 8px;color:#fff;font:600 19px/1.35 Manrope,sans-serif;letter-spacing:-.35px; }
.reward-card>p { position:relative;z-index:1;margin-bottom:17px;color:#aaa5bb;font-size:10px;line-height:1.6; }
.reward-card .primary { align-self:start;margin-top:auto; }
.reward-card-glow { position:absolute;right:-70px;bottom:-115px;width:210px;height:210px;border:1px solid rgba(243,108,203,.18);border-radius:50%;box-shadow:0 0 0 20px rgba(169,154,255,.025),0 0 0 42px rgba(85,233,255,.025); }
.journey-progress { grid-column:2;grid-row:2;min-height:190px; }
.journey-progress .panel-heading h2 { margin-top:4px;font-size:17px; }
.progress-ring { display:grid;place-items:center;width:48px;height:48px;background:conic-gradient(var(--aura-cyan),var(--aura-lilac) var(--progress),rgba(255,255,255,.08) var(--progress));border-radius:50%; }
.progress-ring strong { display:grid;place-items:center;width:39px;height:39px;color:#e9e6f6;background:#151829;border-radius:50%;font-size:10px; }
.progress-long { height:5px;margin:17px 0 8px; }
.progress-meta { display:flex;justify-content:space-between;gap:10px;color:#9295aa;font-size:9px; }
.progress-meta span:last-child { color:#b5a5e7; }
.journey-stats { display:flex;gap:25px;margin-top:19px;padding-top:12px;border-top:1px solid var(--line); }
.journey-stats div { display:grid;gap:3px; }
.journey-stats strong { color:#f0edfa;font:700 15px Manrope,sans-serif; }
.journey-stats span { color:#9295aa;font-size:9px; }
.next-missions { grid-column:1/-1; }
.next-missions .panel-heading { margin-bottom:8px; }
.next-missions .task-row { padding:14px 2px; }
.action-plan { min-height:440px;padding:24px; }
.action-plan .panel-heading { margin-bottom:19px; }
.action-plan .panel-heading p { margin:5px 0 0;font-size:10px; }
.plan-count { color:#d8cdfa;font:700 23px Manrope,sans-serif; }
.plan-count span { color:#8c90a5;font:400 9px "DM Sans",sans-serif; }
.plan-add { display:flex;gap:9px;max-width:740px;padding:9px;margin-bottom:17px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:12px; }
.plan-add .input { min-height:42px;background:transparent;border:0; }
.plan-add .input:focus { box-shadow:none; }
.plan-add .primary { white-space:nowrap; }
.plan-list { display:grid;gap:7px;max-width:920px; }
.plan-step { display:flex;align-items:center;gap:12px;min-height:59px;padding:8px 12px;background:rgba(255,255,255,.026);border:1px solid rgba(184,190,226,.075);border-radius:11px;transition:all .2s ease; }
.plan-step:hover { background:rgba(169,154,255,.055);border-color:rgba(169,154,255,.2); }
.plan-check { display:grid;place-items:center;flex:0 0 auto;width:23px;height:23px;color:#0e1120;background:transparent;border:1px solid #73768d;border-radius:8px;font-size:12px;transition:all .18s ease; }
.plan-check:hover,.is-done .plan-check { color:#101222;background:linear-gradient(135deg,var(--aura-cyan),var(--aura-lilac));border-color:transparent;box-shadow:0 0 14px rgba(169,154,255,.2); }
.plan-step-number { color:#8d84b8;font:600 10px Manrope,sans-serif; }
.plan-step>strong { flex:1;color:#e0dfeb;font-size:12px;font-weight:500; }
.plan-step.is-done>strong { color:#898ca1;text-decoration:line-through; }
.plan-xp { color:#a99aff;font-size:9px;white-space:nowrap; }
.plan-step .icon-button { opacity:0; }
.plan-step:hover .icon-button,.plan-step .icon-button:focus-visible { opacity:1; }
.project-kanban { align-items:stretch; }
.project-kanban .board-column { min-height:355px;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease; }
.project-kanban .board-column.is-drop-target { background:rgba(85,233,255,.075);border-color:rgba(85,233,255,.43);box-shadow:inset 0 0 30px rgba(85,233,255,.045),0 0 20px rgba(85,233,255,.07); }
.project-kanban .board-card { cursor:grab; }
.project-kanban .board-card:active { cursor:grabbing; }
.project-kanban .board-card.is-dragging { opacity:.38;transform:scale(.96); }
.materials-grid { display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);gap:13px; }
.materials-feature { position:relative;overflow:hidden;min-height:260px; }
.materials-feature::after { position:absolute;right:-58px;bottom:-93px;width:230px;height:230px;border:1px solid rgba(169,154,255,.13);border-radius:50%;box-shadow:0 0 0 24px rgba(85,233,255,.025),0 0 0 52px rgba(243,108,203,.02);content:""; }
.material-icon { display:grid;place-items:center;width:43px;height:43px;margin-bottom:16px;color:#101221;background:linear-gradient(140deg,var(--aura-cyan),var(--aura-lilac) 60%,var(--aura-magenta));border-radius:13px;box-shadow:0 0 20px rgba(169,154,255,.2);font-size:20px; }
.materials-feature h2 { position:relative;z-index:1;max-width:300px;color:#f2f0fa;font:600 19px/1.35 Manrope,sans-serif; }
.materials-feature p { position:relative;z-index:1;max-width:330px;color:#a0a3b6;font-size:10px;line-height:1.65; }
.materials-feature .secondary { position:relative;z-index:1; }
.project-notes { min-height:260px; }
.project-notes .panel-heading { margin-bottom:9px; }
.project-note { display:flex;align-items:flex-start;gap:10px;padding:13px 0;border-bottom:1px solid var(--line); }
.project-note:last-child { border-bottom:0; }
.project-note>div { flex:1; }
.project-note strong { color:#e6e4f0;font:600 12px Manrope,sans-serif; }
.project-note p { margin:5px 0 0;color:#9a9caf;font-size:10px;line-height:1.55;white-space:pre-wrap; }
.dream-prompt { padding:11px 12px;margin:13px 0 4px;color:#c4b9e8;background:rgba(169,154,255,.07);border-left:2px solid var(--aura-lilac);border-radius:0 8px 8px 0;font-size:11px;line-height:1.5; }
.reward-toast { position:fixed;z-index:20;top:86px;right:28px;display:flex;align-items:center;gap:11px;overflow:hidden;padding:13px 18px;color:#fff;background:linear-gradient(100deg,rgba(25,30,51,.97),rgba(42,28,54,.97));border:1px solid rgba(169,154,255,.38);border-radius:12px;box-shadow:0 16px 45px rgba(0,0,0,.4),0 0 26px rgba(169,154,255,.14);animation:toast-in .45s cubic-bezier(.17,.89,.32,1.28) both; }
.reward-toast>span { color:var(--aura-cyan);font-size:18px;text-shadow:0 0 12px rgba(85,233,255,.6); }
.reward-toast strong { font:600 12px Manrope,sans-serif; }
.reward-toast i,.reward-toast b { color:#dab5f0;font-style:normal;font-size:11px;animation:twinkle .8s ease-in-out infinite alternate; }
.reward-toast b { color:var(--aura-cyan);animation-delay:.25s; }
@keyframes rise-in { from { opacity:0;transform:translateY(10px); } to { opacity:1;transform:translateY(0); } }
@keyframes level-float { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-5px) rotate(2deg); } }
@keyframes toast-in { 0% { opacity:0;transform:translate(0,-15px) scale(.9); } 70% { opacity:1;transform:translate(0,2px) scale(1.02); } 100% { opacity:1;transform:translate(0,0) scale(1); } }
@keyframes twinkle { from { opacity:.4;transform:scale(.8) rotate(-8deg); } to { opacity:1;transform:scale(1.2) rotate(12deg); } }
@media (max-width: 900px) {
  .universe-intro { min-height:225px;padding:30px; }
  .reward-front { gap:15px;padding:16px; }
  .reward-front-copy p { font-size:14px; }
  .project-hero { padding:25px; }
  .project-dashboard { grid-template-columns:minmax(0,1fr) minmax(230px,.82fr); }
}
@media (max-width: 640px) {
  .universe-intro { align-items:flex-start;min-height:0;padding:24px 19px 22px;border-radius:18px; }
  .universe-copy { padding-right:0; }
  .universe-copy h1 { max-width:300px;margin-top:9px;font-size:29px; }
  .universe-copy p { max-width:315px;margin-bottom:18px;font-size:12px; }
  .xp-track { max-width:calc(100vw - 76px); }
  .xp-track>div { flex-wrap:wrap; }
  .xp-track>div strong { display:none; }
  .level-orbit { position:absolute;right:6px;top:4px;width:76px;height:76px;margin:0;opacity:.72;transform:scale(.72);transform-origin:top right; }
  .level-orbit strong { font-size:32px; }
  .level-orbit small { font-size:7px; }
  .reward-front { align-items:flex-start;flex-wrap:wrap;gap:12px;padding:14px;margin-bottom:29px; }
  .reward-orb { width:43px;height:43px;font-size:18px; }
  .reward-front-copy { flex-basis:calc(100% - 60px); }
  .reward-front-copy .eyebrow { max-width:225px;font-size:8px; }
  .reward-front-copy p { font-size:13px; }
  .reward-cta { min-height:36px;margin-left:55px;padding:0 11px;font-size:10px; }
  .hub-heading { align-items:flex-start;flex-direction:column;gap:5px; }
  .hub-heading h2 { font-size:19px; }
  .hub-hint { font-size:9px; }
  .venture-group { padding:13px; }
  .venture-head { gap:10px; }
  .venture-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }
  .space-card { min-height:160px;padding:10px;border-radius:11px; }
  .space-card>strong { font-size:12px; }
  .space-vision { font-size:9px; }
  .space-card-foot { flex-direction:column;gap:3px;font-size:8px; }
  .project-topline { align-items:flex-start;gap:12px; }
  .project-parent-label { padding-top:9px;text-align:right;font-size:9px; }
  .project-hero { align-items:flex-start;min-height:245px;padding:21px 18px;border-radius:18px; }
  .project-hero-copy { padding-right:0; }
  .project-hero-copy h1 { max-width:250px;font-size:28px; }
  .project-hero-copy>p { max-width:270px;font-size:10px; }
  .hero-reward-line { max-width:255px; }
  .hero-reward-line strong { font-size:12px; }
  .hero-progress-orbit { position:absolute;right:10px;top:10px;width:84px;height:84px;margin:0;opacity:.72; }
  .hero-progress-orbit::before { inset:5px; }
  .hero-progress-orbit strong { font-size:24px; }
  .hero-progress-orbit small { max-width:68px;text-align:center;font-size:7px; }
  .project-tabs { margin:12px -2px;padding:5px; }
  .project-tab { min-height:36px;padding:0 10px;font-size:9px; }
  .project-dashboard { grid-template-columns:1fr; }
  .vision-panel { grid-row:auto;min-height:250px; }
  .vision-panel h2 { font-size:23px; }
  .reward-card { min-height:250px; }
  .journey-progress { grid-column:auto;grid-row:auto; }
  .next-missions { grid-column:auto; }
  .materials-grid { grid-template-columns:1fr; }
  .materials-feature,.project-notes { min-height:230px; }
  .plan-add { align-items:stretch;flex-direction:column; }
  .plan-add .primary { min-height:39px; }
  .plan-step { gap:8px;padding:8px; }
  .plan-step>strong { font-size:10px; }
  .plan-step .icon-button { opacity:1; }
  .project-kanban { display:flex;overflow-x:auto;align-items:stretch;padding-bottom:10px;scroll-snap-type:x mandatory; }
  .project-kanban .board-column { flex:0 0 min(83vw,310px);scroll-snap-align:start; }
  .reward-toast {top:auto;right:12px;bottom:78px;left:12px;justify-content:center; }
}

@media (max-width: 1180px) {
  .page-content { padding-right: 26px; padding-left: 26px; }
  .topbar { padding-right: 26px; padding-left: 26px; }
  .project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sidebar { width: 205px; }
  .main { margin-left: 205px; }
  .topbar { gap: 10px; padding: 0 18px; }
  .page-content { padding: 25px 18px 40px; }
  .search-wrap { width: min(245px, 31vw); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-grid { grid-template-columns: 1fr; }
  .area-layout { grid-template-columns: 1fr; }
  .area-list-panel { position: static; }
  .area-select-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week-grid { overflow-x: auto; grid-template-columns: repeat(7, minmax(100px, 1fr)); }
  .day-column { min-height: 330px; }
}
@media (max-width: 640px) {
  .sidebar { position: fixed; inset: auto 0 0; flex-direction: row; align-items: center; width: auto; height: 63px; padding: 5px 8px max(5px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-right: 0; }
  .sidebar .brand, .side-label, .side-spacer, .sidebar-footer { display: none; }
  .nav-list { display: flex; justify-content: space-around; width: 100%; gap: 2px; }
  .nav-item { flex-direction: column; justify-content: center; gap: 3px; min-height: 49px; padding: 3px 4px; border-radius: 8px; font-size: 9px; }
  .nav-icon { width: auto; font-size: 16px; }
  .nav-count { position: absolute; min-width: 16px; height: 16px; margin: -27px 0 0 20px; padding: 2px 4px; font-size: 9px; }
  .main { margin-left: 0; padding-bottom: 63px; }
  .topbar { position: relative; min-height: 58px; padding: 0 14px; }
  .breadcrumbs { font-size: 10px; }
  .top-actions { gap: 7px; }
  .search-wrap { width: 37px; height: 35px; padding: 0 8px; border: 0; background: transparent; }
  .search-wrap:focus-within { position: absolute; inset: 8px 12px; z-index: 2; width: auto; background: #fff; border: 1px solid var(--line-strong); }
  .search-wrap .search { display: none; }
  .search-wrap:focus-within .search { display: block; }
  .search-wrap kbd { display: none; }
  .primary.compact { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; font-size: 17px; }
  .primary.compact span { display: none; }
  .page-content { padding: 23px 14px 26px; }
  .welcome-row, .page-heading { align-items: flex-start; }
  .welcome-row { flex-direction: column; gap: 14px; }
  .welcome-row h1, .page-heading h1 { font-size: 23px; }
  .welcome-row .secondary { min-height: 34px; }
  .page-heading .primary { min-height: 34px; padding: 0 9px; font-size: 10px; white-space: nowrap; }
  .stats-grid { gap: 8px; }
  .stat-card { min-height: 140px; padding: 12px; }
  .stat-card > strong { font-size: 25px; }
  .home-grid { gap: 10px; }
  .panel { padding: 14px; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-select-list { grid-template-columns: 1fr; }
  .area-hero { align-items: flex-start; flex-direction: column; padding: 15px; }
  .area-hero-numbers { width: 100%; justify-content: flex-start; padding-top: 11px; border-top: 1px solid var(--line); }
  .area-hero-numbers div { text-align: left; }
  .child-grid { grid-template-columns: 1fr; }
  .board-grid { grid-template-columns: 1fr; }
  .board-column { padding: 10px; }
  .board-toolbar { align-items: flex-start; flex-direction: column; gap: 9px; }
  .filter-select { width: 100%; }
  .calendar-panel { padding: 12px; }
  .calendar-toolbar h2 { font-size: 14px; }
  .day-column { min-height: 270px; }
  .notes-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .login-shell { grid-template-columns: 1fr; background: #fafaff; }
  .login-aside { min-height: 245px; padding: 32px 28px; }
  .login-tag { margin-top: 24px; }
  .login-aside p { font-size: 25px; }
  .login-orbit { right: -235px; bottom: -360px; }
  .login-panel { width: calc(100% - 56px); padding: 33px 0 80px; }
  .login-panel h1 { font-size: 23px; }
}