@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}
}
}
@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}
}
@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}
::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}
html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}
hr{height:0;color:inherit;border-top-width:1px}
abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}
small{font-size:80%}
sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}
sub{bottom:-.25em}
sup{top:-.5em}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
:-moz-focusring{outline:auto}
progress{vertical-align:baseline}
summary{display:list-item}
ol,ul,menu{list-style:none}
img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}
img,video{max-width:100%;height:auto}
button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}
::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}
:where(select:is([multiple],[size])) optgroup{font-weight:bolder}
:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}
::file-selector-button{margin-inline-end:4px}
::placeholder{opacity:1}
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}
@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}
}
}
textarea{resize:vertical}
::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}
::-webkit-datetime-edit{display:inline-flex}
::-webkit-datetime-edit-fields-wrapper{padding:0}
::-webkit-datetime-edit{padding-block:0}
::-webkit-datetime-edit-year-field{padding-block:0}
::-webkit-datetime-edit-month-field{padding-block:0}
::-webkit-datetime-edit-day-field{padding-block:0}
::-webkit-datetime-edit-hour-field{padding-block:0}
::-webkit-datetime-edit-minute-field{padding-block:0}
::-webkit-datetime-edit-second-field{padding-block:0}
::-webkit-datetime-edit-millisecond-field{padding-block:0}
::-webkit-datetime-edit-meridiem-field{padding-block:0}
::-webkit-calendar-picker-indicator{line-height:1}
:-moz-ui-invalid{box-shadow:none}
button,input:where([type=button],[type=reset],[type=submit]){appearance:button}
::file-selector-button{appearance:button}
::-webkit-inner-spin-button{height:auto}
::-webkit-outer-spin-button{height:auto}
[hidden]:where(:not([hidden=until-found])){display:none!important}
}
@layer components;@layer utilities{.static{position:static}
.start{inset-inline-start:var(--spacing)}
.block{display:block}
.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}
}
:root{--surface:#faf8ff;--surface-lowest:#fff;--surface-container:#f0ebf8;--primary:#5e35a8;--primary-dark:#2c1762;--primary-container:#eee3ff;--teal:#10a89f;--coral:#ff5b4d;--amber:#ffac00;--green:#35a949;--on-surface:#241d38;--on-surface-muted:#6d667c;--outline:#ddd5e8;--danger:#ba1a1a;--shadow:0 8px 24px #2c176217}
*{box-sizing:border-box}
html{background:#eeeaf2}
body{color:var(--on-surface);-webkit-font-smoothing:antialiased;background:radial-gradient(circle at 15% 10%,#eadcffbf,#0000 32rem),#eeeaf2;margin:0;font-family:DM Sans,Aptos,Segoe UI,sans-serif}
button,input,select,textarea{font:inherit}
button{color:inherit;-webkit-tap-highlight-color:transparent}
.site-shell{justify-content:center;min-height:100svh;display:flex}
.phone-app{background:var(--surface-lowest);width:min(100%,430px);min-height:100svh;padding:12px 16px 104px;position:relative;overflow:hidden;box-shadow:0 0 42px #3624491f}
.app-header{gap:12px;display:grid}
.status-row,.greeting-row,.focus-card__top,.section-heading,.list-footer{justify-content:space-between;align-items:center;display:flex}
.status-row{height:24px;font-size:10px;font-weight:600}
.status-row span:first-child{font-size:12px}
.eyebrow{color:var(--on-surface-muted);letter-spacing:.025em;margin:0 0 2px;font-size:11px;font-weight:700}
.greeting-row h1{letter-spacing:-.035em;white-space:nowrap;text-overflow:ellipsis;max-width:285px;margin:0;font-size:clamp(20px,5.6vw,24px);line-height:1.1;overflow:hidden}
.avatar{color:#381f59;background:#e3d1ff;border-radius:50%;flex:none;place-items:center;width:44px;height:44px;font-weight:700;display:grid}
.avatar--large{width:58px;height:58px;font-size:20px}
.focus-card{background:var(--primary-container);border-radius:24px;padding:14px 16px}
.focus-card h2{color:#2e1f4d;margin:0;font-size:16px}
.focus-card p{color:#52406e;margin:1px 0 0;font-size:11px}
.focus-card strong{color:#2e1f4d;font-size:18px}
.progress-track{background:#ffffff9e;border-radius:999px;height:10px;margin-top:10px;overflow:hidden}
.progress-track span{border-radius:inherit;background:var(--primary-dark);min-width:0;height:100%;transition:width .26s;display:block}
.search-box{border:1px solid var(--outline);background:var(--surface);height:44px;color:var(--on-surface-muted);border-radius:16px;align-items:center;gap:8px;padding:0 12px;display:flex}
.search-box>img{object-fit:cover;border-radius:8px;flex:none;width:26px;height:26px}
.search-box input{min-width:0;color:var(--on-surface);background:0 0;border:0;outline:0;flex:1;font-size:14px}
.search-box input::placeholder{color:#817b8b}
.clear-search{width:28px;height:28px;color:var(--on-surface-muted);cursor:pointer;background:0 0;border:0;border-radius:50%;font-size:20px}
.filter-scroll{scrollbar-width:none;gap:8px;margin:10px -16px 0;padding:0 16px 4px;display:flex;overflow-x:auto}
.filter-scroll::-webkit-scrollbar{display:none}
.filter-chip{border:1px solid var(--outline);cursor:pointer;background:#fff;border-radius:10px;flex:none;align-items:center;gap:5px;height:34px;padding:0 14px;font-size:13px;font-weight:600;transition:border-color .16s,background .16s,transform .16s;display:inline-flex}
.filter-chip:active{transform:scale(.96)}
.filter-chip.is-active{border-color:var(--primary-container);background:var(--primary-container);color:#2e1f4d}
.section-heading h2{margin:0;font-size:18px}
.section-heading>span{color:var(--on-surface-muted);font-size:12px;font-weight:500}
.section-heading__meta{color:var(--on-surface-muted);align-items:center;gap:8px;font-size:12px;font-weight:500;display:flex}
.section-heading__meta button{background:var(--primary-container);color:var(--primary-dark);cursor:pointer;border:0;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:700}
.task-list{gap:9px;margin-top:4px;display:grid}
.task-card{border:1px solid var(--outline);background:var(--surface-lowest);min-height:72px;box-shadow:var(--shadow);border-radius:20px;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:8px;padding:10px;transition:opacity .16s,transform .16s;display:grid}
.task-card:active{transform:scale(.993)}
.task-card.is-completed{background:#fcf9fd}
.check-button{cursor:pointer;background:0 0;border:0;place-items:center;width:30px;height:30px;padding:0;display:grid;position:relative}
.check-button:before{content:"";border:2px solid #a7a2ac;border-radius:3px;width:19px;height:19px}
.check-button span{color:#fff;background:#8d8892;border-radius:3px;place-items:center;width:19px;height:19px;font-size:13px;display:grid;position:absolute}
.task-copy{text-align:left;cursor:pointer;background:0 0;border:0;gap:3px;min-width:0;padding:5px 0;display:grid}
.task-copy strong{white-space:nowrap;text-overflow:ellipsis;font-size:13px;line-height:1.25;overflow:hidden}
.task-copy span{color:var(--on-surface-muted);white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}
.is-completed .task-copy strong{color:#807a8a;text-decoration:line-through}
.task-end{justify-items:end;gap:4px;display:grid}
.priority-tag{background:var(--primary-container);color:#3d384d;white-space:nowrap;text-overflow:ellipsis;border-radius:999px;max-width:76px;padding:6px 10px;font-size:10px;font-weight:700;overflow:hidden}
.priority-låg{background:var(--surface-container)}
.priority-hög{color:#59236e;background:#f1d7ff}
.task-actions{opacity:0;gap:2px;transition:opacity .15s;display:flex}
.task-card:hover .task-actions,.task-card:focus-within .task-actions{opacity:1}
.task-actions button{width:24px;height:24px;color:var(--on-surface-muted);cursor:pointer;background:0 0;border:0;border-radius:50%;padding:0;font-size:16px}
.task-actions button:hover{background:var(--surface-container)}
@media (hover:none){.task-actions{opacity:1}
}
.empty-state{border:1px dashed var(--outline);text-align:center;border-radius:22px;padding:30px 20px}
.empty-state>div{background:var(--primary-container);width:42px;height:42px;color:var(--primary-dark);border-radius:50%;place-items:center;margin:0 auto 8px;font-weight:800;display:grid}
.empty-state h3,.empty-state p{margin:0}
.empty-state h3{font-size:15px}
.empty-state p{color:var(--on-surface-muted);margin-top:3px;font-size:12px}
.list-footer{min-height:48px;color:var(--on-surface-muted);margin-bottom:80px;padding-right:70px;font-size:12px}
.list-footer button{min-height:44px;color:var(--primary-dark);cursor:pointer;background:0 0;border:0;align-items:center;gap:5px;font-size:12px;font-weight:700;display:inline-flex}
.list-footer button img{object-fit:cover;border-radius:8px;width:26px;height:26px}
.fab{z-index:8;background:var(--primary);color:#fff;cursor:pointer;border:0;border-radius:18px;place-items:center;width:56px;height:56px;padding:0 0 4px;font-size:30px;font-weight:500;transition:transform .15s,box-shadow .15s;display:grid;position:fixed;bottom:88px;right:max(16px,50vw - 199px);box-shadow:0 6px 16px #1f0f3347}
.fab:hover{transform:translateY(-2px);box-shadow:0 8px 22px #1f0f3357}
.fab:active{transform:scale(.94)}
.bottom-nav{z-index:7;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#f3edf7f0;border:1px solid #ffffffb3;border-radius:24px;grid-template-columns:repeat(4,1fr);align-items:center;gap:4px;height:68px;padding:7px 9px;display:grid;position:fixed;bottom:10px;left:max(16px,50vw - 199px);right:max(16px,50vw - 199px);box-shadow:0 6px 26px #2e1f4d24}
.nav-item{height:52px;color:var(--on-surface-muted);cursor:pointer;background:0 0;border:0;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:0;font-size:10px;font-weight:600;display:flex}
.nav-item span{font-size:16px;font-weight:700}
.nav-item.is-active{background:var(--primary-container);color:#2e1f4d}
.profile-panel{border:1px solid var(--outline);box-shadow:var(--shadow);background:#fff;border-radius:24px;gap:14px;margin-top:5px;padding:18px;display:grid}
.profile-hero{align-items:center;gap:12px;display:flex}
.profile-hero h3,.profile-hero p{margin:0}
.profile-hero h3{font-size:17px}
.profile-hero p{color:var(--on-surface-muted);margin-top:2px;font-size:12px}
.stats-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}
.stats-grid article{background:var(--surface-container);text-align:center;border-radius:16px;gap:2px;padding:12px 6px;display:grid}
.stats-grid strong{color:var(--primary-dark);font-size:20px}
.stats-grid span{color:var(--on-surface-muted);font-size:10px;font-weight:600}
.secondary-button,.primary-button,.danger-button{cursor:pointer;border-radius:14px;min-height:46px;padding:0 18px;font-weight:700}
.secondary-button{border:1px solid var(--outline);background:#fff;justify-content:center;align-items:center;gap:8px;display:inline-flex}
.secondary-button img{object-fit:cover;border-radius:9px;width:28px;height:28px}
.local-note{color:var(--on-surface-muted);text-align:center;margin:0;font-size:11px;line-height:1.45}
.storage-warning{color:#624500;background:#fff8e8;border:1px solid #f0c975;border-radius:16px;grid-template-columns:30px minmax(0,1fr) 36px;align-items:center;gap:8px;min-height:48px;margin-top:12px;padding:7px 7px 7px 10px;font-size:11px;line-height:1.35;display:grid}
.storage-warning img{object-fit:cover;border-radius:9px;width:30px;height:30px}
.storage-warning button{width:36px;height:36px;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:50%;font-size:20px}
.sheet-backdrop{z-index:30;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#1f1b2470;justify-content:center;align-items:flex-end;padding:16px 0 0;animation:.18s both fade-in;display:flex;position:fixed;inset:0}
.task-sheet{width:min(100%,430px);max-height:94svh;padding:9px 20px calc(20px + env(safe-area-inset-bottom));background:var(--surface-lowest);border-radius:28px 28px 0 0;animation:.22s cubic-bezier(.2,.8,.2,1) both slide-up;overflow-y:auto;box-shadow:0 -18px 54px #1f1b243d}
.sheet-handle{background:var(--outline);border-radius:999px;width:42px;height:5px;margin:0 auto 14px}
.sheet-header{justify-content:space-between;align-items:flex-start;display:flex}
.sheet-header h2{margin:0;font-size:21px}
.sheet-header>button{background:var(--surface-container);cursor:pointer;border:0;border-radius:50%;width:38px;height:38px;font-size:24px}
.task-form{gap:14px;margin-top:18px;display:grid}
.task-form label{color:#514b58;gap:6px;font-size:12px;font-weight:700;display:grid}
.form-error{color:var(--danger);font-size:11px;font-weight:600}
.task-form input,.task-form textarea,.task-form select{border:1px solid var(--outline);background:var(--surface);width:100%;min-height:46px;color:var(--on-surface);border-radius:13px;outline:none;padding:11px 12px;font-size:14px;font-weight:500;transition:border-color .15s,box-shadow .15s}
.task-form textarea{resize:vertical;min-height:88px}
.task-form input:focus,.task-form textarea:focus,.task-form select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #7347b821}
.form-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}
.checklist-editor{border:1px solid var(--outline);border-radius:16px;gap:9px;min-width:0;margin:0;padding:13px;display:grid}
.checklist-editor legend{color:#514b58;padding:0 5px;font-size:12px;font-weight:800}
.checklist-editor__items{gap:7px;display:grid}
.checklist-editor__item{grid-template-columns:24px minmax(0,1fr) 34px;align-items:center;gap:7px;display:grid}
.task-form .checklist-editor__item input[type=checkbox]{width:20px;min-height:20px;accent-color:var(--primary);padding:0}
.task-form .checklist-editor__item input[type=text],.task-form .checklist-editor__add input{min-height:40px;padding:8px 10px}
.checklist-editor__item>button{width:34px;height:34px;color:var(--danger);cursor:pointer;background:#fff0ef;border:0;border-radius:50%;font-size:20px}
.checklist-editor__add{grid-template-columns:minmax(0,1fr) auto;gap:7px;display:grid}
.checklist-editor__add button{background:var(--primary-container);min-height:40px;color:var(--primary-dark);cursor:pointer;border:0;border-radius:12px;padding:0 12px;font-weight:700}
.checklist-editor__add button:disabled{cursor:default;opacity:.5}
.checklist-editor>small{color:var(--on-surface-muted);text-align:right;font-size:10px}
.sheet-actions{justify-content:flex-end;gap:10px;margin-top:4px;display:flex}
.primary-button{background:var(--primary);color:#fff;border:0;flex:1}
.danger-button{color:var(--danger);background:#fff5f4;border:1px solid #f1b8b8}
.snackbar{z-index:50;color:#fff;background:#332d37;border-radius:16px;align-items:center;gap:14px;max-width:398px;min-height:52px;margin:auto;padding:10px 12px 10px 16px;font-size:13px;display:flex;position:fixed;bottom:92px;left:16px;right:16px;box-shadow:0 10px 24px #0000003d}
.snackbar span{flex:1}
.snackbar button{color:#e3d1ff;cursor:pointer;background:0 0;border:0;font-weight:800}
.snackbar .snackbar-close{color:#fff;border-radius:50%;width:28px;height:28px;font-size:19px}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:2px;outline:3px solid #7347b859}
@keyframes slide-up{0%{opacity:0;transform:translateY(30px)}
}
@keyframes fade-in{0%{opacity:0}
}
@media (max-width:360px){.phone-app{padding-left:12px;padding-right:12px}
.filter-scroll{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
.greeting-row h1{max-width:245px;font-size:20px}
.task-card{grid-template-columns:32px minmax(0,1fr) auto;gap:5px;padding-left:8px;padding-right:8px}
.priority-tag{max-width:62px;padding-left:8px;padding-right:8px}
}
.overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px;display:grid}
.overview-card{min-width:0;font:inherit;text-align:left;cursor:pointer;background:#fff;border:1px solid #e5deec;border-radius:16px;gap:1px;padding:11px 12px 10px;transition:border-color .16s,background .16s,transform .16s;display:grid;position:relative;box-shadow:0 4px 14px #2c17620f}
.overview-card--wide{grid-column:1/-1}
.overview-card:active{transform:scale(.98)}
.overview-card:focus-visible,.overview-card.is-active{border-color:var(--primary);background:#f4edff;box-shadow:0 0 0 3px #7347b81f}
.overview-grid strong{color:#2d2142;font-size:19px;line-height:1.1}
.overview-grid small{color:var(--on-surface-muted);text-overflow:ellipsis;font-size:9px;font-weight:700;overflow:hidden}
.overview-dot{border-radius:50%;width:8px;height:8px;margin-bottom:4px}
.dot-purple{background:var(--primary)}
.dot-blue{background:#4776d0}
.dot-teal{background:var(--teal)}
.dot-coral{background:#f06456}
.dot-amber{background:#e5a426}
.date-divider{color:var(--primary-dark);text-transform:capitalize;margin:9px 3px 0;font-size:12px}
.task-copy{gap:4px;padding-top:2px}
.task-copy strong{white-space:normal;font-size:14px}
.task-copy .task-notes{color:#6f6879;white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:11px;line-height:1.35;display:-webkit-box;overflow:hidden}
.task-copy .task-meta{white-space:normal;flex-wrap:wrap;align-items:center;gap:4px 7px;margin-top:2px;display:flex;overflow:visible}
.task-meta b{color:#574b68;font-size:10px}
.task-meta .status-tag{background:#eee9f2;border-radius:999px;padding:3px 7px}
.task-meta .status-tag--in_progress{color:#28508d;background:#dfeaff}
.task-meta .status-tag--done{color:#25674f;background:#dff3eb}
.task-checklist-progress{color:#675d72;white-space:normal;align-items:center;gap:7px;width:100%;display:flex;overflow:visible}
.task-checklist-track{background:#ebe6ef;border-radius:999px;flex:1;height:5px;overflow:hidden}
.task-checklist-track>span{border-radius:inherit;background:linear-gradient(90deg, var(--primary), var(--teal));height:100%;display:block}
.task-checklist-progress>b{flex:none;font-size:9px}
.due-label{color:#61576d;background:#f2edf7;border-radius:999px;padding:3px 7px;font-size:9px;font-weight:700}
.due-label.is-overdue{color:#a63127;background:#ffe5e1}
.logout-button{color:#6b576e;cursor:pointer;background:#f6f2f8;border:0;border-radius:14px;min-height:44px;font-weight:700}
.auth-shell{background:radial-gradient(circle at 10% 10%,#8b55d92e,#0000 22rem),radial-gradient(circle at 90% 85%,#10a89f24,#0000 20rem),#f3eff7;place-items:center;min-height:100svh;padding:24px;display:grid}
.auth-card{text-align:center;background:#fff;border:1px solid #5e35a81f;border-radius:30px;width:min(100%,390px);padding:30px 26px;box-shadow:0 24px 70px #2c176229}
.auth-logo{object-fit:cover;border-radius:24px;width:76px;height:76px;margin-bottom:14px;box-shadow:0 10px 24px #2c176229}
.auth-card h1,.auth-card p{margin:0}
.auth-card h1{color:var(--primary-dark);font-size:25px}
.auth-intro{color:var(--on-surface-muted);font-size:13px;line-height:1.45;margin-top:8px!important}
.login-form{text-align:left;gap:14px;margin-top:24px;display:grid}
.login-form label{color:#554c60;gap:6px;font-size:12px;font-weight:700;display:grid}
.login-form input{color:#28222f;width:100%;height:48px;font:inherit;background:#fbf9fd;border:1px solid #dcd4e5;border-radius:15px;padding:0 14px;font-size:16px}
.login-form .primary-button{color:#fff;border:0}
.login-form .primary-button:disabled{cursor:wait;opacity:.65}
.auth-error{color:#9a2f27;background:#fff0ee;border-radius:12px;padding:10px 12px;font-size:12px;line-height:1.35}
.auth-loading{color:var(--on-surface-muted);justify-items:center;gap:12px;display:grid}
.auth-loading img{border-radius:20px;width:64px;height:64px}
@media (max-width:360px){.overview-grid{gap:5px}
.overview-card{padding-left:5px;padding-right:5px}
.overview-grid small{font-size:8px}
.task-card{min-height:108px}
}
@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
body{background:radial-gradient(circle at 5% 4%,#8b55d929,#0000 26rem),radial-gradient(circle at 95% 34%,#10a89f1c,#0000 24rem),#efecf5}
.phone-app{background:linear-gradient(180deg, #faf8ff 0, #fff 240px), var(--surface-lowest);padding:12px 16px 116px;box-shadow:0 0 54px #2c176226}
.app-header{gap:14px}
.status-row{color:#756d85}
.greeting-row{min-height:70px}
.brand-lockup,.focus-heading,.sheet-title,.field-label{align-items:center;display:flex}
.brand-lockup{gap:10px;min-width:0}
.app-logo{object-fit:cover;background:#fff;border:1px solid #5e35a81f;border-radius:16px;flex:none;width:48px;height:48px;box-shadow:0 6px 18px #2c17621f}
.greeting-row h1{max-width:255px;font-size:22px}
.avatar{color:#fff;background:linear-gradient(145deg,#6f45ba,#2c1762);border:2px solid #fff;width:42px;height:42px;box-shadow:0 5px 14px #2c176233}
.focus-card{width:100%;font:inherit;text-align:left;cursor:pointer;background:radial-gradient(circle at 95% 5%,#10a89f38,#0000 8rem),linear-gradient(135deg,#f0e5ff,#e9f9f7);border:1px solid #5e35a81a;border-radius:26px;padding:14px;transition:border-color .16s,box-shadow .16s,transform .16s;position:relative;overflow:hidden;box-shadow:0 10px 26px #2c176217}
.focus-card:active{transform:scale(.992)}
.focus-card:focus-visible,.focus-card.is-active{border-color:var(--primary);box-shadow:0 0 0 3px #7347b826,0 10px 26px #2c176217}
.focus-heading{gap:10px;min-width:0}
.focus-heading>img{object-fit:cover;background:#fff;border-radius:17px;flex:none;width:52px;height:52px;box-shadow:0 5px 14px #2c17621a}
.focus-card h2{font-size:17px}
.focus-card p{max-width:205px;margin-top:3px;font-size:11px;line-height:1.35}
.focus-score{flex:none;justify-items:end;gap:1px;display:grid}
.focus-score strong{font-size:18px}
.focus-score span{color:#655777;font-size:9px;font-weight:700}
.progress-track{background:#ffffffc7;height:9px;margin-top:12px;box-shadow:inset 0 0 0 1px #2c176212}
.progress-track span{background:linear-gradient(90deg, var(--primary), var(--teal))}
.search-row{margin-top:14px}
.search-box{background:#fff;border-color:#e2dbea;border-radius:18px;height:48px;box-shadow:0 5px 18px #2c176212}
.filter-scroll{gap:9px;margin-top:12px}
.filter-chip{border-color:#e2dbea;border-radius:14px;gap:7px;height:40px;padding:0 13px 0 8px;box-shadow:0 3px 10px #2c17620d}
.filter-chip img{object-fit:cover;border-radius:9px;width:27px;height:27px}
.filter-chip.is-active{background:#eee3ff;border-color:#5e35a829;box-shadow:0 5px 14px #5e35a81c}
.content-section{margin-top:14px}
.section-heading{height:36px}
.section-heading h2{color:var(--primary-dark);font-size:19px}
.task-list{gap:10px;margin-top:6px}
.task-card{border-color:#e4ddea;border-radius:22px;grid-template-columns:30px 42px minmax(0,1fr) auto;gap:8px;min-height:82px;padding:10px 10px 10px 9px;box-shadow:0 7px 20px #2c176214}
.task-card.is-completed{box-shadow:none;background:#f8f7fa}
.check-button:before{border-color:#a99fb6;border-radius:7px}
.check-button span{background:linear-gradient(145deg, var(--primary), var(--teal));border-radius:7px}
.task-category-icon{object-fit:cover;background:#fff;border:1px solid #eee9f2;border-radius:14px;width:42px;height:42px}
.task-copy{gap:5px}
.task-copy strong{color:#2b2140;font-size:14px}
.priority-tag{color:#4c3872;background:#eee3ff;border:1px solid #5e35a814}
.priority-låg{color:#23753b;background:#e6f7ee}
.priority-hög{color:#a63127;background:#ffe5e1;border-color:#ff5b4d24}
.task-actions button{width:27px;height:27px}
.task-actions button img{object-fit:cover;border-radius:7px;width:22px;height:22px}
.empty-state{background:linear-gradient(145deg,#fbf9ff,#f1fbfa);border-color:#dcd2e8;border-radius:24px;padding:26px 20px}
.empty-state>img{object-fit:cover;border-radius:19px;width:62px;height:62px;margin:0 auto 8px;box-shadow:0 6px 16px #2c176217}
.fab{background:#fff;border:1px solid #10a89f33;border-radius:22px;width:62px;height:62px;padding:3px;bottom:98px;box-shadow:0 10px 26px #2c176238}
.fab img{object-fit:cover;border-radius:19px;width:54px;height:54px}
.bottom-nav{background:#f9f7fcf5;border-color:#5e35a81a;border-radius:27px;height:80px;padding:7px;bottom:8px;box-shadow:0 10px 30px #2c176229}
.nav-item{border-radius:20px;gap:1px;height:64px;font-size:10px}
.nav-item img{opacity:.64;object-fit:cover;border-radius:12px;width:36px;height:36px;transition:opacity .16s,transform .16s}
.nav-item.is-active{color:#38225f;background:#eee3ff}
.nav-item.is-active img{opacity:1;transform:translateY(-1px)scale(1.04)}
.profile-panel{background:radial-gradient(circle at 90% 0,#10a89f21,#0000 12rem),#fff;border-color:#e4ddea;border-radius:26px;box-shadow:0 8px 24px #2c176214}
.profile-icon{object-fit:cover;border-radius:19px;width:60px;height:60px;box-shadow:0 6px 16px #2c17621a}
.stats-grid article{background:#faf8fd;border:1px solid #e8e1ef;border-radius:18px;gap:1px;padding:9px 5px 11px}
.stats-grid article img{object-fit:cover;border-radius:10px;width:32px;height:32px;margin:0 auto 2px}
.task-sheet{background:linear-gradient(#faf7ff,#fff 160px),#fff;border:1px solid #5e35a81a;border-bottom:0}
.sheet-title{gap:10px}
.sheet-title>img{object-fit:cover;border-radius:15px;width:48px;height:48px;box-shadow:0 5px 14px #2c17621a}
.field-label{gap:5px}
.field-label img{object-fit:cover;border-radius:7px;width:22px;height:22px}
.task-form input,.task-form textarea,.task-form select{background:#fbf9fe;border-color:#ddd5e8;border-radius:15px}
.primary-button{background:linear-gradient(135deg, var(--primary), #7b48c7);box-shadow:0 7px 18px #5e35a838}
@media (max-width:360px){.app-logo{width:43px;height:43px}
.greeting-row h1{max-width:200px;font-size:19px}
.focus-heading>img{width:46px;height:46px}
.focus-card p{max-width:155px}
.task-card{grid-template-columns:27px 38px minmax(0,1fr) auto;gap:5px}
.task-category-icon{width:38px;height:38px}
.priority-tag{max-width:54px;padding-left:7px;padding-right:7px}
}
.task-card{align-items:start;min-height:104px;padding-top:12px;padding-bottom:12px}
.check-button,.task-category-icon,.task-end{margin-top:3px}
.task-copy{padding-top:2px}
@media (max-width:360px){.task-card{min-height:108px}
}
@property --tw-blur{syntax:"*";inherits:false}
@property --tw-brightness{syntax:"*";inherits:false}
@property --tw-contrast{syntax:"*";inherits:false}
@property --tw-grayscale{syntax:"*";inherits:false}
@property --tw-hue-rotate{syntax:"*";inherits:false}
@property --tw-invert{syntax:"*";inherits:false}
@property --tw-opacity{syntax:"*";inherits:false}
@property --tw-saturate{syntax:"*";inherits:false}
@property --tw-sepia{syntax:"*";inherits:false}
@property --tw-drop-shadow{syntax:"*";inherits:false}
@property --tw-drop-shadow-color{syntax:"*";inherits:false}
@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}
@property --tw-drop-shadow-size{syntax:"*";inherits:false}

/* Responsive tablet layout: 768px–1199px. */
@media (min-width:768px) and (max-width:1199px){
  body{min-height:100svh;padding:24px}
  .site-shell{min-height:calc(100svh - 48px)}
  .auth-shell{min-height:calc(100svh - 48px);border-radius:32px}
  .phone-app{width:min(100%,920px);min-height:calc(100svh - 48px);padding:224px 28px 100px;border:1px solid #ffffffb8;border-radius:32px;overflow:visible;box-shadow:0 24px 70px #2c176226}
  .app-header{grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);gap:18px 24px}
  .status-row{display:none}
  .greeting-row{align-items:flex-start;min-height:176px;background:radial-gradient(circle at 88% 20%,#10a89f24,#0000 16rem),linear-gradient(135deg,#fff,#f3ecff);border:1px solid #5e35a820;border-radius:24px;padding:18px 22px;position:absolute;top:24px;left:28px;right:28px;box-shadow:0 10px 28px #2c17621c}
  .greeting-row h1{max-width:none;font-size:28px}
  .greeting-row .app-logo{width:56px;height:56px}
  .greeting-row .avatar{width:50px;height:50px;font-size:18px}
  .focus-card{grid-column:1;grid-row:1;align-self:stretch}
  .search-row{grid-column:2;grid-row:1;align-self:center}
  .storage-warning,.filter-scroll,.overview-grid{grid-column:1/-1}
  .search-box{height:52px}
  .filter-scroll{flex-wrap:wrap;margin-left:0;margin-right:0;padding-left:0;padding-right:0;overflow:visible}
  .overview-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .overview-card--wide{grid-column:auto}
  .overview-card{min-height:82px;padding:14px}
  .overview-grid strong{font-size:24px}
  .content-section{margin-top:24px}
  .section-heading{height:44px}
  .section-heading h2{font-size:24px}
  .task-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
  .date-divider{grid-column:1/-1;margin-top:14px;font-size:13px}
  .task-card{height:100%;min-height:124px;padding:14px}
  .task-copy strong{font-size:15px}
  .profile-panel{padding:24px}
  .bottom-nav{width:auto;height:72px;background:transparent;border:0;padding:0;position:absolute;left:56px;right:56px;top:112px;bottom:auto;transform:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-item{height:58px;flex-direction:row;gap:8px;font-size:12px}
  .nav-item img{width:32px;height:32px}
  .fab{right:max(32px,calc(50vw - 430px));bottom:32px}
  .sheet-backdrop{align-items:center;padding:32px}
  .task-sheet{width:min(100%,680px);max-height:calc(100svh - 64px);padding:20px 28px 28px;border:1px solid #5e35a81a;border-radius:30px;animation:.2s cubic-bezier(.2,.8,.2,1) both dialog-in}
  .sheet-handle{display:none}
  .task-form{grid-template-columns:1fr 1fr;gap:16px 18px}
  .task-form>label,.task-form>.checklist-editor,.task-form>.sheet-actions{grid-column:1/-1}
  .task-form>.form-grid{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
  .snackbar{max-width:560px;bottom:32px}
  .auth-card{width:min(100%,440px);padding:38px 34px}
}

/* Responsive desktop layout: 1200px and wider. */
@media (min-width:1200px){
  body{min-height:100svh;padding:32px}
  .site-shell{min-height:calc(100svh - 64px)}
  .auth-shell{min-height:calc(100svh - 64px);border-radius:36px}
  .phone-app{width:min(100%,1240px);min-height:calc(100svh - 64px);padding:154px 32px 128px;border:1px solid #ffffffc7;border-radius:36px;grid-template-columns:340px minmax(0,1fr);align-items:start;gap:36px;display:grid;overflow:visible;box-shadow:0 30px 90px #2c176229}
  .app-header{grid-column:1;gap:16px;align-self:start}
  .status-row{display:none}
  .greeting-row{min-height:92px;background:radial-gradient(circle at 88% 20%,#10a89f24,#0000 18rem),linear-gradient(135deg,#fff,#f3ecff);border:1px solid #5e35a820;border-radius:26px;padding:18px 24px;position:absolute;top:32px;left:32px;right:32px;box-shadow:0 12px 32px #2c17621f}
  .greeting-row h1{max-width:none;font-size:30px}
  .greeting-row .app-logo{width:58px;height:58px}
  .greeting-row .avatar{width:52px;height:52px;font-size:19px}
  .greeting-row .brand-lockup{max-width:430px}
  .focus-card{padding:16px}
  .search-box{height:52px}
  .filter-scroll{flex-wrap:wrap;margin-left:0;margin-right:0;padding-left:0;padding-right:0;overflow:visible}
  .filter-chip{flex:1;justify-content:center;min-width:92px}
  .overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .overview-card--wide{grid-column:1/-1}
  .overview-card{min-height:76px;padding:13px 14px}
  .overview-grid strong{font-size:23px}
  .content-section{grid-column:2;min-width:0;margin-top:0}
  .section-heading{height:52px;margin-bottom:6px}
  .section-heading h2{font-size:26px}
  .section-heading__meta{font-size:13px}
  .task-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
  .date-divider{grid-column:1/-1;margin-top:14px;font-size:13px}
  .task-card{height:100%;min-height:128px;padding:15px}
  .task-copy strong{font-size:15px}
  .task-copy .task-notes{font-size:12px}
  .task-end{min-width:72px}
  .list-footer{grid-column:1/-1;margin-bottom:28px;padding-right:0}
  .profile-panel{max-width:760px;padding:28px}
  .bottom-nav{z-index:2;width:430px;height:64px;background:transparent;border:0;padding:0;position:absolute;left:auto;right:112px;top:46px;bottom:auto;transform:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-item{height:50px;flex-direction:row;gap:8px;font-size:12px}
  .nav-item img{width:32px;height:32px}
  .fab{right:max(42px,calc(50vw - 620px + 20px));bottom:46px}
  .sheet-backdrop{align-items:center;padding:32px}
  .task-sheet{width:min(100%,760px);max-height:calc(100svh - 64px);padding:24px 32px 32px;border:1px solid #5e35a81a;border-radius:32px;animation:.2s cubic-bezier(.2,.8,.2,1) both dialog-in}
  .sheet-handle{display:none}
  .task-form{grid-template-columns:1fr 1fr;gap:16px 20px}
  .task-form>label,.task-form>.checklist-editor,.task-form>.sheet-actions{grid-column:1/-1}
  .task-form>.form-grid{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
  .checklist-editor__items{grid-template-columns:1fr 1fr;gap:9px 14px}
  .snackbar{max-width:560px;bottom:48px;left:calc(50% + 30px);right:auto;transform:translateX(-50%)}
  .auth-card{width:min(100%,460px);padding:42px 38px}
}

/* Compact desktop refinement. */
@media (min-width:1200px){
  body{padding:20px}
  .site-shell{min-height:calc(100svh - 40px)}
  .auth-shell{min-height:calc(100svh - 40px);border-radius:28px}
  .phone-app{width:min(100%,1180px);min-height:calc(100svh - 40px);padding:112px 24px 92px;border-radius:28px;grid-template-columns:300px minmax(0,1fr);gap:24px}
  .app-header{gap:10px}
  .greeting-row{min-height:84px;border-radius:20px;padding:12px 16px;top:20px;left:24px;right:24px;box-shadow:0 8px 22px #2c176219}
  .greeting-row h1{font-size:25px}
  .greeting-row .app-logo{width:48px;height:48px;border-radius:14px}
  .greeting-row .avatar{width:44px;height:44px;font-size:17px}
  .greeting-row .brand-lockup{max-width:390px;gap:9px}
  .focus-card{border-radius:20px;padding:11px 12px}
  .focus-heading{gap:8px}
  .focus-heading>img{width:44px;height:44px;border-radius:14px}
  .focus-card h2{font-size:15px}
  .focus-card p{font-size:10px}
  .focus-score strong{font-size:16px}
  .progress-track{height:7px;margin-top:8px}
  .search-row{margin-top:8px}
  .search-box{height:42px;border-radius:14px}
  .filter-scroll{gap:6px;margin-top:7px}
  .filter-chip{min-width:80px;height:34px;border-radius:11px;padding:0 9px 0 6px;font-size:11px}
  .filter-chip img{width:24px;height:24px;border-radius:7px}
  .overview-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:6px}
  .overview-card{min-height:42px;border-radius:11px;padding:5px 3px}
  .overview-card--wide{grid-column:1/-1;grid-template-columns:auto auto 1fr;align-items:center;gap:8px;min-height:46px;text-align:left;padding:7px 10px}
  .overview-card:not(.overview-card--wide){justify-items:center;text-align:center;gap:0}
  .overview-card:not(.overview-card--wide) strong{font-size:14px}
  .overview-card:not(.overview-card--wide) small{font-size:7px}
  .overview-card--wide strong{font-size:18px}
  .overview-card--wide small{font-size:9px}
  .overview-dot{width:6px;height:6px;margin-bottom:1px}
  .content-section{margin-top:0}
  .section-heading{height:40px;margin-bottom:3px}
  .section-heading h2{font-size:22px}
  .section-heading__meta{gap:6px;font-size:11px}
  .task-list{gap:10px}
  .date-divider{margin-top:8px;font-size:11px}
  .task-card{min-height:106px;border-radius:17px;grid-template-columns:28px 38px minmax(0,1fr) auto;gap:7px;padding:10px;box-shadow:0 5px 15px #2c176212}
  .task-category-icon{width:38px;height:38px;border-radius:12px}
  .task-copy{gap:3px}
  .task-copy strong{font-size:13px}
  .task-copy .task-notes{font-size:10px;line-height:1.3}
  .task-copy .task-meta{gap:3px 5px;margin-top:1px}
  .task-end{min-width:64px;gap:2px}
  .priority-tag{padding:4px 8px;font-size:9px}
  .list-footer{min-height:40px;margin-bottom:16px}
  .profile-panel{max-width:720px;border-radius:20px;gap:10px;padding:20px}
  .stats-grid article{border-radius:14px;padding:7px 5px 9px}
  .bottom-nav{width:380px;height:54px;right:88px;top:35px}
  .nav-item{height:42px;border-radius:14px;gap:6px;font-size:11px}
  .nav-item img{width:28px;height:28px;border-radius:9px}
  .fab{width:54px;height:54px;border-radius:18px;right:max(28px,calc(50vw - 590px + 16px));bottom:28px}
  .fab img{width:46px;height:46px;border-radius:16px}
  .sheet-backdrop{padding:20px}
  .task-sheet{width:min(100%,700px);max-height:calc(100svh - 40px);border-radius:24px;padding:18px 24px 22px}
  .sheet-title>img{width:42px;height:42px;border-radius:13px}
  .sheet-header h2{font-size:19px}
  .task-form{gap:10px 14px;margin-top:12px}
  .task-form input,.task-form textarea,.task-form select{min-height:42px;padding:9px 10px}
  .task-form textarea{min-height:70px}
  .checklist-editor{gap:7px;padding:10px}
  .sheet-actions{gap:8px}
  .secondary-button,.primary-button,.danger-button{min-height:42px}
  .snackbar{bottom:28px}
  .auth-card{width:min(100%,420px);padding:32px 30px}
}

/* Tighter search, overview and content rhythm on larger screens. */
@media (min-width:768px) and (max-width:1199px){
  .app-header{gap:10px 14px}
  .search-row{margin-top:3px}
  .search-box{height:42px;border-radius:14px;padding:0 10px}
  .search-box>img{width:22px;height:22px;border-radius:7px}
  .search-box input{font-size:13px}
  .filter-scroll{gap:5px;margin-top:5px;padding-bottom:1px}
  .filter-chip{height:34px;border-radius:11px;padding:0 9px 0 6px;font-size:11px}
  .filter-chip img{width:24px;height:24px;border-radius:7px}
  .overview-grid{gap:5px;margin-top:6px}
  .overview-card{min-height:54px;border-radius:13px;padding:7px 8px}
  .overview-grid strong{font-size:19px}
  .overview-grid small{font-size:8px}
  .content-section{margin-top:12px}
  .section-heading{height:38px}
  .section-heading h2{font-size:21px}
  .task-list{gap:8px;margin-top:3px}
  .date-divider{margin-top:4px;font-size:11px}
  .task-list:has(.date-divider) .task-card{grid-column:1/-1}
  .task-card{min-height:104px;border-radius:18px;padding:10px}
  .list-footer{min-height:40px;margin-bottom:24px;padding-right:0}
}

@media (min-width:1200px){
  .phone-app{column-gap:16px}
  .app-header{gap:6px}
  .search-row{margin-top:2px}
  .search-box{height:36px;border-radius:12px;padding:0 8px}
  .search-box>img{width:20px;height:20px;border-radius:6px}
  .search-box input{font-size:12px}
  .filter-scroll{gap:4px;margin-top:3px;padding-bottom:0}
  .filter-chip{min-width:72px;height:30px;border-radius:9px;padding:0 7px 0 5px;font-size:10px}
  .filter-chip img{width:21px;height:21px;border-radius:6px}
  .overview-grid{gap:3px;margin-top:3px}
  .overview-card{min-height:32px;border-radius:9px;padding:3px 2px}
  .overview-card--wide{min-height:38px;gap:6px;padding:5px 8px}
  .overview-card:not(.overview-card--wide) strong{font-size:13px}
  .overview-card:not(.overview-card--wide) small{font-size:7px}
  .overview-card--wide strong{font-size:16px}
  .overview-card--wide small{font-size:8px}
  .content-section{margin-top:0}
  .section-heading{height:34px;margin-bottom:1px}
  .section-heading h2{font-size:20px}
  .section-heading__meta{font-size:10px}
  .task-list{gap:6px;margin-top:2px}
  .date-divider{margin-top:3px;font-size:10px}
  .task-list:has(.date-divider) .task-card{grid-column:1/-1}
  .task-card{min-height:94px;border-radius:15px;grid-template-columns:26px 34px minmax(0,1fr) auto;gap:6px;padding:8px}
  .task-category-icon{width:34px;height:34px;border-radius:10px}
  .task-copy strong{font-size:12px}
  .task-copy .task-notes{font-size:9px}
  .task-meta b,.due-label{font-size:8px}
  .priority-tag{padding:3px 7px;font-size:8px}
  .task-end{min-width:58px}
  .list-footer{min-height:34px;margin-bottom:10px;padding-right:0;font-size:10px}
}

/* Desktop grid compaction: remove empty cross-column tracks. */
@media (min-width:1200px){
  .phone-app{align-content:start;row-gap:6px}
  .app-header{grid-column:1;grid-row:1;grid-template-columns:1fr;grid-template-rows:1fr;align-self:stretch}
  .focus-card{grid-column:1;grid-row:1;align-self:stretch;height:100%}
  .search-row{grid-column:2;grid-row:1;align-self:start;margin-top:0}
  .overview-grid{grid-column:2;grid-row:1;align-self:start;margin-top:39px}
  .filter-scroll{grid-column:1/-1;grid-row:2;flex-wrap:nowrap;gap:4px;margin-top:0}
  .filter-chip{min-width:0;flex:1;white-space:nowrap}
  .storage-warning{grid-column:1/-1;grid-row:3;margin-top:0}
  .content-section{grid-column:1/-1;min-width:0;margin-top:0}
  .task-card:only-child{grid-column:1/-1}
}

@keyframes dialog-in{from{opacity:0;transform:translateY(12px) scale(.98)}}