:root { color-scheme: light; --paper:#f5f3eb; --ink:#282a27; --muted:#6d7068; --line:#d7d5ca; --green:#3c7054; --green-dark:#28513d; --danger:#a34335; --card:#fffdf7; }
    * { box-sizing:border-box; } html,body { touch-action:pan-y pinch-zoom; } body { margin:0; min-width:320px; background:var(--paper); color:var(--ink); font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif; }
    button,select,input { font:inherit; } button { cursor:pointer; } button:disabled { cursor:not-allowed; opacity:.5; }
    #app { width:min(480px,calc(100% - 24px)); margin:0 auto; padding:28px 0 56px; }
    h1 { margin:0 0 8px; font-size:1.55rem; letter-spacing:-.03em; } .lead { margin:0 0 18px; color:var(--muted); font-size:.95rem; }
    .panel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:0 12px 32px rgba(40,42,39,.05); }
    .stack { display:grid; gap:12px; } .row { display:flex; gap:10px; flex-wrap:wrap; }
    .btn { min-height:52px; border:0; border-radius:12px; padding:14px 16px; font-weight:700; width:100%; text-align:center; }
    .btn.primary { background:var(--green); color:#fff; } .btn.primary:hover:not(:disabled) { background:var(--green-dark); }
    .btn.secondary { background:#e5e4dc; color:var(--ink); } .btn.ghost { background:transparent; border:1px solid var(--line); }
    .btn.choice { text-align:left; background:#fffef9; border:1px solid var(--line); font-weight:650; }
    .btn.choice.selected { border:2px solid var(--green); background:#edf4ed; }
    .notice { margin:0; padding:12px; border-radius:10px; background:#eef2ec; color:#294635; } .notice.error { background:#f8e8e4; color:#7d3027; } .notice.warn { background:#f7f1e0; color:#6a5320; } .notice.empty { background:#f1f0e9; color:var(--muted); }
    .fine { color:var(--muted); font-size:.86rem; margin:0; } .meta { display:grid; gap:6px; margin:0 0 14px; } .meta div { display:flex; justify-content:space-between; gap:12px; } .meta strong { font-weight:700; }
    .presets { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .presets .btn { min-height:48px; padding:10px; }
    .stepper { display:grid; grid-template-columns:72px 1fr 72px; gap:8px; align-items:center; } .stepper .value { text-align:center; font-size:1.4rem; font-weight:700; }
    .slider { display:grid; gap:6px; margin:10px 0; } .slider label { font-weight:650; display:flex; justify-content:space-between; } input[type=range] { width:100%; min-height:44px; accent-color:var(--green); touch-action:pan-y pinch-zoom; } input[type=range]:focus-visible { outline:3px solid #28513d; outline-offset:3px; } .allocation-remaining { color:var(--danger); }
    .sum { font-size:1.05rem; font-weight:700; margin:8px 0; } .skeleton { height:88px; border-radius:12px; background:linear-gradient(100deg,#ecebe3 35%,#f9f8f2 50%,#ecebe3 65%); background-size:200% 100%; animation:loading 1.1s infinite; } @keyframes loading { to { background-position:-200% 0; } }
    .list { display:grid; gap:10px; } .item { padding:12px; border:1px solid var(--line); border-radius:12px; background:#fffef9; } .item strong { display:block; margin-bottom:4px; }