:root{
    --bg:#06111f;
    --bg2:#0a1728;
    --panel:#0d1c2f;
    --panel2:#12243b;
    --line:#203856;
    --text:#f4f8ff;
    --muted:#a7b6ca;
    --accent:#38a4ff;
    --accent2:#5fc2ff;
    --danger:#ff6b6b;
    --shadow:0 22px 60px rgba(0,0,0,.34);
    --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    min-height:100vh;
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
      radial-gradient(circle at 15% 5%, rgba(56,164,255,.13), transparent 30rem),
      radial-gradient(circle at 85% 0%, rgba(95,194,255,.08), transparent 28rem),
      var(--bg);
    color:var(--text);
    line-height:1.55;
}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}
code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}

.login-page{
    min-height:100vh;
    min-height:100dvh;
    display:grid;
    place-items:center;
    padding:24px;
}
.login-card{
    width:min(100%, 430px);
    padding:34px;
    border:1px solid var(--line);
    border-radius:28px;
    background:linear-gradient(180deg,rgba(18,36,59,.98),rgba(9,24,41,.98));
    box-shadow:var(--shadow);
}
.brand-mark{
    width:62px;height:62px;
    display:grid;place-items:center;
    border-radius:18px;
    font-weight:900;
    letter-spacing:-.06em;
    background:linear-gradient(135deg,var(--accent),#2375ff);
    box-shadow:0 12px 30px rgba(56,164,255,.26);
    margin-bottom:24px;
}
.brand-mark.small{width:44px;height:44px;border-radius:13px;margin:0;font-size:.9rem}
.eyebrow{
    margin:0 0 7px;
    color:var(--accent2);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.login-card h1,.hero h1,.section-heading h2{margin:0;line-height:1.12}
.login-card h1{font-size:clamp(2rem,6vw,2.7rem)}
.login-copy{color:var(--muted);margin:12px 0 28px}
.login-form label{display:block;font-weight:700;margin-bottom:8px}
.password-row{display:flex;gap:10px}
.password-row input{
    min-width:0;flex:1;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:13px;
    background:#07111e;
    color:var(--text);
    outline:none;
}
.password-row input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(56,164,255,.12)}
.icon-button,.ghost-button,.primary-button,.download-link{
    border:0;
    border-radius:12px;
    cursor:pointer;
    text-decoration:none;
    font-weight:800;
}
.icon-button,.ghost-button{
    padding:12px 15px;
    color:var(--text);
    background:#152943;
    border:1px solid var(--line);
}
.primary-button{
    padding:14px 18px;
    color:white;
    background:linear-gradient(135deg,var(--accent),#2375ff);
    box-shadow:0 10px 24px rgba(56,164,255,.18);
}
.full-width{width:100%;margin-top:14px}
.form-error{color:#ffd4d4;background:rgba(255,107,107,.09);border:1px solid rgba(255,107,107,.25);padding:10px 12px;border-radius:10px}

.site-header{
    position:sticky;top:0;z-index:50;
    border-bottom:1px solid rgba(32,56,86,.8);
    background:rgba(6,17,31,.88);
    backdrop-filter:blur(16px);
}
.header-inner{
    width:min(1460px,calc(100% - 32px));
    margin:auto;
    min-height:76px;
    display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand strong{display:block}
.brand span{display:block;color:var(--muted);font-size:.78rem}

.site-shell{width:min(1460px,calc(100% - 32px));margin:0 auto;padding:44px 0 70px}
.hero{
    padding:8px 0 28px;
    max-width:850px;
}
.hero h1{font-size:clamp(2.2rem,5vw,4.5rem);letter-spacing:-.04em}
.hero p:last-child{color:var(--muted);font-size:clamp(1rem,2vw,1.15rem);max-width:720px}

.device-tabs{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:12px;
    margin:8px 0 28px;
}
.device-tab{
    min-height:94px;
    padding:14px 10px;
    border:1px solid var(--line);
    border-radius:18px;
    color:var(--muted);
    background:linear-gradient(180deg,#0e1d31,#0a1727);
    cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
    font-weight:800;
    transition:.2s ease;
}
.device-tab:hover,.device-tab.active{
    color:white;
    border-color:rgba(56,164,255,.7);
    transform:translateY(-2px);
    box-shadow:0 14px 36px rgba(0,0,0,.22), inset 0 0 0 1px rgba(56,164,255,.08);
}
.device-tab.active{background:linear-gradient(180deg,rgba(56,164,255,.15),#0b1c31)}
.device-icon{font-size:1.55rem;line-height:1}

.device-panel{display:none}
.device-panel.active{display:block}
.guide-layout{
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    gap:24px;
    align-items:start;
}
.guide-sidebar{
    position:sticky;
    top:100px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:20px;
    background:linear-gradient(180deg,#0c1a2c,#091726);
}
.sidebar-title{
    color:var(--muted);
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:800;
    padding:7px 10px 12px;
}
.sidebar-link{
    width:100%;
    text-align:left;
    margin:4px 0;
    padding:12px 13px;
    border:1px solid transparent;
    border-radius:12px;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    font-weight:700;
}
.sidebar-link:hover,.sidebar-link.active{
    color:white;
    background:rgba(56,164,255,.11);
    border-color:rgba(56,164,255,.22);
}
.guide-content,.simple-guide{min-width:0}
.section-heading{
    margin-bottom:22px;
    padding:4px 2px;
}
.section-heading h2{font-size:clamp(1.8rem,3.5vw,3rem);letter-spacing:-.03em}
.section-heading p:last-child{color:var(--muted);max-width:760px;margin-bottom:0}

.app-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin-bottom:24px;
}
.app-card{
    min-width:0;
    overflow:hidden;
    padding:16px;
    border:1px solid var(--line);
    border-radius:20px;
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    box-shadow:0 14px 36px rgba(0,0,0,.18);
    transition:.2s ease;
}
.app-card.selected{
    border-color:rgba(56,164,255,.75);
    box-shadow:0 14px 36px rgba(0,0,0,.24),0 0 0 1px rgba(56,164,255,.12);
}
.thumb-button{
    display:block;width:100%;
    padding:0;border:0;background:transparent;cursor:zoom-in;
    border-radius:14px;overflow:hidden;
    aspect-ratio:16/9;
}
.thumb-button img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .22s ease;
}
.thumb-button:hover img{transform:scale(1.025)}
.app-card h3{margin:16px 0 12px;font-size:1.08rem}
.detail-row{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:10px 0;
    border-top:1px solid rgba(32,56,86,.7);
    color:var(--muted);
    font-size:.9rem;
}
.detail-row strong{color:var(--accent2);font-size:1.05rem}
.detail-row.url{display:block}
.detail-row.url code,.standalone-url{
    display:block;
    margin-top:6px;
    color:#dcecff;
    white-space:normal;
    overflow-wrap:anywhere;
}
.download-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:4px;
    padding:11px 14px;
    background:linear-gradient(135deg,var(--accent),#2375ff);
    color:white;
}
.download-link.large{padding:14px 18px;margin-top:12px}

.instruction-card{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:linear-gradient(180deg,var(--panel),#0a1728);
    padding:24px;
    box-shadow:0 16px 44px rgba(0,0,0,.18);
}
.instruction-card h3{margin:0;font-size:clamp(1.35rem,3vw,1.8rem)}
.instruction-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}
.selected-code{
    flex:0 0 auto;
    min-width:155px;
    text-align:center;
    padding:10px 14px;
    border:1px solid rgba(56,164,255,.28);
    background:rgba(56,164,255,.08);
    border-radius:13px;
    color:var(--muted);
    font-size:.78rem;
}
.selected-code strong{display:block;color:var(--accent2);font-size:1.15rem;margin-top:2px}
.steps{
    margin:0;
    padding-left:1.4rem;
}
.steps li{
    padding:9px 0 9px 7px;
    color:#d7e2f0;
}
.steps li::marker{color:var(--accent2);font-weight:900}
.inline-code{
    color:var(--accent2);
    white-space:nowrap;
}
.notice{
    margin:18px 0;
    padding:18px;
    border-left:4px solid var(--accent);
    border-radius:12px;
    background:rgba(56,164,255,.07);
}
.notice ul{margin:10px 0 0;padding-left:1.2rem;color:#d7e2f0}
.option-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
.option-badge{
    display:inline-block;
    margin-bottom:10px;
    padding:5px 9px;
    border-radius:999px;
    background:rgba(56,164,255,.12);
    color:var(--accent2);
    font-size:.75rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.standalone-url{
    margin-top:12px;
    padding:12px;
    background:#07111e;
    border:1px solid var(--line);
    border-radius:10px;
}
.simple-guide{max-width:1040px;margin:0 auto}

.image-modal{
    position:fixed;
    inset:0;
    z-index:100;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(0,0,0,.88);
}
.image-modal.open{display:flex}
.image-modal img{
    max-width:min(1100px,94vw);
    max-height:90vh;
    border-radius:16px;
    box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.modal-close{
    position:absolute;
    top:18px;right:18px;
    width:48px;height:48px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    background:rgba(7,17,30,.82);
    color:white;
    font-size:2rem;
    line-height:1;
    cursor:pointer;
}

.site-footer{
    border-top:1px solid var(--line);
    color:var(--muted);
    text-align:center;
    padding:24px 16px 34px;
}

/* Tablet */
@media (max-width:1100px){
    .device-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
    .guide-layout{grid-template-columns:220px minmax(0,1fr)}
    .app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .app-card:last-child{grid-column:span 2}
}

/* Mobile */
@media (max-width:760px){
    .header-inner,.site-shell{width:min(100% - 22px,1460px)}
    .site-header{position:static}
    .header-inner{min-height:68px}
    .brand span{display:none}
    .site-shell{padding-top:28px}
    .hero{padding-bottom:18px}
    .hero h1{font-size:2.25rem}
    .device-tabs{
        display:flex;
        overflow-x:auto;
        gap:10px;
        margin-right:-11px;
        padding-right:11px;
        padding-bottom:6px;
        scroll-snap-type:x proximity;
        scrollbar-width:none;
    }
    .device-tabs::-webkit-scrollbar{display:none}
    .device-tab{
        flex:0 0 142px;
        min-height:80px;
        scroll-snap-align:start;
    }
    .guide-layout{display:block}
    .guide-sidebar{
        position:static;
        display:flex;
        gap:8px;
        overflow-x:auto;
        margin-bottom:18px;
        padding:10px;
        border-radius:16px;
        scrollbar-width:none;
    }
    .guide-sidebar::-webkit-scrollbar{display:none}
    .sidebar-title{display:none}
    .sidebar-link{
        flex:0 0 auto;
        width:auto;
        white-space:nowrap;
        margin:0;
        padding:10px 12px;
    }
    .app-grid{display:block}
    .app-card{margin-bottom:14px}
    .app-card:last-child{margin-bottom:0}
    .instruction-card{padding:18px;border-radius:18px}
    .instruction-header{display:block}
    .selected-code{
        margin-top:14px;
        width:100%;
        min-width:0;
        text-align:left;
    }
    .option-grid{display:block}
    .option-grid .instruction-card + .instruction-card{margin-top:14px}
    .steps{padding-left:1.25rem}
    .steps li{padding-left:3px}
}

/* Small phones */
@media (max-width:420px){
    .login-page{padding:14px}
    .login-card{padding:24px 18px;border-radius:22px}
    .password-row{display:block}
    .password-row .icon-button{width:100%;margin-top:8px}
    .header-inner,.site-shell{width:min(100% - 18px,1460px)}
    .ghost-button{padding:10px 12px}
    .brand strong{font-size:.95rem}
    .device-tab{flex-basis:126px}
    .section-heading h2{font-size:1.75rem}
    .detail-row{display:block}
    .detail-row strong{display:block;margin-top:4px}
}


/* Compact layout updates */
.compact-title{
    font-size:clamp(1.55rem,3vw,2.35rem) !important;
    letter-spacing:-.025em !important;
}
.hero{
    padding:2px 0 18px !important;
}
.hero p:last-child{
    margin-top:8px;
    font-size:1rem !important;
}
.device-tabs{
    margin:4px 0 20px !important;
    gap:9px !important;
}
.device-tab{
    min-height:74px !important;
    padding:10px 8px !important;
    border-radius:14px !important;
}
.device-icon{
    font-size:1.28rem !important;
}
.section-heading{
    margin-bottom:14px !important;
}
.section-heading h2{
    font-size:clamp(1.55rem,2.8vw,2.35rem) !important;
}
.app-grid{
    gap:12px !important;
    margin-bottom:14px !important;
}
.app-card{
    padding:12px !important;
    border-radius:16px !important;
}
.app-card h3{
    margin:11px 0 8px !important;
    font-size:1rem !important;
}
.detail-row{
    padding:7px 0 !important;
    font-size:.82rem !important;
}
.detail-row strong{
    font-size:.95rem !important;
}
.install-app-button{
    width:100%;
    margin-top:4px;
    padding:13px 18px;
    border:0;
    border-radius:13px;
    background:linear-gradient(135deg,var(--accent),#2375ff);
    color:white;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(56,164,255,.16);
}
.guide-modal{
    position:fixed;
    inset:0;
    z-index:120;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(5px);
}
.guide-modal.open{
    display:flex;
}
.guide-modal-card{
    position:relative;
    width:min(900px,96vw);
    max-height:90vh;
    overflow:auto;
    padding:24px;
    border:1px solid var(--line);
    border-radius:20px;
    background:linear-gradient(180deg,var(--panel),#0a1728);
    box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.guide-modal-close{
    position:sticky;
    top:0;
    float:right;
    z-index:2;
    width:42px;
    height:42px;
    margin:-6px -6px 6px 12px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
    background:#07111e;
    color:white;
    font-size:1.7rem;
    line-height:1;
    cursor:pointer;
}
@media (max-width:760px){
    .site-shell{padding-top:18px !important}
    .hero h1{font-size:1.8rem !important}
    .device-tab{min-height:68px !important;flex-basis:122px !important}
    .app-card{padding:10px !important}
    .guide-modal{padding:8px}
    .guide-modal-card{width:100%;max-height:94vh;padding:16px;border-radius:16px}
}


/* Device-specific colour themes */
body{
    --device-accent:#ff9900;
    --device-accent2:#ffb84d;
    --device-glow:rgba(255,153,0,.18);
    --device-soft:rgba(255,153,0,.10);
}

body[data-theme="firestick"]{
    --device-accent:#ff9900;
    --device-accent2:#ffb84d;
    --device-glow:rgba(255,153,0,.20);
    --device-soft:rgba(255,153,0,.10);
}
body[data-theme="android-tv"],
body[data-theme="android-phone"]{
    --device-accent:#3ddc84;
    --device-accent2:#75e9a8;
    --device-glow:rgba(61,220,132,.18);
    --device-soft:rgba(61,220,132,.10);
}
body[data-theme="ios"],
body[data-theme="mac"]{
    --device-accent:#d7dde5;
    --device-accent2:#ffffff;
    --device-glow:rgba(215,221,229,.16);
    --device-soft:rgba(215,221,229,.08);
}
body[data-theme="windows"]{
    --device-accent:#00a4ef;
    --device-accent2:#52c7ff;
    --device-glow:rgba(0,164,239,.20);
    --device-soft:rgba(0,164,239,.10);
}
body[data-theme="smart-tv"]{
    --device-accent:#8f63ff;
    --device-accent2:#d34fd7;
    --device-glow:rgba(143,99,255,.20);
    --device-soft:rgba(143,99,255,.10);
}

/* Apply the active device palette across the guide */
body[data-theme] .eyebrow,
body[data-theme] .inline-code,
body[data-theme] .selected-code strong,
body[data-theme] .steps li::marker{
    color:var(--device-accent2) !important;
}
body[data-theme] .device-tab.active,
body[data-theme] .app-card.selected{
    border-color:var(--device-accent) !important;
    box-shadow:0 14px 36px rgba(0,0,0,.22),0 0 24px var(--device-glow) !important;
}
body[data-theme] .device-tab.active{
    background:linear-gradient(180deg,var(--device-soft),#0b1c31) !important;
}
body[data-theme] .sidebar-link:hover,
body[data-theme] .sidebar-link.active{
    background:var(--device-soft) !important;
    border-color:var(--device-accent) !important;
}
body[data-theme] .install-app-button,
body[data-theme] .download-link{
    background:linear-gradient(135deg,var(--device-accent),var(--device-accent2)) !important;
    box-shadow:0 10px 26px var(--device-glow) !important;
}
body[data-theme="ios"] .install-app-button,
body[data-theme="mac"] .install-app-button,
body[data-theme="ios"] .download-link,
body[data-theme="mac"] .download-link{
    color:#111820 !important;
}
body[data-theme] .notice{
    border-left-color:var(--device-accent) !important;
    background:var(--device-soft) !important;
}
body[data-theme] .selected-code{
    border-color:var(--device-accent) !important;
    background:var(--device-soft) !important;
}

/* A subtle page glow changes with the selected device */
body[data-theme]{
    background:
      radial-gradient(circle at 15% 5%, var(--device-glow), transparent 30rem),
      radial-gradient(circle at 85% 0%, var(--device-soft), transparent 28rem),
      var(--bg) !important;
    transition:background .25s ease;
}


/* v4: strongly visible device themes */
body[data-theme="firestick"]{
    --theme-main:#ff9900;
    --theme-bright:#ffc15a;
    --theme-deep:#2c1a00;
    --theme-rgb:255,153,0;
}
body[data-theme="android-tv"],
body[data-theme="android-phone"]{
    --theme-main:#3ddc84;
    --theme-bright:#88f0b5;
    --theme-deep:#062419;
    --theme-rgb:61,220,132;
}
body[data-theme="ios"],
body[data-theme="mac"]{
    --theme-main:#c8d0da;
    --theme-bright:#ffffff;
    --theme-deep:#1d2229;
    --theme-rgb:200,208,218;
}
body[data-theme="windows"]{
    --theme-main:#00a4ef;
    --theme-bright:#63ceff;
    --theme-deep:#001f31;
    --theme-rgb:0,164,239;
}
body[data-theme="smart-tv"]{
    --theme-main:#7b61ff;
    --theme-bright:#df4fd8;
    --theme-deep:#1b1038;
    --theme-rgb:123,97,255;
}

body[data-theme]{
    --device-accent:var(--theme-main);
    --device-accent2:var(--theme-bright);
    --device-glow:rgba(var(--theme-rgb),.24);
    --device-soft:rgba(var(--theme-rgb),.12);
    background:
      radial-gradient(circle at 12% 0%, rgba(var(--theme-rgb),.22), transparent 34rem),
      linear-gradient(180deg, color-mix(in srgb, var(--theme-deep) 35%, #06111f 65%) 0%, #06111f 44%) !important;
}

body[data-theme] .site-header{
    border-bottom-color:rgba(var(--theme-rgb),.34) !important;
    box-shadow:0 8px 30px rgba(var(--theme-rgb),.08);
}

body[data-theme] .brand-mark{
    background:linear-gradient(135deg,var(--theme-main),var(--theme-bright)) !important;
    box-shadow:0 10px 28px rgba(var(--theme-rgb),.22) !important;
}
body[data-theme="ios"] .brand-mark,
body[data-theme="mac"] .brand-mark{
    color:#111820 !important;
}

body[data-theme] .device-tab.active{
    color:#fff !important;
    border-color:var(--theme-main) !important;
    background:
      linear-gradient(180deg,rgba(var(--theme-rgb),.22),rgba(var(--theme-rgb),.06)),
      #0b1829 !important;
    box-shadow:0 10px 26px rgba(var(--theme-rgb),.16) !important;
}

body[data-theme] .section-heading{
    border-left:3px solid var(--theme-main);
    padding-left:12px !important;
}

body[data-theme] .app-card.selected{
    border-color:var(--theme-main) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.22),0 0 0 1px rgba(var(--theme-rgb),.18) !important;
}

body[data-theme] .detail-row strong,
body[data-theme] .eyebrow,
body[data-theme] .inline-code,
body[data-theme] .selected-code strong,
body[data-theme] .steps li::marker{
    color:var(--theme-bright) !important;
}

body[data-theme] .sidebar-link.active{
    color:#fff !important;
    border-color:rgba(var(--theme-rgb),.5) !important;
    background:rgba(var(--theme-rgb),.14) !important;
}

body[data-theme] .install-app-button,
body[data-theme] .download-link{
    background:linear-gradient(135deg,var(--theme-main),var(--theme-bright)) !important;
    color:#fff !important;
    border:0 !important;
    box-shadow:0 10px 24px rgba(var(--theme-rgb),.20) !important;
}
body[data-theme="ios"] .install-app-button,
body[data-theme="mac"] .install-app-button,
body[data-theme="ios"] .download-link,
body[data-theme="mac"] .download-link{
    color:#10151b !important;
}

body[data-theme] .guide-modal-card{
    border-color:rgba(var(--theme-rgb),.5) !important;
    box-shadow:0 30px 90px rgba(0,0,0,.58),0 0 50px rgba(var(--theme-rgb),.10) !important;
}

body[data-theme] .guide-modal-close{
    border-color:rgba(var(--theme-rgb),.4) !important;
}

body[data-theme] .notice{
    border-left-color:var(--theme-main) !important;
    background:rgba(var(--theme-rgb),.08) !important;
}

/* Never allow guide modal contents to leak into the page */
.guide-modal:not(.open){
    display:none !important;
}
.guide-modal.open{
    display:flex !important;
}

/* Make Install App unmistakably styled even before theme variables resolve */
.install-app-button{
    appearance:none;
    -webkit-appearance:none;
    display:block;
    width:100%;
    min-height:46px;
    border:0;
    border-radius:13px;
    padding:12px 18px;
    font:800 1rem/1.2 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor:pointer;
}


/* v5: per-app Install App buttons */
.mini-install-button{
    appearance:none;
    -webkit-appearance:none;
    width:auto;
    min-width:104px;
    margin-top:10px;
    padding:8px 12px;
    border:0;
    border-radius:9px;
    background:linear-gradient(135deg,var(--theme-main),var(--theme-bright));
    color:#fff;
    font:800 .84rem/1.1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor:pointer;
    box-shadow:0 7px 18px rgba(var(--theme-rgb),.18);
}
.mini-install-button:hover{
    transform:translateY(-1px);
}
body[data-theme="firestick"] .mini-install-button{
    color:#181008;
}
body[data-theme="android-tv"] .mini-install-button,
body[data-theme="android-phone"] .mini-install-button{
    color:#06120b !important;
}
body[data-theme="ios"] .mini-install-button,
body[data-theme="mac"] .mini-install-button{
    color:#10151b;
}
@media (max-width:760px){
    .mini-install-button{
        width:100%;
        min-height:40px;
        margin-top:9px;
    }
}


/* v6: single dynamic page heading + tighter content alignment */
.compact-hero{
    padding:0 0 12px !important;
    margin:0 !important;
}
.compact-hero .compact-title{
    margin:0 !important;
    font-size:clamp(1.45rem,2.6vw,2.05rem) !important;
    line-height:1.12 !important;
}
.compact-hero p{
    margin:6px 0 0 !important;
    max-width:900px !important;
    color:var(--muted) !important;
    font-size:.95rem !important;
}
.guide-content{
    padding-top:0 !important;
}
.app-grid{
    margin-top:0 !important;
}
.simple-guide{
    padding-top:0 !important;
}
.device-tabs{
    margin-bottom:14px !important;
}
@media (max-width:760px){
    .compact-hero{
        padding-bottom:10px !important;
    }
    .compact-hero .compact-title{
        font-size:1.5rem !important;
    }
    .compact-hero p{
        font-size:.9rem !important;
        line-height:1.45 !important;
    }
}


/* v7: remove top banner, move logout to footer, maximize one-screen fit */
body[data-theme="android-phone"] .mini-install-button,
body[data-theme="android-phone"] .download-link{
    color:#000 !important;
}

/* No top banner */
.site-header{
    display:none !important;
}

/* Pull everything upward and make the desktop layout fit in one viewport where possible */
.site-shell{
    width:min(1460px,calc(100% - 24px)) !important;
    padding:12px 0 10px !important;
}
.compact-hero{
    padding:0 0 7px !important;
}
.compact-hero .compact-title{
    font-size:clamp(1.25rem,2vw,1.7rem) !important;
}
.compact-hero p{
    margin-top:3px !important;
    font-size:.82rem !important;
    line-height:1.25 !important;
}
.device-tabs{
    margin:0 0 8px !important;
    gap:7px !important;
}
.device-tab{
    min-height:52px !important;
    padding:6px 7px !important;
    border-radius:11px !important;
    gap:3px !important;
    font-size:.78rem !important;
}
.device-icon{
    font-size:1rem !important;
}
.guide-layout{
    gap:12px !important;
    grid-template-columns:210px minmax(0,1fr) !important;
}
.guide-sidebar{
    top:8px !important;
    padding:8px !important;
    border-radius:14px !important;
}
.sidebar-link{
    padding:8px 9px !important;
    font-size:.8rem !important;
    margin:2px 0 !important;
}
.app-grid{
    gap:8px !important;
    margin-bottom:8px !important;
}
.app-card{
    padding:8px !important;
    border-radius:13px !important;
}
.thumb-button{
    aspect-ratio:16/7.8 !important;
    border-radius:10px !important;
}
.app-card h3{
    margin:7px 0 5px !important;
    font-size:.88rem !important;
    line-height:1.15 !important;
}
.detail-row{
    padding:4px 0 !important;
    font-size:.72rem !important;
    line-height:1.15 !important;
}
.detail-row strong{
    font-size:.82rem !important;
}
.detail-row.url code,
.standalone-url{
    margin-top:3px !important;
    font-size:.7rem !important;
}
.mini-install-button{
    margin-top:6px !important;
    padding:6px 10px !important;
    min-height:30px !important;
    font-size:.75rem !important;
}
.simple-guide .instruction-card,
.option-grid .instruction-card{
    padding:14px !important;
}
.steps li{
    padding:5px 0 5px 4px !important;
    font-size:.88rem !important;
}
.site-footer{
    border-top:0 !important;
    padding:4px 12px 8px !important;
    text-align:center !important;
}
.footer-logout{
    appearance:none;
    -webkit-appearance:none;
    border:1px solid var(--line);
    border-radius:9px;
    padding:6px 14px;
    background:#101f32;
    color:var(--muted);
    font-weight:700;
    font-size:.78rem;
    cursor:pointer;
}
.footer-logout:hover{
    color:#fff;
    border-color:var(--theme-main);
}

/* For typical laptop/desktop heights, compress further */
@media (min-width:761px) and (max-height:850px){
    .site-shell{padding-top:8px !important}
    .compact-hero .compact-title{font-size:1.35rem !important}
    .compact-hero p{font-size:.76rem !important}
    .device-tab{min-height:46px !important}
    .thumb-button{aspect-ratio:16/7 !important}
    .guide-sidebar{padding:6px !important}
    .sidebar-link{padding:6px 8px !important}
    .app-card{padding:7px !important}
    .app-card h3{font-size:.82rem !important;margin:5px 0 4px !important}
    .detail-row{font-size:.68rem !important;padding:3px 0 !important}
    .mini-install-button{padding:5px 9px !important}
}

/* Mobile remains compact but usable; some vertical scrolling may still be necessary */
@media (max-width:760px){
    .site-shell{
        width:min(100% - 14px,1460px) !important;
        padding:10px 0 6px !important;
    }
    .compact-hero .compact-title{
        font-size:1.3rem !important;
    }
    .compact-hero p{
        font-size:.8rem !important;
    }
    .device-tab{
        min-height:52px !important;
        flex-basis:112px !important;
    }
    .guide-sidebar{
        margin-bottom:8px !important;
    }
    .app-card{
        margin-bottom:8px !important;
    }
    .thumb-button{
        aspect-ratio:16/8.5 !important;
    }
    .footer-logout{
        width:auto;
        min-width:100px;
    }
}


/* v8: roomier desktop layout while keeping the main page inside the viewport */
@media (min-width:1000px) and (min-height:650px){
    .site-shell{
        width:min(1500px,calc(100% - 34px)) !important;
        padding:16px 0 8px !important;
    }

    .compact-hero{
        padding-bottom:10px !important;
    }
    .compact-hero .compact-title{
        font-size:1.7rem !important;
        line-height:1.15 !important;
    }
    .compact-hero p{
        margin-top:5px !important;
        font-size:.96rem !important;
        line-height:1.35 !important;
        max-width:1050px !important;
    }

    .device-tabs{
        gap:9px !important;
        margin-bottom:12px !important;
    }
    .device-tab{
        min-height:64px !important;
        padding:8px 9px !important;
        font-size:.86rem !important;
        border-radius:14px !important;
        gap:4px !important;
    }
    .device-icon{
        font-size:1.2rem !important;
    }

    .guide-layout{
        grid-template-columns:260px minmax(0,1fr) !important;
        gap:14px !important;
    }
    .guide-sidebar{
        padding:11px !important;
        border-radius:17px !important;
    }
    .sidebar-title{
        display:block !important;
        padding:7px 9px 10px !important;
        font-size:.8rem !important;
    }
    .sidebar-link{
        padding:10px 11px !important;
        margin:3px 0 !important;
        font-size:.86rem !important;
    }

    .app-grid{
        gap:10px !important;
        margin-bottom:8px !important;
    }
    .app-card{
        padding:10px !important;
        border-radius:15px !important;
    }
    .thumb-button{
        aspect-ratio:16/8.2 !important;
        border-radius:11px !important;
    }
    .app-card h3{
        margin:8px 0 6px !important;
        font-size:.96rem !important;
        line-height:1.2 !important;
    }
    .detail-row{
        padding:5px 0 !important;
        font-size:.78rem !important;
        line-height:1.2 !important;
    }
    .detail-row strong{
        font-size:.9rem !important;
    }
    .detail-row.url code,
    .standalone-url{
        font-size:.76rem !important;
        line-height:1.25 !important;
    }
    .mini-install-button{
        margin-top:8px !important;
        padding:8px 14px !important;
        min-height:36px !important;
        font-size:.82rem !important;
        border-radius:10px !important;
    }

    .site-footer{
        padding:5px 12px 7px !important;
    }
}

/* On shorter desktop screens, scale only enough to avoid vertical scrolling. */
@media (min-width:1000px) and (max-height:720px){
    .site-shell{
        padding-top:10px !important;
    }
    .compact-hero .compact-title{
        font-size:1.5rem !important;
    }
    .compact-hero p{
        font-size:.86rem !important;
        line-height:1.25 !important;
    }
    .device-tab{
        min-height:56px !important;
    }
    .guide-layout{
        grid-template-columns:235px minmax(0,1fr) !important;
    }
    .thumb-button{
        aspect-ratio:16/7.5 !important;
    }
    .sidebar-link{
        padding:8px 10px !important;
    }
}


/* v9: larger desktop presentation, while keeping the 3-app preview sentence on one line */
@media (min-width:1200px){
    .site-shell{
        width:min(1660px,calc(100% - 42px)) !important;
        padding:18px 0 8px !important;
    }

    .compact-hero{
        padding-bottom:11px !important;
    }
    .compact-hero .compact-title{
        font-size:1.9rem !important;
    }
    .compact-hero p{
        max-width:none !important;
        width:100% !important;
        white-space:nowrap !important;
        font-size:.98rem !important;
        line-height:1.25 !important;
    }

    .device-tabs{
        gap:10px !important;
        margin-bottom:14px !important;
    }
    .device-tab{
        min-height:70px !important;
        padding:9px 10px !important;
        font-size:.9rem !important;
    }
    .device-icon{
        font-size:1.3rem !important;
    }

    .guide-layout{
        grid-template-columns:275px minmax(0,1fr) !important;
        gap:16px !important;
    }
    .guide-sidebar{
        padding:13px !important;
    }
    .sidebar-title{
        font-size:.84rem !important;
        padding:8px 10px 12px !important;
    }
    .sidebar-link{
        padding:11px 12px !important;
        font-size:.9rem !important;
    }

    .app-grid{
        gap:12px !important;
    }
    .app-card{
        padding:11px !important;
    }
    .thumb-button{
        aspect-ratio:16/8.7 !important;
    }
    .app-card h3{
        font-size:1rem !important;
        margin:9px 0 7px !important;
    }
    .detail-row{
        padding:6px 0 !important;
        font-size:.8rem !important;
    }
    .detail-row strong{
        font-size:.94rem !important;
    }
    .detail-row.url code,
    .standalone-url{
        font-size:.79rem !important;
    }
    .mini-install-button{
        min-height:38px !important;
        padding:9px 15px !important;
        font-size:.85rem !important;
    }
}

/* Use more of tall desktop screens rather than leaving empty space */
@media (min-width:1200px) and (min-height:850px){
    .site-shell{
        padding-top:22px !important;
    }
    .device-tab{
        min-height:76px !important;
    }
    .guide-layout{
        grid-template-columns:290px minmax(0,1fr) !important;
        gap:18px !important;
    }
    .app-card{
        padding:13px !important;
    }
    .thumb-button{
        aspect-ratio:16/9 !important;
    }
    .app-card h3{
        font-size:1.04rem !important;
    }
}

/* If the screen is not wide enough, allow the sentence to wrap normally. */
@media (max-width:1199px){
    .compact-hero p{
        white-space:normal !important;
    }
}


/* v10: polished installation popup, selected app image, progress steps and height-aware sizing */
.guide-modal{
    padding:clamp(8px,2vh,20px) !important;
}
.guide-modal-card{
    width:min(920px,96vw) !important;
    max-height:94vh !important;
    padding:clamp(16px,2.2vh,26px) !important;
    border-radius:22px !important;
    background:
        linear-gradient(180deg, rgba(var(--theme-rgb),.08), transparent 150px),
        linear-gradient(180deg,var(--panel),#091522) !important;
}

.popup-app-header{
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 52px 16px 0;
    padding:10px;
    border:1px solid rgba(var(--theme-rgb),.3);
    border-radius:15px;
    background:rgba(var(--theme-rgb),.07);
}
.popup-app-image{
    width:92px;
    height:54px;
    object-fit:cover;
    border-radius:9px;
    border:1px solid rgba(255,255,255,.08);
    flex:0 0 auto;
}
.popup-app-meta{
    min-width:0;
}
.popup-kicker{
    display:block;
    margin-bottom:2px;
    color:var(--theme-bright);
    font-size:.7rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.popup-app-meta strong{
    display:block;
    font-size:1rem;
    line-height:1.2;
}

.guide-modal-card .instruction-header{
    padding-bottom:14px;
    margin-bottom:14px !important;
    border-bottom:1px solid rgba(var(--theme-rgb),.18);
}
.guide-modal-card .instruction-header h3{
    font-size:clamp(1.25rem,2.2vh,1.7rem) !important;
}

.guide-modal-card .selected-code{
    min-width:190px !important;
    padding:10px 16px !important;
    border:2px solid var(--theme-main) !important;
    background:rgba(var(--theme-rgb),.13) !important;
    box-shadow:0 0 24px rgba(var(--theme-rgb),.12);
}
.guide-modal-card .selected-code strong{
    font-size:1.45rem !important;
    letter-spacing:.04em;
}

.guide-modal-card .inline-code{
    display:inline-block;
    padding:3px 8px;
    border:1px solid var(--theme-main);
    border-radius:7px;
    background:rgba(var(--theme-rgb),.13);
    color:var(--theme-bright) !important;
    font-size:1.06em;
    font-weight:900;
    letter-spacing:.03em;
}

.progress-steps{
    list-style:none !important;
    counter-reset:guide-step;
    padding:0 !important;
    margin:0 !important;
    display:grid;
    gap:8px;
}
.progress-steps[start="10"]{
    counter-reset:guide-step 9;
}
.progress-steps li{
    counter-increment:guide-step;
    position:relative;
    padding:10px 12px 10px 50px !important;
    min-height:42px;
    border:1px solid rgba(var(--theme-rgb),.17);
    border-radius:12px;
    background:rgba(255,255,255,.025);
    color:#e2ebf5 !important;
    font-size:clamp(.82rem,1.55vh,.95rem) !important;
    line-height:1.35 !important;
}
.progress-steps li::before{
    content:counter(guide-step);
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(135deg,var(--theme-main),var(--theme-bright));
    color:#07111f;
    font-size:.78rem;
    font-weight:950;
    box-shadow:0 5px 14px rgba(var(--theme-rgb),.18);
}
.progress-steps li::marker{
    content:"";
}

.guide-modal-card .notice{
    margin:10px 0 !important;
    padding:12px 14px !important;
    font-size:clamp(.8rem,1.45vh,.9rem);
}
.guide-modal-card .notice ul{
    margin:6px 0 0 !important;
}

/* Height-responsive modal: use available vertical room automatically */
@media (min-height:900px){
    .guide-modal-card{
        max-height:90vh !important;
        padding:26px !important;
    }
    .popup-app-image{
        width:108px;
        height:64px;
    }
    .progress-steps{
        gap:10px;
    }
    .progress-steps li{
        padding-top:12px !important;
        padding-bottom:12px !important;
        font-size:.94rem !important;
    }
}
@media (max-height:760px){
    .guide-modal-card{
        max-height:96vh !important;
        padding:14px 16px !important;
    }
    .popup-app-header{
        margin-bottom:9px;
        padding:7px;
    }
    .popup-app-image{
        width:72px;
        height:42px;
    }
    .guide-modal-card .instruction-header{
        margin-bottom:8px !important;
        padding-bottom:8px;
    }
    .guide-modal-card .instruction-header h3{
        font-size:1.18rem !important;
    }
    .guide-modal-card .selected-code{
        padding:6px 10px !important;
    }
    .guide-modal-card .selected-code strong{
        font-size:1.15rem !important;
    }
    .progress-steps{
        gap:5px;
    }
    .progress-steps li{
        min-height:34px;
        padding:7px 9px 7px 43px !important;
        font-size:.76rem !important;
        line-height:1.25 !important;
    }
    .progress-steps li::before{
        width:24px;
        height:24px;
        left:8px;
        font-size:.7rem;
    }
    .guide-modal-card .notice{
        margin:6px 0 !important;
        padding:8px 10px !important;
        font-size:.75rem;
    }
}
@media (max-width:760px){
    .popup-app-header{
        margin-right:44px;
    }
    .popup-app-image{
        width:76px;
        height:46px;
    }
    .guide-modal-card .instruction-header{
        display:block;
    }
    .guide-modal-card .selected-code{
        margin-top:10px;
        width:100%;
        min-width:0 !important;
    }
    .progress-steps li{
        padding-left:46px !important;
    }
}