:root{color-scheme:dark;--bg:#090e18;--panel:#111927;--panel2:#131c2b;--border:#273143;--muted:#7f8ca4;--text:#f1f6ff;--aqua:#5be2c6;--aqua2:#91ffe6;font-family:'Open Sans','Open Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);min-width:320px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.3;cursor:not-allowed}svg{width:20px;height:20px;flex-shrink:0}a{color:inherit;text-decoration:none}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}::selection{background:#4fddca;color:#052421}
body::before{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(ellipse 850px 590px at 58% 35%,rgba(24,65,76,.16),transparent 72%),radial-gradient(ellipse 480px 340px at 2% 0%,rgba(50,65,113,.12),transparent 70%)}
.topbar{height:80px;border-bottom:1px solid #202c3c;background:rgba(11,16,27,.86);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,4.3vw,72px);gap:24px}.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}.brandmark{height:43px;width:43px;background:linear-gradient(145deg,#1a5a61,#102837);color:#76ebd1;border:1px solid #27676a;border-radius:13px;display:grid;place-items:center;box-shadow:inset 0 1px rgba(255,255,255,.1),0 6px 25px rgba(6,190,174,.08)}.brandmark svg{width:30px;height:30px}.brand-word{font:600 22px/1 'Open Sans',sans-serif;letter-spacing:-1.2px;display:flex;align-items:baseline}.brand-word>span{color:var(--aqua)}.brand-word small{font:600 8px/1.1 'Open Sans',sans-serif;letter-spacing:2.3px;color:#758aa3;margin-left:8px}.header-center{display:flex;gap:11px;align-items:center;font-size:12px;letter-spacing:.2px;color:#8491a7}.header-center strong{color:#bfd4db;font-size:11px;font-weight:600}.header-sep{color:#3e5065}.indicator,.live-dot{height:8px;width:8px;background:var(--aqua);border-radius:50%;box-shadow:0 0 0 4px rgba(79,227,196,.09),0 0 18px #3fe9c4;display:inline-block}.header-actions{display:flex;align-items:center;gap:22px}.privacy-tag{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#a5b9cb}.privacy-tag svg{width:16px;height:16px;color:#6fd8c4}.icon-button{height:38px;width:38px;border-radius:11px;border:1px solid #29374a;color:#9fadc2;background:#141e2c;display:grid;place-items:center}.icon-button:hover{background:#202e40;color:#fff}
.main{max-width:1600px;margin:0 auto;padding:39px clamp(22px,4.3vw,72px) 26px}.workspace-header{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:30px}.eyebrow,.control-label,.url-label{font-size:10px;letter-spacing:2px;font-weight:600;color:#7f9eb0}.eyebrow{display:flex;align-items:center;gap:9px;color:#73e2d0;margin-bottom:10px}.eyebrow-bar{height:12px;width:3px;border-radius:4px;background:#58d6c3}.workspace-heading h1{font:600 clamp(30px,3vw,42px)/1.22 'Open Sans',sans-serif;letter-spacing:-2px;margin:0 0 8px}.workspace-heading h1 span{background:linear-gradient(105deg,#59e4c9,#8bc9fc);-webkit-background-clip:text;background-clip:text;color:transparent}.workspace-heading p{margin:0;color:#8e9bb2;font-size:13px}.workspace-header-right{display:flex;align-items:center;gap:9px;color:#8290a5;font-size:11px;white-space:nowrap;margin-bottom:4px}.hint-key{display:grid;place-items:center;height:23px;min-width:25px;padding:0 7px;border:1px solid #314154;background:#182234;border-radius:6px;color:#d4e5f2;font-weight:600}.short-divider{height:12px;width:1px;background:#2b3647;margin:0 7px}
.toolbar{display:flex;align-items:flex-end;gap:28px;background:linear-gradient(150deg,rgba(23,33,48,.95),rgba(16,25,37,.95));border:1px solid #2a3546;border-radius:17px;padding:20px 23px 21px;box-shadow:0 17px 60px rgba(0,0,0,.11);margin-bottom:23px}.url-form{flex:1;min-width:240px}.url-label,.control-label{display:block;margin-bottom:12px;letter-spacing:1.7px}.url-row{height:47px;display:flex;align-items:center;gap:10px;border:1px solid #344256;border-radius:10px;background:#0d1522;padding:5px 6px 5px 13px;transition:border-color .2s,box-shadow .2s}.url-row:focus-within{border-color:#62d6c6;box-shadow:0 0 0 3px rgba(88,225,197,.07)}.url-icon{display:flex;align-items:center;color:#74dcca}.url-icon svg{width:18px;height:18px}#urlInput{min-width:0;flex:1;border:0;background:transparent;outline:none;color:#e2f2ff;font-size:12px;letter-spacing:.1px}#urlInput::placeholder{color:#67768c}.clear-btn{border:0;color:#8195ad;background:transparent;font-size:21px;line-height:1;padding:4px 7px}.clear-btn:hover{color:white}.primary-btn{height:36px;display:flex;align-items:center;justify-content:center;gap:11px;border:0;border-radius:7px;background:linear-gradient(110deg,#67eccd,#61dcc4);font-size:12px;font-weight:600;color:#082f30;padding:0 17px;box-shadow:0 2px 18px rgba(94,230,194,.1);white-space:nowrap}.primary-btn:hover{background:#a0ffe6;box-shadow:0 0 25px rgba(94,230,194,.17)}.primary-btn svg{height:17px;width:17px}.toolbar-divider{align-self:stretch;width:1px;background:#2d3848}.model-picker{width:430px;max-width:46%}.selector-row{display:flex;gap:10px;height:47px}.brand-switch{display:flex;gap:2px;background:#0b1420;border:1px solid #324054;border-radius:10px;padding:5px;flex-shrink:0}.brand-btn{border:0;background:transparent;color:#8c9bb0;padding:0 10px;font-size:12px;font-weight:600;border-radius:7px;display:flex;gap:6px;align-items:center;white-space:nowrap}.brand-btn svg{width:15px;height:15px}.brand-btn.active{background:#26364a;color:#e5faf5;box-shadow:inset 0 0 0 1px #344a59}.brand-btn:not(.active):hover{color:white}.select-wrap{min-width:0;position:relative;flex:1}.select-wrap select{width:100%;height:100%;color:#e5edfa;background:#101b2a;border:1px solid #344256;border-radius:10px;appearance:none;padding:0 33px 0 13px;font-size:12px;font-weight:600;cursor:pointer;outline:none}.select-wrap select option{background:#152031;color:#fff}.select-wrap>svg{position:absolute;width:17px;height:17px;right:11px;top:50%;transform:translateY(-50%);pointer-events:none;color:#8da9be}
.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 342px;gap:22px;align-items:start}.preview-column{min-width:0}.preview-topline{display:flex;align-items:center;justify-content:space-between;padding:0 4px;margin:0 0 13px;font-size:10px;font-weight:600;letter-spacing:1.8px;color:#8c9bb2}.preview-topline span:first-child{display:flex;align-items:center;gap:13px}.live-dot{width:6px;height:6px;box-shadow:0 0 0 3px rgba(85,216,188,.12),0 0 12px #55d9be}
.preview-stage{height:clamp(550px,calc(100svh - 255px),940px);position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;border:1px solid #28384a;border-radius:16px;background:radial-gradient(ellipse 470px 420px at 50% 46%,rgba(47,82,108,.2),transparent 75%),linear-gradient(155deg,#121f2d 0%,#111b29 45%,#0c1826 100%)}.stage-grid{position:absolute;inset:0;z-index:-3;background-image:linear-gradient(rgba(110,148,165,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(110,148,165,.04) 1px,transparent 1px);background-size:35px 35px;mask-image:radial-gradient(ellipse at center,#000 28%,transparent 76%)}.stage-orbit{position:absolute;border:1px solid rgba(91,152,168,.13);border-radius:50%;width:min(90%,700px);aspect-ratio:1;z-index:-2;pointer-events:none}.orbit-b{width:min(70%,520px);border-color:rgba(96,148,166,.1)}.stage-label{position:absolute;font-size:9px;letter-spacing:1.9px;color:#596e83;font-weight:600}.stage-label-top{top:23px;left:22px}.stage-label-bottom{bottom:21px;right:22px}.phone-shadow{position:absolute;height:35px;background:#000;filter:blur(23px);opacity:.5;border-radius:50%;z-index:0;pointer-events:none}
.device-shell{--screen-w:402px;--screen-h:873px;--fit-scale:.7;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--fit-scale));transform-origin:center center;z-index:3;isolation:isolate;background:linear-gradient(135deg,#424a5a 0%,#090e17 13%,#0a0e13 60%,#617080 92%,#1c2532 100%);border:2px solid #667080;box-shadow:0 3px 0 #070a0f,inset 0 0 0 2px #111922,inset 0 0 0 4px rgba(169,198,201,.17),0 25px 68px rgba(0,0,0,.48),-14px 0 34px rgba(0,0,0,.16);transition:none;will-change:transform}.device-shell.modern,.device-shell.samsung-modern{width:calc(var(--screen-w) + 16px);height:calc(var(--screen-h) + 16px);border-radius:53px}.device-shell.modern.landscape,.device-shell.samsung-modern.landscape{border-radius:51px}.device-shell.apple-phone.modern{background:linear-gradient(115deg,#69778c,#101723 12%,#141d27 86%,#8495aa 98%);border-color:#75879a}.device-shell.samsung-phone{border-color:#435563;background:linear-gradient(125deg,#364959,#080e17 14%,#090f18 89%,#5e6a77 97%)}.device-screen{position:absolute;overflow:hidden;box-shadow:inset 0 0 0 1px #06090f;background:#fff;z-index:2}.modern .device-screen,.samsung-modern .device-screen{inset:6px;border:2px solid #090e17;border-radius:44px}.modern.landscape .device-screen,.samsung-modern.landscape .device-screen{border-radius:41px}.screen-surface{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;background:white;border-radius:inherit;color:#192330}.statusbar{height:38px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 31px;font-size:13px;letter-spacing:-.3px;font-weight:600;background:#f9fafc;position:relative;z-index:1}.status-right{display:flex;align-items:center;gap:4px}.status-right svg{width:16px;height:12px}.status-right svg.signal{width:20px}.mini-chrome{height:54px;flex-shrink:0;display:flex;align-items:center;gap:7px;padding:6px 12px;background:#f7f8fb;box-shadow:0 1px 0 #e7ebf1;position:relative;z-index:1}.mini-chrome button{padding:0;border:0;background:transparent;color:#58697c;display:grid;place-items:center;height:36px;width:27px;flex-shrink:0}.mini-chrome button:hover{color:#1a75e2}.mini-chrome button svg{height:20px;width:20px}.chrome-address{min-width:0;flex:1;height:35px;border-radius:17px;display:flex;align-items:center;gap:6px;background:#e8ecf2;padding:0 11px;color:#4e6175;font:600 12px/1 system-ui,sans-serif;cursor:pointer}.chrome-address svg{height:13px;width:13px;flex-shrink:0;color:#4b7b73}.chrome-address svg.unsecure{color:#ce8b49}.chrome-address span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.web-viewport{flex:1;min-height:0;width:100%;overflow:hidden;background:#fff;position:relative}.web-viewport iframe{display:block;width:100%;height:100%;border:none;background:white}.system-bottom{height:25px;flex-shrink:0;background:#fafafa;display:grid;place-items:center}.gesture-line{width:108px;height:4px;background:#20232a;border-radius:5px}.android-nav{display:none;align-items:center;justify-content:space-evenly;width:76%}.android-nav span:nth-child(1){border-left:2px solid #607080;border-bottom:2px solid #607080;transform:rotate(45deg);height:8px;width:8px}.android-nav span:nth-child(2){height:8px;width:8px;border:1.8px solid #607080;border-radius:50%}.android-nav span:nth-child(3){height:8px;width:8px;border:1.8px solid #607080;border-radius:2px}.samsung-phone .gesture-line{display:none}.samsung-phone .android-nav{display:flex}.samsung-phone .statusbar{padding-left:22px;padding-right:22px}
.hardware-island{position:absolute;z-index:6;top:18px;left:50%;transform:translateX(-50%);background:#080a0e;width:110px;height:30px;border-radius:20px;box-shadow:inset 0 0 0 1px #141923;display:flex;align-items:center;justify-content:center;gap:20px}.hardware-island .lens{height:7px;width:7px;border-radius:50%;background:radial-gradient(circle at 65% 30%,#303c65,#05080c 67%);box-shadow:0 0 0 1px #171e2b}.hardware-island .lens-mini{height:3px;width:3px;background:#111a26;border-radius:50%}.modern.landscape .hardware-island{top:50%;left:17px;transform:translateY(-50%) rotate(90deg);width:100px;height:27px}.hardware-speaker,.hardware-camera,.hardware-home{display:none}.side-key{position:absolute;z-index:-1;background:linear-gradient(90deg,#566171,#181e27);border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.4)}.side-key-left{width:5px;height:73px;left:-6px;top:22%;}.side-key-right{width:5px;height:91px;right:-6px;top:29%}.landscape .side-key-left{height:5px;width:73px;left:23%;top:-6px}.landscape .side-key-right{height:5px;width:91px;top:auto;bottom:-6px;right:23%}
.legacy{width:calc(var(--screen-w) + 28px);height:calc(var(--screen-h) + 142px);border-radius:42px;background:linear-gradient(120deg,#656b76 0%,#101419 10%,#06080c 90%,#4c5464)}.legacy .device-screen{left:12px;right:12px;top:69px;bottom:69px;border-radius:3px;border:1px solid #0c1015}.legacy .statusbar{height:24px;padding:0 11px;font-size:11px}.legacy .mini-chrome{height:49px;padding:5px 7px;gap:3px}.legacy .system-bottom{height:11px}.legacy .gesture-line{display:none}.legacy .hardware-speaker,.legacy .hardware-camera,.legacy .hardware-home{display:block}.legacy .hardware-speaker{position:absolute;top:29px;left:50%;transform:translateX(-50%);width:53px;height:5px;border-radius:6px;background:linear-gradient(#171e29,#424d59);box-shadow:inset 0 1px #000}.legacy .hardware-camera{position:absolute;width:8px;height:8px;top:27px;left:calc(50% - 56px);border:2px solid #111923;background:#123047;border-radius:50%}.legacy .hardware-home{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:43px;height:43px;border:2px solid #3f4650;border-radius:50%;background:#0c1017;box-shadow:inset 0 0 0 2px #1d242f}.legacy .hardware-home span{display:none}.legacy .hardware-island{display:none}.legacy.landscape{width:calc(var(--screen-w) + 142px);height:calc(var(--screen-h) + 28px)}.legacy.landscape .device-screen{left:69px;right:69px;top:12px;bottom:12px}.legacy.landscape .hardware-speaker{top:50%;left:30px;transform:translateY(-50%);width:5px;height:53px}.legacy.landscape .hardware-camera{top:calc(50% - 56px);left:29px}.legacy.landscape .hardware-home{bottom:auto;top:50%;left:auto;right:18px;transform:translateY(-50%)}.legacy-square{border-radius:30px}.legacy-square .hardware-home{border-color:#90939e;width:39px;height:39px}.legacy-square .hardware-home span{display:block;position:absolute;inset:10px;border:1px solid #777e89;border-radius:4px}.legacy-square .hardware-speaker{width:45px}
.samsung-modern .hardware-island{top:13px;width:12px;height:12px;left:50%;background:radial-gradient(circle,#1b3550,#010304);box-shadow:inset 0 0 0 2px #10151a}.samsung-modern .hardware-island .lens,.samsung-modern .hardware-island .lens-mini{display:none}.samsung-modern.landscape .hardware-island{left:13px;top:50%;height:12px;width:12px;transform:translateY(-50%)}.samsung-modern.samsung-s10 .hardware-island{left:auto;right:45px;transform:none}.samsung-modern.samsung-s10.landscape .hardware-island{top:42px;right:16px;left:auto}.samsung-phone .statusbar{height:33px}.samsung-phone .mini-chrome{height:53px}.samsung-edge{width:calc(var(--screen-w) + 20px);height:calc(var(--screen-h) + 64px);border-radius:29px}.samsung-edge .device-screen{left:8px;right:8px;top:30px;bottom:30px;border-radius:7px}.samsung-edge .hardware-island{display:none}.samsung-edge .hardware-speaker{display:block;position:absolute;width:55px;height:4px;border-radius:6px;background:#252d3b;left:50%;top:13px;transform:translateX(-50%)}.samsung-edge.landscape{width:calc(var(--screen-w) + 64px);height:calc(var(--screen-h) + 20px)}.samsung-edge.landscape .device-screen{left:30px;right:30px;top:8px;bottom:8px}.samsung-edge.landscape .hardware-speaker{left:13px;top:50%;width:4px;height:55px;transform:translateY(-50%)}
.samsung-legacy{width:calc(var(--screen-w) + 26px);height:calc(var(--screen-h) + 142px);border-radius:34px}.samsung-legacy .device-screen{left:11px;right:11px;top:66px;bottom:66px;border-radius:5px}.samsung-legacy .hardware-island{display:none}.samsung-legacy .hardware-speaker{display:block;position:absolute;width:59px;height:5px;background:#252e3e;border-radius:7px;top:29px;left:50%;transform:translateX(-50%)}.samsung-legacy .hardware-camera{display:block;position:absolute;width:8px;height:8px;background:#153149;border-radius:50%;top:28px;left:calc(50% - 65px)}.samsung-legacy .hardware-home{display:block;position:absolute;bottom:19px;left:50%;transform:translateX(-50%);width:65px;height:22px;background:#111923;border:1px solid #455062;border-radius:12px}.samsung-legacy.samsung-old{border-radius:46px}.samsung-legacy.samsung-old .hardware-home{width:73px}.samsung-legacy .statusbar{height:25px}.samsung-legacy .mini-chrome{height:49px}.samsung-legacy .system-bottom{height:10px}.samsung-legacy.landscape{width:calc(var(--screen-w) + 142px);height:calc(var(--screen-h) + 26px)}.samsung-legacy.landscape .device-screen{left:66px;right:66px;top:11px;bottom:11px}.samsung-legacy.landscape .hardware-speaker{top:50%;left:28px;transform:translateY(-50%);width:5px;height:59px}.samsung-legacy.landscape .hardware-camera{top:calc(50% - 65px);left:28px}.samsung-legacy.landscape .hardware-home{left:auto;right:20px;top:50%;bottom:auto;transform:translateY(-50%);width:22px;height:65px}
.device-shell.landscape .statusbar{height:24px;padding:0 28px;font-size:12px}.device-shell.landscape .mini-chrome{height:46px}.device-shell.landscape .system-bottom{height:17px}.device-shell.landscape .gesture-line{height:3px}.device-shell.landscape .android-nav{width:45%}
.under-preview{height:auto;min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#8495aa;font-size:11px;padding:12px 5px}.under-preview span{display:flex;align-items:center;gap:8px}.under-preview svg{height:14px;width:14px;color:#67d9c3}.under-preview strong{font-size:11px;color:#c7dfed;white-space:nowrap}
.inspector{background:linear-gradient(150deg,#172130,#131c2a);border:1px solid #2c3b4d;border-radius:16px;padding:22px 20px 17px;box-shadow:0 18px 55px rgba(0,0,0,.12)}.inspector-heading{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:600;letter-spacing:2px;color:#7c96aa;margin-bottom:24px}.inspector-heading svg{width:18px;height:18px;color:#8ea3b6}.device-titleline{display:flex;align-items:center;gap:13px;margin-bottom:22px}.device-title-icon{height:45px;width:45px;border-radius:12px;background:linear-gradient(145deg,#294850,#1d3446);border:1px solid #356063;display:grid;place-items:center;color:#66e5cb}.device-title-icon svg{width:24px;height:24px}.device-titleline small{font-size:9px;letter-spacing:1.6px;color:#8ca1b8;font-weight:600}.device-titleline h2{font:600 19px/1.3 'Open Sans',sans-serif;letter-spacing:-.8px;margin:4px 0 0}.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:27px}.spec-box{border:1px solid #2b3c4f;border-radius:10px;background:#121e2b;padding:13px 10px;min-width:0;display:flex;flex-direction:column;gap:7px}.spec-box small{font-size:8px;letter-spacing:1.2px;font-weight:600;color:#829ab0;white-space:nowrap}.spec-box strong{font:600 18px/1.2 'Open Sans',sans-serif;color:#e3f7fd;letter-spacing:-.9px;white-space:nowrap}.spec-box span{font-size:10px;color:#7c8da3}.inspector-section{border-top:1px solid #293747;padding-top:19px;margin-bottom:22px}.section-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.section-top h3{font-size:12px;letter-spacing:.2px;font-weight:600;margin:0}.section-top span{color:#72e1c9;font-size:10px;font-weight:600}.orientation-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;background:#0d1724;border:1px solid #2b3b50;border-radius:10px}.orientation-button{height:39px;display:flex;align-items:center;justify-content:center;gap:8px;background:none;border:1px solid transparent;border-radius:7px;color:#8294ab;font-size:12px;font-weight:600}.orientation-button svg{height:17px;width:17px}.orientation-button.active{background:#253a46;border-color:#3c5d61;color:#b6f1e4;box-shadow:0 2px 10px #0002}.orientation-button:not(.active):hover{color:white}.actions-stack{border:1px solid #29394a;border-radius:10px;overflow:hidden}.action-row{background:#14202e;width:100%;border:0;border-bottom:1px solid #29394a;min-height:47px;padding:9px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#c9d8e6;text-align:left;font-size:11px;font-weight:600}.action-row:last-child{border-bottom:0}.action-row:hover{background:#203042}.action-left{display:flex;align-items:center;gap:10px}.action-icon{height:26px;width:26px;display:grid;place-items:center;border-radius:6px;background:#233548;color:#8ddbcf}.action-icon svg{width:15px;height:15px}.action-label{font-size:10px;color:#7f92a9}.action-chevron{width:14px;height:14px;color:#71869e}.inspector-note{display:flex;gap:9px;background:rgba(73,130,141,.09);border:1px solid #2e4b57;border-radius:10px;padding:12px 11px;margin-top:5px}.inspector-note>svg{width:17px;height:17px;flex-shrink:0;color:#86d2cb;margin-top:1px}.inspector-note p{font-size:10px;line-height:1.7;color:#9fb5c6;margin:0}.inspector-note b,.inspector-note strong{color:#d3e3ee;font-weight:600}.inspector-footer{border-top:1px solid #283747;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:20px;padding-top:17px;font-size:9px;color:#748ba1;letter-spacing:.1px}.little-ok{color:#69e3ca;font-size:10px}.app-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;color:#74859a;font-size:11px;padding-top:24px}.app-footer b{font-weight:600;color:#b8c7d8}.small-muted{color:#667991}.footer-star{color:#66d6bd;margin-left:7px}
.toast{position:fixed;bottom:28px;left:50%;z-index:30;transform:translate(-50%,25px);background:#263c47;color:#dbfff5;border:1px solid #528d87;border-radius:12px;font-size:13px;font-weight:600;padding:13px 19px;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 15px 45px #0008;max-width:calc(100vw - 30px);text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}.help-dialog{color:#e5edf5;background:linear-gradient(140deg,#1c2939,#101a29);border:1px solid #3b5865;border-radius:18px;max-width:530px;width:calc(100% - 30px);padding:24px 27px;box-shadow:0 25px 100px #000a}.help-dialog::backdrop{background:rgba(2,6,12,.78);backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:start;justify-content:space-between}.dialog-head small{font-size:10px;letter-spacing:2px;color:#6ce1c6;font-weight:600}.dialog-head h2{font-size:21px;margin:8px 0 15px;letter-spacing:-.5px}.dialog-close{border:0;background:transparent;color:#aabbd0;font-size:28px}.help-dialog p,.help-dialog li{font-size:13px;line-height:1.7;color:#b6c6d9}.help-dialog b{color:#eefcff}.help-dialog ul{padding-left:18px}.help-dialog li{margin-bottom:8px}.dialog-ok{margin-top:20px;padding:0 20px}
@media(min-width:1700px){.preview-stage{height:780px}}@media(max-width:1240px){.content-grid{grid-template-columns:minmax(0,1fr) 316px}.toolbar{gap:16px}.model-picker{width:410px}.brand-btn{padding:0 7px}.inspector{padding:18px 15px}.spec-box strong{font-size:16px}}@media(max-width:1040px){.header-center{display:none}.toolbar{flex-wrap:wrap}.url-form{flex-basis:100%}.toolbar-divider{display:none}.model-picker{max-width:100%;width:100%}.content-grid{grid-template-columns:minmax(0,1fr) 300px;gap:16px}.preview-stage{height:670px}.workspace-header-right{display:none}.brand-btn{padding:0 13px}}@media(max-width:790px){.topbar{height:66px}.privacy-tag{display:none}.main{padding-top:29px}.workspace-heading h1{font-size:31px}.workspace-heading p{line-height:1.7}.content-grid{grid-template-columns:minmax(0,1fr)}.preview-stage{height:650px}.inspector{display:block}.spec-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.under-preview{flex-wrap:wrap}.inspector-note p{font-size:11px}.inspector-section{margin-bottom:20px}}@media(max-width:560px){.topbar{padding-inline:17px}.brand-word{font-size:19px}.brand-word small{display:none}.brandmark{height:38px;width:38px}.main{padding:27px 13px 22px}.workspace-header{margin-bottom:22px;padding:0 4px}.workspace-heading h1{font-size:30px}.workspace-heading p{font-size:12px}.toolbar{padding:16px 12px;border-radius:13px}.url-label,.control-label{margin-bottom:9px}.selector-row{flex-wrap:wrap;height:auto}.brand-switch{width:100%;height:42px}.brand-btn{flex:1;justify-content:center}.select-wrap{height:44px;flex-basis:100%}.preview-stage{height:600px}.stage-label{font-size:7px}.stage-label-top{top:13px;left:13px}.stage-label-bottom{bottom:12px;right:13px}.preview-topline{letter-spacing:1.2px;font-size:9px}.under-preview{font-size:10px}.under-preview span{align-items:flex-start}.inspector{border-radius:12px}.spec-grid{grid-template-columns:1fr 1fr}.app-footer{flex-wrap:wrap;justify-content:center;text-align:center;line-height:1.6}.brand-switch .brand-btn{font-size:12px}}


/* Smyrna Web / MobiFrame Studio - Beyaz kurumsal tema v1.1 */
:root {
 color-scheme:light;
 --bg:#ffffff; --panel:#ffffff; --panel2:#f8fafc;
 --border:#dce4eb; --muted:#637181; --text:#252525;
 --aqua:#bb0101; --aqua2:#bb0101;
 font-family:'Open Sans',Arial,sans-serif;
}
html,body {background:#ffffff;color:#252525;font-family:'Open Sans',Arial,sans-serif}
button,input,select,textarea,dialog {font-family:'Open Sans',Arial,sans-serif}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible {outline:2px solid #bb0101;outline-offset:2px}
::selection {background:#bb0101;color:#ffffff}
body::before {display:none}
.topbar {background:#fff;backdrop-filter:none;border-bottom:1px solid #e6ebf0;box-shadow:0 1px 12px rgba(4,34,60,.025)}
.brand {gap:16px;min-width:0}
.brand-logo {width:125px;height:auto;max-height:49px;display:block;flex-shrink:0;object-fit:contain;object-position:left center}
.brand-product {border-left:1px solid #dce4eb;padding-left:15px;color:#04223c;font-size:10px;letter-spacing:1.6px;font-weight:600;white-space:nowrap}
.header-center {color:#657283}
.header-center strong {color:#04223c;font-weight:600}
.header-sep {color:#b7c3cc}
.indicator,.live-dot {background:#bb0101;box-shadow:0 0 0 4px rgba(187,1,1,.08)}
.privacy-tag {color:#647484;font-weight:600}
.privacy-tag svg {color:#04223c}
.icon-button {border:1px solid #dce4eb;background:#f8fafc;color:#04223c;border-radius:10px;transition:background .2s,color .2s}
.icon-button:hover {background:#04223c;color:#fff}
.workspace-header {margin-bottom:26px}
.eyebrow,.control-label,.url-label {color:#04223c;font-weight:600}
.eyebrow {color:#bb0101}
.eyebrow-bar {background:#bb0101}
.workspace-heading h1 {font-family:'Open Sans',Arial,sans-serif;font-weight:600;color:#252525;letter-spacing:-1.5px}
.workspace-heading h1 span {background:none;color:#bb0101;-webkit-text-fill-color:#bb0101}
.workspace-heading p {color:#607080}
.workspace-header-right {color:#647181}
.hint-key {background:#f5f7f9;border:1px solid #dce4eb;color:#04223c;border-radius:8px;font-weight:600}
.short-divider {background:#dce4eb}
.toolbar {background:#ffffff;border:1px solid #e1e7ec;border-radius:12px;box-shadow:0 8px 30px rgba(4,34,60,.055)}
.url-row {background:#fff;border:1px solid #dce4eb;border-radius:10px}
.url-row:focus-within {border-color:#bb0101;box-shadow:0 0 0 3px rgba(187,1,1,.08)}
.url-icon {color:#04223c}
#urlInput {color:#252525}
#urlInput::placeholder {color:#89949e}
.clear-btn {color:#728294}
.clear-btn:hover {color:#bb0101}
.primary-btn {background:#bb0101;color:#fff;border-radius:10px;box-shadow:0 4px 12px rgba(187,1,1,.13);font-weight:600}
.primary-btn:hover {background:#9e0000;box-shadow:0 5px 16px rgba(187,1,1,.22)}
.toolbar-divider {background:#dce4eb}
.brand-switch {background:#f3f6f9;border:1px solid #e2e8ee;border-radius:10px}
.brand-btn {color:#556578;border-radius:8px;font-weight:600}
.brand-btn.active {background:#bb0101;color:#fff;box-shadow:0 2px 8px rgba(187,1,1,.15)}
.brand-btn:not(.active):hover {color:#bb0101}
.select-wrap select {background:#fff;color:#252525;border:1px solid #dce4eb;border-radius:10px}
.select-wrap select option {background:#fff;color:#252525}
.select-wrap>svg {color:#04223c}
.preview-topline {font-weight:600;color:#04223c}
.live-dot {box-shadow:0 0 0 3px rgba(187,1,1,.08)}
.preview-stage {border:1px solid #dfe7ee;border-radius:12px;background:radial-gradient(ellipse 450px 380px at 50% 48%,rgba(4,34,60,.055),transparent 75%),linear-gradient(155deg,#f8fafc,#f1f5f8)}
.stage-grid {background-image:linear-gradient(rgba(4,34,60,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(4,34,60,.045) 1px,transparent 1px)}
.stage-orbit {border-color:rgba(4,34,60,.095)}
.orbit-b {border-color:rgba(187,1,1,.075)}
.stage-label {color:#8295a3;font-weight:600}
.phone-shadow {opacity:.28}
.under-preview,.under-preview strong {color:#586d7d;font-weight:600}
.under-preview svg {color:#bb0101}
.inspector {background:#fff;border:1px solid #e1e7ec;border-radius:12px;box-shadow:0 9px 35px rgba(4,34,60,.055)}
.inspector-heading {color:#647487;font-weight:600}
.inspector-heading svg {color:#04223c}
.device-title-icon {background:#f3f7f9;color:#04223c;border:1px solid #e1e9ef;border-radius:10px}
.device-titleline small {color:#7a8998;font-weight:600}
.device-titleline h2 {font-family:'Open Sans',Arial,sans-serif;color:#04223c;font-weight:600;letter-spacing:-.5px}
.spec-box {background:#f8fafc;border:1px solid #e1e8ee;border-radius:10px}
.spec-box small {color:#687b8c;font-weight:600}
.spec-box strong {color:#04223c;font-family:'Open Sans',Arial,sans-serif;font-weight:600;letter-spacing:-.4px}
.spec-box span {color:#6b7c88}
.inspector-section {border-top:1px solid #e3e9ef}
.section-top h3 {color:#252525;font-weight:600}
.section-top span {color:#bb0101;font-weight:600}
.orientation-switch {background:#f4f6f8;border:1px solid #e0e7ee;border-radius:10px}
.orientation-button {border-radius:8px;color:#607080;font-weight:600}
.orientation-button.active {background:#bb0101;border-color:#bb0101;color:#fff;box-shadow:0 2px 8px rgba(187,1,1,.14)}
.orientation-button:not(.active):hover {color:#bb0101}
.actions-stack {border:1px solid #e1e7ed;border-radius:10px}
.action-row {background:#fff;color:#252525;border-bottom:1px solid #e7ecf0;font-weight:600}
.action-row:hover {background:#fff7f7;color:#bb0101}
.action-icon {background:#f6f7f9;color:#04223c;border-radius:8px}
.action-row:hover .action-icon {background:#bb0101;color:#fff}
.action-label,.action-chevron {color:#7c8b99}
.inspector-note {background:#f6f9fb;border:1px solid #e0e8ef;border-radius:10px}
.inspector-note>svg {color:#bb0101}
.inspector-note p {color:#526273}
.inspector-note strong,.inspector-note b {color:#04223c;font-weight:600}
.inspector-footer {border-top:1px solid #e0e7ef;color:#748392}
.little-ok {color:#bb0101}
.app-footer {color:#697987}
.app-footer b {color:#04223c;font-weight:600}
.small-muted {color:#80909d}
.footer-star {color:#bb0101}
.toast {background:#04223c;color:#fff;border:1px solid #24506b;border-radius:10px;box-shadow:0 14px 35px rgba(4,34,60,.20);font-weight:600}
.help-dialog {background:#fff;color:#252525;border:1px solid #e1e8ed;border-radius:12px;box-shadow:0 20px 85px rgba(4,34,60,.18)}
.help-dialog::backdrop {background:rgba(4,34,60,.50)}
.dialog-head small {color:#bb0101;font-weight:600}
.dialog-head h2 {color:#04223c;font-weight:600}
.dialog-close {color:#54697b}
.help-dialog p,.help-dialog li {color:#526371}
.help-dialog b {color:#04223c;font-weight:600}
.dialog-ok {background:#bb0101}
/* Geometry must update synchronously on rotation so fitPhone reads new dimensions. */
.device-shell {transition:none}
@media(max-width:560px) {
 .brand {gap:10px}
 .brand-logo {width:106px;max-height:41px}
 .brand-product {font-size:8px;padding-left:9px;letter-spacing:.9px}
}