:root{--color-bg: #ffffff;--color-surface: #f8fafc;--color-fg: #0f172a;--color-muted: #475569;--color-border: #e2e8f0;--color-accent: #1e293b;--color-accent-fg: #ffffff;--color-accent-soft: #f1f5f9;--color-success: #15803d;--color-success-soft: #f0fdf4;--color-warning: #b45309;--color-warning-soft: #fffbeb;--color-danger: #b91c1c;--color-danger-soft: #fef2f2;--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;--text-xs: 12px;--text-sm: 13px;--text-md: 14px;--text-lg: 16px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-full: 9999px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 24px;--spacing-2xl: 32px;--spacing-3xl: 48px;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);--shadow-md: 0 4px 12px rgba(15, 23, 42, .08);--shadow-lg: 0 12px 32px rgba(15, 23, 42, .12)}:root{color:var(--color-fg);background:var(--color-bg);font-family:var(--font-body);font-size:var(--text-md);line-height:1.5}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{min-height:100vh;background:radial-gradient(circle at top right,rgba(30,41,59,.08),transparent 28%),linear-gradient(180deg,#f1f5f9cc,#fff 280px)}#root{min-height:100vh;container:koflow-app / inline-size}a,button,input,textarea,select{font:inherit}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.app-shell{display:grid;grid-template-columns:240px minmax(0,1fr);grid-template-rows:auto 1fr;min-height:100vh;color:var(--color-fg)}.app-shell__header{grid-column:1 / -1;display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg) var(--spacing-xl);background:#f8fafce0;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--color-border)}.app-shell__brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius-lg);background:var(--color-accent);color:var(--color-accent-fg);box-shadow:var(--shadow-md);font-size:var(--text-lg);font-weight:700}.app-shell__eyebrow{margin:0 0 var(--spacing-xs);color:var(--color-muted);font-size:var(--text-sm);letter-spacing:.04em;text-transform:uppercase}.app-shell__title{margin:0;font-size:var(--text-2xl);line-height:1.1}.app-shell__nav{display:flex;flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing-xl) var(--spacing-md);background:#f8fafcf0;border-right:1px solid var(--color-border)}.app-shell__nav-link{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);color:var(--color-muted);text-decoration:none}.app-shell__nav-link:hover,.app-shell__nav-link--active{background:var(--color-accent-soft);color:var(--color-fg)}.app-shell__nav-link--active{font-weight:600}.app-shell__main{padding:var(--spacing-xl)}.task-screen{display:grid;gap:var(--spacing-xl);max-width:1080px}.task-screen__account-entry{margin:calc(-1 * var(--spacing-sm)) 0 0;color:var(--color-muted)}.task-screen__account-entry a,.my-tasks__footer a,.auth-footnote a{color:var(--color-accent)}.task-session-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--spacing-md)}.task-screen__header{display:flex;align-items:end;justify-content:space-between;gap:var(--spacing-lg)}.task-screen__kicker{margin:0 0 var(--spacing-xs);color:var(--color-muted);font-size:var(--text-sm);letter-spacing:.06em;text-transform:uppercase}.task-screen__heading{margin:0;font-size:var(--text-3xl);line-height:1.05}.task-screen__summary{max-width:52ch;margin:var(--spacing-sm) 0 0;color:var(--color-muted)}.task-card{display:grid;gap:var(--spacing-lg);padding:var(--spacing-xl);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:#ffffffeb;box-shadow:var(--shadow-sm)}.task-card__title{margin:0;font-size:var(--text-xl)}.task-card__body{margin:var(--spacing-sm) 0 0;color:var(--color-muted)}.task-notice{margin:0;padding:var(--spacing-md) var(--spacing-lg);border:1px solid var(--color-border);border-radius:var(--radius-md)}.task-notice--success{background:var(--color-success-soft);border-color:color-mix(in srgb,var(--color-success) 24%,white 76%);color:var(--color-success)}.task-creation{display:grid;gap:var(--spacing-lg)}.task-creation__copy{display:grid;gap:var(--spacing-sm)}.task-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.8em;padding:0 var(--spacing-xs);border:1px solid var(--color-border);border-bottom-width:2px;border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:var(--shadow-sm);font-family:var(--font-mono);font-size:var(--text-sm)}.task-creation__controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--spacing-md);align-items:center}.task-creation__input{width:100%;min-height:52px;padding:0 var(--spacing-lg);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-fg);box-shadow:inset 0 1px 2px #0f172a0a}.task-creation__input::placeholder{color:color-mix(in srgb,var(--color-muted) 75%,white 25%)}.task-creation__submit,.task-creation__retry{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--spacing-lg);border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease}.task-creation__submit{background:var(--color-accent);color:var(--color-accent-fg);box-shadow:var(--shadow-md);font-weight:600}.task-creation__submit:hover,.task-creation__retry:hover{transform:translateY(-1px)}.task-creation__error{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);border:1px solid color-mix(in srgb,var(--color-danger) 15%,white 85%);border-radius:var(--radius-md);background:var(--color-danger-soft);color:var(--color-danger)}.task-creation__retry{min-height:40px;padding:0 var(--spacing-md);border-color:color-mix(in srgb,var(--color-danger) 24%,white 76%);background:#fffc;color:inherit}.task-list__header{display:flex;justify-content:space-between;gap:var(--spacing-md)}.task-list__rows{display:grid;gap:var(--spacing-sm);min-height:88px;margin:0;padding:0;list-style:none}.task-row{display:grid;gap:var(--spacing-sm);min-height:60px;padding:var(--spacing-md) var(--spacing-lg);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:inset 0 1px #ffffffe6;transition:opacity .16s ease,transform .16s ease,border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.task-row--editing{align-content:start}.task-row--completing{border-color:color-mix(in srgb,var(--color-success) 28%,white 72%);background:linear-gradient(180deg,color-mix(in srgb,var(--color-success-soft) 76%,white 24%),#fff);box-shadow:inset 0 1px #fffffff5,0 0 0 1px color-mix(in srgb,var(--color-success) 10%,transparent 90%)}.task-row--deleting{opacity:.72}.task-row__body{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--spacing-md)}.task-row__main{min-width:0;display:grid;gap:var(--spacing-xs)}.task-row__check{width:22px;height:22px;margin:0;accent-color:var(--color-success);cursor:pointer}.task-row__check:disabled{cursor:progress}.task-row__title{min-width:0;font-size:var(--text-lg);font-weight:600;line-height:1.3;word-break:break-word}.task-row__title-button{width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:text}.task-row__title-button:disabled{cursor:progress;opacity:.72}.task-row__edit-input{width:100%;min-height:44px;padding:0 var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;color:var(--color-fg);box-shadow:inset 0 1px 2px #0f172a0a}.task-row__edit-input:disabled{background:var(--color-accent-soft);color:var(--color-muted);cursor:progress}.task-row__error{margin:0;color:var(--color-danger);font-size:var(--text-sm)}.task-row__actions{display:grid;justify-items:end;align-items:center;gap:var(--spacing-xs)}.task-row__date-group{display:grid;justify-items:end;gap:var(--spacing-xs)}.task-row__date-group--overdue{color:var(--color-danger)}.task-row__date-button{display:inline-flex;flex-wrap:wrap;justify-content:end;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:inherit;cursor:pointer;text-align:right}.task-row__date-button:hover,.task-row__date-button--open{border-color:color-mix(in srgb,var(--color-border) 75%,white 25%);background:color-mix(in srgb,var(--color-surface) 80%,white 20%)}.task-row__date-button--overdue{border-color:color-mix(in srgb,var(--color-danger) 18%,white 82%);background:color-mix(in srgb,var(--color-danger-soft) 72%,white 28%)}.task-row__date-button:disabled{cursor:progress;opacity:.8}.task-row__date{color:inherit;font-size:var(--text-sm);font-weight:600;text-align:right;white-space:nowrap}.task-row__overdue{font-size:var(--text-xs);font-weight:700;letter-spacing:.04em;text-transform:uppercase}.task-row__date-editor{display:grid;justify-items:end;gap:var(--spacing-xs);width:min(100%,232px)}.task-row__date-input{width:100%;min-height:40px;padding:0 var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;color:var(--color-fg)}.task-row__date-input:disabled{background:var(--color-accent-soft);color:var(--color-muted);cursor:progress}.task-row__date-editor-actions{display:flex;flex-wrap:wrap;justify-content:end;gap:var(--spacing-xs)}.task-row__date-editor-button{min-height:32px;padding:0 var(--spacing-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:#fffffff0;color:var(--color-fg);cursor:pointer}.task-row__date-editor-button--retry{border-color:color-mix(in srgb,var(--color-danger) 24%,white 76%);color:var(--color-danger)}.task-row__date-editor-button:disabled{cursor:progress;opacity:.72}.task-row__meta{color:var(--color-muted);font-size:var(--text-sm);text-align:right}.task-row__delete{min-height:40px;padding:0 var(--spacing-md);border:1px solid color-mix(in srgb,var(--color-danger) 22%,white 78%);border-radius:var(--radius-md);background:#ffffffeb;color:var(--color-danger);cursor:pointer;opacity:0;transform:translateY(2px);pointer-events:none;transition:opacity .14s ease,transform .14s ease,background-color .14s ease,border-color .14s ease}.task-row__delete:hover{background:color-mix(in srgb,var(--color-danger-soft) 74%,white 26%)}.task-row:hover .task-row__delete,.task-row:focus-within .task-row__delete,.task-row__delete:focus-visible{opacity:1;transform:translateY(0);pointer-events:auto}.task-row__delete:disabled{cursor:progress;opacity:1;transform:translateY(0);pointer-events:auto}@media (hover: none),(pointer: coarse){.task-row__delete{opacity:1;transform:translateY(0);pointer-events:auto}}.task-empty-state{display:grid;gap:var(--spacing-sm);padding:var(--spacing-lg);border-radius:var(--radius-md);background:linear-gradient(180deg,#f8fafc,#fff);border:1px solid var(--color-border)}.task-empty-state__title{margin:0;font-size:var(--text-lg)}.task-empty-state__body{margin:0;color:var(--color-muted)}.auth-screen{max-width:760px}.auth-card{gap:var(--spacing-xl)}.task-shell-card,.login-card{max-width:680px}.login-active-session{display:grid;gap:var(--spacing-lg)}.login-card__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-md)}.login-card__primary-link{text-decoration:none}.auth-form{display:grid;gap:var(--spacing-lg)}.auth-field{display:grid;gap:var(--spacing-sm)}.auth-label{font-weight:600}.auth-input,.auth-toggle{font:inherit}.auth-input{width:100%;min-height:52px;padding:0 var(--spacing-lg);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-fg);box-shadow:inset 0 1px 2px #0f172a0a}.auth-hint,.auth-footnote{margin:0;color:var(--color-muted)}.auth-secret{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--spacing-sm)}.auth-toggle,.my-tasks__secondary-link{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--spacing-lg);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-fg);text-decoration:none}.auth-toggle{cursor:pointer}.auth-error,.auth-request-error{margin:0;color:var(--color-danger)}.auth-callout{margin:0;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);background:var(--color-warning-soft);color:var(--color-warning)}.auth-submit{width:100%}.my-tasks__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-md)}.my-tasks__primary-link{text-decoration:none}.my-tasks__footer{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:var(--spacing-md)}@container koflow-app (max-width: 900px){.app-shell{grid-template-columns:1fr;grid-template-rows:auto auto 1fr}.app-shell__nav{flex-direction:row;overflow-x:auto;padding:var(--spacing-sm) var(--spacing-md);border-right:0;border-bottom:1px solid var(--color-border)}}@container koflow-app (max-width: 700px){.app-shell__header,.app-shell__main{padding:var(--spacing-lg)}.task-screen__header{flex-direction:column;align-items:start}.task-session-actions{flex-direction:column;align-items:stretch}.task-card{padding:var(--spacing-lg)}.auth-secret,.my-tasks__actions,.login-card__actions{grid-template-columns:1fr}.task-creation__controls,.task-creation__error{grid-template-columns:1fr;flex-direction:column;align-items:stretch}.task-creation__submit,.task-creation__retry{width:100%}.task-row__body{grid-template-columns:auto minmax(0,1fr);align-items:start}.task-row__actions{grid-column:1 / -1;grid-template-columns:1fr;justify-items:stretch}.task-row__date-group,.task-row__date-editor{justify-items:start}.task-row__date-editor-actions{justify-content:start}.task-row__date-button{justify-content:start;text-align:left}.task-row__meta{text-align:left}.task-row__date{text-align:left;white-space:normal}.task-row__delete{width:100%}}@media (prefers-reduced-motion: reduce){.task-creation__submit,.task-creation__retry,.task-row,.task-row__delete{transition:none}}@container koflow-app (max-width: 520px){.app-shell__nav{padding-inline:var(--spacing-sm)}.task-row{padding:var(--spacing-md)}.task-row__check{width:24px;height:24px}.task-row__meta,.task-row__date{text-align:left}}