:root{
    --bg:#050914;
    --panel:#0a1222;
    --panel-2:#0d1930;
    --line:rgba(79,207,255,.18);
    --gold:#ffbf4b;
    --gold-2:#ffe4a3;
    --amber:#d98b18;
    --mint:#38e8cf;
    --electric:#22d8ff;
    --electric-2:#347cff;
    --text:#f4f8ff;
    --muted:#96a8c2;
    --surface:rgba(9,18,35,.82);
    --surface-strong:rgba(10,21,42,.96);
    --radius:20px;
    --shadow:0 24px 70px rgba(0,0,0,.34);
}

html{scroll-padding-top:88px}

body.ui-v2{
    background:
        radial-gradient(circle at 18% -8%,rgba(34,216,255,.15),transparent 32rem),
        radial-gradient(circle at 88% 12%,rgba(255,191,75,.08),transparent 28rem),
        linear-gradient(155deg,#030611 0%,#07101e 52%,#050a14 100%);
    color:var(--text);
    font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
}

body.ui-v2::before{
    opacity:.38;
    background-image:
        linear-gradient(rgba(80,190,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(80,190,255,.035) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(to bottom,black,transparent 78%);
    animation:gridDrift 20s linear infinite;
}

@keyframes gridDrift{to{transform:translateY(48px)}}

.ui-v2 .nav{
    position:sticky;
    top:0;
    z-index:18;
    min-height:70px;
    padding:10px clamp(14px,4vw,52px);
    background:rgba(4,9,19,.78);
    border-bottom:1px solid rgba(66,201,255,.14);
    box-shadow:0 10px 34px rgba(0,0,0,.22);
    backdrop-filter:blur(22px) saturate(135%);
}

.ui-v2 .brand{gap:10px;text-shadow:none;letter-spacing:.08em}
.ui-v2 .brand-logo{
    width:46px;
    height:46px;
    filter:drop-shadow(0 0 15px rgba(34,216,255,.34));
}
.ui-v2 .brand span{font-size:14px}

.ui-v2 a,
.ui-v2 button,
.ui-v2 input,
.ui-v2 textarea,
.ui-v2 select{font:inherit}

.ui-v2 button,
.ui-v2 .link-btn,
.ui-v2 .nav a,
.ui-v2 .menu-drawer a{
    min-height:46px;
    border:1px solid rgba(58,203,255,.22);
    border-radius:14px;
    background:rgba(12,28,52,.72);
    box-shadow:none;
    transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}

.ui-v2 button:hover,
.ui-v2 .link-btn:hover,
.ui-v2 .nav a:hover,
.ui-v2 .menu-drawer a:hover{
    border-color:rgba(34,216,255,.58);
    background:rgba(18,43,75,.88);
    box-shadow:0 0 26px rgba(34,216,255,.1);
    transform:translateY(-1px);
}

.ui-v2 button:focus-visible,
.ui-v2 a:focus-visible,
.ui-v2 input:focus-visible,
.ui-v2 textarea:focus-visible,
.ui-v2 select:focus-visible{
    outline:3px solid rgba(34,216,255,.26);
    outline-offset:3px;
}

.ui-v2 #convertBtn,
.ui-v2 .public-plan-pay,
.ui-v2 .review-post,
.ui-v2 .attendance-actions button:first-child{
    border-color:rgba(34,216,255,.72);
    color:#03101b;
    background:linear-gradient(135deg,#7deaff,#22d8ff 48%,#4e8cff);
    box-shadow:0 12px 30px rgba(34,216,255,.22),inset 0 1px rgba(255,255,255,.45);
    font-weight:900;
}

.ui-v2 #convertBtn:hover,
.ui-v2 .public-plan-pay:hover,
.ui-v2 .review-post:hover{
    background:linear-gradient(135deg,#a6f2ff,#38ddff 48%,#689dff);
    box-shadow:0 16px 38px rgba(34,216,255,.28);
}

.ui-v2 .menu-toggle{
    width:46px;
    min-height:46px;
    border-radius:14px;
    background:rgba(12,28,52,.76);
    border-color:rgba(34,216,255,.28);
}
.ui-v2 .menu-toggle span{background:var(--electric);box-shadow:0 0 9px rgba(34,216,255,.5)}

.ui-v2 .menu-drawer{
    border-left-color:rgba(34,216,255,.28);
    background:linear-gradient(165deg,rgba(6,13,27,.99),rgba(8,23,43,.98));
    box-shadow:-30px 0 80px rgba(0,0,0,.5);
}

.ui-v2 .wrap{width:min(1180px,100%);padding:30px 18px 42px}
.ui-v2 .hero{grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);gap:18px}

.ui-v2 .headline,
.ui-v2 .panel,
.ui-v2 .business-section,
.ui-v2 .history,
.ui-v2 .reviews,
.ui-v2 .card,
.ui-v2 .sidebar{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--surface);
    box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.035);
    backdrop-filter:blur(16px);
}

.ui-v2 .headline{padding:clamp(24px,4vw,46px)}
.ui-v2 .headline::before{
    background:linear-gradient(90deg,var(--electric),var(--electric-2) 60%,var(--gold));
    box-shadow:0 0 22px rgba(34,216,255,.25);
}
.ui-v2 h1{
    max-width:760px;
    font-size:clamp(38px,5.4vw,70px);
    line-height:.98;
    letter-spacing:-.055em;
    text-wrap:balance;
    background:linear-gradient(125deg,#fff 14%,#9eefff 54%,#ffd68a 96%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.ui-v2 .sub{color:var(--muted);line-height:1.72;font-size:15px}

.ui-v2 .stats{gap:9px}
.ui-v2 .stat,
.ui-v2 .setting-card,
.ui-v2 .info-card,
.ui-v2 .reward-mini,
.ui-v2 .mission-card{
    border:1px solid rgba(70,202,255,.14);
    border-radius:16px;
    background:rgba(8,20,39,.68);
    box-shadow:none;
}
.ui-v2 .stat{padding:14px}
.ui-v2 .label{color:#79cfe8;letter-spacing:.13em}
.ui-v2 .value{letter-spacing:-.025em}
.ui-v2 .badge,
.ui-v2 .value-chip,
.ui-v2 .review-pill{
    border-color:rgba(255,191,75,.28);
    background:rgba(255,191,75,.09);
    color:var(--gold-2);
    border-radius:999px;
}

.ui-v2 .public-plan-panel,
.ui-v2 .logo-showcase{
    border-color:rgba(34,216,255,.16);
    border-radius:18px;
    background:rgba(5,15,31,.72);
}
.ui-v2 .logo-showcase{min-height:218px}
.ui-v2 .logo-showcase img{width:min(270px,70%);filter:drop-shadow(0 0 24px rgba(34,216,255,.2))}

.ui-v2 .panel{
    position:relative;
    overflow:hidden;
    padding:18px;
    background:linear-gradient(165deg,rgba(9,22,43,.98),rgba(5,13,27,.94));
}
.ui-v2 .panel::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--electric),var(--gold),transparent);
    opacity:.7;
}

.converter-console{
    position:relative;
    margin-bottom:14px;
    padding:12px 14px 14px;
    overflow:hidden;
    border:1px solid rgba(34,216,255,.17);
    border-radius:14px;
    background:#050c18;
    color:#8deeff;
    font-family:"Cascadia Code",Consolas,monospace;
}
.converter-console::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-40%;
    height:40%;
    background:linear-gradient(transparent,rgba(34,216,255,.075),transparent);
    animation:consoleScan 4.8s linear infinite;
    pointer-events:none;
}
@keyframes consoleScan{to{transform:translateY(360%)}}
.console-head{display:flex;align-items:center;gap:6px;margin-bottom:12px;color:#70849f;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.console-dot{width:7px;height:7px;border-radius:50%;background:#34455f}
.console-dot:nth-child(1){background:#ff6d72}.console-dot:nth-child(2){background:#ffc857}.console-dot:nth-child(3){background:#36e5bb}
.console-title{margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.console-live{margin-left:auto;color:#39e6c2}
.console-live::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;animation:livePulse 1.8s ease-in-out infinite}
@keyframes livePulse{50%{opacity:.38}}
.console-line{display:flex;align-items:center;gap:9px;min-width:0;font-size:12px}
.console-prompt{color:var(--gold)}
.console-command{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#d3f7ff}
.signal-bars{height:18px;margin-left:auto;display:flex;align-items:end;gap:3px}
.signal-bars i{display:block;width:3px;height:5px;border-radius:2px;background:var(--electric);animation:signal 1.05s ease-in-out infinite}
.signal-bars i:nth-child(2){animation-delay:.12s}.signal-bars i:nth-child(3){animation-delay:.24s}.signal-bars i:nth-child(4){animation-delay:.36s}.signal-bars i:nth-child(5){animation-delay:.48s}
@keyframes signal{0%,100%{height:4px;opacity:.45}50%{height:17px;opacity:1}}

.ui-v2 .drop{
    min-height:142px;
    border:1px dashed rgba(34,216,255,.38);
    border-radius:16px;
    background:rgba(13,35,63,.46);
}
.ui-v2 .drop:hover,
.ui-v2 .drop.dragging{
    border-color:var(--electric);
    background:rgba(21,61,95,.56);
    box-shadow:inset 0 0 38px rgba(34,216,255,.06);
}
.ui-v2 .drop strong{color:#ddfaff;font-size:17px}

.ui-v2 .url-box,
.ui-v2 .audio-lab{margin-top:12px}
.ui-v2 input,
.ui-v2 textarea,
.ui-v2 select{
    border:1px solid rgba(86,179,226,.2);
    border-radius:13px;
    background:rgba(3,11,24,.74);
    color:var(--text);
}
.ui-v2 input:not([type="range"]),
.ui-v2 select{min-height:48px}
.ui-v2 input:focus,
.ui-v2 textarea:focus,
.ui-v2 select:focus{border-color:rgba(34,216,255,.7);box-shadow:0 0 0 3px rgba(34,216,255,.08)}
.ui-v2 .range{accent-color:var(--electric)}

.ui-v2 .bar{height:7px;border-radius:99px;background:rgba(78,119,156,.18);overflow:hidden}
.ui-v2 .bar span{background:linear-gradient(90deg,var(--electric-2),var(--electric),var(--gold));box-shadow:0 0 16px rgba(34,216,255,.48)}
.ui-v2 #status{
    min-height:30px;
    padding:8px 2px 0;
    color:#a9c6d8;
    font:12px/1.55 "Cascadia Code",Consolas,monospace;
}

.ui-v2 .business-section,
.ui-v2 .history,
.ui-v2 .reviews{margin-top:18px;padding:clamp(20px,3vw,32px)}
.ui-v2 .section-head h2,
.ui-v2 .history h2,
.ui-v2 .reviews h2{letter-spacing:-.035em;text-wrap:balance}
.ui-v2 .info-card{transition:transform .2s ease,border-color .2s ease}
.ui-v2 .info-card:hover{transform:translateY(-3px);border-color:rgba(34,216,255,.34)}
.ui-v2 .price{color:var(--gold-2)}
.ui-v2 .legal-strip{border-radius:16px;background:rgba(5,14,28,.66)}

.ui-v2 .footer{border-top-color:rgba(34,216,255,.12);background:#040812;color:#7890ab}

/* Dashboard */
.ui-v2 .app-shell{width:min(1220px,100%);grid-template-columns:240px minmax(0,1fr);gap:16px;padding:22px 18px 42px}
.ui-v2 .sidebar{top:88px;padding:12px;background:rgba(7,16,32,.88)}
.ui-v2 .side-profile{border-radius:15px;background:rgba(13,34,60,.62)}
.ui-v2 .side-avatar,
.ui-v2 .avatar{border-color:rgba(34,216,255,.52);box-shadow:0 0 24px rgba(34,216,255,.15)}
.ui-v2 .side-name{color:#e4f9ff}
.ui-v2 .side-menu a{border-color:transparent;background:transparent;color:#9eb2ca}
.ui-v2 .side-menu a:hover,
.ui-v2 .side-menu a.is-active{color:#f4fbff;border-color:rgba(34,216,255,.22);background:rgba(24,64,99,.5)}
.ui-v2 .content{display:grid;gap:14px}
.ui-v2 .grid{gap:14px}
.ui-v2 .card{padding:20px;background:rgba(8,18,35,.82)}
.ui-v2 .section{margin-top:0}
.ui-v2 .profile-card{background:linear-gradient(145deg,rgba(9,31,57,.92),rgba(8,18,35,.84))}

.ui-v2 .pay-sheet,
.ui-v2 .attendance-dialog{
    border-color:rgba(34,216,255,.28);
    border-radius:22px;
    background:linear-gradient(165deg,#0b1930,#06101f);
    box-shadow:0 34px 100px rgba(0,0,0,.6),0 0 50px rgba(34,216,255,.08);
}

@media(max-width:860px){
    body.ui-v2::before{display:none}
    html{scroll-padding-top:74px}
    .ui-v2 .nav{min-height:64px;padding:8px 12px;background:#050d1b;backdrop-filter:none}
    .ui-v2 .brand-logo{width:42px;height:42px}
    .ui-v2 .brand span{max-width:180px;font-size:12px;line-height:1.2}
    .ui-v2 .wrap{padding:14px 12px 34px}
    .ui-v2 .hero{display:flex;flex-direction:column;gap:12px}
    .ui-v2 .hero .panel{order:-1}
    .ui-v2 .panel{padding:13px;border-radius:18px}
    .ui-v2 .headline{padding:24px 20px}
    .ui-v2 h1{font-size:clamp(36px,11vw,52px)}
    .ui-v2 .stats{grid-template-columns:repeat(3,minmax(0,1fr));overflow-x:auto;padding-bottom:2px}
    .ui-v2 .stat{min-width:112px}
    .ui-v2 .stat .value{font-size:15px}
    .ui-v2 .logo-showcase{min-height:190px}
    .ui-v2 .logo-showcase img{width:min(220px,68%)}
    .ui-v2 .business-section,.ui-v2 .history,.ui-v2 .reviews{margin-top:12px;padding:20px 16px;border-radius:18px}
    .ui-v2 .app-shell{display:block;padding:12px 10px 34px}
    .ui-v2 .sidebar{
        position:relative;
        top:auto;
        z-index:1;
        margin-bottom:12px;
        padding:7px;
        border-radius:16px;
        background:rgba(5,13,27,.94);
        backdrop-filter:none;
    }
    .ui-v2 .headline,
    .ui-v2 .panel,
    .ui-v2 .business-section,
    .ui-v2 .history,
    .ui-v2 .reviews,
    .ui-v2 .card{backdrop-filter:none}
    .ui-v2 .side-profile{display:none}
    .ui-v2 .side-menu{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
        overflow:visible;
    }
    .ui-v2 .side-menu a{
        display:flex;
        justify-content:flex-start;
        min-width:0;
        min-height:44px;
        padding:10px 11px;
        border:1px solid rgba(34,216,255,.1);
        border-radius:11px;
        font-size:12px;
    }
    .ui-v2 .side-menu a span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .ui-v2 .side-menu a span:last-child{display:none}
    .ui-v2 .grid{grid-template-columns:1fr}
    .ui-v2 .card{padding:17px;border-radius:17px}
    .ui-v2 #topActions{display:flex;gap:6px}
    .ui-v2 #topActions a{min-height:42px;padding:9px 11px;font-size:12px}
}

@media(max-width:520px){
    .ui-v2 .brand span{max-width:132px}
    .ui-v2 .converter-console{padding:10px 11px 12px}
    .ui-v2 .console-title{max-width:118px}
    .ui-v2 .signal-bars{display:none}
    .ui-v2 .drop{min-height:126px}
    .ui-v2 .audio-lab{gap:10px}
    .ui-v2 .setting-card{padding:14px}
    .ui-v2 .preset-row{grid-template-columns:repeat(3,1fr)}
    .ui-v2 .preset-btn{min-width:0;padding:8px 5px;font-size:11px}
    .ui-v2 #convertBtn,.ui-v2 #upgradeBtn{width:100%;min-height:50px}
    .ui-v2 .public-plan-grid,.ui-v2 .plan-grid{grid-auto-columns:minmax(218px,86vw)}
    .ui-v2 .footer{padding:24px 14px 100px}
    .ui-v2 .app-shell{padding:10px 10px 34px}
    .ui-v2 .sidebar{top:62px;padding:8px;margin-bottom:10px}
    .ui-v2 .side-menu{grid-template-columns:repeat(2,minmax(0,1fr))}
    .ui-v2 .side-menu a{min-height:46px;padding:10px;font-size:11px}
    .ui-v2 #topActions{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
    .ui-v2 #topActions a{justify-content:center;min-width:0;padding:8px 6px;text-align:center}
}

@media(prefers-reduced-motion:reduce){
    body.ui-v2::before,
    .converter-console::after,
    .console-live::before,
    .signal-bars i{animation:none!important}
}

@media(max-width:860px){
    body.dashboard-menu-open{overflow:hidden}
    .ui-v2 .dashboard-nav-main{display:flex;align-items:center;justify-content:space-between;width:100%}
    .ui-v2 .dashboard-menu-toggle{
        display:grid;
        place-content:center;
        gap:5px;
        width:46px;
        min-width:46px;
        min-height:46px;
        padding:0;
        border-color:rgba(34,216,255,.34);
        background:rgba(11,28,51,.92);
    }
    .ui-v2 .dashboard-menu-toggle span{display:block;width:21px;height:2px;border-radius:2px;background:var(--gold-2);box-shadow:0 0 8px rgba(255,191,75,.28)}
    .ui-v2 .dashboard-sidebar{
        position:fixed;
        inset:0 auto 0 0;
        z-index:41;
        width:min(320px,86vw);
        height:100dvh;
        margin:0;
        padding:16px;
        overflow-y:auto;
        border-width:0 1px 0 0;
        border-radius:0 20px 20px 0;
        background:#071426;
        box-shadow:24px 0 70px rgba(0,0,0,.58);
        transform:translateX(-105%);
        transition:transform .24s ease;
    }
    body.dashboard-menu-open .dashboard-sidebar{transform:translateX(0)}
    .ui-v2 .dashboard-sidebar-backdrop{
        display:block;
        position:fixed;
        inset:0;
        z-index:40;
        pointer-events:none;
        opacity:0;
        background:rgba(1,5,12,.7);
        transition:opacity .2s ease;
    }
    body.dashboard-menu-open .dashboard-sidebar-backdrop{pointer-events:auto;opacity:1}
    .ui-v2 .sidebar-mobile-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(34,216,255,.18);color:var(--gold-2);font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
    .ui-v2 .sidebar-close{display:grid;place-items:center;width:40px;min-height:40px;padding:0;color:var(--gold-2)}
    .ui-v2 .dashboard-sidebar .side-profile{display:grid;margin-bottom:14px;background:rgba(14,34,61,.82)}
    .ui-v2 .dashboard-sidebar .side-menu{grid-template-columns:1fr;gap:8px}
    .ui-v2 .dashboard-sidebar .side-menu a{min-height:48px;padding:12px 13px}
    .ui-v2 .dashboard-sidebar .side-menu a span:last-child{display:block;margin-left:auto;color:#76cfe8;font-size:10px}
}

@media(max-width:520px){
    .ui-v2 .nav{align-items:stretch}
    .ui-v2 #topActions{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(prefers-reduced-motion:reduce){
    .ui-v2 .dashboard-sidebar,.ui-v2 .dashboard-sidebar-backdrop{transition:none}
}