/* Plain CSS: edit and save; no build step is needed. */
[hidden], dialog:not([open]) { display: none !important; }
body { background: var(--background); color: var(--foreground); }
.btn { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; gap:8px; border:0; border-radius:6px; padding:8px 16px; height:36px; font-size:14px; font-weight:500; line-height:20px; white-space:nowrap; background:var(--primary); color:var(--primary-foreground); transition:background .15s; }
.btn:hover { filter:brightness(.96); }
.btn.outline { border:1px solid var(--border); background:var(--background); color:var(--foreground); box-shadow:0 1px 2px #0000000d; }
.btn.ghost { background:transparent; color:inherit; }
.btn.ghost:hover { background:var(--accent); }
.btn.secondary { background:var(--secondary); color:var(--secondary-foreground); }
.btn.small { height:32px; padding:6px 12px; gap:6px; }
.btn.icon-button { width:36px; padding:8px; }
button:disabled { opacity:.5; cursor:default; }
button:focus-visible,a:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
svg[data-icon] { display:inline-block; flex-shrink:0; width:20px; height:20px; vertical-align:middle; pointer-events:none; }
.btn svg[data-icon] { width:16px; height:16px; }
.hero>svg[data-icon] { width:60px; height:60px; }
.task-icon img { width:48px; height:48px; object-fit:cover; border-radius:12px; }
.input { height:36px; width:100%; min-width:0; border:1px solid var(--input); border-radius:6px; background:transparent; padding:4px 12px; font:inherit; font-size:14px; color:var(--foreground); box-shadow:0 1px 2px #0000000d; }
select.input { height:auto; min-height:40px; background:white; }
.input:focus { outline:2px solid #6257db55; outline-offset:1px; }
.input:disabled { opacity:.5; }
.site-dialog { position:fixed; inset:0; margin:auto; width:calc(100% - 32px); max-width:512px; max-height:90dvh; overflow-y:auto; padding:24px; border:1px solid var(--border); border-radius:16px; background:white; color:var(--foreground); box-shadow:0 10px 45px #0002; }
dialog::backdrop { background:#0008; }
.site-dialog>h2 { font-size:18px; line-height:1.2; margin-bottom:8px; }
.site-dialog>p { font-size:14px; margin-bottom:20px; }
.dialog-footer { display:flex; justify-content:flex-end; margin-top:24px; }
.task-detail[open] { margin:0; max-height:none; max-width:none; outline:none; }
.task-detail-scroll { overscroll-behavior:contain; }
.guide-checkbox { display:flex; align-items:center; gap:12px; margin-top:24px; font-size:14px; }
.guide-checkbox input { width:16px; height:16px; accent-color:var(--primary); }
.guide-close { display:block; margin:14px auto 0; }
.top-heading { margin-top:0 !important; }
.more-tasks { display:flex; justify-content:center; margin-top:20px; }
.level-progress { width:100%; max-width:384px; height:8px; background:#6257db33; border-radius:999px; overflow:hidden; margin-top:20px; }
.level-progress span { display:block; height:100%; background:var(--primary); transition:width .3s; }
.skeleton { border-radius:12px; background:#e9e7f5; animation:pulse 1.8s ease-in-out infinite; }
.skeleton.heading { height:48px; width:192px; }.skeleton.hero-placeholder { height:192px; }.skeleton.row-placeholder { height:96px; }
#toasts { position:fixed; top:20px; right:20px; z-index:100; max-width:calc(100vw - 32px); width:356px; pointer-events:none; }
.toast { pointer-events:auto; margin-bottom:8px; padding:16px; border:1px solid var(--border); border-radius:12px; background:white; color:var(--foreground); box-shadow:0 5px 24px #20243a25; font-size:14px; }
.toast.error { border-left:4px solid #b63545; }
.modal-error { margin-bottom:16px; }
body:has(dialog[open]) { overflow:hidden; }
.break-all { overflow-wrap:anywhere; }
.whitespace-pre-wrap { white-space:pre-wrap; }
@keyframes pulse { 50% { opacity:.5; } }
@media(prefers-reduced-motion:reduce) { .skeleton { animation:none; } }
@media(max-width:640px) { .input { font-size:16px; } .consumer-header .btn { padding-inline:10px; } }