:root{--ink:#3f342d;--cream:#fff8e9;--paper:#f6eddc;--line:#ddc59b;--green:#567d55;--orange:#e88942;--soft:#fffdf6}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#fff4dd,#e9d8bb);font-family:"Microsoft YaHei",system-ui,sans-serif;color:var(--ink);min-height:100vh}.app-shell{width:min(100%,560px);min-height:100vh;margin:auto;background:linear-gradient(#fffdf7,#f6ebd9);box-shadow:0 0 45px #82674755;padding:13px 14px 86px}.topbar{display:flex;align-items:center;justify-content:space-between;margin:2px 3px 10px}.customer{display:flex;gap:9px;align-items:center}.portrait{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;background:#f9d798;font-size:27px}.customer strong,.customer small{display:block}.customer small,.day{font-size:12px;color:#887363}.day{text-align:right;line-height:1.6}.day b{color:var(--green)}.brief-card,.palette-panel{background:var(--cream);border:2px solid var(--line);border-radius:20px;box-shadow:0 4px 0 #d5bc923d}.brief-card{padding:12px 13px}.quote{font-size:14px;line-height:1.55}.brief-color-goal{display:flex;align-items:center;gap:6px;margin-top:8px;padding:6px 8px;border:1px solid #e2bd7d;border-radius:10px;background:#fff0d2;color:#82512c;font-size:11px}.brief-color-goal>span{color:#9c7252}.brief-color-goal i{width:18px;height:18px;border-radius:50%;background:var(--goal,#ed923d);border:1px solid #a65c2c;box-shadow:inset 0 2px #fff8}.brief-color-goal b{font-size:12px}.brief-color-goal small{flex:1;color:#9a5c2d}.brief-color-goal em{font-style:normal;font-size:10px;white-space:nowrap;color:#8a674d}.brief-color-goal.matched{background:#e7f3df;border-color:#a7c797;color:#3d7042}.brief-color-goal.matched small,.brief-color-goal.matched em{color:#3d7042}.requirements{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.req{font-size:12px;border-radius:99px;padding:4px 9px;border:1px solid #dbc79e;background:#f5ede0}.req.done{background:#e5f2df;color:#3d7042;border-color:#9bbd94}.studio{margin:11px 0 10px}.canvas-frame{position:relative;border-radius:23px;overflow:hidden;background:#e9ddc8;border:2px solid #d4bc92;box-shadow:inset 0 0 0 7px #fff7e7}canvas{display:block;width:100%;height:auto;touch-action:none}.selection-tip{position:absolute;left:50%;top:12px;transform:translateX(-50%);font-size:12px;background:#fffdf0dd;border-radius:99px;padding:5px 11px;color:#816545;white-space:nowrap}.elf{position:absolute;left:15%;top:67%;font-size:31px;pointer-events:none;filter:drop-shadow(0 3px 2px #6d503633);transition:left .18s ease,top .18s ease}.elf i{display:inline-block;width:12px;height:12px;background:#ffe194;border:1px solid #9d7041;border-radius:3px;transform:rotate(7deg);margin-left:-8px;margin-bottom:-7px}.art-caption{display:flex;justify-content:space-between;padding:6px 7px 0;font-size:12px;color:#816b56}.palette-panel{padding:12px}.panel-heading{display:flex;justify-content:space-between;align-items:center;font-weight:700}.panel-heading small{font-size:11px;font-weight:400;color:#8a7461}.mix-row{display:grid;grid-template-columns:59px 1fr auto;align-items:center;gap:10px;margin:9px 0}.mix-dish{width:57px;height:47px;border-radius:50%;border:4px solid #d2b47d;background:#fffdf6;display:grid;place-items:center;box-shadow:inset 0 3px 4px #7c5d241c;color:#b39465;font-size:20px}.recipe{font-size:12px;line-height:1.4}.primary,#deliverButton{border:0;border-radius:13px;background:#ed9a4e;color:white;font-weight:700;padding:10px 12px;cursor:pointer;box-shadow:0 3px 0 #bb6d2f}.primary:disabled,#deliverButton:disabled{background:#cbbba4;box-shadow:none;cursor:not-allowed}.pigments{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pigments button{border:2px solid #fff;border-radius:12px;background:color-mix(in srgb,var(--paint) 24%,#fff);padding:8px 2px 6px;color:var(--ink);font-size:11px;cursor:pointer}.pigments button:before{content:"";display:block;margin:auto auto 4px;width:20px;height:20px;border-radius:50%;background:var(--paint);box-shadow:inset 0 2px #fff8}.tool-row{display:grid;grid-template-columns:1fr 1.25fr 1fr 1fr;gap:7px;margin-top:10px}.tool{border:1px solid #dfccaa;background:#fffdf7;border-radius:10px;padding:8px 4px;font-size:11px;color:#664d3c;cursor:pointer}.tool.selected{border-color:#e9984d;background:#fff0d8;color:#b56123}.actionbar{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,560px);display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff8e9f8;border-top:1px solid #e0c99f;padding:12px 14px;backdrop-filter:blur(8px)}#status{font-size:12px;line-height:1.35;color:#775f4b;flex:1}#deliverButton{font-size:14px;white-space:nowrap}.modal{position:fixed;inset:0;background:#38261999;display:grid;place-items:center;padding:20px;z-index:3}.hidden{display:none}.result-card{background:#fff9e9;border:3px solid #e1bf7f;border-radius:30px;padding:25px;text-align:center;width:min(390px,100%);box-shadow:0 15px 40px #170b0555}.result-card h1{margin:3px 0;font-size:25px}.result-card p{line-height:1.55;font-size:14px}.result-fox{font-size:64px}.scarf-preview{height:55px;border-radius:16px;margin:16px 25px;background:#ee9442;position:relative;overflow:hidden}.scarf-preview:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 12px,#fff8 13px 17px,transparent 18px 28px)}@media(max-width:430px){.app-shell{padding-left:9px;padding-right:9px}.tool-row{grid-template-columns:1fr 1.25fr 1fr 1fr}.pigments button{font-size:10px}.mix-row{grid-template-columns:54px 1fr auto}.mix-dish{width:52px;height:44px}}