.studio-main{background:#f3f8fb;color:#102b36;padding-bottom:35px}.studio-hero{background:linear-gradient(90deg,#082b36e5,#082c36ba 52%,#0b36405c),url('approved/hero-customizer.webp') right center/auto 100% no-repeat,#082c38;min-height:168px;color:white}.studio-head{padding-top:20px;padding-bottom:27px}.studio-head>p{display:inline-block;background:#ffffff29;border-radius:999px;padding:6px 12px;font-size:12px;margin:0 0 10px}.studio-head h1{font-size:39px;letter-spacing:-1.5px;line-height:1.06;margin:0 0 7px;color:#fff}.studio-head>div{font-size:14px;max-width:610px}.studio-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:10px;max-width:1390px;margin:8px auto 0;padding:0 18px}.visual-panel{position:relative;min-width:0;background:linear-gradient(180deg,#061b29,#0c2630);border-radius:15px;padding-bottom:11px;overflow:hidden;box-shadow:0 9px 24px #12263825}.visual-image{height:405px;position:relative;overflow:hidden}.visual-image>img{width:100%;height:100%;object-fit:cover;object-position:center}.preview-badge{position:absolute;top:17px;left:18px;color:#fff;background:#092637c7;border:1px solid #ffffff66;border-radius:11px;padding:8px 12px;font-size:13px;font-weight:700}.snapshot-btn{position:absolute;right:16px;top:15px;border:1px solid #ffffff85;color:#fff;background:#122d398c;border-radius:11px;width:36px;height:35px;display:grid;place-items:center}.studio-prev,.studio-next{position:absolute;top:48%;transform:translateY(-50%);width:39px;height:39px;border-radius:50%;color:white;font-size:27px;border:1px solid #65e9676b;background:#055d41bb}.studio-prev{left:17px}.studio-next{right:17px}.studio-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;padding:0 18px;position:relative;margin-top:-60px;z-index:2}.studio-tabs button{border:1px solid #ffffff2c;background:#203a44d9;color:#fff;border-radius:12px;min-height:65px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px}.studio-tabs button svg{width:19px;height:19px}.studio-tabs button.active{background:#005c42;border-color:#58f763;color:#63ff72;box-shadow:0 0 16px #5aff5280}.visual-note{color:#aec3cc;font-size:11px;line-height:1.5;margin:12px 18px 6px}.advance-link{color:#9cff91;font-size:12px;font-weight:800;margin-left:18px}.studio-controls{background:#fff;min-width:0;border:1px solid #dbe5e9;border-radius:15px;padding:14px 16px;box-shadow:0 6px 25px #06223717}.studio-controls h2{display:flex;align-items:center;gap:9px;font-size:18px;margin:0 0 12px}.studio-controls h2 svg{color:#065b45;width:25px;height:25px}.studio-controls h3{display:flex;align-items:center;gap:7px;color:#0e2a34;font-size:15px;margin:0 0 10px}.studio-controls h3 svg{color:#056f42;width:22px;height:22px}.studio-controls label{display:flex;flex-direction:column;font-size:11px;color:#61717a;gap:5px}.studio-controls select,.studio-controls input:not([type=range]):not([type=color]):not([type=checkbox]){border:1px solid #d6e1e7;border-radius:9px;padding:10px 12px;min-width:0;color:#182d37;background:#fafdfe;font-size:13px}.three-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}.studio-warning{color:#78909a;font-size:10px;margin:9px 0 0}.studio-controls hr{border:0;border-top:1px solid #e5ecf0;margin:13px 0}.control-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}.wrap-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.wrap-grid button{height:72px;background:linear-gradient(135deg,#142630 0%,#55f437 38%,#122632 41%,#55f437 60%,#15232c 65%);border:2px solid #dce9e1;border-radius:8px;font-size:9px;padding-top:46px;color:#122d29;text-shadow:0 1px 5px white;font-weight:700}.wrap-grid button:nth-child(2){background:linear-gradient(125deg,#9ca4a8 20%,#27343a 21%,#8a9ba0 40%,#242c30 41%,#b8c6c9 60%)}.wrap-grid button:nth-child(3){background:linear-gradient(45deg,#283c32 20%,#afb5a9 21%,#454b44 45%,#919e91 46%,#364d39 65%)}.wrap-grid button:nth-child(4){background:linear-gradient(130deg,#1d2428,#4c555c)}.wrap-grid button:nth-child(5){background:repeating-linear-gradient(145deg,#1b2428 0 4px,#424f55 5px 9px)}.wrap-grid button.selected{border-color:#43f53b;box-shadow:0 0 0 2px #36c64a5e}.finish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.finish-grid button{background:#f8fafb;border:1px solid #d8e0e4;min-height:33px;border-radius:9px;font-size:10px;font-weight:700}.finish-grid button.selected{background:#68f640;border-color:#5eef37}.swatches{display:flex;flex-wrap:wrap;align-items:center;gap:9px}.swatches button{width:24px;height:24px;border-radius:50%;border:1px solid #d4dce1;box-shadow:0 1px 4px #0003}.swatches button.selected{outline:3px solid #41ed4e;outline-offset:2px}.control-cols h3{justify-content:flex-start}.gradient-picker{display:flex;gap:10px;align-items:center}.gradient-picker input[type=color]{height:38px;width:90px;border:2px solid #dce8e0;background:transparent;border-radius:10px;padding:2px}.switch{margin-left:auto;display:inline-flex!important}.switch input{accent-color:#50f443}.studio-controls input[type=range]{width:100%;accent-color:#67ee38}.studio-controls output{font-size:12px;color:#0e6e45;font-weight:800}.studio-cost{display:flex;align-items:center;gap:10px;justify-content:space-between}.studio-cost>div{flex:1}.studio-cost strong{font-size:14px}.studio-cost small{display:block;font-size:9px;color:#7d8a90}.budget-input{max-width:90px}.budget-input input{width:90px}.apply-btn{display:flex;width:100%;margin-top:10px}.studio-bottom{max-width:1390px;padding:0 18px;display:grid;grid-template-columns:1.05fr 1fr 1.2fr 1.1fr;gap:12px;margin:20px auto}.studio-bottom article{border:1px solid #d8e4e9;border-radius:16px;background:#fff;padding:17px;box-shadow:0 5px 17px #142a3915;min-width:0}.studio-bottom h3{font-size:18px;letter-spacing:-.5px;margin:0 0 10px}.studio-bottom p{font-size:12px;color:#556c78;line-height:1.5}.summary{background:linear-gradient(130deg,#044e44,#052b38)!important;color:white}.summary h3{color:white}.summary>div>div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #ffffff2e;font-size:11px;gap:10px}.summary>div>div span{color:#d5e6e9}.summary>div>div strong{text-align:right}.studio-saved .btn{font-size:12px}.compare-preview{height:180px;position:relative;overflow:hidden;border-radius:10px;background:#17323e}.compare-preview img{width:100%;height:100%;object-fit:cover}.compare-preview input{position:absolute;left:10%;bottom:5px;width:80%;accent-color:#62fa40}.studio-guides a{display:block;border-bottom:1px solid #e4ecef;padding:13px 0;font-size:12px;font-weight:750;color:#123c36}.studio-more{display:flex;max-width:1390px;margin:0 auto;padding:16px 18px;gap:16px;border:1px solid #dde7ed;border-radius:15px;background:white;align-items:center;flex-wrap:wrap}.studio-more strong{font-size:16px;margin-right:auto}.studio-more a{font-size:12px;color:#065c45;padding:10px 14px;border:1px solid #e0e8e9;border-radius:9px}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:110;border-radius:10px;background:#082b31;color:white;padding:12px 22px;box-shadow:0 10px 30px #0005}.toast[hidden]{display:none}body.dark .studio-main{background:#0b1b25;color:#e9f6f7}body.dark .studio-controls,body.dark .studio-bottom article:not(.summary),body.dark .studio-more{background:#122935;color:#e9f6f7;border-color:#2c4c52}body.dark .studio-controls h3,body.dark .studio-controls h2,body.dark .studio-bottom h3{color:#e9f6f7}
@media(max-width:980px){.studio-grid{grid-template-columns:1fr}.studio-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.studio-head h1{font-size:28px}.studio-grid{padding:0 10px}.visual-image{height:260px}.studio-tabs{padding:0 6px;margin-top:-40px;gap:3px}.studio-tabs button{min-height:58px;font-size:10px}.studio-controls{padding:15px 11px}.three-fields{grid-template-columns:1fr 1fr}.control-cols{grid-template-columns:1fr}.wrap-grid button{height:62px;padding-top:39px}.studio-bottom{grid-template-columns:1fr;padding:0 10px}.studio-more{margin:0 10px}}
.preview-badge{top:5px;left:5px;background:#071e29;min-width:240px;padding:17px 15px;border-radius:10px}
.studio-tabs button{background:#132e39;box-shadow:inset 0 0 0 1px #33535b}