/* Official EDAƎ portal palette. Shared by MirrorDesk and MobileDesk. */
:root{color-scheme:dark;--eda-bg:#15161b;--eda-nav:#18191f;--eda-surface:#22232c;--eda-surface-raised:#25252e;--eda-field:#202129;--eda-line:#373440;--eda-text:#edf2ff;--eda-muted:#b4b1c1;--eda-cyan:#12d8ef;--eda-blue:#439cff;--eda-violet:#a458ee;--eda-magenta:#ee20d7;--eda-primary:linear-gradient(110deg,#4b4ab3,#8040a8);--eda-primary-hover:linear-gradient(110deg,#5958c7,#934abd);--eda-primary-line:#a58ada;--ink:var(--eda-text);--muted:var(--eda-muted);--line:var(--eda-line);--paper:var(--eda-surface);--bg:var(--eda-bg);--accent:#bca2ff;--accent-light:#382c4e;--nav:var(--eda-nav);--mint:#bca2ff}
body{background:radial-gradient(ellipse at 20% 25%,#12d8ef0c,transparent 50%),radial-gradient(ellipse at 80% 45%,#ee20d70b,transparent 50%),var(--eda-bg);color:var(--eda-text)}
button,input,select,textarea{accent-color:var(--eda-violet)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline-color:var(--eda-cyan)}
button.primary,button.primary:hover:not(:disabled),button.primary:active{background:var(--eda-primary);border-color:var(--eda-primary-line);color:#fff}
button.primary:hover:not(:disabled){background:var(--eda-primary-hover)}

.landing header{border-color:var(--eda-line)}
.brand small,nav a,.lead,.capabilities,.small-note,.file-meta,.download small,.note,.section-heading>p,.steps p,.steps small,.trust-note p,footer,.pair-note,#hostLinkHint,#hostPanel .desktop-intro p,#hostPanel .version,#hostPanel .message,#hostPanel .pairing-card p,#hostPanel .security-note{color:var(--eda-muted)}
.eyebrow,.number,.steps a,.trust-note>a,.trust-note>span{color:var(--eda-cyan)}
h1 em{background:linear-gradient(100deg,#2ce1ef,#70b4ff 30%,#bb88ff 65%,#f65ce2);background-clip:text;-webkit-background-clip:text;color:transparent}
.nav-action{background:#382c4e;border-color:#68507d;color:var(--eda-text)}
.connect-card{background:linear-gradient(145deg,#25252e,#1d1e25);border-color:var(--eda-line)}
.card-topline .eyebrow{color:var(--eda-muted)}.secure{background:#30273d;border-color:#574469;color:#d6c8ee}
button{background:#24252e;border-color:#403b4e;color:var(--eda-text)}button:hover:not(:disabled){background:#34303f;border-color:#8a65b0}
input:not([type=checkbox]),select,textarea{background:var(--eda-field);border-color:#3a3745;color:var(--eda-text)}input::placeholder{color:#aaa5b8}input:focus,select:focus{border-color:var(--eda-violet)}
.download,.download.android{background:var(--eda-primary);border-color:var(--eda-primary-line);color:#fff}.download:hover,.download.android:hover{background:var(--eda-primary-hover)}.download small,.download .file-meta{color:#e4dcee}.download svg{stroke:var(--eda-cyan)}
#hubungkan .setup-tabs{background:var(--eda-nav);border-color:var(--eda-line)}#hubungkan .setup-tabs button{color:var(--eda-muted)}#hubungkan .setup-tabs button[aria-selected=true]{background:var(--eda-primary);border-color:var(--eda-primary-line);color:#fff}#hubungkan .setup-tabs button:hover:not([aria-selected=true]){background:#34303f;color:#fff}
#hostPanel .pairing-card,.server-address{background:var(--eda-field);border-color:#51435e}#hostPanel .pairing-card strong{color:var(--eda-cyan)}#hostPanel .security-note,.guide,.steps article,footer{border-color:var(--eda-line)}
.monitor{border-color:#9b78b8;background:#191a22}.monitor:after{border-color:#9b78b8}.monitor span{background:#534072}.monitor span:first-child{background:#4b4ab3}.phone{border-color:#9b78b8;background:#191a22}.phone span{background:linear-gradient(140deg,#4b4ab3,#8040a8)}.link-line{color:var(--eda-cyan)}
.trust-note{background:#30273d55;border-color:#574469}.trust-note h2{color:var(--eda-text)}
#gear{background:var(--eda-surface);border-color:#68507d;color:var(--eda-cyan)}#gear:hover{background:#3b304b}
#settings,#privacy{background:var(--eda-surface);color:var(--eda-text);border-color:#51435e}#settings .heading,.settings-footer{border-color:var(--eda-line)}#settings h3,#settings label{color:var(--eda-text)}#settings p,#privacy p{color:var(--eda-muted)}
#enableAudio{background:var(--eda-primary);border-color:var(--eda-primary-line);color:#fff}
#desktopControls{background:#22232cee;border-color:#51435e;color:var(--eda-text)}#desktopControls button{background:#302c3b;border-color:#4a4259;color:#dcd4ec}#desktopControls button:hover{background:#49385c;border-color:#a37fc6}
#video:focus-visible{outline-color:var(--eda-cyan)}
.scan-qr-button{background:#382c4e;border-color:#68507d;color:var(--eda-text)}.scan-qr-button:hover{background:#49385c;border-color:#a37fc6}
input[type=range],#sound{accent-color:var(--eda-violet)}output{color:var(--eda-cyan)}#fit,#reset{background:#302c3b;border-color:#4a4259;color:var(--eda-text)}.sharing #gear{background:var(--eda-surface);border-color:#68507d;color:var(--eda-cyan)}
#qrScanner{background:#191a20;border-color:var(--eda-line);color:var(--eda-text)}#qrScanner .qr-icon,#qrScanner .qr-switch{background:#302c3bbb;border-color:#51435e;color:var(--eda-text)}#qrScanner .qr-private{background:#30273dbb;border-color:#574469;color:var(--eda-text)}#qrScanner .qr-lens-row select{background:var(--eda-field);border-color:#51435e;color:var(--eda-text)}#qrScanner .qr-lens-row label,#qrScanner .qr-lens-status{color:var(--eda-muted)}
/* Readable type scale across landing, guides, dialogs and remote controls. */
:root{font-size:15px}body{font-size:15px;line-height:1.65}
header nav{gap:18px;font-size:14px}.language-picker{display:flex;align-items:center}.language-picker select{width:112px;min-height:42px;padding:8px 10px;font-size:14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow,.card-topline .eyebrow,.section-heading .eyebrow,.brand small,.download small,.secure{font-size:12px;line-height:1.5;letter-spacing:1px}
h1,.hero h1{font-size:clamp(40px,4.6vw,60px);line-height:1.12}.lead{font-size:16px;line-height:1.8}
.capabilities,.file-meta,.small-note,.pair-note,.note,footer,footer small,footer>div,.number,.steps small,.steps a,.trust-note p,.trust-note>a,#hostLinkHint,#hostPanel .version,#hostPanel .pairing-card p,#hostPanel .security-note p{font-size:13px;line-height:1.75}
.download strong{font-size:16px}.connect-card h2,#hostPanel .desktop-intro h2{font-size:23px;line-height:1.4}.setup-panel>p,#hostPanel .desktop-intro p,#hostPanel .message,.section-heading>p,.steps p{font-size:14px;line-height:1.8}
#hubungkan .setup-tabs button,#hostPanel #hostLinkButton,button,label{font-size:14px;line-height:1.5}input:not([type=checkbox]),select{font-size:15px;line-height:1.5}
#status{font-size:14px}.section-heading h2{font-size:28px}.steps h3,#hostPanel .card-heading h2{font-size:18px}.trust-note h2{font-size:17px}
dialog .heading h2{font-size:22px;line-height:1.4}dialog h3{font-size:16px;line-height:1.5}dialog p{font-size:14px;line-height:1.85}dialog label{font-size:14px}.setting-row{gap:12px}#settings .language-setting{margin-top:20px}
#qrScanner .qr-topbar p,#qrScanner .qr-private,#qrScanner .qr-lens-status{font-size:12px}#qrScanner #qrHint,#qrScanner .qr-switch,#qrScanner .qr-lens-row label,#qrScanner #qrManual{font-size:14px}#qrScanner h2{font-size:19px}
#desktopControls,#desktopControls button{font-size:13px}#desktopControls button{min-height:38px}#remoteInputStatus{font-size:13px}.sharing #status{font-size:13px}
@media(max-width:760px){header{flex-wrap:wrap;gap:16px}header nav{width:100%;justify-content:flex-end;gap:16px}.hero h1{font-size:44px}.lead{font-size:15px}.hero{padding-top:34px}.download strong{font-size:15px}.connect-card{padding:24px}.section-heading h2{font-size:25px}}
@media(max-width:420px){.hero h1{font-size:40px}.landing{padding-left:18px;padding-right:18px}.download{padding:16px 14px}.download strong{font-size:14px}.file-meta,.download small{font-size:12px}.connect-card{padding:22px 20px}.connect-card h2,#hostPanel .desktop-intro h2{font-size:21px}input:not([type=checkbox]),select{font-size:16px}.language-picker select{font-size:14px}#desktopControls{top:6px;padding:6px;gap:5px}#desktopControls>span{display:none}}
#settings .setting-row>label,#settings .note{font-size:14px}#privacy p{font-size:14px;line-height:1.85}
@media(max-width:420px){header nav{font-size:13px;gap:10px}.language-picker select{width:98px;font-size:13px}}

/* Compact language switch. IN is the display label; ISO language stays id. */
.language-switch{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:108px;min-width:108px;min-height:38px;padding:3px;border:1px solid #60526f;border-radius:12px;background:#191a20;color:#b4b1c1;gap:0;line-height:1;cursor:pointer}
.language-switch::before{content:"";position:absolute;z-index:-1;left:3px;top:3px;bottom:3px;width:calc(50% - 3px);border-radius:8px;background:linear-gradient(110deg,#4b4ab3,#8040a8);transition:transform .18s ease}
.language-switch[aria-checked="true"]::before{transform:translateX(100%)}
.language-switch span{display:grid;place-items:center;flex:1;font-size:13px;font-weight:700;line-height:30px;letter-spacing:.4px;color:#b4b1c1}
.language-switch[aria-checked="false"] span:first-child,.language-switch[aria-checked="true"] span:last-child{color:#fff}
.language-switch:focus-visible{outline:2px solid #12d8ef;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.language-switch::before{transition:none}}

@media(max-width:420px){header nav{flex-wrap:wrap;justify-content:center}.language-picker{flex-basis:100%;justify-content:center}}

/* Unified popup surfaces, controls and motion. */
dialog{box-sizing:border-box;color:var(--eda-text);background:var(--eda-surface);border:1px solid #51465f;border-radius:22px;box-shadow:0 28px 90px #0008,0 1px 0 #ffffff0c inset;max-width:calc(100vw - 32px);max-height:calc(100dvh - 40px);scrollbar-width:thin;scrollbar-color:#756384 #22232c;overscroll-behavior:contain}
dialog::backdrop{background:#08090eb8;backdrop-filter:blur(8px)}
dialog[open]{animation:eda-dialog-in .18s cubic-bezier(.2,.7,.2,1)}
dialog .heading,dialog .guide-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--eda-line)}
dialog .heading h2,dialog .guide-heading h2{margin:4px 0 0;font-size:22px;line-height:1.35;letter-spacing:-.4px;overflow-wrap:anywhere}
dialog .heading>button,dialog .guide-heading>button,dialog .close-button{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;min-width:40px;min-height:40px;padding:9px;border:1px solid #51465f;border-radius:12px;background:#2d2937;color:var(--eda-text);font-size:24px;line-height:1;cursor:pointer}
dialog .close-button svg{width:20px;height:20px}
dialog .heading>button:hover,dialog .guide-heading>button:hover,dialog .close-button:hover{background:#3b3249;border-color:#a18ab7}
dialog button,dialog a{touch-action:manipulation}
dialog button:not(.close-button):not(.language-switch),dialog select,dialog input:not([type=range]):not([type=checkbox]){border-radius:11px}
dialog select,dialog input:not([type=range]):not([type=checkbox]){min-height:42px;border:1px solid #51465f;background:#1b1c24;color:var(--eda-text)}
dialog button:focus-visible,dialog a:focus-visible,dialog input:focus-visible,dialog select:focus-visible{outline:2px solid var(--eda-cyan);outline-offset:3px}
dialog p,dialog li{overflow-wrap:anywhere}
dialog button:disabled{opacity:.48;cursor:not-allowed}
@keyframes eda-dialog-in{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:560px){dialog{border-radius:18px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}dialog .heading,dialog .guide-heading{gap:12px;margin-bottom:18px;padding-bottom:14px}dialog .heading h2,dialog .guide-heading h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){dialog[open]{animation:none}dialog::backdrop{backdrop-filter:none}}

#settings{width:min(560px,calc(100vw - 32px));padding:26px;overflow:auto}
#privacy{width:min(720px,calc(100vw - 32px));padding:28px;overflow:auto}
#settings h3{padding-top:18px;margin:22px 0 14px;border-top:1px solid var(--eda-line);font-size:16px}
#settings .setting-row{min-height:44px;gap:18px;margin:12px 0}
#settings .setting-row>label{min-width:0;line-height:1.5}
#settings .setting-row>select{min-width:0;max-width:62%}
#settings .settings-footer{display:flex;gap:10px;padding-top:20px;margin-top:22px}
#settings .settings-footer button{min-height:42px;padding:10px 14px;flex:1}
#settings .settings-actions button{min-height:40px;padding:8px 14px}
#privacy h3{margin:24px 0 8px;font-size:17px}#privacy p{margin:0 0 16px;line-height:1.85}
#qrScanner{border-radius:22px;overflow:hidden;box-shadow:0 28px 90px #0008}#qrScanner .qr-topbar{padding:20px;gap:14px}
#qrScanner .qr-icon{width:40px;height:40px;border:1px solid #51465f;border-radius:12px}#qrScanner .qr-switch,#qrScanner #qrManual{min-height:42px;border-radius:11px}
#hubungkan .card-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#hubungkan .card-topline>.eyebrow,#hubungkan .secure{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:6px 11px;margin:0;border:1px solid #51465f;border-radius:10px;background:#2b2735;color:var(--eda-text);font-size:12px;line-height:1.5;font-weight:650;letter-spacing:.4px;text-transform:none}
header nav .nav-action{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;border:1px solid #51465f;border-radius:10px;background:#2b2735;line-height:1.5}
@media(max-width:560px){#settings,#privacy{padding:20px}#settings .setting-row{gap:12px}#settings .setting-row>select{max-width:58%}}
#settings .setting-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;align-items:center}
#settings .setting-row>select{width:100%;max-width:100%}
#settings .setting-row>.range-control{width:100%;min-width:0}
#settings .setting-row>input[type=checkbox]{justify-self:end;width:20px;height:20px}
#settings .setting-row>.language-switch{justify-self:end}

/* Plain connection labels and navigation link. */
#hubungkan .card-topline>#connectionTitle{display:inline-flex;align-items:center;min-height:32px;padding:0;margin:0;background:none;border:0;border-radius:0;color:var(--eda-cyan);font-size:12px;letter-spacing:.4px;box-shadow:none}
#hubungkan .secure{letter-spacing:.2px}
header nav a.nav-action,header nav a.nav-action:hover{padding:6px 0;min-height:32px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--eda-text)}
header nav a.nav-action:hover{text-decoration:underline;text-underline-offset:5px}
.file-meta{display:block;line-height:1.6;letter-spacing:0}
@media(max-width:760px){
 .landing{padding-left:20px;padding-right:20px}
 header{padding:20px 0;gap:18px}
 header nav{width:100%;justify-content:space-between;gap:12px;flex-wrap:nowrap}
 header .language-picker{flex:0 0 auto;justify-content:flex-start}
 .hero{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-top:28px}
 .hero-copy{min-width:0;max-width:none}
 .hero h1{font-size:clamp(32px,8vw,44px);line-height:1.16;margin:20px 0}
 .lead{font-size:15px;line-height:1.8;max-width:none}
 .capabilities{gap:10px 16px;flex-wrap:wrap;margin:24px 0}
 .downloads{gap:12px}
 .download{padding:16px;gap:12px;border-radius:16px;min-width:0}
 .download>span{min-width:0}
 .download strong{font-size:15px;line-height:1.5}
 .download small{font-size:12px;letter-spacing:.5px}
 .file-meta{font-size:12px;line-height:1.6;margin-top:4px}
 .connect-card{padding:22px;border-radius:20px;width:100%;min-width:0}
 #hubungkan .setup-tabs{margin:18px 0 22px;gap:4px}
 #hubungkan .setup-tabs button{white-space:normal;font-size:13px;line-height:1.4;min-height:46px;padding:9px 7px}
 #hubungkan .connection-art{margin:8px 0 22px}
 #hubungkan h2,#hostPanel .desktop-intro h2{font-size:21px;line-height:1.4}
 #hubungkan .setup-panel>p,#hostPanel .desktop-intro p{font-size:14px;line-height:1.8}
 #hubungkan input,#hubungkan select{font-size:16px;min-height:46px}
 .steps{grid-template-columns:1fr;gap:16px}
 .steps article{padding:22px}
 .trust-note{padding:22px;display:flex;flex-wrap:wrap;gap:16px}
 footer{padding-top:24px;padding-bottom:28px}
 footer .footer-brand{gap:16px;flex-wrap:wrap}
 #settings,#privacy{width:calc(100vw - 24px);padding:20px;max-height:calc(100dvh - 24px)}
 #settings .setting-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px}
 #settings .setting-row>label{font-size:13px}
 #settings .setting-row>select{max-width:100%;font-size:16px}
 #settings .range-control{min-width:0}
 #settings .range-control input{min-width:0;width:100%}
 #settings .settings-footer{flex-wrap:wrap}
 #settings .settings-footer button{min-width:130px}
 #qrScanner{width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:18px}
}
@media(max-width:420px){
 .landing{padding-left:16px;padding-right:16px}
 header{padding:18px 0;gap:16px}
 header .brand{font-size:22px;gap:10px}
 header nav{font-size:13px;gap:8px;justify-content:space-between;flex-wrap:nowrap}
 header .language-picker{flex:0 0 auto;width:auto}
 header .language-switch{width:80px;min-width:80px;min-height:36px}
 header .language-switch span{font-size:12px;line-height:28px}
 .hero{padding-top:24px}
 .hero h1{font-size:clamp(32px,9vw,38px)}
 .downloads{grid-template-columns:1fr}
 .connect-card{padding:18px}
 .download{padding:16px}
 .section-heading h2{font-size:25px;line-height:1.35}
}

/* One X icon language for application-owned close controls. Browser permission prompts are browser UI. */
button.close-button{display:inline-grid;place-items:center;flex-shrink:0;width:40px;height:40px;min-width:40px;min-height:40px;padding:9px;border:1px solid #51465f;border-radius:11px;background:#2d2937;color:#edf2ff;line-height:1}
button.close-button svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
button.close-button:hover{color:#fff;background:#653443;border-color:#b7637e}
button.close-button:focus-visible{outline:2px solid #12d8ef;outline-offset:3px}
@media(max-width:600px){dialog button.close-button{width:44px;height:44px;min-width:44px;min-height:44px}}

/* Shared language switch start */
/* EDAƎ shared EN/ID switch: 96 × 38 desktop, 80 × 36 mobile. */
body button.language-switch,body .topbar .header-language #languageSwitch{box-sizing:border-box;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:96px;min-width:96px;height:38px;min-height:38px;max-height:38px;padding:3px;margin:0;border:1px solid #60526f;border-radius:12px;background:#191a20;color:#b4b1c1;gap:0;line-height:1;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;cursor:pointer;vertical-align:middle}
body button.language-switch::before{content:"";position:absolute;z-index:-1;left:3px;top:3px;bottom:3px;width:calc(50% - 3px);border-radius:8px;background:linear-gradient(110deg,#4b4ab3,#8040a8);transform:translateX(0);transition:transform .18s ease}
body button.language-switch[aria-checked=true]::before{transform:translateX(100%)}
body button.language-switch span,body .topbar .header-language #languageSwitch span{display:grid;place-items:center;flex:1;font-size:12px;font-weight:700;line-height:30px;letter-spacing:.4px;color:#b4b1c1}
body button.language-switch[aria-checked=false] span:first-child,body button.language-switch[aria-checked=true] span:last-child{color:#fff}
body button.language-switch:focus-visible{outline:2px solid #12d8ef;outline-offset:3px}
@media(max-width:600px){body button.language-switch,body .topbar .header-language #languageSwitch{width:80px;min-width:80px;height:36px;min-height:36px;max-height:36px}body button.language-switch span,body .topbar .header-language #languageSwitch span{font-size:11px;line-height:28px}}
@media(prefers-reduced-motion:reduce){body button.language-switch::before{transition:none}}
/* Shared language switch end */

/* One continuous headline treatment, matching MobileDesk. */
.hero-copy>h1{background:linear-gradient(100deg,#2ce1ef,#70b4ff 30%,#bb88ff 65%,#f65ce2);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero-copy>h1 em{background:none;color:inherit;-webkit-text-fill-color:inherit}
@media(forced-colors:active){.hero-copy>h1,.hero-copy>h1 em{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}

#keyboardToggle{position:fixed;z-index:200;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));display:grid;place-items:center;box-sizing:border-box;width:50px;height:50px;padding:12px;border:1px solid #68507d;border-radius:50%;background:var(--eda-surface);color:var(--eda-cyan);cursor:pointer}#keyboardToggle[hidden]{display:none!important}#keyboardToggle svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}#keyboardToggle:hover,#keyboardToggle[aria-pressed=true]{background:#3b304b;border-color:#a67bd0}#keyboardToggle:focus-visible{outline:2px solid var(--eda-cyan);outline-offset:3px}

/* Viewer toolbar: white when closed; cyan only while its control is active. */
#gear,.sharing #gear,#keyboardToggle{color:#fff}
#gear[aria-expanded=true],.sharing #gear[aria-expanded=true],#keyboardToggle[aria-pressed=true]{color:var(--eda-cyan)}