:root{--bg:#f5f7f6;--ink:#192e29;--muted:#72827c;--green:#16745b;--line:#e4eae6}*{box-sizing:border-box}body{margin:0;background:#e7ede9;color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #40b997;outline-offset:4px}button{border:0}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}.app{max-width:480px;min-height:100dvh;margin:auto;background:var(--bg)}header{display:flex;align-items:center;justify-content:space-between;padding:28px 24px 23px}.brand{font-size:26px;font-weight:800;letter-spacing:-1.1px;display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}.brand-symbol{background:var(--green);color:white;display:grid;place-items:center;width:31px;height:31px;border-radius:10px;font-size:22px}.brand-dot{color:var(--green);margin-left:-7px}.icon-button{background:white;border:1px solid var(--line);width:34px;height:34px;border-radius:50%;font-weight:700;color:var(--muted)}main{padding:13px 24px 110px}.screen{display:none}.screen.active{display:block}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:800;display:flex;align-items:center;gap:8px;color:var(--green)}.live-dot{width:6px;height:6px;border-radius:50%;background:#5bbc96;display:inline-block;flex-shrink:0}h1{font-size:39px;line-height:1.13;letter-spacing:-1.7px;margin:17px 0 14px;font-weight:750}h2{font-size:17px;letter-spacing:-.4px;margin:0}.intro{color:var(--muted);line-height:1.7;margin:0 0 27px;font-size:14px}.import-card{width:100%;position:relative;overflow:hidden;text-align:left;background:#dcefe5;border:1px solid #cfe5d8;border-radius:23px;padding:22px;margin-bottom:28px;display:block}.import-top{display:flex;align-items:center;gap:12px;margin-bottom:23px}.icon-tile{width:40px;height:40px;background:var(--green);color:white;display:grid;place-items:center;border-radius:12px}.mini-label{font-size:9px;font-weight:800;letter-spacing:1.5px;color:var(--green)}.import-card h2{font-size:23px;position:relative;z-index:1}.import-card p{font-size:13px;color:#5e7f6c;line-height:1.65;position:relative;z-index:1}.import-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #bddac8;padding-top:18px;margin-top:23px;font-weight:750;color:var(--green);position:relative;z-index:1}.paper-art{position:absolute;right:23px;top:85px;width:76px;height:102px;background:#fafffc;border-radius:8px;transform:rotate(12deg);box-shadow:0 6px 12px #17482c0d;padding:17px 12px;opacity:.75}.paper-art i{display:block;height:5px;background:#cedfd3;border-radius:3px;margin:10px 0}.paper-art b{position:absolute;right:-9px;bottom:7px;border-radius:50%;background:#16745b;color:white;padding:5px 9px;font-size:21px}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.pill{background:#e9eeeb;color:#75847b;border-radius:7px;font-size:10px;font-weight:650;padding:5px 8px;letter-spacing:0}.order-card{background:white;border:1px solid var(--line);border-radius:20px;text-align:left;padding:19px;width:100%;display:block}.order-head{display:flex;gap:12px;align-items:center}.order-head>span:last-child{margin-left:auto;color:#829288}.small-icon{display:grid;place-items:center;background:#f0f5f2;border-radius:13px;width:43px;height:43px;color:var(--green)}.order-head strong{display:block;font-size:14px}.order-head small{display:block;margin-top:4px;font-size:11px;color:var(--muted)}.progress-label{display:flex;justify-content:space-between;margin-top:22px;font-size:11px;color:var(--muted)}.progress-label b{color:var(--green)}.progress{display:block;height:6px;background:#edf2ee;border-radius:4px;margin-top:9px;overflow:hidden}.progress i{display:block;background:var(--green);width:0;height:100%;transition:width .3s}.order-footer{border-top:1px solid #f0f3f1;display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:15px;color:var(--green);font-size:12px;font-weight:750}.how-card{display:flex;gap:13px;margin-top:26px;align-items:flex-start;color:var(--green)}.how-card strong{font-size:11px;color:#53685d}.how-card p{font-size:11px;line-height:1.7;color:var(--muted);margin:6px 0 0}.demo-note{text-align:center;color:#87968d;font-size:10px;line-height:1.6;margin-top:24px}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;justify-content:space-around;background:#ffffffed;border-top:1px solid var(--line);backdrop-filter:blur(14px);z-index:5}.bottom-nav button{display:flex;gap:5px;flex-direction:column;align-items:center;justify-content:center;background:transparent;color:#95a098;font-size:10px;min-height:48px;width:90px;border-radius:13px}.bottom-nav .active{color:var(--green);background:#edf6f0;font-weight:750}.summary{display:flex;padding:18px 0;background:white;border:1px solid var(--line);border-radius:18px;margin-bottom:21px}.summary>div{flex:1;text-align:center;border-right:1px solid var(--line)}.summary>div:last-child{border:0}.summary strong{display:block;font-size:25px;letter-spacing:-1px}.summary>div:first-child strong{color:var(--green)}.summary span{font-size:10px;color:var(--muted)}.search{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:white;border-radius:13px;padding:13px;color:#7c8c82}.search input{width:100%;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font-size:12px}.search:focus-within{border-color:var(--green)}.filters{display:flex;gap:8px;margin:17px 0 20px}.filters button{padding:9px 12px;background:transparent;font-size:11px;border-radius:9px;color:var(--muted)}.filters .selected{background:var(--ink);color:white}.filters span{opacity:.65;margin-left:5px}.product{display:flex;align-items:center;gap:12px;text-align:left;background:white;border:1px solid var(--line);border-radius:16px;padding:14px 12px;margin-bottom:10px;width:100%}.product-art{display:grid;place-items:center;width:48px;height:58px;flex-shrink:0;border-radius:12px;color:#445c4d}.product-art svg{width:29px;height:36px}.product-copy{min-width:0;flex:1}.product-copy strong{font-size:12px;display:block;line-height:1.45}.product-copy small{color:var(--muted);font-size:10px;display:block;margin-top:4px}.product-copy .status{font-size:9px;color:#a17c45;margin-top:8px;display:block}.product.done .status{color:var(--green)}.quantity{font-size:11px;font-weight:750;white-space:nowrap}.quantity small{font-size:9px;color:var(--muted);font-weight:400}.detail-card{padding:17px;border-radius:18px;background:white;border:1px solid var(--line);display:flex;gap:15px;align-items:center;margin-bottom:20px}.detail-card .product-art{width:65px;height:77px}.detail-card h2{font-size:15px;line-height:1.4}.detail-card p{font-size:12px;color:var(--muted);margin:7px 0}.detail-card small{font-size:10px;color:var(--green)}.scanner{background:#1a302a;color:white;border-radius:22px;padding:20px;text-align:center}.scanner-label{display:flex;gap:8px;justify-content:center;font-size:9px;font-weight:700;letter-spacing:1.6px;color:#b1c8ba}.scan-frame{height:146px;max-width:240px;border:2px solid #7fbd9e;border-radius:17px;margin:26px auto 20px;position:relative;display:grid;place-items:center}.barcode-art{width:158px;height:73px;background:repeating-linear-gradient(90deg,#a5bdb0 0px,#a5bdb0 2px,transparent 2px,transparent 5px,#a5bdb0 5px,#a5bdb0 9px,transparent 9px,transparent 11px);opacity:.25}.scan-line{position:absolute;left:-8px;right:-8px;top:50%;height:2px;background:#80e3b3;box-shadow:0 0 17px #80e3b355}.scanner p{font-size:12px;line-height:1.6;color:#c4d2ca}.camera-note{font-size:9px;color:#8ea89a}.notice{display:flex;align-items:center;gap:10px;margin:18px 0;color:#718478}.notice svg{flex-shrink:0;width:18px}.notice p{font-size:11px;line-height:1.6;margin:0}.primary{display:flex;justify-content:center;align-items:center;gap:14px;width:100%;background:var(--green);color:white;padding:17px;border-radius:13px;font-weight:700;font-size:13px;min-height:50px}.text-button{background:transparent;color:var(--muted);display:block;width:100%;padding:16px;font-size:12px}dialog{border:0;border-radius:25px 25px 0 0;position:fixed;top:auto;bottom:0;padding:26px 24px calc(25px + env(safe-area-inset-bottom));margin:0 auto;width:100%;max-width:480px;color:var(--ink);max-height:85dvh;overflow:auto}dialog::backdrop{background:#142b226e;backdrop-filter:blur(3px)}.modal-handle{height:4px;width:35px;background:#dce4de;border-radius:5px;margin:-12px auto 25px}.modal-close{position:absolute;right:16px;top:13px;font-size:25px;background:transparent;color:var(--muted);width:40px;height:40px}.modal-icon{display:grid;place-items:center;margin-bottom:19px;width:55px;height:55px;border-radius:17px;background:#e4f3e9;color:var(--green)}dialog h2{font-size:25px;letter-spacing:-1px}dialog p{color:var(--muted);font-size:13px;line-height:1.7}dialog .primary{margin-top:15px}.secondary{width:100%;padding:16px;background:#eff4f0;border-radius:13px;font-size:12px;font-weight:650;margin-top:10px}.success-icon{font-size:30px}.empty{text-align:center;padding:40px 0;color:var(--muted);font-size:12px}#toast{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;max-width:85vw;width:max-content;padding:14px 20px;border-radius:13px;font-size:12px;display:none;z-index:10}@media(max-width:350px){main{padding-left:17px;padding-right:17px}header{padding-left:17px;padding-right:17px}h1{font-size:34px}.paper-art{right:12px;opacity:.4}.filters{gap:2px}.filters button{padding:9px 10px}}