:root{--bg:#09131d;--panel:#111f2a;--p2:#172a37;--line:#304454;--text:#eef8ff;--muted:#a8becb;--accent:#bafa77;--second:#5ee2d2;--black:#07121b}*{box-sizing:border-box}html{color-scheme:dark;scroll-behavior:smooth}body{margin:0;color:var(--text);background:radial-gradient(circle at 20% -10%,#1b4056,transparent 50%),#09131d;font:16px/1.5 system-ui,-apple-system,'Segoe UI',Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0 0 12px}h1{font-size:clamp(2rem,4vw,3.6rem);line-height:1.08;letter-spacing:-.045em}h2{font-size:clamp(1.35rem,2.7vw,2rem)}h3{font-size:1.05rem}p{color:var(--muted)}.demo-header{min-height:72px;padding:12px max(20px,calc((100vw - 1240px)/2));display:flex;gap:18px;align-items:center;justify-content:space-between;background:#091723ed;backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:80}.demo-logo{font-size:1.3rem;font-weight:900;letter-spacing:-.04em}.demo-logo span{color:var(--accent)}.demo-back{font-size:.84rem;color:#c0dfef}.demo-back:hover{color:var(--accent)}.demo-mode,.kicker{font-size:.7rem;color:var(--accent);font-weight:800;letter-spacing:.11em}.demo-main{max-width:1240px;margin:auto;padding:40px 20px 60px}.demo-intro{max-width:950px;margin-bottom:28px}.demo-intro h1{margin:9px 0 12px}.demo-intro>p{font-size:1.05rem;max-width:760px}.legal-note{font-size:.79rem;line-height:1.5;color:#bad0dc;background:#122b38;border:1px solid #32576a;padding:11px 16px;border-radius:10px;margin-top:20px}.app-shell{min-height:450px;border:1px solid #416078;border-radius:22px;background:#0b1723;overflow:hidden;box-shadow:0 25px 85px #0008}.demo-outro{display:flex;gap:20px;justify-content:space-between;padding:32px 0}.demo-outro a{color:var(--accent);font-weight:750}.demo-footer{text-align:center;color:#91aebe;padding:26px;border-top:1px solid var(--line);font-size:.8rem}.demo-footer a{margin-left:12px;color:#c7e88c}.app-top{padding:23px 25px;border-bottom:1px solid #294559;background:linear-gradient(120deg,#123249,#101d2b);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.app-top h2{margin:3px 0 0;font-size:1.65rem}.app-top small{color:#9fc6d6}.app-pill{padding:8px 13px;border-radius:30px;background:#123d36;border:1px solid #286b57;color:#aaffce;font-size:.73rem;font-weight:800}.app-grid{padding:24px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}.app-grid.single{grid-template-columns:1fr}.pane{border:1px solid #365265;background:#112330;border-radius:16px;padding:20px;min-width:0}.pane h3{margin:0 0 18px;font-size:1.15rem}.pane p{font-size:.89rem}.item-list{display:grid;gap:10px}.product{display:flex;align-items:center;gap:16px;padding:13px;background:#122b39;border:1px solid #345466;border-radius:14px}.product .product-art{height:60px;width:70px;display:grid;place-items:center;font-size:2rem;border-radius:12px;background:linear-gradient(135deg,#31566c,#152c42);flex-shrink:0}.product .details{flex:1;min-width:0}.product strong{display:block}.product small{color:#acc7d5}.product .price{font-weight:800;color:#d1ff93;white-space:nowrap}.button,.button-alt,.seg-btn{border:0;background:var(--accent);color:#0a1a23;font-weight:800;border-radius:10px;padding:12px 16px;transition:background .2s;min-height:42px}.button:hover{background:#dfffba}.button-alt,.seg-btn{border:1px solid #436980;background:#1a394c;color:#eff9ff}.button-alt:hover,.seg-btn:hover{border-color:#9cf1e7}.button:focus-visible,.button-alt:focus-visible,.seg-btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #e9ffaf;outline-offset:2px}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.seg-btn.active{border-color:#bafa77;color:#bafa77;background:#183b3e}.field{display:grid;gap:7px;font-size:.87rem;color:#c2dce7}.field input,.field select,.field textarea,.input{display:block;width:100%;padding:12px 13px;border:1px solid #426176;background:#081b2b;color:#fff;border-radius:10px;min-width:0}.field textarea{min-height:145px;resize:vertical}.form-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field.full{grid-column:1/-1}.stack{display:grid;gap:14px}.summary{display:grid;gap:12px}.sumrow{display:flex;gap:12px;justify-content:space-between;border-bottom:1px solid #30485b;padding-bottom:12px}.sumrow strong{color:#fff}.sum-total{font-size:1.5rem;font-weight:850;color:var(--accent)}.status-note{padding:13px 15px;border:1px solid #46748b;background:#102d3f;border-radius:10px;font-size:.88rem;color:#cbe7ef;white-space:pre-wrap;min-height:47px}.note-good{background:#123c2e;border-color:#387855;color:#c4ffdf}.note-bad{background:#402523;border-color:#a45d4a;color:#ffded5}.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}.metric{background:#0a1b29;border:1px solid #2c5165;border-radius:13px;padding:16px}.metric small{display:block;color:#a6c9d4;font-size:.75rem}.metric strong{display:block;color:#eafffb;font-size:1.5rem;margin-top:6px;font-variant-numeric:tabular-nums}.metric em{display:block;font-style:normal;color:#94bac7;font-size:.72rem}.plot{background:linear-gradient(180deg,#082132,#0a1929);border:1px solid #335469;border-radius:12px;padding:10px}.plot svg{width:100%;height:170px;display:block}.plot text{fill:#8cafbd;font-size:11px}.plot line{stroke:#315169}.plot path{fill:none;stroke:#76edca;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}.event-log{height:155px;overflow:auto;background:#07151d;border:1px solid #315168;border-radius:10px;padding:11px;color:#afffc9;font:12px/1.65 ui-monospace,monospace;white-space:pre-wrap}.range-line{display:grid;grid-template-columns:1fr 1.3fr 70px;gap:12px;align-items:center;margin:15px 0}.range-line input{accent-color:#bafa77;width:100%}.range-line output{font-weight:800;text-align:right;color:var(--accent)}.status-chip{font-size:.8rem;display:inline-flex;gap:8px;align-items:center;background:#284b4a;border:1px solid #3e756b;border-radius:30px;padding:7px 12px;color:#c1ffe4}.status-chip.warning{background:#543329;border-color:#ae6954;color:#fff0cc}.phone-shell{width:min(100%,380px);margin:25px auto;border:10px solid #06111e;border-radius:44px;padding:19px;background:linear-gradient(165deg,#122d42,#0b192d);box-shadow:0 30px 95px #000b;min-height:580px}.phone-top{display:flex;justify-content:space-between;align-items:center;color:#aed4e2;font-size:12px;margin-bottom:27px}.phone-tabs{display:flex;gap:8px;margin:20px 0}.phone-tabs button{font-size:.8rem;padding:10px 12px;flex:1}.phone-card{background:#143046;border:1px solid #41657a;border-radius:17px;padding:17px;margin-bottom:12px}.phone-card h3{margin:0 0 9px}.phone-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.switch{height:26px;width:48px;background:#496172;border:0;border-radius:26px;padding:3px;display:flex;align-items:center;justify-content:flex-start}.switch.on{justify-content:flex-end;background:#bafa77}.switch:after{content:'';height:20px;width:20px;background:#fff;border-radius:50%}.table-wrap{width:100%;overflow:auto}table{border-collapse:collapse;width:100%;min-width:450px;font-size:.85rem}th,td{padding:11px;border-bottom:1px solid #345264;text-align:left}th{background:#17384a;color:#dff5ff}td{color:#c9e0ea}.file-zone{border:2px dashed #4b7790;border-radius:13px;text-align:center;padding:22px;background:#102b3c}.file-zone input{max-width:100%;width:100%}.empty{padding:25px;text-align:center;color:#a8c0cb}.badge{display:inline-block;font-size:.69rem;border-radius:20px;padding:5px 9px;background:#254454;color:#c9f3ff;margin-right:5px}hr{border:0;border-top:1px solid #345064;margin:18px 0}.no-items{padding:16px;color:#afc7d3}.service-intro{background:linear-gradient(135deg,#1a3e49,#0b2839);border:1px solid #32586b;border-radius:16px;padding:21px;margin-bottom:17px}.service-intro h3{font-size:1.45rem}.progress{height:8px;border-radius:8px;background:#1b3f50;overflow:hidden;margin:12px 0}.progress>span{height:100%;display:block;background:#c0fa77;transition:width .2s}@media(max-width:800px){.app-grid{grid-template-columns:1fr}.demo-mode{display:none}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-main{padding-top:25px}}@media(max-width:520px){.app-grid{padding:12px;gap:12px}.app-top{padding:18px}.pane{padding:15px}.metric-grid,.form-fields{grid-template-columns:1fr}.product{flex-wrap:wrap}.product .details{flex:1}.product .price{min-width:80px}.demo-header{padding:10px 15px}.demo-back{font-size:.72rem}.demo-main{padding:24px 13px}.range-line{grid-template-columns:1fr;gap:5px}.range-line output{text-align:left}.demo-outro{display:grid}}
/* Самостоятельные визуальные стили для шести веб-проектов */
body[data-theme^="web-"]{--light:1}
body[data-theme="web-coffee"]{background:#e9ddce;color:#372b24;--accent:#bc7950;--muted:#806f61}
body[data-theme="web-coffee"] .demo-header{background:#fff9f0;color:#4b3225;border-color:#d9bda5}body[data-theme="web-coffee"] .demo-logo span,body[data-theme="web-coffee"] .demo-back{color:#a65c3b}body[data-theme="web-coffee"] .demo-mode{color:#815537}body[data-theme="web-coffee"] .demo-intro p,body[data-theme="web-coffee"] .demo-footer{color:#796452}body[data-theme="web-coffee"] .legal-note{background:#faefe1;color:#684a36;border-color:#d2af8e}
body[data-theme="web-coffee"] .app-shell{background:#fff9f2;color:#382920;border-color:#d5b79b}body[data-theme="web-coffee"] .app-top{background:radial-gradient(circle at 80% 40%,#cf9868,transparent 32%),linear-gradient(135deg,#412c22,#825036);padding:50px 36px;min-height:240px}body[data-theme="web-coffee"] .app-top h2{font:800 clamp(2.6rem,5.6vw,4rem)/1.1 Georgia,serif;color:#fff4e5}body[data-theme="web-coffee"] .app-top small{color:#edc9a5}body[data-theme="web-coffee"] .pane{background:#fffaf5;border-color:#dfcbb9;color:#403126}body[data-theme="web-coffee"] .pane h3{font-family:Georgia,serif;font-size:1.36rem}body[data-theme="web-coffee"] .service-intro{background:#f5eadd;border-color:#dcc3aa}body[data-theme="web-coffee"] .service-intro p,body[data-theme="web-coffee"] .details small{color:#866e5d}body[data-theme="web-coffee"] .product{background:#fffbf5;border-color:#e1cdbb}body[data-theme="web-coffee"] .product-art{background:#f5dcc3}body[data-theme="web-coffee"] .product .price,body[data-theme="web-coffee"] .sum-total{color:#975a31}body[data-theme="web-coffee"] .button{background:#a8633c;color:#fff}body[data-theme="web-coffee"] .button-alt,body[data-theme="web-coffee"] .seg-btn{background:#f2e5d8;color:#614636;border-color:#d3af93}body[data-theme="web-coffee"] .seg-btn.active{background:#9f5d3a;color:#fff}body[data-theme="web-coffee"] .sumrow{border-color:#e2cbbb}body[data-theme="web-coffee"] .sumrow strong{color:#563522}body[data-theme="web-coffee"] .status-note{background:#ecf5e7;border-color:#a9c392;color:#49603b}body[data-theme="web-coffee"] .badge{background:#ecddcc;color:#81553b}
body[data-theme="web-booking"]{background:#edf4f2;color:#254e48;--accent:#27ae8c;--muted:#668782}body[data-theme="web-booking"] .demo-header{background:#f8fffc;color:#235a4c}body[data-theme="web-booking"] .app-shell{background:#f8fdfb;border-color:#8dbbb0;color:#214a41}body[data-theme="web-booking"] .app-top{background:linear-gradient(130deg,#1b6b58,#299f89);padding:50px 35px;min-height:230px}body[data-theme="web-booking"] .app-top h2{font-size:clamp(2.3rem,4vw,3.5rem);color:#fff}body[data-theme="web-booking"] .pane{background:white;color:#28554b;border-color:#c4ded4}body[data-theme="web-booking"] .service-intro{background:#e7f7ef;border-color:#acd2bc}body[data-theme="web-booking"] .phone-card{background:#f0faf6;color:#27564b;border-color:#b5d7c9}body[data-theme="web-booking"] .phone-card p,body[data-theme="web-booking"] .pane p{color:#4e8171}body[data-theme="web-booking"] .button{background:#169479;color:white}body[data-theme="web-booking"] .button-alt{background:#e6f5ef;color:#235e50;border-color:#a3d3c6}body[data-theme="web-booking"] .status-note{background:#e5f5ee;color:#22674f;border-color:#a6cdbd}body[data-theme="web-booking"] .field{color:#315e52}body[data-theme="web-booking"] .field input,body[data-theme="web-booking"] .field select{background:#fff;color:#294e47;border-color:#92beb1}
body[data-theme="web-catalog"]{background:#e8f1fa;color:#142e47;--accent:#3976d2;--muted:#617a8f}body[data-theme="web-catalog"] .demo-header{background:#f8fbff;color:#14324c}body[data-theme="web-catalog"] .app-shell{background:#f8fbff;color:#1a3856;border-color:#b9ccdc}body[data-theme="web-catalog"] .app-top{background:linear-gradient(110deg,#124178,#367dcc);padding:50px 36px;min-height:230px}body[data-theme="web-catalog"] .app-top h2{font-size:clamp(2.5rem,5vw,4rem);color:white}body[data-theme="web-catalog"] .pane{background:#fff;border-color:#dae5ed;color:#1e405d}body[data-theme="web-catalog"] .service-intro{background:#eff6fe;border-color:#cddff2}body[data-theme="web-catalog"] .product{background:white;border-color:#d9e4ed}body[data-theme="web-catalog"] .product-art{background:#e4f1fe}body[data-theme="web-catalog"] .details small{color:#6f879c}body[data-theme="web-catalog"] .product .price,body[data-theme="web-catalog"] .sum-total{color:#1763bf}body[data-theme="web-catalog"] .button{background:#256cca;color:white}body[data-theme="web-catalog"] .button-alt,body[data-theme="web-catalog"] .seg-btn{background:#f2f7fc;color:#2c5d82;border-color:#c4d8e8}body[data-theme="web-catalog"] .seg-btn.active{background:#256cca;color:white}body[data-theme="web-catalog"] .sumrow{border-color:#dbe7f0}body[data-theme="web-catalog"] .sumrow strong{color:#275070}body[data-theme="web-catalog"] .status-note{background:#eaf6ff;color:#226089}body[data-theme="web-catalog"] .field{color:#476d86}body[data-theme="web-catalog"] .field input{background:white;color:#1f405f;border-color:#b2cbdc}body[data-theme="web-catalog"] .badge{background:#e1edf9;color:#296aaf}
body[data-theme="web-windows"],body[data-theme="web-engineering"],body[data-theme="web-landscape"]{background:#102333}
body[data-theme="web-windows"] .app-top{padding:54px 36px;min-height:230px;background:linear-gradient(120deg,#154971,#5a9abd);border-bottom:5px solid #77d4ee}body[data-theme="web-windows"] .app-top h2{font-size:3rem}
body[data-theme="web-engineering"] .app-top{padding:54px 36px;min-height:230px;background:linear-gradient(120deg,#162536,#3b536b);border-bottom:5px solid #fbb552}body[data-theme="web-engineering"] .app-top h2{font-size:3rem}body[data-theme="web-engineering"] .service-intro{background:#303848}body[data-theme="web-engineering"] .button{background:#ffc072}
body[data-theme="web-landscape"]{background:#e9f0e4;color:#2b412f;--accent:#789d49}body[data-theme="web-landscape"] .demo-header{background:#fcfff5;color:#34503b}body[data-theme="web-landscape"] .app-shell{background:#fcfff7;color:#314834;border-color:#bccdb0}body[data-theme="web-landscape"] .app-top{padding:54px 36px;min-height:230px;background:linear-gradient(120deg,#264b30,#649d5b);border-bottom:5px solid #bddc9b}body[data-theme="web-landscape"] .app-top h2{font:800 clamp(2.1rem,4vw,3.4rem) Georgia,serif;color:#f9fff7}body[data-theme="web-landscape"] .pane{background:#fff;border-color:#cbddc0;color:#314b32}body[data-theme="web-landscape"] .service-intro{background:#edf6e8;border-color:#cadfbb}body[data-theme="web-landscape"] .button{background:#56884a;color:white}body[data-theme="web-landscape"] .button-alt{background:#f1f8ed;color:#3b673b;border-color:#b2cc9f}body[data-theme="web-landscape"] .field{color:#3b5c3b}body[data-theme="web-landscape"] .field input,body[data-theme="web-landscape"] .field select,body[data-theme="web-landscape"] .field textarea{background:white;color:#325337;border-color:#a9c99d}body[data-theme="web-landscape"] .sumrow{border-color:#d4e5cd}body[data-theme="web-landscape"] .sumrow strong,body[data-theme="web-landscape"] .sum-total{color:#347044}body[data-theme="web-landscape"] .status-note{background:#e9f4e3;color:#34683c;border-color:#bcd1b2}
@media(max-width:550px){body[data-theme^="web-"] .app-top{min-height:180px;padding:28px 18px}body[data-theme^="web-"] .app-top h2{font-size:clamp(1.9rem,7vw,2.6rem)}}