:root{--bg:#f7f7f2;--paper:#fff;--ink:#272e28;--muted:#92968c;--line:#e9ebe3;--orange:#ef7848;--green:#537058;--soft:#edf0e5;--font:'Segoe UI','Microsoft YaHei',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px}button,input,select,textarea{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;background:transparent;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #edaf71;outline-offset:3px}a{color:inherit;text-decoration:none}.topbar{height:88px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#fffefb}.brand{display:flex;align-items:center;gap:11px}.brand-icon{background:var(--orange);color:white;border-radius:12px;font-size:34px;width:43px;height:43px;text-align:center;line-height:37px}.brand b{font-size:24px;letter-spacing:2px}.brand b span{display:block;font-size:8px;letter-spacing:2px;margin-top:2px}.roles{display:flex;padding:5px;background:#f2f3ed;border-radius:12px;gap:5px}.roles button{padding:11px 24px;color:#858a7f;border-radius:8px;font-size:13px}.roles .active{background:white;box-shadow:0 2px 7px #2534210b;color:var(--ink);font-weight:600}.prototype{font-size:11px;color:var(--muted)}.prototype i{font-style:normal;border:1px solid var(--line);padding:4px 7px;border-radius:5px;margin-left:9px}.showcase{max-width:1340px;margin:auto;display:grid;grid-template-columns:1fr 405px 1fr;gap:50px;align-items:start;padding:38px 44px 55px}.intro{padding-top:67px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--green);font-weight:650}.intro h1{font-size:43px;line-height:1.5;letter-spacing:-1.8px;font-weight:550;margin:20px 0}.intro h1 em{font-style:normal;color:var(--orange)}p{line-height:1.8;color:#8b9086}.intro p{max-width:260px;font-size:13px}.steps{margin-top:40px;display:grid;gap:20px}.step{display:flex;align-items:center;gap:13px;color:#94978d;font-size:12px}.step span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #d9ddd0;border-radius:50%;font-size:11px}.step.active{color:var(--green)}.step.active span{background:var(--green);color:white;border-color:var(--green)}.intro-foot{margin-top:57px;font-size:10px;letter-spacing:1px;color:#9da195}.phone{background:#fffefc;border:7px solid white;box-shadow:0 22px 60px #3a463413,0 0 0 1px #e6e9df;border-radius:39px;overflow:hidden;position:relative;width:405px}.statusbar{height:37px;display:flex;align-items:center;justify-content:space-between;padding:10px 22px 0;font-size:11px;font-weight:650}.minibar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-weight:600}.capsule{font-size:14px;border:1px solid #e4e6de;border-radius:20px;padding:3px 10px;letter-spacing:2px}.phone-content{height:620px;overflow:auto;scrollbar-width:none;padding:0 19px 22px}.phone-content::-webkit-scrollbar{display:none}.store-line{font-size:10px;color:#7c8b74;display:flex;justify-content:space-between;padding:8px 0 18px}.home-title{font-size:26px;line-height:1.45;font-weight:550;letter-spacing:-.5px;margin:0 0 8px}.subtitle{font-size:11px;color:#a1a395;margin:0 0 20px}.hero{position:relative;background:#e9eedd;border-radius:18px;min-height:206px;overflow:hidden;padding:24px 18px}.hero .tiny{font-size:9px;color:#778469;letter-spacing:1px}.hero h2{font-size:22px;line-height:1.45;margin:10px 0;color:#3f573b;position:relative;z-index:1}.hero-art{position:absolute;right:-6px;bottom:21px;transform:rotate(9deg);width:133px;height:133px}.hero .primary{margin-top:8px;position:relative;z-index:1;background:#536d4b;font-size:11px;padding:10px 14px}.primary{background:var(--orange);color:white;border-radius:10px;padding:13px 19px;font-weight:600}.secondary{background:var(--soft);color:var(--green);padding:12px 17px;border-radius:10px;font-weight:550}.shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:13px 0 24px}.shortcut{display:flex;align-items:center;text-align:left;gap:10px;border:1px solid var(--line);border-radius:12px;padding:13px 11px}.shortcut strong{display:block;font-size:12px}.shortcut small{display:block;font-size:9px;color:#999e93;margin-top:5px}.shortcut i{font-style:normal;font-size:23px;color:var(--orange)}.section-title{display:flex;align-items:center;justify-content:space-between;margin:20px 0 12px;font-size:15px;font-weight:650}.section-title button{font-size:10px;font-weight:400;color:#9a9f94}.chips{display:flex;gap:7px;margin-bottom:14px}.chips button{padding:7px 12px;border-radius:7px;font-size:10px;color:#93978c;background:#f5f5ef}.chips .active{background:#edf0e5;color:#50684c}.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.art-card{border:1px solid var(--line);border-radius:13px;overflow:hidden;text-align:left;padding:0;background:white}.art-card .art{height:142px;display:grid;place-items:center;background:#f3eadb}.art-card:nth-child(2n) .art{background:#e9ede3}.art-card .art svg{width:115px;height:115px}.art-card .caption{padding:11px;font-size:11px;font-weight:550}.art-card small{display:block;color:#a0a395;font-size:9px;font-weight:400;margin-top:6px}.bottom-nav{display:flex;justify-content:space-around;border-top:1px solid var(--line);padding:10px 0 17px;background:white}.bottom-nav button{font-size:9px;color:#a2a598;min-width:55px}.bottom-nav b{display:block;font-size:20px;font-weight:400;line-height:25px}.bottom-nav .active{color:var(--orange)}.side-notes{padding-top:48px}.note-label{font-size:10px;letter-spacing:2px;color:#919a89;margin-bottom:22px}.result-card{background:#fff;border-radius:20px;padding:20px;border:1px solid var(--line);transform:rotate(2deg)}.result-card .sample{height:200px;display:grid;place-items:center;background-color:#faf8f1;background-image:linear-gradient(#e9e7dd88 1px,transparent 1px),linear-gradient(90deg,#e9e7dd88 1px,transparent 1px);background-size:10px 10px;border-radius:10px}.sample svg{width:165px;height:165px}.result-card h3{font-size:14px;margin-bottom:9px}.result-card p{font-size:10px;margin:0}.swatches{display:flex;gap:5px;margin:16px 0 0}.swatches span{width:17px;height:17px;border-radius:5px}.quiet-note{margin:30px 5px;font-size:11px;line-height:1.9;color:#8f9686}.quiet-note strong{display:block;color:#66755b;font-weight:550;margin-bottom:8px}.pill{display:inline-block;border-radius:6px;padding:4px 7px;font-size:10px;background:#ecf2e5;color:#73856b}.page-head{font-size:24px;margin:16px 0 8px}.upload{border:1.5px dashed #bcc9b2;border-radius:15px;padding:25px 15px;text-align:center;background:#f5f7ef;margin:22px 0;cursor:pointer}.upload img{height:110px;max-width:100%;object-fit:contain;border-radius:8px}.upload b{display:block;font-size:13px;margin:9px}.upload small{font-size:10px;color:#979e8d}.field{margin:22px 0}.field>label{display:block;font-size:12px;font-weight:600;margin-bottom:11px}.options{display:flex;gap:7px;flex-wrap:wrap}.options button{padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:11px}.options .selected{border-color:var(--orange);background:#fff3eb;color:#da6b3d}.full{width:100%;margin-top:10px}.help{font-size:10px;color:#969c90;line-height:1.7}.preview-art{display:grid;place-items:center;height:289px;background-color:#faf8f0;background-image:linear-gradient(#e9e6d8 1px,transparent 1px),linear-gradient(90deg,#e9e6d8 1px,transparent 1px);background-size:12px 12px;border-radius:14px;margin:18px 0}.preview-art svg{width:245px;height:245px}.metrics{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 12px 17px}.metrics b{display:block;font-size:20px;font-weight:550}.metrics span{font-size:10px;color:#8f9686}.color-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:11px}.color-row i{width:17px;height:17px;border-radius:4px;display:inline-block;vertical-align:middle;margin-right:8px}.back{padding:10px 0;color:#8a9381;font-size:11px}.member{background:#303e34;color:#f7eed8;padding:23px;border-radius:18px;margin:20px 0}.member p{color:#c2cbb9;font-size:11px}.member h2{margin:5px 0}.member .primary{background:#ecdcb8;color:#374537}.member .price{font-size:30px;margin:20px 0}.workspace{display:flex;min-height:calc(100vh - 88px)}.sidebar{width:205px;flex-shrink:0;background:#fffefb;border-right:1px solid var(--line);padding:30px 18px;display:flex;flex-direction:column}.side-caption{font-size:10px;color:#a0a598;letter-spacing:2px;margin:10px 16px 17px}.side-item{text-align:left;padding:14px 17px;border-radius:9px;margin-bottom:7px;color:#92998b;font-size:12px}.side-item.active{background:#edf0e5;color:#536a4c;font-weight:600}.side-item span{margin-right:12px}.side-store{margin-top:auto;padding:20px 11px 0;border-top:1px solid var(--line);font-size:11px}.side-store p{font-size:10px;margin-bottom:0}.desk{max-width:1450px;width:calc(100% - 205px);padding:34px 38px}.desk-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.desk-header h1{font-size:25px;font-weight:550;margin:0}.desk-header p{font-size:11px;margin:9px 0 0}.desk-header button{font-size:11px}.banner{border:1px solid #e0e5d6;background:#eef1e6;border-radius:12px;padding:15px 20px;font-size:11px;color:#6f7f60;display:flex;justify-content:space-between;margin-bottom:24px}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.kpi{background:white;border:1px solid var(--line);border-radius:13px;padding:20px}.kpi label{font-size:11px;color:#929b88}.kpi strong{font-size:31px;font-weight:550;display:block;margin:15px 0 10px}.kpi small{font-size:10px;color:#8b9a7d}.desk-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:20px;margin-top:21px}.panel{background:white;border:1px solid var(--line);border-radius:14px;padding:23px}.panel h3{font-size:14px;font-weight:600;margin:0 0 18px}.panel h3 small{font-size:10px;font-weight:400;color:#9ba38f;float:right}.chart{width:100%;height:188px}.legend{font-size:10px;color:#969e8b;display:flex;gap:18px;margin-bottom:8px}.legend i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:5px}.chart-labels{display:flex;justify-content:space-between;font-size:9px;color:#a0a693;margin:3px 0}.funnel-row{display:flex;justify-content:space-between;font-size:11px;margin:19px 0 8px}.track{height:9px;background:#f1f3eb;border-radius:5px;overflow:hidden}.track>div{height:100%;background:#8d9c77;border-radius:5px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:11px;white-space:nowrap}th{font-weight:400;color:#959c8e;background:#f8f9f5}td,th{padding:15px 10px;border-bottom:1px solid #eef0e8}td button{color:#e47a4e;font-size:11px}.toolbar{display:flex;gap:10px;margin-bottom:20px}.toolbar input{flex:1}.toolbar input,select,.form-input,textarea{border:1px solid #e1e6d9;border-radius:8px;padding:12px;background:#fff;color:var(--ink);outline-color:#9dac8b}.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.content-grid .art-card .art{height:230px}.content-grid .art-card .art svg{width:180px;height:180px}.content-grid .art-card .caption{padding:18px;font-size:14px}.content-grid .art-card small{font-size:11px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.form-input{width:100%}.demo{font-size:10px;color:#a3a898;margin-top:24px}.modal{position:fixed;inset:0;background:#26332255;backdrop-filter:blur(5px);z-index:10;display:grid;place-items:center;padding:20px}.modal[hidden]{display:none}.dialog{background:#fffefb;border-radius:23px;padding:30px;width:440px;max-width:100%;max-height:90vh;overflow:auto;box-shadow:0 20px 80px #14261222}.dialog h2{font-size:22px;font-weight:550}.dialog p{font-size:12px}.dialog .close{float:right;font-size:22px;color:#929c87}.dialog textarea{width:100%;height:180px;line-height:1.8;font-size:12px}.qr-placeholder{width:170px;height:170px;border:1px dashed #b7c2a9;margin:25px auto;background:repeating-linear-gradient(45deg,#f0f3e9,#f0f3e9 7px,#fff 7px,#fff 14px);display:grid;place-items:center;text-align:center;border-radius:15px;color:#66785b;font-size:12px;padding:20px}#toast{position:fixed;bottom:35px;left:50%;transform:translateX(-50%) translateY(20px);background:#344633;color:white;padding:13px 25px;border-radius:10px;box-shadow:0 8px 30px #0002;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:20;max-width:90%;text-align:center}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.empty{padding:50px 15px;text-align:center;color:#8f9b81}.admin-tag{color:#e37c4f;background:#fff0e7}.check-label{display:flex;align-items:start;gap:6px;font-size:10px;color:#88917e;line-height:1.7;margin-top:17px}.design-link{display:inline-block;margin-top:20px;font-size:11px;color:#607256;border-bottom:1px solid #ccd4be;padding-bottom:4px}.loading{padding:60px 10px;text-align:center}.spinner{width:36px;height:36px;border:3px solid #ecefe4;border-top-color:var(--orange);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 20px}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:1500px){.showcase{gap:70px;padding-top:45px}}@media(max-width:1150px){.showcase{grid-template-columns:1fr 405px;max-width:900px;gap:40px}.side-notes{display:none}.intro h1{font-size:36px}.desk{padding:25px}.kpis{gap:10px}.kpi{padding:16px}.content-grid{grid-template-columns:1fr 1fr}}@media(max-width:750px){.topbar{height:72px;padding:0 13px;gap:10px}.brand b{font-size:19px}.brand b span{font-size:6px}.brand-icon{width:34px;height:34px;font-size:28px;line-height:29px}.roles button{padding:9px 8px;font-size:10px}.prototype{display:none}.showcase{display:block;padding:22px 10px}.intro,.side-notes{display:none}.phone{margin:auto;width:100%;max-width:405px}.phone-content{height:calc(100dvh - 250px);min-height:480px}.sidebar{width:65px;padding:20px 5px}.side-caption,.side-store,.side-item em{display:none}.side-item{padding:15px;text-align:center}.side-item span{margin:0}.desk{width:calc(100% - 65px);padding:20px 12px}.desk-header{gap:10px;align-items:start}.desk-header h1{font-size:20px}.desk-header button{padding:10px}.kpis{grid-template-columns:1fr 1fr}.kpi strong{font-size:24px}.desk-grid,.form-grid,.content-grid{grid-template-columns:1fr}.banner{line-height:1.8;gap:10px;padding:12px}.panel{padding:15px}.toolbar{flex-wrap:wrap}.toolbar input{min-width:0;width:100%}.workspace{min-height:calc(100vh - 72px)}}

.dialog{width:min(440px,calc(100vw - 40px));min-width:0}