:root{color:#171717;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--ink:#171717;--muted:#686864;--line:#dfdfda;--surface:#fff;--soft-surface:#f7f7f4;--danger:#a3322d;--shadow-sm:0 4px 14px #1717170b;--shadow-md:0 14px 42px #17171712;background:#f4f4f1;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Hiragino Kaku Gothic ProN,Yu Gothic,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 10% 0,#fffffff2,#0000 36%),#f4f4f1;min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}input,select{color:var(--ink)}input[type=number]{appearance:textfield}input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.app-shell{width:min(1120px,100% - 32px);margin:0 auto;padding:48px 0 72px}.hero{align-items:flex-start;gap:20px;margin-bottom:28px;display:flex}.hero-icon{color:#fff;background:linear-gradient(145deg,#292929,#101010);border-radius:19px;flex:none;place-items:center;width:58px;height:58px;display:grid;box-shadow:0 12px 28px #0000002b}.eyebrow,.section-kicker{letter-spacing:.12em;color:#74746f;margin:0 0 6px;font-size:12px;font-weight:750}h1{letter-spacing:-.04em;margin:0;font-size:clamp(32px,6vw,52px)}.hero-copy{color:#5f6368;max-width:720px;margin:12px 0 0;line-height:1.75}.summary-grid{grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px;display:grid}.summary-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow-sm);background:#ffffffe0;border:1px solid #dfdfdae6;border-radius:19px;grid-template-columns:auto 1fr;align-items:center;gap:6px 12px;padding:19px;display:grid}.summary-card svg{color:#666;grid-row:1/span 2}.summary-card span{color:#777;font-size:13px}.summary-card strong{letter-spacing:-.02em;font-size:22px}.panel{box-shadow:var(--shadow-md);background:#fffffff0;border:1px solid #e2e2dd;border-radius:25px;margin-top:18px;padding:27px}.panel-title-row{justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;display:flex}h2{letter-spacing:-.025em;margin:0;font-size:24px}.top-controls{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:22px;display:grid}label{gap:8px;min-width:0;display:grid}label>span{color:#666;font-size:13px;font-weight:700}input,select{background:#fff;border:1px solid #d5d5cf;border-radius:13px;outline:none;width:100%;min-width:0;padding:12px 13px;transition:border-color .18s,box-shadow .18s,background .18s;box-shadow:inset 0 1px #00000004}input:hover,select:hover{border-color:#c6c6c0}input:focus,select:focus{background:#fff;border-color:#53534f;box-shadow:0 0 0 4px #17171713}.input-with-unit{min-width:0;position:relative}.input-with-unit input{padding-right:48px}.input-with-unit em{color:#777;font-style:normal;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.category-list{gap:12px;display:grid}.category-row{background:linear-gradient(145deg,#fafaf8,#f6f6f3);border:1px solid #ebebe6;border-radius:18px;grid-template-columns:36px minmax(190px,1.7fr) minmax(120px,.72fr) minmax(120px,.72fr) 44px;align-items:end;gap:12px;padding:16px;transition:transform .18s,box-shadow .18s,border-color .18s;display:grid;box-shadow:0 4px 14px #14141409}.category-row:focus-within{border-color:#d5d5cf;box-shadow:0 9px 24px #14141411}.category-index{color:#fff;background:linear-gradient(145deg,#292929,#101010);border-radius:11px;align-self:center;place-items:center;width:32px;height:32px;font-size:13px;font-weight:800;display:grid;box-shadow:0 6px 14px #00000024}.icon-button,.ghost-button,.add-button,.mobile-reset-button,.mobile-calculate-button{border-radius:13px;justify-content:center;align-items:center;gap:8px;transition:transform .15s,box-shadow .15s,background .15s;display:inline-flex}.icon-button{width:44px;height:44px;color:var(--danger);background:#fff;border:1px solid #deded8;box-shadow:0 3px 10px #00000009}.icon-button:hover:not(:disabled){background:#fff8f7;transform:translateY(-1px)}.icon-button:disabled{opacity:.35;cursor:not-allowed}.ghost-button{color:#333;background:#f7f7f4;border:1px solid #e6e6e1;padding:10px 13px}.ghost-button:hover{background:#efefeb}.add-button{color:#fff;background:linear-gradient(145deg,#292929,#101010);border:0;margin-top:15px;padding:13px 18px;box-shadow:0 9px 20px #00000021}.add-button:hover{transform:translateY(-1px);box-shadow:0 11px 24px #0000002b}.compact-input-with-unit{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0;display:grid}.compact-input-with-unit em{color:#666;min-width:1.25em;font-style:normal;font-weight:700}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:760px}th,td{text-align:right;border-bottom:1px solid #ecece7;padding:14px 12px}th:first-child,td:first-child{text-align:left}th{color:#777;letter-spacing:.04em;font-size:12px}td{font-size:14px}.highlight-cell{font-size:17px;font-weight:800}.collection-box{color:#fff;background:linear-gradient(145deg,#292929,#101010);border-radius:17px;justify-content:space-between;align-items:center;margin-top:18px;padding:18px 20px;display:flex;box-shadow:0 12px 25px #00000026}.collection-box span{color:#d6d6d2}.collection-box strong{font-size:24px}.difference-badge{border-radius:999px;padding:9px 12px;font-size:13px;font-weight:750}.difference-badge.zero{color:#1b5e20;background:#e8f5e9}.difference-badge.plus{color:#9a4b00;background:#fff3e0}.difference-badge.minus{color:#9b2c2c;background:#fdecec}.empty-result{text-align:center;color:#555;background:linear-gradient(145deg,#fafaf8,#f5f5f2);border:1px solid #ecece7;border-radius:17px;place-items:center;min-height:108px;padding:20px;display:grid}.empty-result p{margin:0;line-height:1.7}.mobile-results,.mobile-actions{display:none}.explanation-heading{align-items:center;gap:12px;margin-bottom:18px;display:flex}.steps{gap:12px;margin:0;padding:0;list-style:none;display:grid}.steps li{grid-template-columns:34px 1fr;align-items:start;gap:12px;display:grid}.steps li>span{background:#efefeb;border-radius:10px;place-items:center;width:30px;height:30px;font-weight:800;display:grid}.steps p{color:#555;margin:3px 0 0;line-height:1.7}.logic-note{background:#f7f7f4;border-radius:14px;margin-top:20px;padding:16px}.logic-note p{color:#555;margin:6px 0 0}@media (width<=760px){:root{background:#f6f6f3}body{background:linear-gradient(#fff 0%,#f8f8f5 36%,#f3f3ef 100%)}.app-shell{width:100%;max-width:620px;padding:24px 16px calc(116px + env(safe-area-inset-bottom))}.hero,.summary-grid{display:none}.panel{box-shadow:none;background:0 0;border:0;border-radius:0;margin-top:16px;padding:0}.settings-panel{margin-top:0}.settings-panel>.panel-title-row{display:none}.top-controls{grid-template-columns:1fr;gap:25px;margin:0 0 30px}label{gap:10px}label>span{color:#656561;letter-spacing:.005em;font-size:17px;font-weight:750}input,select{background:#fffffff5;border-color:#d9d9d3;border-radius:17px;min-height:60px;padding:14px 17px;font-size:20px;box-shadow:0 3px 12px #16161409,inset 0 1px #fffc}.input-with-unit input{padding-right:56px}.input-with-unit em{font-size:18px;right:18px}.category-list{gap:15px}.category-row{background:#f8f8f5f5;border:1px solid #e7e7e1;border-radius:24px;grid-template-columns:minmax(108px,.72fr) minmax(130px,1.1fr) 58px;grid-template-areas:"index name name""count weight delete";align-items:end;gap:18px 12px;padding:21px 17px;display:grid;box-shadow:0 10px 28px #1c1c180e,inset 0 1px #fffc}.category-row:focus-within{border-color:#d7d7d1;transform:none;box-shadow:0 13px 32px #1c1c1813,inset 0 1px #ffffffe6}.category-index{border-radius:15px;grid-area:index;align-self:end;width:52px;height:52px;font-size:21px;box-shadow:0 8px 18px #00000029}.name-field{grid-area:name}.count-field{grid-area:count;min-width:0}.weight-field{grid-area:weight;min-width:0}.icon-button{width:56px;height:60px;color:var(--danger);background:#fffffff5;border-color:#ddddd7;border-radius:17px;grid-area:delete;justify-self:end;box-shadow:0 4px 12px #1616140a}.name-field input{font-size:19px}.count-field input,.weight-field input{text-align:left;width:100%;min-width:0;padding:14px 15px}.compact-input-with-unit{grid-template-columns:minmax(0,1fr) 24px;gap:8px}.compact-input-with-unit em{text-align:center;min-width:24px;font-size:18px}.add-button{color:#fff;background:linear-gradient(145deg,#292929,#101010);border:0;border-radius:18px;width:100%;min-height:58px;margin-top:15px;font-size:18px;font-weight:750;box-shadow:0 10px 22px #00000026}.add-button:active,.mobile-reset-button:active,.mobile-calculate-button:active,.icon-button:active{transform:scale(.985)}.result-panel{background:#f8f8f5f5;border:1px solid #e5e5df;border-radius:22px;margin-top:20px;padding:19px 17px;scroll-margin-top:16px;box-shadow:0 10px 28px #1c1c180d,inset 0 1px #ffffffd9}.result-title-row{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:12px;display:flex}.result-title-row .section-kicker{display:none}.result-title-row h2{font-size:19px}.difference-badge{font-size:12px}.empty-result{background:0 0;border:0;min-height:76px;padding:9px 4px 2px;font-size:15px}.desktop-results{display:none}.mobile-results{gap:10px;display:grid}.result-card{background:#fff;border:1px solid #e6e6e0;border-radius:15px;justify-content:space-between;align-items:center;gap:12px;padding:15px;display:flex;box-shadow:0 4px 12px #16161409}.result-card div{gap:5px;display:grid}.result-card span{color:#666;font-size:13px}.result-card strong{font-size:18px}.result-card p{color:#555;white-space:nowrap;margin:0;font-weight:700}.collection-box{border-radius:15px;margin-top:13px;padding:16px 17px}.collection-box strong{font-size:20px}.explanation-panel{display:none}.mobile-actions{z-index:30;padding:11px 16px calc(11px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(18px)saturate(1.15);background:#ffffffe0;border-top:1px solid #dfdfdad1;grid-template-columns:minmax(0,.85fr) minmax(0,1.45fr);gap:10px;display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -8px 30px #1414140e}.mobile-reset-button,.mobile-calculate-button{border:1px solid #d7d7d1;border-radius:17px;min-height:58px;font-size:17px;font-weight:750}.mobile-reset-button{color:#171717;background:#fffffff2;box-shadow:0 4px 12px #16161409}.mobile-calculate-button{color:#fff;background:linear-gradient(145deg,#292929,#101010);border-color:#171717;box-shadow:0 9px 20px #00000029}}@media (width<=390px){.app-shell{padding-left:12px;padding-right:12px}.category-row{border-radius:21px;grid-template-columns:minmax(92px,.75fr) minmax(108px,1.25fr) 50px;column-gap:9px;padding:18px 13px}.category-index{border-radius:14px;width:47px;height:47px}.icon-button{width:50px}label>span{font-size:16px}input,select{font-size:18px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}.mobile-intro,.mobile-overview,.mobile-section-heading,.ratio-meter{display:none}@media (width<=760px){:root{--mobile-ink:#182033;--mobile-muted:#6f7686;--mobile-accent:#3157d5;--mobile-accent-deep:#1e3da7;--mobile-surface:#ffffffe0}body{color:var(--mobile-ink);background:radial-gradient(circle at 88% -4%,#657eea38,#0000 30%),radial-gradient(circle at 0 20%,#b5cbff38,#0000 34%),linear-gradient(#f8f9ff 0%,#f3f5fb 42%,#eef1f7 100%)}.app-shell{max-width:620px;padding:14px 14px calc(120px + env(safe-area-inset-bottom))}.mobile-intro{color:#fff;background:radial-gradient(circle at 90% 10%,#91a9ff7a,#0000 28%),radial-gradient(circle at 10% 120%,#4263d87a,#0000 42%),linear-gradient(145deg,#182036 0%,#263f8f 58%,#3157d5 100%);border-radius:26px;margin-bottom:14px;padding:20px;display:block;position:relative;overflow:hidden;box-shadow:0 18px 42px #1e368442}.mobile-intro:after{content:"";pointer-events:none;border:1px solid #ffffff29;border-radius:50%;width:150px;height:150px;position:absolute;top:-44px;right:-38px;box-shadow:0 0 0 24px #ffffff0a,0 0 0 50px #ffffff06}.mobile-brand-row{z-index:1;align-items:center;gap:13px;display:flex;position:relative}.mobile-brand-icon{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff26;border:1px solid #fff3;border-radius:16px;flex:none;place-items:center;width:48px;height:48px;display:grid;box-shadow:inset 0 1px #ffffff2e}.mobile-brand-label{letter-spacing:.18em;color:#ffffffa8;margin:0 0 3px;font-size:10px;font-weight:800}.mobile-intro h1{letter-spacing:-.035em;max-width:260px;margin:0;font-size:clamp(23px,6.6vw,30px);line-height:1.22}.mobile-intro-copy{z-index:1;color:#ffffffc7;max-width:440px;margin:15px 0 0;font-size:13px;line-height:1.72;position:relative}.ratio-preset{z-index:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#08102b33;border:1px solid #ffffff2b;border-radius:15px;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;padding:11px 13px;display:flex;position:relative}.ratio-preset span{color:#ffffffbf;align-items:center;gap:6px;font-size:12px;font-weight:700;display:inline-flex}.ratio-preset strong{letter-spacing:.08em;font-size:18px}.top-controls{gap:12px;margin-bottom:12px}.control-card{background:var(--mobile-surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #d2d7e5cc;border-radius:21px;gap:9px;padding:16px;box-shadow:0 9px 26px #27376013,inset 0 1px #fffc}.control-card>span{color:#6f7686;font-size:13px}.total-control{background:linear-gradient(145deg,#1f2a4cfa,#2a418ffa);border-color:#3e55aa4d;padding:17px;position:relative;overflow:hidden;box-shadow:0 13px 30px #273d8e2e}.total-control:before{content:"TOTAL";letter-spacing:.18em;color:#ffffff47;font-size:10px;font-weight:800;position:absolute;top:14px;right:16px}.total-control>span{color:#ffffffa8}.total-control .input-with-unit input{color:#fff;letter-spacing:-.03em;background:#ffffff1f;border-color:#fff3;min-height:64px;font-size:30px;font-weight:800;box-shadow:inset 0 1px #ffffff1f}.total-control .input-with-unit input:focus{border-color:#ffffff85;box-shadow:0 0 0 4px #ffffff1c}.total-control .input-with-unit em{color:#ffffffb8;font-weight:800}.rounding-control select{min-height:56px;color:var(--mobile-ink);background-color:#ffffffe6;font-size:18px;font-weight:750}.mobile-overview{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:13px 0 23px;display:grid}.mobile-overview>div{background:#ffffffb8;border:1px solid #d6dae5c7;border-radius:16px;grid-template-columns:auto 1fr;align-items:center;gap:3px 6px;min-width:0;padding:11px 8px;display:grid;box-shadow:0 6px 18px #2737600b}.mobile-overview svg{color:var(--mobile-accent);grid-row:1/span 2}.mobile-overview span{text-overflow:ellipsis;white-space:nowrap;color:#858b98;min-width:0;font-size:10px;font-weight:700;overflow:hidden}.mobile-overview strong{text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.02em;min-width:0;font-size:13px;overflow:hidden}.mobile-section-heading{justify-content:space-between;align-items:flex-end;gap:12px;margin:0 3px 12px;display:flex}.mobile-section-heading span{letter-spacing:-.025em;font-size:19px;font-weight:850;display:block}.mobile-section-heading p{color:#7d8390;margin:4px 0 0;font-size:12px}.mobile-section-heading>strong{color:var(--mobile-accent-deep);background:#3157d51a;border-radius:999px;flex:none;padding:6px 10px;font-size:12px}.category-list{gap:13px}.category-row{--row-accent:#3157d5;background:radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--row-accent) 10%, transparent), transparent 34%), #ffffffd6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #d2d7e5d1;border-radius:23px;grid-template-columns:minmax(104px,.82fr) minmax(124px,1.18fr) 52px;grid-template-areas:"index name name""count weight delete""meter meter meter";row-gap:15px;padding:18px 15px 15px;position:relative;overflow:hidden;box-shadow:0 10px 26px #22325b13,inset 0 1px #ffffffeb}.category-row:nth-child(2){--row-accent:#6875d8}.category-row:nth-child(3){--row-accent:#8a67b7}.category-row:nth-child(4n){--row-accent:#3a8b8b}.category-row:before{content:"";background:linear-gradient(180deg, var(--row-accent), color-mix(in srgb, var(--row-accent) 30%, transparent));width:4px;position:absolute;inset:0 auto 0 0}.category-row:focus-within{border-color:color-mix(in srgb, var(--row-accent) 35%, #d7dce8);box-shadow:0 13px 32px #22325b1c, 0 0 0 3px color-mix(in srgb, var(--row-accent) 8%, transparent)}.category-index{background:linear-gradient(145deg, color-mix(in srgb, var(--row-accent) 78%, #fff), var(--row-accent));width:48px;height:48px;box-shadow:0 8px 17px color-mix(in srgb, var(--row-accent) 28%, transparent);border-radius:15px}.category-row label>span{color:#747b8a;font-size:13px}.category-row input{min-height:56px;color:var(--mobile-ink);background:#f8f9fde6;border-color:#dfe3ec;border-radius:15px;box-shadow:inset 0 1px 1px #28375a06}.category-row input:focus{border-color:var(--row-accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--row-accent) 10%, transparent);background:#fff}.name-field input{letter-spacing:-.015em;font-weight:750}.compact-input-with-unit em{color:#747b8a}.icon-button{color:#b24957;width:50px;height:56px;box-shadow:none;background:#fff8f9eb;border-color:#eadfe2;border-radius:15px}.ratio-meter{background:#e9ecf3;border-radius:999px;grid-area:meter;width:100%;height:5px;display:block;overflow:hidden}.ratio-meter span{border-radius:inherit;background:linear-gradient(90deg, var(--row-accent), color-mix(in srgb, var(--row-accent) 55%, #9ab6ff));min-width:4%;height:100%;transition:width .22s;display:block}.add-button{background:linear-gradient(145deg,#25376e,#3157d5);border-radius:19px;min-height:60px;margin-top:14px;box-shadow:0 12px 25px #3157d538}.result-panel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffd4;border-color:#d0d6e4d1;border-radius:24px;margin-top:17px;padding:18px 16px;box-shadow:0 12px 30px #22325b13,inset 0 1px #ffffffe6}.result-title-row h2{color:var(--mobile-ink);font-size:21px}.empty-result{background:linear-gradient(145deg,#f8f9fdeb,#f1f4fbcc);border:1px dashed #cfd5e3;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:146px;padding:20px 12px;display:flex}.empty-result-icon{width:46px;height:46px;color:var(--mobile-accent);background:#3157d51a;border-radius:15px;place-items:center;display:grid}.empty-result strong{font-size:16px}.empty-result p{color:#7a8190;max-width:300px;font-size:12px}.result-card{background:#fafbfef2;border-color:#dfe3ec;border-radius:17px;position:relative;overflow:hidden;box-shadow:0 6px 16px #22325b0d}.result-card:before{content:"";background:var(--mobile-accent);width:4px;position:absolute;top:0;bottom:0;left:0}.result-card strong{color:var(--mobile-accent-deep)}.collection-box{background:linear-gradient(145deg,#182036,#3157d5);box-shadow:0 12px 26px #233c9138}.mobile-actions{padding:10px 14px calc(10px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(22px)saturate(1.2);background:#f5f7fcdb;border-top-color:#cdd3e1d9;gap:9px;box-shadow:0 -12px 34px #26345b1a}.mobile-reset-button,.mobile-calculate-button{border-radius:18px;min-height:58px}.mobile-reset-button{color:#535b6d;background:#ffffffdb;border-color:#d5dae6}.mobile-calculate-button{background:linear-gradient(145deg,#25376e,#3157d5);border-color:#294dc3;box-shadow:0 10px 23px #3157d547}}@media (width<=390px){.mobile-intro{border-radius:23px;padding:18px 16px}.mobile-intro-copy{font-size:12px}.ratio-preset{padding:10px 11px}.mobile-overview{gap:6px}.mobile-overview>div{gap:2px 4px;padding:10px 6px}.mobile-overview strong{font-size:12px}.category-row{grid-template-columns:minmax(88px,.8fr) minmax(108px,1.2fr) 48px;column-gap:9px;padding:16px 12px 14px}.category-index{width:44px;height:44px}.icon-button{width:48px}}