:root{
    --black:#0b0b0c;
    --black-soft:#151517;
    --gold:#c9a86a;
    --gold-light:#ead8b4;
    --cream:#f7f4ee;
    --white:#ffffff;
    --text:#161616;
    --muted:#737373;
    --border:#e8e2d8;
    --success:#237a4b;
    --shadow:0 24px 60px rgba(21,18,13,.12);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    background:var(--cream);
}

body{
    min-height:100vh;
    color:var(--text);
    background:
        radial-gradient(circle at 100% 0%, rgba(201,168,106,.13), transparent 32%),
        var(--cream);
    font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a{
    color:inherit;
    text-decoration:none;
}

.app-body{
    display:flex;
    flex-direction:column;
}

.app-header{
    padding:calc(28px + env(safe-area-inset-top)) 24px 28px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    color:var(--white);
    background:var(--black);
    border-bottom:1px solid rgba(201,168,106,.35);
}

.eyebrow{
    margin-bottom:8px;
    color:var(--gold-light);
    font-size:12px;
    font-weight:800;
    letter-spacing:2.4px;
}

.app-header h1{
    max-width:270px;
    font-size:25px;
    line-height:1.12;
    letter-spacing:-.7px;
}

.online-status{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:7px;
    padding:8px 11px;
    color:#e4e4e4;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.online-dot{
    width:8px;
    height:8px;
    background:#5bd48c;
    border-radius:50%;
    box-shadow:0 0 0 4px rgba(91,212,140,.12);
}

.app-container{
    width:min(100% - 32px, 680px);
    margin:0 auto;
    padding:34px 0;
    flex:1;
}

.welcome{
    margin-bottom:28px;
}

.welcome-label{
    margin-bottom:10px;
    color:#9b7b43;
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
}

.welcome h2{
    margin-bottom:10px;
    font-size:32px;
    line-height:1.08;
    letter-spacing:-1.2px;
}

.welcome > p:last-child{
    max-width:520px;
    color:var(--muted);
    font-size:16px;
    line-height:1.6;
}

.actions{
    display:grid;
    gap:15px;
}

.action-card{
    min-height:104px;
    padding:20px;
    display:flex;
    align-items:center;
    gap:17px;
    border-radius:22px;
    transition:transform .15s ease, box-shadow .15s ease;
}

.action-card:active{
    transform:scale(.985);
}

.action-primary{
    color:var(--white);
    background:
        linear-gradient(135deg, rgba(201,168,106,.18), transparent 45%),
        var(--black);
    border:1px solid rgba(201,168,106,.55);
    box-shadow:0 20px 40px rgba(11,11,12,.18);
}

.action-secondary{
    background:rgba(255,255,255,.82);
    border:1px solid var(--border);
    box-shadow:0 13px 35px rgba(28,22,13,.07);
    backdrop-filter:blur(12px);
}

.action-icon{
    width:58px;
    height:58px;
    flex-shrink:0;
    display:grid;
    place-items:center;
    border-radius:18px;
}

.action-primary .action-icon{
    color:var(--black);
    background:var(--gold);
}

.action-secondary .action-icon{
    color:var(--black);
    background:#eee5d5;
}

.action-icon svg{
    width:29px;
    height:29px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.action-content{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.action-content strong{
    font-size:17px;
}

.action-content small{
    color:inherit;
    opacity:.65;
    font-size:14px;
}

.action-arrow{
    margin-left:auto;
    color:var(--gold);
    font-size:33px;
    font-weight:300;
}

.stats-card{
    margin-top:22px;
    padding:20px 10px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    background:rgba(255,255,255,.72);
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(12px);
}

.stat{
    padding:4px 12px;
    text-align:center;
    border-right:1px solid var(--border);
}

.stat:last-child{
    border-right:0;
}

.stat span{
    display:block;
    margin-bottom:7px;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.8px;
}

.stat strong{
    font-size:25px;
    letter-spacing:-.8px;
}

.stat-success strong{
    color:var(--success);
}

.app-footer{
    padding:18px 24px calc(18px + env(safe-area-inset-bottom));
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:#8b7651;
    font-size:12px;
    font-weight:800;
    letter-spacing:1.3px;
    text-transform:uppercase;
}

.gold-line{
    width:24px;
    height:1px;
    background:var(--gold);
}

@media (min-width:700px){
    .app-header{
        padding-left:max(48px, calc((100vw - 680px) / 2));
        padding-right:max(48px, calc((100vw - 680px) / 2));
    }

    .app-header h1{
        max-width:none;
    }

    .welcome h2{
        font-size:40px;
    }
}