:root{--cyan:#168fc7;--cyan-dark:#0876bb;--magenta:#df0079;--yellow:#ffd81a;--ink:#25272b;--muted:#69727b;--line:#e4e8ed;--soft:#f7f9fb;--white:#fff}*{box-sizing:border-box}html{background:#f5f7f9}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:radial-gradient(circle at 5% 28%,rgba(229,0,125,.06),transparent 20%),radial-gradient(circle at 90% 20%,rgba(22,157,204,.08),transparent 22%),#f7f8fa}.accent-bar{height:7px;display:grid;grid-template-columns:1.1fr 1.6fr 1.05fr .8fr}.accent-bar span:nth-child(1){background:linear-gradient(90deg,#df0079 0 8%,#ffd81a 8% 100%)}.accent-bar span:nth-child(2){background:#1998c9}.accent-bar span:nth-child(3){background:#ffd81a}.accent-bar span:nth-child(4){background:#df0079}.app-shell{min-height:100vh}.topbar{height:126px;padding:20px clamp(32px,4vw,58px);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.86);border-bottom:1px solid var(--line);box-shadow:0 4px 22px rgba(32,57,71,.03)}.brand-logo{width:min(470px,40vw);height:88px;object-fit:contain;object-position:left center}.top-title{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.top-title strong{font-size:23px;letter-spacing:-.03em}.top-title span{font-size:15px;color:#65717e}.main-content{max-width:1500px;margin:0 auto;padding:0 34px 22px}.generator-card{background:rgba(255,255,255,.93);border:1px solid #e4e8ec;border-radius:0 0 20px 20px;box-shadow:0 18px 52px rgba(34,57,75,.06);overflow:hidden}.tabs{height:64px;display:flex;border-bottom:1px solid var(--line);padding:0 0 0 0;gap:0;background:rgba(255,255,255,.7)}.tab{width:340px;max-width:50%;border:0;border-right:1px solid var(--line);background:#f9fafb;padding:0 22px;font-weight:850;letter-spacing:.02em;font-size:14px;color:#525b65;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:.18s}.tab.active{background:linear-gradient(90deg,#1f94cc,#167fc0);color:#fff}.tab-icon{font-size:21px;line-height:1}.generator-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(600px,1fr)}.panel{padding:28px 26px}.controls-panel{border-right:1px solid var(--line);background:#fff}.tool-panel{display:none}.tool-panel.active{display:block}.panel-heading{margin-bottom:19px}.panel-heading.with-icon{display:flex;align-items:center;gap:14px}.heading-icon{font-size:32px;color:#168fc7;line-height:1}.panel-heading h2,.preview-top h2{margin:0;font-size:21px;letter-spacing:-.025em}.panel-heading p{margin:5px 0 0;color:var(--muted);font-size:13px}.field-label{display:block;font-size:12.5px;font-weight:800;margin:14px 0 7px;color:#333940}.field-label.no-margin{margin:0}.text-input,select{width:100%;border:1px solid #dbe2e7;background:#fff;border-radius:10px;padding:12px 13px;font:inherit;color:#31363d;outline:none;transition:.18s;box-shadow:0 1px 2px rgba(32,55,70,.02)}.text-input:focus,select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(22,157,204,.09)}textarea.text-input{resize:vertical;min-height:72px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.color-grid{margin-top:1px}.color-control{height:44px;border:1px solid #dbe2e7;border-radius:9px;display:flex;align-items:center;padding:5px 11px;gap:10px;background:#fff}.color-control input{width:25px;height:25px;padding:0;border:1px solid #cfd7dc;background:none;border-radius:4px;overflow:hidden;cursor:pointer}.color-control span{font-size:13px;color:#4c5660;font-weight:700;flex:1}.color-control b{font-size:16px;color:#5f6871;font-weight:500}.toggle-row{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:18px}.toggle-row p{margin:4px 0 0;color:#737e88;font-size:12px}.switch{display:inline-flex;align-items:center;cursor:pointer;flex:0 0 auto}.switch input{display:none}.switch span{width:44px;height:25px;border-radius:99px;background:#cfd7dd;position:relative;transition:.2s}.switch span:after{content:"";width:19px;height:19px;background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;transition:.2s;box-shadow:0 1px 4px rgba(0,0,0,.2)}.switch input:checked+span{background:linear-gradient(90deg,#168fc7,#239bdb)}.switch input:checked+span:after{left:22px}.icon-picker{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}.icon-choice{min-height:88px;border:1px solid #dfe5e9;border-radius:8px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:7px 4px;color:#283039;cursor:pointer;font:inherit;transition:.15s}.icon-choice:hover,.icon-choice.active{border-color:#168fc7;background:#f6fbfe;box-shadow:0 0 0 1px rgba(22,143,199,.08)}.icon-choice img{width:38px;height:38px;object-fit:contain}.icon-choice>span{font-size:27px;line-height:1}.icon-choice small{font-size:10px;line-height:1.15;text-align:center;color:#59636d}.upload-choice{cursor:pointer}.upload-choice input{display:none}.slider-head{display:flex;align-items:center;gap:8px;margin-top:13px}.slider-head .field-label{margin:0;flex:1}.slider-head output{width:88px;border:1px solid #dbe2e7;border-radius:9px;padding:9px 10px;text-align:center;font-size:13px}.slider-head>span{margin-left:-32px;font-size:12px;color:#65707a;pointer-events:none}input[type=range]{width:calc(100% - 104px);height:5px;margin:16px 0 4px;accent-color:#168fc7;cursor:pointer}.form-tip{font-size:11px;color:#7a848c;margin:8px 0 0}.button-row{display:grid;grid-template-columns:32% 1fr;gap:12px;margin-top:17px}.primary-btn,.reset-btn{border-radius:9px;padding:15px 18px;font-weight:850;font-size:14px;cursor:pointer}.primary-btn{border:0;background:linear-gradient(135deg,#218fc8,#126dc2);color:#fff;box-shadow:0 10px 24px rgba(22,120,190,.18)}.primary-btn:hover{filter:brightness(1.03);transform:translateY(-1px)}.primary-btn span{margin-left:6px;font-size:17px}.reset-btn{border:1.5px solid #168fc7;background:#fff;color:#1a6fa8}.reset-btn span{margin-left:8px}.switch-field{display:flex;flex-direction:column}.switch.boxed{height:44px;border:1px solid #dbe2e7;border-radius:9px;padding:0 11px;justify-content:flex-end}.hint{font-size:11px;color:#8a9297;margin:11px 0 0}.preview-panel{background:linear-gradient(145deg,#fbfdfe,#f6f8fa)}.preview-top{display:flex;align-items:flex-start;justify-content:space-between}.preview-label{display:block;color:#d80b70;font-size:10px;font-weight:900;letter-spacing:.14em;margin-bottom:6px}.status{font-size:12px;font-weight:750;color:#526067;background:#fff;border:1px solid var(--line);padding:8px 13px;border-radius:99px}.status i{display:inline-block;width:8px;height:8px;background:#57c978;border-radius:50%;margin-right:5px}.preview-stage{min-height:470px;border:1px solid #e1e7eb;border-radius:17px;background:#fff;margin:20px auto 17px;display:flex;align-items:center;justify-content:center;padding:28px;overflow:auto;box-shadow:0 9px 24px rgba(35,60,75,.03);max-width:500px}.preview-stage canvas{max-width:100%;height:auto;display:block}.preview-stage svg{max-width:100%;height:auto;display:none}.preview-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}.secondary-btn{border:1px solid #d8e0e5;background:#fff;border-radius:9px;padding:13px;font-weight:850;color:#2f3942;cursor:pointer;font-size:14px}.secondary-btn span{color:#168fc7;margin-right:8px;font-size:18px}.secondary-btn:hover{border-color:#168fc7;color:#168fc7}.tips{margin-top:18px;border:1px solid #c8e0f2;background:#f3f9fd;border-radius:9px;padding:14px 17px;display:flex;gap:13px;color:#53616d}.tips-icon{width:27px;height:27px;border:2px solid #168fc7;color:#168fc7;border-radius:50%;display:grid;place-items:center;font-weight:800;flex:0 0 auto}.tips b{font-size:13px;color:#168fc7}.tips p{font-size:12px;margin:4px 0 0;line-height:1.45}.tips p+p{margin-top:2px}footer{text-align:center;padding:20px;font-size:13px;color:#6d7780}@media(max-width:1120px){.generator-layout{grid-template-columns:1fr}.controls-panel{border-right:0;border-bottom:1px solid var(--line)}.preview-stage{max-width:540px}.brand-logo{width:410px}.top-title{display:none}}@media(max-width:720px){.accent-bar{height:5px}.topbar{height:88px;padding:12px 18px}.brand-logo{width:280px;max-width:100%;height:60px}.main-content{padding:0 12px 12px}.tabs{height:56px}.tab{font-size:11px;padding:0 8px}.generator-layout{display:block}.panel{padding:22px 18px}.field-grid{grid-template-columns:1fr;gap:0}.icon-picker{grid-template-columns:repeat(4,1fr)}.preview-stage{min-height:360px;padding:18px}.button-row{grid-template-columns:1fr}.preview-actions{grid-template-columns:1fr 1fr}}@media(max-width:420px){.icon-picker{grid-template-columns:repeat(3,1fr)}.preview-actions{grid-template-columns:1fr}.status{font-size:10px}.panel-heading h2,.preview-top h2{font-size:19px}}