:root{color-scheme:light;--bg:#f5f5f7;--card:#fff;--text:#1d1d1f;--muted:#606067;--blue:#007aff;--link:#005ec5;--tint:#eaf3ff;--glass:rgba(255,255,255,.85);--line:rgba(0,0,0,.1);--shadow:0 12px 40px rgba(30,38,64,.07)}
:root[data-theme=dark]{color-scheme:dark;--bg:#000;--card:#1c1c1e;--text:#f5f5f7;--muted:#adadb5;--blue:#0a84ff;--link:#70b6ff;--tint:#14283b;--glass:rgba(28,28,30,.85);--line:rgba(255,255,255,.15);--shadow:none}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}
main{max-width:760px;margin:auto;padding:calc(36px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) calc(120px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));outline:none}
header{margin-bottom:24px}
.brand{color:var(--link);font-weight:650}
h1{margin:4px 0 0;font-size:34px;line-height:1.2}
h2,legend{margin:0;font-size:20px;font-weight:650}
p{color:var(--muted)}
.card{background:var(--card);border-radius:24px;padding:24px;box-shadow:var(--shadow);margin-bottom:16px}
.empty{min-height:280px;display:grid;justify-items:center;align-content:center;text-align:center}
.empty p{max-width:30ch;margin:8px 0 18px}
.glyph{background:var(--tint);color:var(--link);width:54px;height:54px;display:grid;place-items:center;border-radius:18px;margin-bottom:16px}
svg{width:24px;height:24px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
.primary{display:inline-grid;place-items:center;min-height:48px;padding:0 20px;border:0;border-radius:16px;background:var(--tint);color:var(--link);font-weight:650}
nav{position:fixed;bottom:calc(12px + env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));width:auto;max-width:480px;margin-inline:auto;padding:6px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
@supports ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))){nav{background:var(--glass);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}}
nav a{min-height:56px;display:grid;justify-items:center;align-content:center;gap:2px;color:var(--muted);font-size:13px;border-radius:18px}
nav a[aria-current]{color:var(--link);background:var(--tint);font-weight:650}
fieldset{border:0;padding:0;margin:0;min-width:0}
.options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:12px;background:var(--bg);border-radius:16px;padding:4px}
.options label{position:relative;cursor:pointer;text-align:center}
.options input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.options span{display:grid;place-items:center;min-height:44px;border-radius:12px;font-size:14px}
.options input:checked+span{background:var(--card);color:var(--link);font-weight:650}
.options input:focus-visible+span,:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
#theme-message:empty{margin:0}
.about{padding:0}
.about button{width:100%;border:0;background:none;min-height:56px;padding:0 24px;display:flex;justify-content:space-between;align-items:center;border-radius:24px}
dialog{width:min(100% - 24px,480px);max-height:85dvh;margin:auto auto calc(12px + env(safe-area-inset-bottom));padding:24px;border:1px solid var(--line);border-radius:24px;background:var(--card);color:var(--text);box-shadow:var(--shadow)}
dialog[open]{animation:rise 220ms ease-out}
dialog::backdrop{background:rgba(0,0,0,.4)}
.close{float:right;min-width:44px;min-height:44px;border:0;border-radius:50%;background:var(--bg);font-size:22px}
@keyframes rise{from{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){dialog[open]{animation:none}}

.business { display:grid; gap:16px; }
.business > p:empty { display:none; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-block:8px; }
.secondary, .business input, .business select, .editor input:not([type=checkbox]), .editor select, .editor textarea {
  font:inherit; color:var(--text); background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:8px 12px; min-height:44px; max-width:100%;
}
.actions input { flex:1 1 180px; min-width:0; }
.record { overflow-wrap:anywhere; }
.record p { white-space:pre-wrap; }
.record a, .record-link { color:var(--link); text-decoration:underline; }
.record summary { padding:10px; cursor:pointer; }
.timeline { border-inline-start:2px solid var(--blue); padding-inline-start:12px; }
.editor { overflow:auto; max-height:calc(90dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.record-form { display:grid; gap:12px; }
.record-form label { display:grid; gap:4px; }
.record-form label:has(input[type=checkbox]) { display:flex; align-items:center; min-height:44px; }
.record-form textarea { min-height:85px; resize:vertical; }
.record-form .actions { justify-content:flex-end; }
.record-form [role=alert]:empty { display:none; }
.pwa-status { max-width:760px; margin:auto; padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right)); display:flex; flex-wrap:wrap; gap:8px; }
.pwa-status span:not([hidden]) { background:var(--card); color:var(--muted); padding:4px 10px; border-radius:12px; font-size:13px; }
[hidden] { display:none !important; }

.pwa-status:has(> :not([hidden])) { padding-top:calc(12px + env(safe-area-inset-top)); }
.record-form input:not([type=checkbox]), .record-form textarea, .record-form select { min-width:0; width:100%; font-size:16px; }
.record a:focus-visible, .record summary:focus-visible { outline-offset:4px; }

/* DevSpace V2 presentation */
:root { --page-gap:clamp(16px,3vw,24px); --layout-width:1200px; }
main,.pwa-status { max-width:var(--layout-width); }
main { padding-inline:max(var(--page-gap),env(safe-area-inset-left)) max(var(--page-gap),env(safe-area-inset-right)); }
.page-header,.page-tools,.section-heading,.dashboard-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.page-header { flex-wrap:wrap; }
.page-header p { margin:8px 0 0; }
.page-tools:empty { display:none; }
.settings-shortcut { display:grid; place-items:center; width:44px; padding:0; }
.nav-brand { display:none; }
.dashboard-grid,.dashboard-column { display:grid; align-content:start; gap:24px; min-width:0; }
.dashboard-grid { grid-template-columns:minmax(0,1fr); }
.dashboard-section { min-width:0; }
.dashboard-section > .section-heading { margin-bottom:8px; }
.section-heading { flex-wrap:wrap; }
.dashboard-link { display:inline-flex; align-items:center; min-height:44px; color:var(--link); overflow-wrap:anywhere; }
.dashboard-link:hover { text-decoration:underline; }
.project-preview { padding:18px; margin-bottom:10px; border:1px solid var(--line); box-shadow:none; }
.project-preview h3 { margin:0; min-width:0; overflow-wrap:anywhere; font-size:17px; }
.project-preview p,.dashboard-row p { margin:4px 0 0; overflow-wrap:anywhere; }
.project-preview progress { width:100%; height:8px; accent-color:var(--blue); }
.state-chip { padding:4px 8px; border-radius:999px; color:var(--link); background:var(--tint); font-size:12px; }
.compact-empty,.dashboard-row { margin:0; padding:10px 14px; border:1px solid var(--line); border-radius:20px; background:var(--card); }
.compact-empty { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; color:var(--muted); }
.dashboard-row + .dashboard-row { margin-top:6px; }
.dashboard-row > div { min-width:0; }
.dashboard-row button { flex:none; }
.timeline-entry { border-inline-start:3px solid var(--blue); }
.record .actions { margin-bottom:0; }
.record-form :is(input,select,textarea) { scroll-margin-block:16px; }
.record-form input[type=checkbox] { width:22px; height:22px; }
nav a,.primary,.secondary { transition:background-color 200ms ease,color 200ms ease; }
nav a:hover,.secondary:hover { background:var(--tint); }
@media (min-width:1024px) {
  body { --sidebar-width:224px; padding-inline-start:var(--sidebar-width); }
  main { padding-bottom:40px; }
  nav { inset:0 auto 0 0; width:var(--sidebar-width); max-width:none; margin:0; padding:26px 14px; border-radius:0; grid-template-columns:minmax(0,1fr); align-content:start; gap:4px; }
  nav a { display:flex; justify-content:flex-start; align-items:center; gap:12px; padding-inline:14px; min-height:48px; font-size:15px; }
  .nav-brand { display:flex; align-items:center; gap:12px; color:var(--link); font-size:17px; font-weight:700; padding:12px 14px 22px; }
  .dashboard-grid { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
  dialog { margin:auto; }
}
@media (prefers-reduced-motion:reduce) {
  nav a,.primary,.secondary { transition:none; }
}

:root { --layout-width:1320px; --warning:#a43225; }
:root[data-theme=dark] { --warning:#ff9b8c; }
.overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.overview-card { min-width:0; margin:0; padding:16px; border:1px solid var(--line); box-shadow:none; }
.overview-card:first-child { background:var(--tint); }
.overview-card h2 { font-size:17px; }
.overview-value { display:block; font-size:clamp(32px,5vw,48px); font-variant-numeric:tabular-nums; line-height:1.1; margin-top:8px; overflow-wrap:anywhere; }
.overview-details { display:flex; flex-wrap:wrap; gap:8px 16px; border-top:1px solid var(--line); padding-top:8px; margin:10px 0 0; }
.overview-details > div { display:flex; flex-wrap:wrap; gap:3px 8px; align-items:baseline; }
.overview-details dt { color:var(--muted); font-size:12px; }
.overview-details dd { margin:0; font-variant-numeric:tabular-nums; font-weight:650; }
.warning { color:var(--warning); }
.project-preview { display:grid; gap:6px; color:var(--text); }
.project-preview:hover { border-color:var(--blue); }
.project-identity { display:flex; align-items:center; gap:10px; flex:1 1 145px; min-width:0; }
.project-icon { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:12px; color:var(--link); background:var(--tint); }
.project-preview .project-arrow { color:var(--link); }
.dashboard-section > .section-heading { min-height:44px; }
.dashboard-row { border-radius:16px; }
.dashboard-row + .dashboard-row { margin-top:4px; }
.dashboard-row .dashboard-link { font-weight:600; }
.dashboard-row p { margin-top:-4px; }
.compact-empty { border-style:dashed; }
.project-record-list { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.project-record-list > .record { margin:0; }
.task-record { padding-block:14px; }
.task-record h2 { font-size:17px; }
.settings-card { max-width:720px; }
@media (max-width:1023px) {
  nav { z-index:2; border-color:var(--line); box-shadow:inset 0 1px 0 var(--line),0 8px 32px #0002; }
  @supports (backdrop-filter:blur(20px)) {
    nav { backdrop-filter:blur(20px) saturate(145%); }
  }
}
@media (min-width:1024px) {
  body { --sidebar-width:228px; }
  nav { background:var(--card); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .page-header { border-bottom:1px solid var(--line); padding-bottom:20px; }
  .page-header .brand { display:none; }
  .dashboard-grid,.overview { grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:20px; }
  .overview-card { padding:20px 22px; }
  .project-record-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px) and (max-width:1120px) {
  .dashboard-grid { grid-template-columns:minmax(0,1fr); }
}

:root { --workspace-hero:#edf3fc; --workspace-sidebar:#eff0f3; }
:root[data-theme=dark] { --workspace-hero:#171f2d; --workspace-sidebar:#141416; }
.workspace-metrics { display:none; }
.dashboard-grid .overview { margin-bottom:4px; }
.dashboard-column { gap:16px; }
.project-preview { gap:8px; }
.project-preview.featured-project { background:var(--workspace-hero); padding:20px; }
.featured-project h3 { font-size:clamp(21px,2.1vw,26px); }
.featured-project .project-icon { width:44px; height:44px; }
.project-preview .project-footer { border-top:1px solid var(--line); padding-top:9px; margin-top:2px; }
.dashboard-grid .project-preview:focus-visible { outline-offset:2px; }
.dashboard-activity .dashboard-row { background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:4px 0 9px; }
.dashboard-activity .dashboard-row p { margin:0; }
.dashboard-activity .dashboard-row .dashboard-link { min-height:44px; }
.dashboard-activity:empty { display:none; }
.dashboard-grid:not(.has-activity) { grid-template-columns:minmax(0,1fr); }
@media(max-width:1023px) {
  .dashboard-grid .overview-card { padding:12px; }
  .dashboard-grid .overview-value { font-size:29px; }
  .dashboard-grid .overview-details { gap:4px 10px; }
  .dashboard-grid .overview-details > div { gap:3px 5px; }
  nav { border-radius:23px; }
}
@media(min-width:1024px) {
  body { --sidebar-width:224px; }
  nav { background:var(--workspace-sidebar); }
  .dashboard-grid.has-activity { grid-template-columns:minmax(0,1fr) clamp(280px,21vw,320px); gap:24px; }
  .dashboard-grid .overview { display:none; }
  .workspace-metrics { display:grid; grid-template-columns:1.2fr repeat(4,minmax(0,1fr)); margin:0; padding:12px 0; border:1px solid var(--line); border-radius:19px; background:var(--card); }
  .workspace-metrics > div { min-width:0; padding-inline:12px; }
  .workspace-metrics > div + div { border-inline-start:1px solid var(--line); }
  .workspace-metrics dt { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
  .workspace-metrics dd { margin:0; font-size:21px; font-weight:650; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
  .workspace-metrics > div:first-child dd { color:var(--link); font-size:29px; }
  .dashboard-activity { border-inline-start:1px solid var(--line); padding-inline-start:20px; }
  .project-preview.featured-project { padding:22px; }
}

@media (max-width: 1023px) {
  html, .editor, .record-form textarea { scrollbar-width: none; }
  html::-webkit-scrollbar, .editor::-webkit-scrollbar,
  .record-form textarea::-webkit-scrollbar { display: none; }
}