:root{color-scheme:light;--color-bg: oklch(95.5% .012 85);--color-surface: oklch(99% .008 85);--color-surface-2: oklch(92.5% .015 85);--color-ink: oklch(24% .012 70);--color-muted: oklch(52% .018 75);--color-placeholder: oklch(43% .018 75);--color-line: oklch(85% .016 80);--color-field-border: oklch(58% .018 75);--color-accent: oklch(49% .11 310);--color-accent-ink: oklch(10% .008 310);--color-accent-strong: oklch(39% .12 310);--color-accent-soft: oklch(93% .035 310);--color-action: oklch(39% .12 310);--color-action-hover: oklch(34% .12 310);--color-action-ink: oklch(98% .008 310);--color-focus: oklch(56% .18 310);--color-danger: oklch(52% .14 25);--color-rating-fallback: oklch(74% .014 75);--color-backdrop: oklch(15% .012 70 / .72);--shadow-modal: 0 24px 64px oklch(18% .012 70 / .32);--font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display: Georgia, "Times New Roman", serif;--space-2xs: 4px;--space-xs: 8px;--space-sm: 12px;--space-md: 16px;--space-lg: 24px;--space-xl: 40px;--space-2xl: 64px;--space-3xl: 96px;--radius-control: 10px;--radius-card: 16px;--radius-modal: 18px;--duration-micro: .12s;--duration-short: .22s;--z-sticky-nav: 300;--z-modal: 400;--z-toast: 500;--z-tooltip: 600;font-synthesis:none}:root[data-theme=dark]{color-scheme:dark;--color-bg: oklch(17% .012 75);--color-surface: oklch(21% .012 75);--color-surface-2: oklch(26% .014 75);--color-ink: oklch(94% .01 80);--color-muted: oklch(72% .016 75);--color-placeholder: oklch(76% .016 75);--color-line: oklch(35% .016 75);--color-field-border: oklch(63% .018 75);--color-accent: oklch(70% .1 310);--color-accent-strong: oklch(79% .09 310);--color-accent-soft: oklch(30% .045 310);--color-action: oklch(40% .13 310);--color-action-hover: oklch(46% .13 310);--color-action-ink: oklch(98% .008 310);--color-focus: oklch(72% .16 310);--color-danger: oklch(70% .13 25);--color-rating-fallback: oklch(72% .014 75);--color-backdrop: oklch(10% .01 70 / .78);--shadow-modal: 0 24px 64px oklch(8% .01 70 / .48)}*{box-sizing:border-box}html,body{overflow-x:clip}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:var(--color-bg);color:var(--color-ink);font-family:var(--font-body);scrollbar-color:var(--color-muted) var(--color-bg)}::selection{background:var(--color-accent-soft);color:var(--color-ink)}button,input,textarea{font:inherit}button{color:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}input,textarea{caret-color:var(--color-accent)}input::placeholder{color:var(--color-placeholder);opacity:1}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}button:active{opacity:.72}button:disabled,button[aria-disabled=true]{opacity:.48;cursor:not-allowed;filter:grayscale(.3)}button[aria-busy=true]{cursor:progress}input[aria-invalid=true]{border-color:var(--color-danger)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:clip;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;z-index:var(--z-tooltip);top:var(--space-xs);left:var(--space-xs);transform:translateY(-150%);background:var(--color-ink);color:var(--color-surface);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-control)}.skip-link:focus{transform:none}.site-header{position:sticky;top:0;z-index:var(--z-sticky-nav);border-bottom:1px solid color-mix(in oklch,var(--color-line) 75%,transparent);background:color-mix(in oklch,var(--color-bg) 88%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.header-inner{width:min(1440px,calc(100% - var(--space-xl)));min-height:76px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg)}.brand{display:flex;align-items:center;gap:var(--space-sm);min-width:0}.brand-mark{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:12px;background:var(--color-accent);color:var(--color-accent-ink);font:700 20px/1 var(--font-display)}.brand h1{min-width:0;margin:0;font:700 18px/1.15 var(--font-display);overflow-wrap:break-word;text-wrap:balance}.brand p{margin:var(--space-2xs) 0 0;color:var(--color-muted);font-size:12px}.header-actions{display:flex;align-items:center;gap:var(--space-xs)}.button{border:0;border-radius:var(--radius-control);min-height:42px;padding:0 var(--space-md);cursor:pointer;font-weight:600;white-space:nowrap;transition:transform var(--duration-micro),background-color var(--duration-short)}.button.primary{background:var(--color-action);color:var(--color-action-ink)}.button.primary:hover{background:var(--color-action-hover)}.button.ghost{background:transparent;color:var(--color-muted)}.button.ghost:hover,.button.secondary{background:var(--color-surface-2);color:var(--color-ink)}.button.danger-button{color:var(--color-danger);background:color-mix(in oklch,var(--color-danger) 10%,transparent)}.page{width:min(1440px,calc(100% - var(--space-xl)));margin:auto;padding:var(--space-2xl) 0 var(--space-3xl)}.intro{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:end;gap:var(--space-xl);margin-bottom:var(--space-xl)}.intro h2{min-width:0;max-width:760px;margin:0 0 var(--space-md);font:600 clamp(38px,6vw,72px)/.98 var(--font-display);letter-spacing:-.045em;overflow-wrap:break-word;text-wrap:balance}.intro p{max-width:680px;margin:0;color:var(--color-muted);font-size:17px;line-height:1.55;text-wrap:pretty}.name-field{display:grid;gap:var(--space-xs);color:var(--color-muted);font-size:12px;font-weight:700}.name-field input,.search-field input,.rating-name{width:100%;border:1px solid var(--color-field-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-ink);outline:2px solid transparent;outline-offset:-3px}.name-field input{height:46px;padding:0 var(--space-sm)}.name-field input:hover,.search-field input:hover,.rating-name:hover{background:var(--color-surface-2)}.name-field input:focus-visible,.search-field input:focus-visible,.rating-name:focus-visible{outline-color:var(--color-focus)}.control-panel{display:grid;grid-template-columns:minmax(260px,1fr) minmax(220px,360px) auto;gap:var(--space-lg);align-items:center;padding:var(--space-md);border:1px solid var(--color-line);border-radius:var(--radius-card);background:var(--color-surface);color:var(--color-ink)}.control-actions{display:flex;align-items:center;gap:var(--space-xs)}.search-field{position:relative;display:flex;align-items:center;gap:var(--space-xs)}.search-field>span[aria-hidden]{position:absolute;left:var(--space-sm);color:var(--color-muted);font-size:22px}.search-field input{height:46px;padding:0 var(--space-xl);background:var(--color-surface-2)}.clear-search{position:absolute;right:1px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--color-muted);cursor:pointer;font-size:20px}.progress-copy{display:flex;justify-content:space-between;margin-bottom:var(--space-xs);color:var(--color-muted);font-size:12px;font-variant-numeric:tabular-nums}.progress-copy strong{color:var(--color-ink)}progress{display:block;width:100%;height:6px;border:0;border-radius:99px;overflow:clip;background:var(--color-surface-2)}progress::-webkit-progress-bar{background:var(--color-surface-2)}progress::-webkit-progress-value{background:var(--color-accent);border-radius:99px}progress::-moz-progress-bar{background:var(--color-accent)}.legend{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);padding:var(--space-lg) var(--space-2xs);color:var(--color-muted);font-size:12px}.legend span{display:inline-flex;align-items:center;gap:var(--space-xs)}.legend i{width:10px;height:10px;border:1px solid color-mix(in oklch,var(--color-ink) 28%,transparent);border-radius:50%}.category-grid{display:grid;width:min(100%,960px);margin:0 auto;gap:var(--space-sm)}.category-card{min-width:0;overflow:clip;border:1px solid var(--color-line);border-radius:var(--radius-card);background:var(--color-surface);color:var(--color-ink)}.category-header{display:flex;align-items:center;gap:var(--space-sm);min-height:68px;padding:0 var(--space-sm) 0 var(--space-2xs);border-bottom:1px solid transparent}.category-card.expanded .category-header{border-bottom-color:var(--color-line)}.category-toggle{display:flex;align-items:center;justify-content:space-between;min-width:0;min-height:68px;flex:1;gap:var(--space-md);padding:var(--space-sm);border:0;background:transparent;cursor:pointer;text-align:left}.category-toggle:after{width:9px;height:9px;flex:0 0 auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;content:"";transform:rotate(45deg) translateY(-2px);transition:transform var(--duration-short)}.category-toggle[aria-expanded=true]:after{transform:rotate(225deg) translate(-2px,-2px)}.category-title{display:grid;min-width:0;gap:var(--space-2xs)}.category-title strong{min-width:0;font:600 20px/1.2 var(--font-display);overflow-wrap:break-word;text-wrap:balance}.category-title span,.category-count{color:var(--color-muted);font-size:11px}.category-count{margin-left:auto;white-space:nowrap}.row-actions{display:flex;align-items:center;gap:var(--space-2xs)}.text-action,.icon-action,.note-button,.remove-entry,.entry-name{border:0;background:transparent;cursor:pointer}.text-action{min-height:44px;padding:0 var(--space-xs);color:var(--color-accent-strong);font-size:12px;font-weight:700}.icon-action{width:44px;height:44px;border-radius:var(--radius-control);color:var(--color-muted)}.icon-action:hover,.remove-entry:hover{background:var(--color-surface-2)}.icon-action.danger,.remove-entry{color:var(--color-danger)}.entry-row{padding:var(--space-sm) var(--space-md);border-bottom:1px solid color-mix(in oklch,var(--color-line) 65%,transparent)}.entry-row:last-child{border-bottom:0}.entry-title{display:flex;align-items:center;min-width:0;margin-bottom:var(--space-xs)}.entry-name{display:inline-flex;align-items:center;min-width:0;min-height:44px;overflow:clip;padding:0;color:var(--color-ink);font-size:13px;font-weight:600;text-align:left;text-overflow:ellipsis;white-space:nowrap}.entry-name:hover{color:var(--color-accent-strong);text-decoration:underline}.note-button{min-height:44px;margin-left:auto;padding:0 var(--space-xs);color:var(--color-muted);font-size:11px;white-space:nowrap}.note-button.active{color:var(--color-accent-strong);font-weight:700}.remove-entry{width:44px;height:44px;border-radius:var(--radius-control);opacity:0}.entry-row:hover .remove-entry,.remove-entry:focus{opacity:1}.rating-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);min-height:44px}.subcategory{color:var(--color-muted);font-size:11px}.rating-control{--rating-color: var(--color-rating-fallback);display:flex;align-items:center;width:min(100%,320px);margin-left:auto;gap:var(--space-xs)}.rating-control i{width:14px;height:14px;flex:0 0 auto;border:1px solid color-mix(in oklch,var(--color-ink) 35%,transparent);border-radius:50%;background:var(--rating-color)}.rating-control select{min-width:0;min-height:44px;flex:1;border:1px solid var(--color-field-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-ink);padding:0 var(--space-sm);cursor:pointer}.rating-control select:hover{background:var(--color-surface-2)}.rating-control select:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.note-text{margin:var(--space-xs) 0 0;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-control);background:var(--color-accent-soft);color:var(--color-muted);font-size:12px;line-height:1.45;overflow-wrap:anywhere}.empty-state{padding:var(--space-2xl) var(--space-lg);border:1px dashed var(--color-line);border-radius:var(--radius-card);text-align:center}.empty-state h3{min-width:0;margin:0 0 var(--space-xs);font:600 28px var(--font-display);overflow-wrap:break-word;text-wrap:balance}.empty-state p{color:var(--color-muted)}footer{display:flex;justify-content:space-between;gap:var(--space-lg);padding:var(--space-lg) max(var(--space-lg),calc((100% - 1440px)/2));border-top:1px solid var(--color-line);color:var(--color-muted);font-size:12px}footer p{margin:0}footer a{color:var(--color-accent-strong)}.modal{width:min(560px,calc(100% - var(--space-lg)));max-height:min(720px,calc(100vh - var(--space-lg)));padding:0;overflow:auto;border:0;border-radius:var(--radius-modal);background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-modal)}.modal::backdrop{background:var(--color-backdrop)}.modal-card{padding:var(--space-lg)}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);margin-bottom:var(--space-md)}.modal-header h2{min-width:0;margin:0;font:600 32px var(--font-display);overflow-wrap:break-word;text-wrap:balance}.modal-close{width:44px;height:44px;flex-shrink:0;border:0;border-radius:50%;background:var(--color-surface-2);cursor:pointer;font-size:22px}.privacy-note,.settings-help{margin:0 0 var(--space-lg);color:var(--color-muted);font-size:13px;line-height:1.55;text-wrap:pretty}.data-actions{display:grid}.data-action{display:grid;gap:var(--space-2xs);padding:var(--space-sm) 0;border-bottom:1px solid var(--color-line)}.data-action:first-child{padding-top:0}.data-action:last-child{padding-bottom:0;border-bottom:0}.data-action button{width:fit-content;min-height:32px;padding:0;border:0;background:transparent;color:var(--color-ink);font-weight:700;text-align:left;white-space:nowrap;cursor:pointer}.data-action button:hover{color:var(--color-accent-strong)}.data-action span{color:var(--color-muted);font-size:12px}.rating-editor{display:grid;gap:var(--space-xs);margin-bottom:var(--space-md)}.rating-edit-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:var(--space-xs)}.rating-edit-row input[type=color]{width:40px;height:40px;padding:var(--space-2xs);border:1px solid var(--color-field-border);border-radius:var(--radius-control);background:var(--color-surface);cursor:pointer}.rating-name{height:40px;padding:0 var(--space-sm)}.remove-rating{min-height:40px;border:0;background:transparent;color:var(--color-danger);cursor:pointer;font-size:12px}.required-rating{color:var(--color-muted);font-size:11px;font-weight:700}.settings-card hr{margin:var(--space-lg) 0;border:0;border-top:1px solid var(--color-line)}.editor-form{display:grid;gap:var(--space-md)}.editor-form .modal-header{margin-bottom:0}.editor-field{display:grid;gap:var(--space-xs);color:var(--color-ink);font-size:13px;font-weight:700}.editor-field input,.editor-field textarea{width:100%;border:1px solid var(--color-field-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-ink)}.editor-field input{min-height:44px;padding:0 var(--space-sm)}.editor-field textarea{min-height:136px;padding:var(--space-sm);line-height:1.5;resize:vertical}.editor-field input:hover,.editor-field textarea:hover{background:var(--color-surface-2)}.editor-field small{color:var(--color-muted);font-size:11px;font-weight:400;line-height:1.45}.editor-error{margin:0;color:var(--color-danger);font-size:13px;line-height:1.45}.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-xs);padding-top:var(--space-xs)}.toast{position:fixed;z-index:var(--z-toast);left:50%;bottom:var(--space-lg);transform:translate(-50%,20px);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-control);background:var(--color-ink);color:var(--color-surface);box-shadow:var(--shadow-modal);opacity:0;pointer-events:none;transition:transform var(--duration-short),opacity var(--duration-short);font-size:13px}.toast.visible{transform:translate(-50%);opacity:1}@media(max-width:860px){.page,.header-inner{width:min(100% - var(--space-lg),1440px)}.page{padding-top:var(--space-xl)}.intro{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}.name-field{max-width:360px}.control-panel{grid-template-columns:minmax(0,1fr) auto}.search-field{grid-column:1 / -1}.control-actions{justify-content:flex-end}footer{flex-direction:column}}@media(max-width:560px){.header-inner{flex-wrap:wrap;padding:var(--space-sm) 0}.brand p{display:none}.header-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.header-actions .button{min-height:44px;padding:0 var(--space-xs);font-size:12px}.intro h2{font-size:42px}.intro p{font-size:16px}.control-panel{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-md)}.control-actions{display:grid;grid-template-columns:1fr 1fr}.legend{gap:var(--space-xs) var(--space-md)}.category-header{align-items:flex-start;padding-top:var(--space-2xs)}.category-toggle{align-items:flex-start}.category-count{display:none}.row-actions{flex-wrap:wrap;justify-content:flex-end}.rating-row{align-items:stretch;flex-direction:column;gap:var(--space-2xs)}.rating-control{width:100%}.remove-entry{opacity:1}.modal-card{padding:var(--space-lg)}input,textarea{font-size:16px}}@media(hover:hover){.button:hover{transform:translateY(-1px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}@media(forced-colors:active){.rating-control i{border:2px solid CanvasText;background:Canvas}.category-toggle:after{border-color:ButtonText}}
