/* ===========================================================
   Bhairav One Terminal v5
=========================================================== */

:root{

    --bo-bg:#F8FAFC;
    --bo-surface:#FFFFFF;

    --bo-text:#0F172A;
    --bo-text-soft:#6B7280;

    --bo-border:#E5E7EB;

    --bo-primary:#111827;
    --bo-success:#22C55E;
    --bo-danger:#DC2626;

    --bo-radius:14px;

    --bo-shadow:
        0 10px 24px rgba(17,24,39,.08);

}



/* ===========================================================
RESET
=========================================================== */

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    height:100%;
    -webkit-text-size-adjust:100%;

}

body{

    height:100%;
    overflow:hidden;

    font-family:"Geist",sans-serif;

    background:var(--bo-bg);
    color:var(--bo-text);

}



/* ===========================================================
APP
=========================================================== */

.app-shell{

    width:100%;
    max-width:430px;

    height:100dvh;

    margin:0 auto;

    background:var(--bo-bg);

    display:grid;

    grid-template-rows:

        auto

        minmax(0,1fr);

}



/* ===========================================================
TOPBAR
=========================================================== */

.topbar{

    display:grid;

    grid-template-columns:48px 1fr 48px;

    align-items:center;

    gap:12px;

    height:84px;

    padding:
        env(safe-area-inset-top)
        16px
        0;

    border-bottom:1px solid var(--bo-border);

}


/* ===========================================================
HEADER BUTTONS
=========================================================== */

.menu-button{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid var(--bo-border);

    border-radius:14px;

    background:var(--bo-surface);

    cursor:pointer;

    padding:0;

}
.menu-button svg{

    width:24px;

    height:24px;

    display:block;

    flex-shrink:0;

}


.profile-button{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:1px solid var(--bo-border);

    border-radius:14px;

    background:var(--bo-surface);

    color:var(--bo-text);

    cursor:pointer;

    box-shadow:0 2px 8px rgba(17,24,39,.03);

    transition:.18s ease;

    font-size:16px;

    font-weight:600;

    line-height:1;

}

.profile-button:hover{

    transform:translateY(-1px);

}



/* ===========================================================
BRAND
=========================================================== */

.brand{

    min-width:0;

}

.brand h1{

    font-size:clamp(20px,5vw,28px);

    font-weight:600;

    line-height:1;

    letter-spacing:-0.05em;

    margin:0;

}

.brand p{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:4px;

    font-size:13px;

    line-height:1.2;

    color:var(--bo-text-soft);

}

.brand p::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#22C55E;

    box-shadow:0 0 10px rgba(34,197,94,.35);

    flex-shrink:0;

}


/* ===========================================================
HOME LAYOUT
=========================================================== */

.home{

    height:100%;

    display:flex;

    flex-direction:column;

    padding:
        8px
        clamp(16px,4vw,24px)
        max(12px,env(safe-area-inset-bottom));

}
/* ===========================================================
   HERO
=========================================================== */
.hero-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    padding:0;

    margin-top:-12px;

    margin-bottom:6px;

}

.hero-title{

    display:none;

}



/* ===========================================================
AMOUNT
=========================================================== */

.amount-display{

    display:flex;

    align-items:flex-start;

    justify-content:center;

    line-height:.85;

    margin:0;

}

.currency{

    margin-top:10px;

    font-size:clamp(46px,9vw,60px);

    font-weight:500;

}

.amount{

    font-size:clamp(86px,18vw,112px);

    font-weight:600;

    letter-spacing:-0.08em;

    color:var(--bo-text);

    font-variant-numeric:tabular-nums;

}



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

.hero-card::after{

    content:"Ready to Collect";

       margin-top:2px;

    font-size:clamp(14px,3.6vw,16px);

    font-weight:400;

    color:var(--bo-text-soft);

}



/* ===========================================================
QUICK AMOUNTS
=========================================================== */

.quick-actions{

    width:100%;

    display:grid;

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

    gap:10px;

    margin-top:12px;

}

.quick-button{

    height:clamp(48px,6vh,56px);

    border:1px solid var(--bo-border);

    border-radius:14px;

    background:#FFFFFF;

    font-size:16px;

    font-weight:600;

    transition:

        transform .18s ease,

        box-shadow .18s ease,

        border-color .18s ease;

    box-shadow:

        0 2px 6px rgba(17,24,39,.03);

}

.quick-button:hover{

    transform:translateY(-1px);

    box-shadow:var(--bo-shadow);

}

.quick-button:active{

    transform:scale(.98);

}
/* ===========================================================
   KEYPAD
=========================================================== */

.keypad-card{

    flex:1;

    display:flex;

    min-height:0;

    margin-top:16px;

}



/* ===========================================================
GRID
=========================================================== */

.keypad{

    width:100%;

    display:grid;

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

    grid-template-rows:repeat(4,clamp(58px,8vh,76px));

    gap:12px;

}


/* ===========================================================
KEY
=========================================================== */

.key{

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid var(--bo-border);

    border-radius:14px;

    background:#FFFFFF;

    font-size:clamp(24px,6vw,40px);

    font-weight:500;

    box-shadow:0 2px 6px rgba(17,24,39,.04);

    transition:

        transform .15s ease,

        box-shadow .15s ease,

        border-color .15s ease,

        background .15s ease;

}



/* ===========================================================
INTERACTION
=========================================================== */

.key:hover{

    transform:translateY(-1px);

    box-shadow:var(--bo-shadow);

}

.key:active,

.key.pressed{

    transform:scale(.97);

}



/* ===========================================================
SPECIAL
=========================================================== */

.key-clear{

    color:var(--bo-danger);

}

.key-backspace{

    color:var(--bo-text);

}

.key-backspace svg{

    width:clamp(20px,4vw,26px);

    height:clamp(20px,4vw,26px);

}



/* ===========================================================
FOCUS
=========================================================== */

.key:focus-visible{

    outline:none;

    border-color:var(--bo-primary);

    box-shadow:

        0 0 0 3px rgba(17,24,39,.08);

}
/* ===========================================================
   BOTTOM ACTION
=========================================================== */

.bottom-action{

    flex:0 0 auto;

    margin-top:16px;

    padding-bottom:max(8px,env(safe-area-inset-bottom));

}



/* ===========================================================
GENERATE BUTTON
=========================================================== */

.generate-button{

    width:100%;

    height:clamp(48px,7vh,56px);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 clamp(16px,3vw,20px);

    border:none;

    border-radius:var(--bo-radius);

    background:var(--bo-primary);

    color:#FFFFFF;

    font-family:inherit;

    cursor:pointer;

    transition:

        transform .18s ease,

        opacity .18s ease,

        box-shadow .18s ease;

    box-shadow:var(--bo-shadow);

}



/* ===========================================================
BUTTON STATES
=========================================================== */

.generate-button:hover{

    transform:translateY(-1px);

}

.generate-button:active{

    transform:scale(.985);

}

.generate-button:disabled{

    opacity:.45;

    cursor:not-allowed;

    box-shadow:none;

}



/* ===========================================================
LEFT
=========================================================== */

.button-left{

    display:flex;

    align-items:center;

    gap:12px;

}

.button-left svg{

    width:20px;

    height:20px;

    flex-shrink:0;

}

.button-left span{

    font-size:clamp(15px,3vw,16px);

    font-weight:600;

    white-space:nowrap;

}



/* ===========================================================
RIGHT
=========================================================== */

.button-arrow{

    width:clamp(30px,5vw,36px);

    height:clamp(30px,5vw,36px);

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:rgba(255,255,255,.10);

    font-size:18px;

    font-weight:600;

}



/* ===========================================================
LOADING
=========================================================== */

.generate-button.loading{

    pointer-events:none;

}

.generate-button.loading .button-arrow{

    animation:bo-spin .8s linear infinite;

}

@keyframes bo-spin{

    to{

        transform:rotate(360deg);

    }

}
/* ===========================================================
   SIDE MENU
=========================================================== */

.side-menu{

    position:fixed;

    inset:0;

    z-index:1000;

    visibility:hidden;

    opacity:0;

    pointer-events:none;

    transition:opacity .20s ease;

}

.side-menu.open{

    visibility:visible;

    opacity:1;

    pointer-events:auto;

}



/* ===========================================================
BACKDROP
=========================================================== */

.menu-backdrop{

    position:absolute;

    inset:0;

    background:rgba(15,23,42,.20);

}



/* ===========================================================
PANEL
=========================================================== */

.menu-panel{

    position:absolute;

    left:0;

    top:0;

    width:min(88vw,340px);

    height:100dvh;

    background:var(--bo-surface);

    border-right:1px solid var(--bo-border);

    transform:translateX(-100%);

    transition:transform .25s ease;

    display:flex;

    flex-direction:column;

}

.side-menu.open .menu-panel{

    transform:translateX(0);

}



/* ===========================================================
TOP
=========================================================== */

.menu-top{

    position:relative;

    padding:

        max(24px,env(safe-area-inset-top))

        24px

        20px;

    border-bottom:1px solid var(--bo-border);

}

.menu-top h2{

    font-size:28px;

    font-weight:600;

    letter-spacing:-0.05em;

    color:var(--bo-text);

}

.menu-top p{

    margin-top:6px;

    font-size:14px;

    color:var(--bo-text-soft);

}



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

.menu-close{

    position:absolute;

    right:20px;

    top:max(20px,env(safe-area-inset-top));

    width:42px;

    height:42px;

    border-radius:12px;

    border:1px solid var(--bo-border);

    background:var(--bo-surface);

}



/* ===========================================================
LIST
=========================================================== */

.menu-list{

    flex:1;

    padding:18px;

    display:flex;

    flex-direction:column;

    gap:10px;

}

.menu-list a{

    height:54px;

    display:flex;

    align-items:center;

    padding:0 16px;

    border-radius:14px;

    border:1px solid transparent;

    color:var(--bo-text);

    font-size:15px;

    font-weight:500;

    transition:.18s ease;

}

.menu-list a:hover{

    background:#F9FAFB;

    border-color:var(--bo-border);

}

.menu-list a:active{

    transform:scale(.98);

}



/* ===========================================================
THEME
=========================================================== */

.theme-card{

    margin-top:6px;

    padding:16px;

    border:1px solid var(--bo-border);

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.theme-card h4{

    font-size:15px;

    font-weight:600;

    color:var(--bo-text);

}

.theme-card p{

    margin-top:4px;

    font-size:13px;

    color:var(--bo-text-soft);

}



/* ===========================================================
SWITCH
=========================================================== */

.theme-switch{

    width:54px;

    height:30px;

    padding:3px;

    border-radius:999px;

    background:#D1D5DB;

    transition:.20s ease;

}

.theme-knob{

    width:24px;

    height:24px;

    border-radius:50%;

    background:#FFFFFF;

    transition:.20s ease;

}

html[data-theme="dark"] .theme-switch{

    background:#22C55E;

}

html[data-theme="dark"] .theme-knob{

    transform:translateX(24px);

}
/* ===========================================================
   PROFILE SHEET
=========================================================== */

.profile-sheet{

    position:fixed;

    inset:0;

    z-index:1100;

    display:flex;

    align-items:flex-end;

    justify-content:center;

    visibility:hidden;

    opacity:0;

    pointer-events:none;

    transition:opacity .20s ease;

}

.profile-sheet.show{

    visibility:visible;

    opacity:1;

    pointer-events:auto;

}



/* ===========================================================
BACKDROP
=========================================================== */

.profile-sheet::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(15,23,42,.20);

}



/* ===========================================================
PANEL
=========================================================== */

.profile-panel{

    position:relative;

    width:100%;

    max-width:430px;

    background:var(--bo-surface);

    border-top-left-radius:22px;

    border-top-right-radius:22px;

    border-top:1px solid var(--bo-border);

    transform:translateY(100%);

    transition:transform .28s cubic-bezier(.22,1,.36,1);

    padding:

        18px

        22px

        calc(22px + env(safe-area-inset-bottom));

    box-shadow:

        0 -12px 30px rgba(17,24,39,.08);

}

.profile-sheet.show .profile-panel{

    transform:translateY(0);

}



/* ===========================================================
HANDLE
=========================================================== */

.profile-handle{

    width:48px;

    height:5px;

    margin:0 auto 20px;

    border-radius:999px;

    background:#D1D5DB;

}



/* ===========================================================
AVATAR
=========================================================== */

.profile-avatar{

    width:72px;

    height:72px;

    margin:0 auto;

    border-radius:18px;

    background:#111827;

    color:#FFFFFF;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    font-weight:600;

}



/* ===========================================================
TEXT
=========================================================== */

.profile-panel h2{

    margin-top:16px;

    text-align:center;

    font-size:24px;

    font-weight:600;

    letter-spacing:-0.04em;

    color:var(--bo-text);

}

.profile-panel p{

    margin-top:6px;

    text-align:center;

    font-size:14px;

    color:var(--bo-text-soft);

}



/* ===========================================================
GRID
=========================================================== */

.profile-grid{

    margin-top:24px;

    display:grid;

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

    gap:12px;

}

.profile-grid a{

    height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid var(--bo-border);

    border-radius:14px;

    background:var(--bo-surface);

    color:var(--bo-text);

    font-size:15px;

    font-weight:500;

    transition:.18s ease;

}

.profile-grid a:hover{

    background:#F9FAFB;

}

.profile-grid a:active{

    transform:scale(.98);

}



/* ===========================================================
VERSION
=========================================================== */

.profile-version{

    margin-top:24px;

    text-align:center;

    font-size:12px;

    color:#9CA3AF;

}
/* ===========================================================
   LOADING + SUCCESS
=========================================================== */

.loading-overlay,
.success-overlay{

    position:fixed;

    inset:0;

    z-index:2000;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(15,23,42,.35);

    backdrop-filter:blur(4px);

    -webkit-backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.20s ease;

}

.loading-overlay.show,
.success-overlay.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

.loader-card,
.success-card{

    width:min(240px,90vw);

    background:var(--bo-surface);

    border:1px solid var(--bo-border);

    border-radius:18px;

    padding:28px 22px;

    text-align:center;

    box-shadow:var(--bo-shadow);

}

.loader-spinner{

    width:42px;

    height:42px;

    margin:0 auto 18px;

    border-radius:50%;

    border:3px solid #E5E7EB;

    border-top-color:#111827;

    animation:bo-spin .8s linear infinite;

}

.success-check{

    width:68px;

    height:68px;

    margin:0 auto 18px;

    border-radius:50%;

    background:#DCFCE7;

    color:#16A34A;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    font-weight:700;

}



/* ===========================================================
DARK MODE
=========================================================== */

html[data-theme="dark"]{

    --bo-bg:#0F172A;

    --bo-surface:#111827;

    --bo-text:#FFFFFF;

    --bo-text-soft:#CBD5E1;

    --bo-border:#374151;

}



/* Background */

html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell{

    background:var(--bo-bg);

}



/* IMPORTANT */

html[data-theme="dark"] .brand h1{

    color:#FFFFFF;

}

html[data-theme="dark"] .brand span{

    color:#FFFFFF;

}

html[data-theme="dark"] .brand p{

    color:#CBD5E1;

}



/* Cards */

html[data-theme="dark"] .menu-button,
html[data-theme="dark"] .profile-button,
html[data-theme="dark"] .quick-button,
html[data-theme="dark"] .key,
html[data-theme="dark"] .generate-button,
html[data-theme="dark"] .menu-panel,
html[data-theme="dark"] .profile-panel,
html[data-theme="dark"] .loader-card,
html[data-theme="dark"] .success-card{

    background:var(--bo-surface);

    border-color:var(--bo-border);

}



/* Text */

html[data-theme="dark"] .key,
html[data-theme="dark"] .profile-grid a,
html[data-theme="dark"] .menu-list a,
html[data-theme="dark"] .theme-card h4,
html[data-theme="dark"] .profile-panel h2{

    color:#FFFFFF;

}

html[data-theme="dark"] .theme-card p,
html[data-theme="dark"] .profile-panel p,
html[data-theme="dark"] .profile-version{

    color:#CBD5E1;

}



/* Primary Button */

html[data-theme="dark"] .generate-button{

    background:#FFFFFF;

    color:#111827;

}

html[data-theme="dark"] .button-arrow{

    background:rgba(17,24,39,.08);

}



/* ===========================================================
POLISH
=========================================================== */

button{

    -webkit-tap-highlight-color:transparent;

    touch-action:manipulation;

}

svg{

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

::-webkit-scrollbar{

    display:none;

}

*{

    scrollbar-width:none;

}

::selection{

    background:#111827;

    color:#FFFFFF;

}