* {
  box-sizing: border-box;
  }

html {
min-height: 100%;
}

body {
margin: 0;
min-height: 100vh;


font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

color: #111827;
background: #ffffff;

-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;


}

button,
a {
font: inherit;
}

button {
-webkit-tap-highlight-color: transparent;
}

img {
user-select: none;
-webkit-user-drag: none;
}

.hidden {
display: none !important;
}

/* =========================================================
GENERIC
========================================================= */

.screen {
min-height: 100vh;
width: 100%;
}

/* =========================================================
INITIAL LOADER
========================================================= */

.loading-screen {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;


background: #ffffff;


}

.loader {
width: 42px;
height: 42px;


border: 3px solid #e5e7eb;
border-top-color: #111827;

border-radius: 50%;

animation:
    loading-spin
    0.75s
    linear
    infinite;


}

.loading-text {
margin-top: 18px;


font-size: 13px;
font-weight: 500;

color: #9ca3af;

letter-spacing: 0.01em;


}

@keyframes loading-spin {


from {
    transform: rotate(0deg);
}

to {
    transform: rotate(360deg);
}


}

/* =========================================================
CONFIRMATION SCREEN
========================================================= */

.confirm-screen {
display: flex;
align-items: center;
justify-content: center;


padding: 30px;

background:
    radial-gradient(
        circle at center,
        #ffffff 0%,
        #ffffff 60%,
        #f8fafc 100%
    );


}

.confirm-card {
width: min(100%, 480px);


padding: 46px 42px 38px;

text-align: center;

background: rgba(255, 255, 255, 0.98);

border: 1px solid #e5e7eb;

border-radius: 24px;

box-shadow:
    0 24px 80px rgba(15, 23, 42, 0.08),
    0 4px 16px rgba(15, 23, 42, 0.04);


}

/* =========================================================
SHIELD
========================================================= */

.shield-wrapper {
position: relative;


width: 84px;
height: 84px;

margin: 0 auto 24px;

display: flex;
align-items: center;
justify-content: center;


}

.shield-glow {
position: absolute;


width: 76px;
height: 76px;

border-radius: 50%;

background: #f1f5f9;

filter: blur(2px);


}

.shield-logo {
position: relative;


width: 58px;
height: 58px;

object-fit: contain;

z-index: 1;


}

/* =========================================================
TYPOGRAPHY
========================================================= */

.eyebrow {
margin-bottom: 12px;


font-size: 11px;
line-height: 1;

font-weight: 800;

letter-spacing: 0.16em;

color: #9ca3af;


}

.confirm-card h1 {
margin: 0;


font-size: clamp(36px, 7vw, 46px);

line-height: 1.05;

letter-spacing: -0.045em;

font-weight: 800;

color: #111827;


}

.confirm-description {
max-width: 390px;


margin: 18px auto 28px;

font-size: 15px;
line-height: 1.7;

color: #6b7280;


}

/* =========================================================
PRIMARY BUTTON
========================================================= */

.primary-button {
width: 100%;


min-height: 54px;

padding: 0 24px;

border: 0;
border-radius: 13px;

background: #111827;

color: #ffffff;

cursor: pointer;

font-size: 14px;
font-weight: 750;

transition:
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;


}

.primary-button:hover {
background: #1f2937;


transform: translateY(-1px);

box-shadow:
    0 10px 24px rgba(17, 24, 39, 0.18);


}

.primary-button:active {
transform: translateY(0);
}

.primary-button:disabled {
cursor: wait;
opacity: 0.75;
}

/* =========================================================
BUTTON LOADER
========================================================= */

.button-loading {
display: inline-flex;


align-items: center;
justify-content: center;

gap: 10px;


}

.small-spinner {
width: 16px;
height: 16px;


border: 2px solid rgba(255,255,255,0.35);
border-top-color: #ffffff;

border-radius: 50%;

animation:
    loading-spin
    0.7s
    linear
    infinite;


}

/* =========================================================
SECURITY NOTE
========================================================= */

.security-note {
margin: 18px 0 0;


font-size: 12px;

color: #9ca3af;


}

.check-icon {
display: inline-flex;


width: 17px;
height: 17px;

align-items: center;
justify-content: center;

margin-right: 5px;

border-radius: 50%;

background: #f1f5f9;

color: #475569;

font-size: 10px;
font-weight: 800;


}

/* =========================================================
VISITOR TOKEN
========================================================= */

.visitor-token {
margin-top: 22px;


padding-top: 18px;

border-top: 1px solid #f1f5f9;

display: flex;

justify-content: center;
align-items: center;

gap: 10px;


}

.visitor-token span {
font-size: 9px;


font-weight: 800;

letter-spacing: 0.16em;

color: #c4cbd4;


}

.visitor-token strong {
font-family:
ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
monospace;


font-size: 12px;

letter-spacing: 0.16em;

color: #64748b;


}

/* =========================================================
DOWNLOAD SCREEN
========================================================= */

.download-screen {
position: fixed;


inset: 0;

z-index: 100;

display: flex;

align-items: center;
justify-content: center;

padding: 24px;

overflow: hidden;


}

/* =========================================================
RESPONSIVE INSTALLER BACKGROUND
========================================================= */

.installer-background {


position: absolute;

/*
 * Oversize the image so the blur never exposes
 * white/empty edges.
 */

inset: 2px;

/*
 * Replace this file with your actual installer
 * background image.
 */

background-image:
    url("../images/clean_adb_bg.png");

/*
 * Cover guarantees that the image fills the
 * entire viewport regardless of aspect ratio.
 */

background-size: cover;

/*
 * Keep the important part of the image centered.
 */

background-position: center center;

background-repeat: no-repeat;

/*
 * Blur the image while slightly enlarging it
 * to eliminate blur edges.
 */

filter: blur(2px);

transform: scale(1.08);

/*
 * Smoothly render the background.
 */

will-change: transform;

z-index: -2;


}

/* =========================================================
DARK OVERLAY
========================================================= */

.background-overlay {


position: absolute;

inset: 0;

background:
    linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.58),
        rgba(15, 23, 42, 0.46)
    );

z-index: -1;


}


/* =========================================================
DOWNLOAD MODAL
========================================================= */

.download-modal {
position: relative;


width: min(100%, 530px);

padding: 42px;

text-align: center;

border: 1px solid rgba(255, 255, 255, 0.7);

border-radius: 24px;

background: rgba(255, 255, 255, 0.98);

box-shadow:
    0 35px 100px rgba(0, 0, 0, 0.35);

/*
 * Hidden until JavaScript adds
 * .modal-visible.
 */

opacity: 0;

visibility: hidden;

transform:
    translateY(25px)
    scale(0.96);

transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(
        0.16,
        1,
        0.3,
        1
    ),
    visibility 0.45s ease;


}

/* =========================================================
MODAL APPEARS AFTER BACKGROUND DELAY
========================================================= */

.download-modal.modal-visible {


opacity: 1;

visibility: visible;

transform:
    translateY(0)
    scale(1);


}


/* =========================================================
CLOSE BUTTON
========================================================= */

.close-button {
position: absolute;


top: 15px;
right: 17px;

width: 34px;
height: 34px;

border: 0;

border-radius: 50%;

background: #f8fafc;

color: #64748b;

cursor: pointer;

font-size: 24px;

line-height: 1;

transition:
    background 0.15s ease,
    color 0.15s ease;


}

.close-button:hover {
background: #eef2f7;
color: #111827;
}

/* =========================================================
MODAL ICON
========================================================= */

.modal-icon {
width: 68px;
height: 68px;


margin: 0 auto 22px;

display: flex;

align-items: center;
justify-content: center;

border-radius: 18px;

background: #f8fafc;


}

.modal-icon img {
width: 44px;
height: 44px;


object-fit: contain;


}

.download-modal h2 {
margin: 0;


font-size: 31px;

line-height: 1.1;

letter-spacing: -0.035em;


}

.download-modal > p {
max-width: 410px;


margin: 16px auto 24px;

font-size: 14px;

line-height: 1.7;

color: #6b7280;


}

/* =========================================================
FILE INFORMATION
========================================================= */

.file-information {
display: flex;


align-items: center;

gap: 14px;

padding: 15px;

margin-bottom: 15px;

text-align: left;

border: 1px solid #edf0f3;

border-radius: 14px;

background: #fafbfc;


}

.file-icon {
width: 42px;
height: 42px;


flex: 0 0 42px;

display: flex;

align-items: center;
justify-content: center;

border-radius: 11px;

background: #111827;

color: white;

font-size: 22px;

font-weight: 700;


}

.file-details {
display: flex;


flex-direction: column;

gap: 4px;


}

.file-details strong {
font-size: 14px;
}

.file-details span {
font-size: 12px;


color: #9ca3af;


}

/* =========================================================
DOWNLOAD BUTTON
========================================================= */

.download-button {
width: 100%;


min-height: 54px;

display: flex;

align-items: center;
justify-content: center;

gap: 12px;

border: 0;

border-radius: 13px;

background: #111827;

color: white;

cursor: pointer;

font-size: 14px;

font-weight: 750;

transition:
    transform 0.18s ease,
    background 0.18s ease;


}

.download-button:hover {
background: #1f2937;


transform: translateY(-1px);


}

.download-arrow {
font-size: 18px;
}

.modal-note {
margin-top: 14px !important;


margin-bottom: 0 !important;

font-size: 11px !important;

color: #9ca3af !important;


}

.modal-error {
margin-top: 14px !important;


margin-bottom: 0 !important;

font-size: 12px !important;

font-weight: 600;

color: #b91c1c !important;

text-align: center;

}

/* =========================================================
INSTRUCTIONS
========================================================= */

.instructions-screen {
min-height: 100vh;


padding: 80px 30px;

background:
    radial-gradient(
        circle at 85% 15%,
        #f1f5f9 0,
        transparent 32%
    ),
    #ffffff;


}

.instructions-container {
width: min(1160px, 100%);


margin: 0 auto;

display: grid;

grid-template-columns:
    minmax(0, 1fr)
    minmax(380px, 0.85fr);

gap: 70px;

align-items: center;


}

.instructions-content h1 {
margin: 0 0 20px;


font-size:
    clamp(38px, 5vw, 58px);

line-height: 1.03;

letter-spacing: -0.05em;


}

.instructions-content h1 span {
color: #64748b;
}

.instructions-intro {
max-width: 580px;


margin-bottom: 35px;

color: #64748b;

font-size: 15px;

line-height: 1.75;


}

/* =========================================================
INSTRUCTION STEPS
========================================================= */

.instruction-step {
display: flex;


gap: 18px;

padding: 18px 0;

border-bottom: 1px solid #f1f5f9;


}

.step-number {
width: 34px;
height: 34px;


flex: 0 0 34px;

display: flex;

align-items: center;
justify-content: center;

border-radius: 50%;

background: #111827;

color: #ffffff;

font-size: 12px;

font-weight: 800;


}

.step-content h3 {
margin: 0 0 6px;


font-size: 15px;


}

.step-content p {
margin: 0;


color: #6b7280;

font-size: 13px;

line-height: 1.65;


}

/* =========================================================
VIDEO
========================================================= */

.video-section {
width: 100%;
}

.video-card {
overflow: hidden;


border: 1px solid #e5e7eb;

border-radius: 20px;

background: #ffffff;

box-shadow:
    0 20px 70px rgba(15,23,42,0.08);


}

.video-header {
min-height: 52px;


display: flex;

align-items: center;
justify-content: space-between;

padding: 0 17px;

border-bottom: 1px solid #f1f5f9;


}

.video-label {
font-size: 10px;


font-weight: 800;

letter-spacing: 0.14em;

color: #64748b;


}

.video-duration {
font-size: 11px;


color: #9ca3af;


}

.installation-video {
display: block;


width: 100%;

aspect-ratio: 16 / 10;

object-fit: cover;

background: #0f172a;


}

.video-footer {
padding: 14px 17px;


font-size: 12px;

color: #64748b;


}

/* =========================================================
HELP CARD
========================================================= */

.help-card {
margin-top: 15px;


display: flex;

align-items: flex-start;

gap: 13px;

padding: 17px;

border: 1px solid #edf0f3;

border-radius: 16px;

background: #fafbfc;


}

.help-icon {
width: 30px;
height: 30px;


flex: 0 0 30px;

display: flex;

align-items: center;
justify-content: center;

border-radius: 50%;

background: #111827;

color: white;

font-size: 13px;

font-weight: 800;


}

.help-card strong {
display: block;


margin-bottom: 4px;

font-size: 13px;


}

.help-card p {
margin: 0;


color: #64748b;

font-size: 12px;

line-height: 1.55;


}

/* =========================================================
NOSCRIPT
========================================================= */

noscript {
display: block;


padding: 20px;

text-align: center;

font-size: 14px;

color: #64748b;


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 850px) {


.instructions-screen {
    padding: 55px 20px;
}

.instructions-container {
    grid-template-columns: 1fr;

    gap: 45px;
}

.video-section {
    max-width: 650px;

    margin: 0 auto;

    width: 100%;
}


}

@media (max-width: 560px) {


.confirm-screen {
    padding: 18px;
}

.confirm-card {
    padding: 38px 24px 30px;

    border-radius: 20px;
}

.download-screen {
    padding: 15px;
}

.download-modal {
    padding: 36px 22px 27px;

    border-radius: 20px;
}

.download-modal h2 {
    font-size: 27px;
}

.instructions-content h1 {
    font-size: 40px;
}


}

/* =========================================================
DOWNLOAD STATUS
========================================================= */

.download-status {
display: flex;
align-items: center;
gap: 14px;


margin: 0 0 24px;
padding: 15px 17px;

border: 1px solid #e5e7eb;
border-radius: 14px;

background: #f8fafc;


}

.download-status strong {
display: block;


margin-bottom: 4px;

font-size: 13px;


}

.download-status p {
margin: 0;


color: #64748b;

font-size: 11px;

line-height: 1.5;


}

/* =========================================================
DOWNLOAD SPINNER
========================================================= */

.status-spinner {
width: 27px;
height: 27px;


flex: 0 0 27px;

border: 3px solid #e2e8f0;
border-top-color: #111827;

border-radius: 50%;

animation:
    download-status-spin
    0.75s
    linear
    infinite;


}

@keyframes download-status-spin {


to {
    transform: rotate(360deg);
}


}

/* =========================================================
DOWNLOAD SUCCESS
========================================================= */

.status-success {
width: 27px;
height: 27px;


flex: 0 0 27px;

display: flex;

align-items: center;
justify-content: center;

border-radius: 50%;

background: #111827;

color: #ffffff;

font-size: 13px;

font-weight: 800;


}

/* =========================================================
DOWNLOAD ERROR
========================================================= */

.status-error {
width: 27px;
height: 27px;


flex: 0 0 27px;

display: flex;

align-items: center;
justify-content: center;

border-radius: 50%;

background: #111827;

color: #ffffff;

font-size: 13px;

font-weight: 800;


}

/* =========================================================
MANUAL DOWNLOAD
========================================================= */

.manual-download {
display: flex;


align-items: center;
justify-content: center;

gap: 12px;

width: 100%;

margin-top: 28px;

padding: 15px 20px;

border-radius: 13px;

background: #111827;

color: #ffffff;

text-decoration: none;

font-size: 13px;

font-weight: 750;

transition:
    transform 0.18s ease,
    background 0.18s ease;


}

.manual-download:hover {
background: #1f2937;


transform: translateY(-1px);


}

@media (max-width: 600px) {


.installer-background {

    /*
     * Slightly stronger zoom on narrow
     * portrait screens prevents blurred
     * edges from becoming visible.
     */

    inset: -80px;

    background-size: cover;

    background-position: center center;

    filter: blur(4px);

    transform: scale(1.12);

}


.download-modal {

    width: calc(100vw - 30px);

    max-height: calc(100vh - 30px);

    overflow-y: auto;

    padding:
        35px
        22px
        28px;

    border-radius: 20px;

}


}


/* =========================================================
   CONFIRMATION VISUAL
========================================================= */

.confirm-visual {

    width: 82px;
    height: 82px;

    margin: 0 auto 22px;

    display: flex;

    align-items: center;
    justify-content: center;

    position: relative;

}


/* =========================================================
   VARIANT 1 — SHIELD
========================================================= */

.visual-shield {

    width: 76px;
    height: 76px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 22px;

    background: #f8fafc;

    border: 1px solid #e2e8f0;

}

.visual-shield img {

    width: 47px;
    height: 47px;

    object-fit: contain;

}


/* =========================================================
   VARIANT 2 — DOWNLOAD
========================================================= */

.visual-circle {

    width: 76px;
    height: 76px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #111827;

    box-shadow:
        0 12px 30px rgba(
            15,
            23,
            42,
            0.16
        );

}

.visual-download {

    color: white;

    font-size: 34px;

    line-height: 1;

    font-weight: 300;

    transform:
        translateY(-2px);

}


/* =========================================================
   VARIANT 3 — CHECK
========================================================= */

.visual-check {

    width: 76px;
    height: 76px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 2px solid #111827;

}

.visual-check span {

    font-size: 34px;

    font-weight: 700;

    color: #111827;

}


/* =========================================================
   VARIANT 4 — CSS LOCK
========================================================= */

.visual-lock {

    width: 76px;
    height: 76px;

    position: relative;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    padding-bottom: 15px;

    border-radius: 20px;

    background: #f1f5f9;

}

.lock-body {

    width: 34px;
    height: 29px;

    border-radius: 6px;

    background: #111827;

    position: relative;

}

.lock-body::after {

    content: "";

    position: absolute;

    width: 6px;
    height: 10px;

    left: 50%;
    top: 9px;

    transform:
        translateX(-50%);

    border-radius: 5px;

    background: white;

}

.lock-shackle {

    position: absolute;

    width: 25px;
    height: 25px;

    top: 15px;

    border: 5px solid #111827;

    border-bottom: 0;

    border-radius:
        16px 16px 0 0;

}


/* =========================================================
   VARIANT 5 — TERMINAL
========================================================= */

.visual-terminal {

    width: 76px;
    height: 76px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 17px;

    background: #111827;

    box-shadow:
        0 12px 30px rgba(
            15,
            23,
            42,
            0.15
        );

}

.visual-terminal span {

    color: white;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 28px;

    font-weight: 700;

}


/* =========================================================
   VARIANT 6 — GRID
========================================================= */

.visual-grid {

    width: 58px;
    height: 58px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 5px;

    transform:
        rotate(8deg);

}

.visual-grid span {

    display: block;

    border-radius: 4px;

    background: #111827;

}

.visual-grid span:nth-child(2),
.visual-grid span:nth-child(4),
.visual-grid span:nth-child(8) {

    opacity: 0.45;

}

.visual-grid span:nth-child(5) {

    transform:
        scale(1.18);

}