:root {
  color-scheme:dark; --bg:#091224; --sidebar:#0d172c; --panel:#111e35; --border:#223351;
  --text:#edf3ff; --muted:#afbfda; --dim:#92a6c9; --blue:#5899ff; --green:#46d4a8;
  --orange:#ffb65e; --purple:#a48aff; --pink:#ff789d;
  --text-caption:clamp(12px,calc(10px + .22vw),16px);
  --text-ui:clamp(14px,calc(12px + .24vw),18px);
  --text-section:clamp(17px,calc(14px + .29vw),22px);
  --page-gutter:clamp(22px,2vw,48px);
  --layout-gap:clamp(14px,1.05vw,22px);
  --nav-width:clamp(207px,calc(170px + 3.5vw),250px);
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;
  font-size:var(--text-ui); font-weight:400;
}
* {box-sizing:border-box}
body {margin:0; min-width:320px; background:var(--bg); color:var(--text)}
button,input,textarea,select {font:inherit}
button,a,input,select,textarea {outline-offset:3px}
a {color:inherit; text-decoration:none}
button {color:inherit; cursor:pointer}
button:disabled {opacity:.55;cursor:wait}
button:focus-visible,a:focus-visible {outline:2px solid var(--blue)}
input,select,textarea {color:var(--text);background:#0b162a;border:1px solid #2a3d60;border-radius:9px;padding:10px 11px;min-width:0;line-height:1.35}
input:focus,textarea:focus,select:focus {outline:1px solid #699bff;outline-offset:0}
input::placeholder,textarea::placeholder {color:#7588aa}
input:disabled {color:var(--dim)}
input[type=file]::file-selector-button {background:#233656;border:0;color:var(--text);padding:6px 10px;border-radius:5px;margin-right:9px;cursor:pointer}
textarea {resize:vertical}
h1,h2,h3,p {margin:0}
button svg,a svg {flex:none;vertical-align:middle}
.loading {display:grid;place-items:center;min-height:100vh;color:var(--muted)}
.shell {min-height:100vh}
.sidebar {position:fixed;inset:0 auto 0 0;z-index:10;width:var(--nav-width);display:flex;flex-direction:column;background:var(--sidebar);border-right:1px solid #1c2a44;padding:26px 15px 13px;overflow-y:auto}
.brand {display:flex;align-items:center;gap:11px;color:#fff;font-size:var(--text-section);font-weight:750;letter-spacing:.03em;line-height:1.16;white-space:nowrap;padding:0 9px}
.logo {display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:linear-gradient(145deg,#579bff,#5d50f6);box-shadow:0 6px 16px #386cff42,inset 0 0 0 1px #a4b7ff50;flex:none}
.brand small {display:block;margin-top:5px;font-size:10px;letter-spacing:.12em;color:#a2b0d4;font-weight:650}
.workspace-label {margin:32px 9px 11px;color:var(--dim);font-size:var(--text-caption);letter-spacing:.05em;display:flex;align-items:center;gap:8px}
.workspace-label i,.eyebrow i,.auth-footer i {width:6px;height:6px;background:#72a5ff;border-radius:50%;box-shadow:0 0 10px #638cff99}
.sidebar nav {display:grid;gap:4px}
.nav-link {display:flex;align-items:center;gap:12px;padding:0 13px;min-height:43px;border-radius:9px;color:#bdcbe6;border:1px solid transparent;font-size:var(--text-ui);white-space:nowrap}
.nav-link svg {color:#97acd5}
.nav-link:hover {background:#192842;color:#f4f7ff}
.nav-link.active {background:linear-gradient(100deg,#244fa6,#2746a0 55%,#2e4087);border-color:#5279e478;color:#fff;box-shadow:0 3px 12px #2455de35;font-weight:650}
.nav-link.active svg {color:#e2edff}
.nav-badge {margin-left:auto;min-width:20px;height:20px;display:grid;place-items:center;padding:0 4px;font-size:12px;border-radius:20px;background:#a53561;color:#fff}
.nav-divider {margin:15px 11px 4px;border-top:1px solid #21304b;padding-top:13px;font-size:var(--text-caption);color:var(--dim);letter-spacing:.05em}
.side-bottom {margin-top:auto;padding-top:22px}
.side-tile {display:flex;align-items:center;gap:10px;padding:12px 10px;margin-bottom:10px;border:1px solid #283d64;border-radius:10px;background:radial-gradient(ellipse at 90% 0%,#2a2b6269,transparent 80%),#14213d;font-size:var(--text-ui);color:#d6e1fb}
.side-mark {display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#2b3f74;color:#a7b4ff}
.side-tile small,.side-user small {display:block;color:var(--dim);font-size:var(--text-caption);margin-top:3px}
.side-user {width:100%;display:flex;align-items:center;gap:9px;padding:9px 7px;background:none;border:0;text-align:left;border-radius:8px;font-size:var(--text-ui)}
.side-user:hover {background:#172740}
.side-user>span:nth-child(2) {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.side-user>svg {color:var(--dim)}
.workspace {margin-left:var(--nav-width);min-width:0}
.topbar {height:65px;padding:0 var(--page-gutter);border-bottom:1px solid #1e2d49;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#0b1529}
.breadcrumb,.top-actions {display:flex;align-items:center;gap:10px;min-width:0}
.breadcrumb {color:var(--dim);font-size:var(--text-caption);white-space:nowrap}
.breadcrumb strong {color:#e3ecff;font-weight:650}
.top-actions {gap:13px}
.search {display:flex;align-items:center;gap:9px;height:36px;padding:0 9px 0 11px;background:#111e36;border:1px solid #223552;border-radius:8px;color:#95a8cf}
.search:focus-within {border-color:#628ffc}
.search input {width:clamp(156px,12vw,265px);padding:0;background:none;border:0;outline:none;font-size:var(--text-caption)}
.search kbd {border:1px solid #324364;border-radius:4px;font-size:11px;padding:1px 5px;color:#8fa1c5}
.icon-button {position:relative;display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border:0;background:transparent;border-radius:8px;color:#a7b9df}
.icon-button:hover {background:#24385b;color:#fff}
.icon-button span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.top-bell i {position:absolute;top:6px;right:7px;border:1px solid #101a2d;width:8px;height:8px;border-radius:50%;background:#fc709c}
.top-profile {display:flex;align-items:center;gap:5px;background:none;border:0;padding:0;color:#97a9cf}
.avatar {display:inline-grid;place-items:center;border-radius:50%;width:34px;height:34px;flex:none;font-size:13px;font-weight:750;color:#f3f5ff;background:#3a4e83;border:1px solid #a4b4ff52}
.avatar.small {height:24px;width:24px;font-size:12px}
.av-0 {background:#4150a0}.av-1 {background:#285f70}.av-2 {background:#663e85}.av-3 {background:#7b4a53}.av-4 {background:#375d97}
.main {padding:26px var(--page-gutter) 36px}
.headline {display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}
.headline h1 {font-size:clamp(30px,calc(24px + .75vw),46px);font-weight:800;letter-spacing:-.03em;line-height:1.22;margin:0 0 8px}
.headline p {font-size:var(--text-ui);color:var(--muted);line-height:1.6}
.dashboard-headline {position:relative;padding:clamp(22px,1.5vw,36px);min-height:133px;background:radial-gradient(ellipse at 82% 10%,#4b3ba858,transparent 61%),linear-gradient(108deg,#112a53,#151c3b 82%);border:1px solid #304571;border-radius:15px;overflow:hidden;margin-bottom:var(--layout-gap)}
.dashboard-headline::after {content:"";position:absolute;right:8%;top:-200px;width:430px;height:390px;transform:rotate(-26deg);border:1px solid #9e9bff26;border-radius:50%;box-shadow:0 0 0 23px #8998ff0d,0 0 0 48px #8998ff09,0 0 0 72px #8998ff06;pointer-events:none}
.dashboard-headline>* {position:relative;z-index:1}
.eyebrow {color:#b1c6ed;display:inline-flex;align-items:center;gap:8px;font-size:var(--text-caption);letter-spacing:.05em;font-weight:600}
.date-label {margin-bottom:10px}
.wave {color:#c2aeff;font-size:.68em;margin-left:4px;vertical-align:middle}
.button {display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;padding:9px 13px;min-height:40px;border-radius:8px;border:1px solid #304771;font-weight:650;font-size:var(--text-ui);background:#192948;color:#e7efff}
.button:hover {background:#24385e}
.button.primary {padding:10px 16px;min-height:42px;border-color:#8f91ff80;background:linear-gradient(110deg,#477bff,#7259ee 70%,#8b51e1);box-shadow:0 4px 15px #4f57e44d;color:#fff}
.button.primary:hover {filter:brightness(1.12)}
.link-button,.bare {display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;color:#bacbeb;font-size:var(--text-caption);text-align:left;line-height:1.4}
.link-button:hover,.bare:hover {color:#e8eeff}
.panel-head>.link-button svg {order:2}
.starter {display:flex;align-items:center;gap:12px;padding:13px 16px;margin-bottom:15px;background:#142644;border:1px solid #2b4672;border-radius:11px}
.starter>div {flex:1}
.starter p {font-size:var(--text-caption);color:var(--muted);margin-top:4px}
.metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--layout-gap);margin-bottom:var(--layout-gap)}
.metric {display:flex;align-items:center;gap:clamp(10px,1vw,20px);min-height:116px;padding:clamp(14px,1.2vw,24px);border:1px solid var(--border);border-radius:12px;background:linear-gradient(128deg,var(--glow,#20375a),transparent 70%),var(--panel)}
.blue {--accent:var(--blue);--glow:#1a3260;--bright:#3277ed}.green {--accent:var(--green);--glow:#173841;--bright:#22a985}.orange {--accent:var(--orange);--glow:#383041;--bright:#d88332}.purple {--accent:var(--purple);--glow:#2b2856;--bright:#764ce9}.pink {--accent:var(--pink);--glow:#35283e;--bright:#cb5477}.muted {--accent:#bbc9e4;--glow:#293956;--bright:#64749b}
.metric-icon {display:inline-grid;place-items:center;color:#fff;width:clamp(40px,2.9vw,54px);height:clamp(40px,2.9vw,54px);border-radius:12px;flex:none;background:linear-gradient(155deg,var(--accent,#83a2ff),var(--bright,#526cef) 70%);box-shadow:0 5px 16px color-mix(in srgb,var(--bright,#476cee) 24%,transparent)}
.metric-label {display:block;font-size:var(--text-ui);color:#d5e3fa;white-space:nowrap}
.metric-value {font-size:clamp(31px,calc(23px + .86vw),48px);line-height:1.1;font-weight:760;margin:4px 0;letter-spacing:-.02em}
.metric-value small {font-size:var(--text-caption);margin-left:6px;color:var(--dim);font-weight:400}
.metric-note {font-size:var(--text-caption);color:var(--muted);display:block;line-height:1.5}
.overview {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--layout-gap);margin-bottom:var(--layout-gap)}
.panel {border:1px solid var(--border);background:var(--panel);border-radius:12px;min-width:0;box-shadow:0 6px 18px #04091429;overflow:hidden}
.panel-head {display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:55px;padding:13px clamp(15px,1.25vw,24px);border-bottom:1px solid #22324f}
.panel-head h2 {font-size:var(--text-section);letter-spacing:.02em;line-height:1.35}
.panel-head select {font-size:var(--text-caption);padding:5px 8px}
.compact-select {color:#b2c5ea}
.chart-wrap {display:flex;align-items:center;justify-content:space-evenly;gap:clamp(12px,1.7vw,34px);min-height:194px;padding:16px clamp(12px,1.4vw,28px)}
.donut {position:relative;width:clamp(120px,9vw,180px);height:clamp(120px,9vw,180px);flex:none}
.donut svg {height:100%;width:100%;transform:rotate(-90deg);fill:none;stroke-width:11}
.donut-track {stroke:#233554}
.donut-blue {stroke:var(--blue)}.donut-green {stroke:var(--green)}.donut-orange {stroke:var(--orange)}.donut-pink {stroke:var(--pink)}
.donut>div {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.donut strong {font-size:clamp(27px,2vw,42px);line-height:1.1;font-weight:780}
.donut span {color:var(--muted);font-size:var(--text-caption);margin-top:5px}
.legend {min-width:142px;flex:1;max-width:360px;display:grid;gap:11px;font-size:var(--text-ui);color:#c3d0e8}
.legend>div {display:grid;grid-template-columns:9px minmax(45px,1fr) 24px 40px;align-items:center;gap:7px}
.legend b {font-weight:650;color:#e0eafe;text-align:right}
.legend small {text-align:right;font-size:var(--text-caption);color:var(--dim)}
.dot {display:inline-block;width:7px;height:7px;flex:none;border-radius:50%;background:var(--accent,#7f96bf)}
.deadline-list {padding:6px clamp(12px,1.25vw,24px)}
.deadline {display:grid;grid-template-columns:max-content minmax(0,1fr) auto;align-items:center;text-align:left;gap:11px;min-height:38px;padding:5px 3px;border:0;border-bottom:1px solid #22324c;width:100%;background:none;font-size:var(--text-ui)}
.deadline:hover {background:#1a2c4b}
.deadline:last-child {border:0}
.deadline>span:nth-child(2) {overflow-wrap:anywhere}
.deadline time {color:var(--muted);white-space:nowrap;font-size:var(--text-caption)}
.deadline time.late,.danger-text {color:#ff9ab5}
.pill {display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;border-radius:5px;padding:2px 6px;min-height:22px;color:var(--accent);background:var(--glow);font-size:var(--text-caption);border:1px solid color-mix(in srgb,var(--accent) 29%,transparent);font-weight:650;width:max-content}
.board-panel {margin-bottom:var(--layout-gap)}
.board {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,.8vw,18px);padding:clamp(12px,1vw,20px);min-width:0}
.column {min-width:0;min-height:154px;border-radius:9px;border:1px solid #273a5b;background:#0e192f;overflow:hidden}
.column-head {min-height:42px;display:flex;align-items:center;gap:8px;padding:0 11px;background:linear-gradient(110deg,var(--glow),#162441);border-bottom:1px solid #293857}
.column-head h3 {font-size:var(--text-ui);white-space:nowrap}
.column-head b,.count {color:var(--muted);background:#1d2e4c;padding:1px 6px;border-radius:6px;font-size:var(--text-caption);font-weight:650}
.column-head button {margin-left:auto;width:25px;height:25px}
.column-body {padding:8px;display:grid;align-content:start;gap:8px}
.column .empty {font-size:var(--text-caption);min-height:98px;padding:8px 1px;gap:5px}
.column.drop-target {border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.task-card {background:#152440;border:1px solid #2a3a5c;border-radius:7px;min-width:0}
.task-card:hover {border-color:#5076b0;background:#1b2d4c}
.task-card.dragging {opacity:.42}
.task-card-main {display:block;text-align:left;padding:10px 11px;width:100%;border:0;background:none;min-width:0}
.task-title {display:flex;align-items:center;gap:6px;min-width:0;overflow-wrap:anywhere;line-height:1.35;font-size:var(--text-ui);font-weight:680;color:#f0f4ff}
.mini-done {display:grid;place-items:center;width:17px;height:17px;background:#1e8e72;border-radius:50%;color:#edfff7;flex:none}
.task-meta {display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:7px;color:var(--muted);font-size:var(--text-caption)}
.task-meta .avatar {margin-left:auto}
.task-project {display:flex;align-items:center;gap:5px;margin-top:5px;color:var(--dim);font-size:var(--text-caption);overflow-wrap:anywhere}
.task-project .dot {height:5px;width:5px}
.more-tasks {padding:4px 5px}
.bottom-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--layout-gap)}
.today-list,.progress-list,.timeline {padding:10px clamp(13px,1.2vw,23px) 14px}
.today-item {display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:9px;min-height:35px;font-size:var(--text-ui)}
.today-item .bare {color:#deebff;font-size:inherit;overflow-wrap:anywhere}
.today-item .strike {text-decoration:line-through;color:var(--dim)}
.today-item time,.timeline time {font-size:var(--text-caption);color:var(--muted)}
.checkbox {width:17px;height:17px;border:1px solid #6280ae;background:#152744;border-radius:4px;padding:0;display:grid;place-items:center}
.checkbox.checked {background:#386ff2;border-color:#5691ff}
.project-progress {display:grid;gap:7px;margin-bottom:13px}
.project-progress:last-child {margin-bottom:0}
.project-progress>div {display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:var(--text-ui);color:#cedcf7}
.project-progress b {font-weight:600;color:#dce7ff}
progress {display:block;width:100%;height:8px;border:0;border-radius:8px;background:#243653;overflow:hidden}
progress::-webkit-progress-bar {background:#243653;border-radius:8px}
progress::-webkit-progress-value {background:linear-gradient(90deg,var(--bright),var(--accent));border-radius:8px}
progress::-moz-progress-bar {background:var(--accent);border-radius:8px}
.timeline-item {display:grid;grid-template-columns:3.4em 8px minmax(0,1fr);text-align:left;align-items:start;gap:7px;padding:7px 0;min-height:42px;width:100%;background:none;border:0}
.timeline-item:hover {color:#a4c2ff}
.timeline-item .dot {margin-top:4px}
.timeline-item b,.timeline-item small {display:block;font-size:var(--text-ui);line-height:1.3;overflow-wrap:anywhere}
.timeline-item small {color:var(--dim);font-size:var(--text-caption);margin-top:3px}
.empty {display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;min-height:125px;padding:20px;color:var(--dim);font-size:var(--text-ui)}
.empty svg {color:#6686bb}
.filters,.row-actions,.calendar-nav {display:flex;align-items:center;gap:8px}
.table-scroll {overflow-x:auto}
table {border-collapse:collapse;width:100%;text-align:left;font-size:var(--text-ui)}
th {font-size:var(--text-caption);color:var(--muted);font-weight:600;background:#101a30;white-space:nowrap}
td,th {padding:13px 15px;border-bottom:1px solid #22314c}
tbody tr:hover {background:#162641}
tbody tr:last-child td {border-bottom:0}
td small {display:block;color:var(--dim);font-size:var(--text-caption);margin-top:5px}
.item-title {font-size:var(--text-ui);color:#e4edff;font-weight:650}
.table-person {display:inline-flex;align-items:center;gap:8px;overflow-wrap:anywhere}
.muted-text {color:var(--dim)}
.card-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.project-card {padding:17px}
.project-card-top,.project-card-bottom {display:flex;align-items:center;justify-content:space-between;gap:10px}
.project-card h2 {margin-top:13px;font-size:var(--text-section)}
.project-card h2 .bare {color:var(--text);font-size:inherit;font-weight:730}
.project-card p {margin:7px 0 17px;color:var(--muted);font-size:var(--text-ui);min-height:32px;white-space:pre-wrap;overflow-wrap:anywhere}
.project-card-bottom {padding-top:11px;margin-top:15px;border-top:1px solid #2a3b59;color:var(--muted);font-size:var(--text-caption)}
.calendar-layout {display:grid;grid-template-columns:minmax(0,2.2fr) minmax(200px,1fr);gap:15px;align-items:start}
.calendar-grid {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:#263657}
.weekday {background:#14213b;text-align:center;padding:9px 1px;font-size:var(--text-caption);color:var(--muted)}
.calendar-day {display:grid;align-content:space-between;justify-items:start;gap:5px;min-height:71px;padding:8px;background:#101d36;border:1px solid transparent;text-align:left}
.calendar-day:hover {background:#22385f}
.calendar-day.outside {color:var(--dim)}
.calendar-day.current b {color:var(--blue)}
.calendar-day.selected {border-color:#718fff;background:#233660}
.calendar-day span {color:#b9c9fa;font-size:var(--text-caption);white-space:nowrap}
.reports-metrics {margin-top:4px}
.notice-list {display:grid;padding:3px 13px}
.notice {display:grid;grid-template-columns:37px 1fr 17px;gap:11px;align-items:center;background:none;border:0;border-bottom:1px solid var(--border);padding:12px 5px;text-align:left}
.notice:last-child {border-bottom:0}
.notice:hover {background:#192945}
.notice b,.notice small {display:flex;align-items:center;gap:7px}
.notice small {margin-top:4px;color:var(--muted);font-size:var(--text-caption)}
.notice .metric-icon {width:34px;height:34px;border-radius:9px}
.settings-grid {display:grid;grid-template-columns:1fr 1fr;gap:14px}
.profile-form,.settings-actions {display:grid;gap:14px;padding:16px;justify-items:start}
.profile-form label {width:100%}
.settings-actions p {color:var(--muted);font-size:var(--text-ui)}
.settings-actions>div {display:flex;flex-wrap:wrap;gap:8px}
hr {width:100%;border:0;border-top:1px solid var(--border);margin:4px 0}
dialog {color:var(--text);background:#14213a;border:1px solid #374f79;border-radius:15px;max-width:min(490px,calc(100vw - 28px));width:100%;padding:0;box-shadow:0 22px 80px #020715c0}
dialog::backdrop {background:#030817bc;backdrop-filter:blur(3px)}
.modal-head {display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:12px 17px}
.modal-head h2 {font-size:var(--text-section)}
.editor,.invite-dialog {display:grid;gap:12px;padding:17px}
label {display:grid;gap:6px;color:#d4e1f9;font-size:var(--text-ui);font-weight:650}
label small {font-weight:400;color:var(--muted)}
.form-grid {display:grid;grid-template-columns:1fr 1fr;gap:11px}
.form-error {color:#ff9fbb;font-size:var(--text-caption);line-height:1.45}
.form-error:empty {display:none}
.modal-actions {display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px}
.modal-actions>div {display:flex;gap:8px}
.invite-dialog p {color:var(--muted);font-size:var(--text-ui);line-height:1.65}
.invite-dialog .button {justify-self:start}
#toast {position:fixed;right:22px;bottom:20px;z-index:99;opacity:0;pointer-events:none;transform:translateY(8px);padding:12px 17px;max-width:calc(100% - 44px);background:#1d3c4b;border:1px solid #3d877f;color:#ddfff2;border-radius:10px;box-shadow:0 10px 30px #02081180;transition:opacity .16s,transform .16s}
#toast.visible {opacity:1;transform:translateY(0)}
#toast.error {color:#ffdfeb;border-color:#925373;background:#482c48}
.mobile-menu,.scrim {display:none}
.auth-shell {min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.83fr)}
.auth-story {position:relative;display:grid;align-content:space-between;min-height:640px;gap:35px;padding:45px clamp(30px,6vw,104px);background:radial-gradient(ellipse at 40% 43%,#243f8c6e,transparent 69%),radial-gradient(ellipse at 92% 85%,#5d349b60,transparent 65%),linear-gradient(140deg,#122749,#151b40);border-right:1px solid #293e6c;overflow:hidden}
.auth-story::after {content:"";position:absolute;bottom:-240px;right:-300px;width:660px;height:660px;border:1px solid #a49cff30;border-radius:50%;box-shadow:0 0 0 36px #9193ff0f,0 0 0 72px #9193ff0c,0 0 0 108px #9193ff08;pointer-events:none}
.auth-story>* {position:relative;z-index:1}
.auth-story .brand {padding:0}
.auth-intro h1 {font-size:clamp(31px,4vw,57px);line-height:1.18;margin:18px 0;letter-spacing:-.055em}
.auth-intro em {font-style:normal;color:#c3baff}
.auth-intro p {max-width:350px;color:#b6c7e8;line-height:1.9;font-size:14px}
.auth-cards {display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.auth-cards span {display:flex;align-items:center;gap:7px;color:#cdd9fb;padding:9px 10px;border:1px solid #496097;background:#18295688;border-radius:9px;font-size:11px}
.auth-footer {display:flex;align-items:center;gap:8px;color:#92a9d3;letter-spacing:.12em;font-size:10px}
.auth-footer i {height:3px;width:3px}
.auth-main {display:grid;place-items:center;padding:28px;background:radial-gradient(ellipse at 50% 0,#172c526b,transparent 75%),#0a1326}
.auth-card {max-width:385px;width:100%;padding:25px;background:#121f37;border:1px solid var(--border);border-radius:15px}
.auth-icon {display:grid;place-items:center;background:#223766;color:#a7beff;width:45px;height:45px;border-radius:13px}
.auth-card h2 {font-size:24px;margin:14px 0 7px;line-height:1.2}
.auth-card p {font-size:var(--text-ui);color:var(--muted);line-height:1.6;margin-bottom:18px}
.auth-card form {display:grid;gap:12px}
.auth-submit {display:flex;justify-content:space-between;margin-top:2px}
.auth-switch {margin-top:13px;text-align:center}
@media (max-width:1200px) {
  .metric {gap:9px;padding:12px}.metric-icon {width:36px;height:36px}
}
@media (max-width:960px) {
  :root {--nav-width:180px;--page-gutter:16px}
  .sidebar {padding-inline:10px}
  .board {overflow:auto;grid-template-columns:repeat(4,minmax(170px,1fr))}
  .metric {padding:12px;gap:8px}.metric-icon {width:34px;height:34px;border-radius:9px}.metric-icon svg {width:18px;height:18px}
  .card-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px) {
  .metrics,.bottom-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .overview {grid-template-columns:1fr}
  .bottom-grid>section:last-child {grid-column:1 / -1}
}
@media (max-width:730px) {
  .sidebar {width:220px;transform:translateX(-100%);transition:transform .18s ease}.sidebar.open {transform:translateX(0)}
  .scrim.visible {display:block;position:fixed;inset:0;z-index:9;background:#0008}
  .workspace {margin-left:0}.mobile-menu {display:inline-grid;margin-left:-5px}.topbar {height:52px}
  .breadcrumb-root,.breadcrumb>svg {display:none}.top-actions {gap:6px}.search {height:32px}.search input {width:100px}.search kbd {display:none}
  .main {padding-top:16px}.headline {gap:10px}.headline h1 {font-size:26px}.headline .button {padding-inline:9px}
  .dashboard-headline {padding:15px;min-height:110px}.metrics,.overview {gap:10px}
  .metric {min-height:100px;gap:9px}
  .board {grid-template-columns:repeat(4,minmax(190px,1fr))}
  .bottom-grid,.calendar-layout,.settings-grid {grid-template-columns:1fr;gap:10px}
  .card-grid {gap:8px}.project-card {padding:12px}.calendar-day {min-height:53px;padding:4px}
  td,th {padding:10px}.table-scroll table {min-width:450px}
  .auth-shell {grid-template-columns:1fr}.auth-story {min-height:0;padding:19px 25px;gap:14px}
  .auth-intro h1 {font-size:28px;margin:8px 0}.auth-intro p,.auth-cards,.auth-footer {display:none}.auth-main {padding:17px}
}
@media (max-width:400px) {
  .search input {width:67px}.top-actions {gap:3px}.top-profile svg {display:none}
  :root {--page-gutter:10px}
  .starter {gap:6px;padding-inline:8px}.card-grid {grid-template-columns:1fr}
  .chart-wrap {gap:10px;padding-inline:11px}.donut {width:105px;height:105px}.legend {min-width:130px}
  .legend>div {grid-template-columns:7px minmax(42px,1fr) 21px 33px;gap:4px}
  .dashboard-headline h1 {font-size:22px}
}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after {transition:none!important}}