:root{
    --bg:#070a0c;
    --panel:#0d1114;
    --panel2:#11161a;
    --line:#2b3238;
    --line-red:#5b1a1c;
    --text:#f3f3f3;
    --muted:#9aa2a8;
    --red:#e22b2f;
    --red-dark:#8e1013;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}
button,input,select{font:inherit}
a{color:inherit;text-decoration:none}

/* LOGIN */
.login-page{min-height:100vh;background:
    radial-gradient(circle at 50% 0,rgba(151,33,26,.13),transparent 35%),
    #070a0c;
}
.login-shell{min-height:100vh}
.login-hero{
    position:relative;
    min-height:760px;
    overflow:hidden;
    background:
        linear-gradient(90deg,rgba(5,8,10,.94) 0%,rgba(5,8,10,.72) 38%,rgba(5,8,10,.45) 63%,rgba(5,8,10,.82) 100%),
        url('../img/login-hero.jpg') center top/cover no-repeat;
    border-bottom:1px solid #1d2226;
}
.login-hero__shade{
    position:absolute;inset:0;
    background:
        linear-gradient(180deg,rgba(4,6,8,.10),rgba(4,6,8,.18) 55%,#070a0c 100%),
        radial-gradient(circle at 52% 30%,rgba(146,46,24,.08),transparent 36%);
}
.login-hero__inner{
    position:relative;z-index:2;
    max-width:1260px;
    margin:0 auto;
    padding:76px 30px 94px;
    min-height:760px;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(380px,.72fr);
    gap:74px;
    align-items:center;
}
.login-copy{max-width:690px}
.game-logo{
    display:inline-grid;
    grid-template-columns:auto auto;
    align-items:end;
    column-gap:2px;
    font-weight:950;
    font-size:38px;
    letter-spacing:.03em;
    line-height:.85;
    text-shadow:0 5px 20px rgba(0,0,0,.8)
}
.game-logo__z{color:var(--red);font-size:60px;margin-right:1px}
.game-logo small{
    grid-column:2;
    font-size:13px;
    letter-spacing:.38em;
    color:#c63c3e;
    margin-top:8px
}
.kicker{
    margin-top:40px;
    color:#d0d3d6;
    font-size:13px;
    letter-spacing:.18em;
    font-weight:800
}
.login-copy h1{
    margin:14px 0 18px;
    font-size:clamp(42px,5.2vw,76px);
    line-height:.94;
    text-transform:uppercase;
    letter-spacing:-.03em;
    text-shadow:0 8px 28px rgba(0,0,0,.75)
}
.login-copy h1 span{
    display:block;
    color:var(--red);
}
.login-copy>p{
    max-width:610px;
    margin:0;
    color:#d5d8da;
    font-size:18px;
    line-height:1.65;
    text-shadow:0 2px 12px rgba(0,0,0,.8)
}
.hero-points{
    margin-top:30px;
    display:flex;
    gap:12px;
    flex-wrap:wrap
}
.hero-points>div{
    display:flex;align-items:center;gap:9px;
    padding:10px 13px;
    border:1px solid rgba(255,255,255,.09);
    background:rgba(7,10,12,.58);
    backdrop-filter:blur(4px);
    color:#c7ccd0;
    font-size:13px
}
.hero-points b{font-size:17px}

.login-panel{
    position:relative;
    width:100%;
    max-width:470px;
    justify-self:end;
    padding:34px 34px 28px;
    background:linear-gradient(180deg,rgba(14,19,22,.96),rgba(7,10,12,.98));
    border:1px solid #394047;
    box-shadow:
        0 28px 80px rgba(0,0,0,.55),
        inset 0 0 0 1px rgba(255,255,255,.02);
}
.login-panel:before,.login-panel:after{
    content:"";
    position:absolute;
    width:48px;height:48px;
    pointer-events:none
}
.login-panel:before{
    left:-1px;top:-1px;
    border-left:2px solid #8a1c20;
    border-top:2px solid #8a1c20
}
.login-panel:after{
    right:-1px;bottom:-1px;
    border-right:2px solid #8a1c20;
    border-bottom:2px solid #8a1c20
}
.login-panel__topline{
    position:absolute;left:25%;right:25%;top:-1px;height:2px;
    background:linear-gradient(90deg,transparent,var(--red),transparent)
}
.login-panel__title{
    text-align:center;
    margin-bottom:24px;
    color:#f04447;
    font-weight:900;
    text-transform:uppercase;
    font-size:18px;
    letter-spacing:.06em
}
.field{display:block;margin:17px 0}
.field>span{
    display:block;
    margin-bottom:8px;
    color:#c3c8cc;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.08em
}
.field__control{
    height:54px;
    display:flex;
    align-items:center;
    border:1px solid #353d43;
    background:#090d10;
    transition:.2s ease;
}
.field__control:focus-within{
    border-color:#8f2023;
    box-shadow:0 0 0 3px rgba(213,39,43,.10)
}
.field__icon{
    width:46px;text-align:center;color:#717980;font-size:10px
}
.field__control input{
    width:100%;height:100%;
    border:0;outline:0;background:transparent;color:#fff;
    padding:0 15px 0 0
}
.field__control input::placeholder{color:#626a71}
.login-button{
    width:100%;
    margin-top:8px;
    padding:16px 18px;
    border:1px solid #f13d41;
    background:linear-gradient(180deg,#d2272b,#8d0e12);
    color:white;
    font-weight:950;
    cursor:pointer;
    box-shadow:inset 0 1px rgba(255,255,255,.11),0 7px 25px rgba(132,9,13,.20);
    transition:.18s ease
}
.login-button:hover{filter:brightness(1.10);transform:translateY(-1px)}
.login-panel__note{
    text-align:center;
    margin-top:15px;
    color:#899197;
    font-size:12px
}
.alert{
    margin-bottom:14px;
    padding:11px 12px;
    border:1px solid #852326;
    background:#321315;
    color:#ffbfc0;
    font-size:13px
}

/* FEATURES */
.features-section{
    max-width:1260px;
    margin:0 auto;
    padding:42px 30px 26px
}
.section-title{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:18px;
    align-items:center;
    margin-bottom:25px
}
.section-title span{height:1px;background:linear-gradient(90deg,transparent,#6e1a1d)}
.section-title span:last-child{background:linear-gradient(90deg,#6e1a1d,transparent)}
.section-title h2{
    margin:0;
    text-transform:uppercase;
    font-size:20px;
    letter-spacing:.08em
}
.features-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px
}
.feature-card{
    min-height:220px;
    padding:22px 20px;
    background:
        linear-gradient(180deg,rgba(18,23,27,.98),rgba(8,11,13,.98));
    border:1px solid #2d3439;
    box-shadow:inset 0 1px rgba(255,255,255,.018);
    transition:.18s ease
}
.feature-card:hover{
    transform:translateY(-3px);
    border-color:#582024
}
.feature-card__icon{font-size:28px;filter:saturate(.8)}
.feature-card h3{
    margin:17px 0 9px;
    font-size:15px;
    text-transform:uppercase
}
.feature-card p{
    margin:0;
    color:#9ca4aa;
    font-size:13px;
    line-height:1.55
}
.unity-banner{
    max-width:1260px;
    margin:12px auto 0;
    padding:22px 30px;
    border:1px solid #2c3338;
    background:linear-gradient(90deg,#101417,#0b0e11);
    display:flex;
    align-items:center;
    gap:18px
}
.unity-banner__mark{
    color:var(--red);
    border:1px solid #5c1d20;
    width:48px;height:48px;
    display:grid;place-items:center;
    font-size:22px
}
.unity-banner strong,.unity-banner span{display:block}
.unity-banner strong{font-size:18px}
.unity-banner span{margin-top:4px;color:#e63539;font-size:18px;font-weight:900}
.login-footer{
    max-width:1260px;
    margin:auto;
    padding:24px 30px 34px;
    color:#555e64;
    font-size:12px
}

/* EXISTING INNER APP STYLES — keep dashboard functional */
.app-page{background:radial-gradient(circle at 75% 0,rgba(122,19,21,.15),transparent 35%),#090c0f;min-height:100vh}
.app-layout{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:#0b0e11;border-right:1px solid #242a30;padding:22px 16px;display:flex;flex-direction:column}
.sidebar__brand{font-weight:900;color:#e23336;letter-spacing:.15em;font-size:22px}
.sidebar__alliance{font-size:32px;font-weight:900;margin:18px 0 28px}
.sidebar nav{display:flex;flex-direction:column;gap:7px}
.sidebar nav a{padding:12px;border:1px solid transparent;color:#aeb5bb}
.sidebar nav a:hover,.sidebar nav a.active{background:#15191d;border-color:#3a2022;color:#fff}
.logout{margin-top:auto;color:#d46b6d;padding:12px}
.workspace{padding:34px}
.workspace__top{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #22282e;padding-bottom:22px}
.eyebrow{color:#d2393c;letter-spacing:.12em;font-size:12px;font-weight:800}
.workspace h1{margin:6px 0 0;font-size:38px}
.top-actions{display:flex;align-items:center;gap:12px}
.top-actions select,.user-pill{background:#11161a;border:1px solid #343b42;color:#e9ecef;padding:10px 12px}
.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px}
.module-card{background:linear-gradient(180deg,#14191d,#0d1013);border:1px solid #2f363d;padding:24px;min-height:220px}
.module-card__icon{font-size:30px}
.module-card h2{margin:14px 0 8px}
.module-card p{color:#aab1b7;max-width:520px;line-height:1.55}
.module-card button{margin-top:20px;background:#1c2126;border:1px solid #353c43;color:#6f767d;padding:10px 16px}
.status-panel{margin-top:18px;border:1px solid #3d2425;background:#151012;padding:18px;display:grid;gap:6px}
.status-panel span{color:#aaa}
.simple-page{max-width:1100px;margin:auto;padding:40px 24px}
.back-link{color:#e34a4d}
.muted{color:#929aa1}
.table-wrap{overflow:auto;border:1px solid #2e353b;margin-top:20px}
table{border-collapse:collapse;width:100%;background:#0f1316}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid #242a2f}
th{color:#e54a4c;text-transform:uppercase;font-size:12px;letter-spacing:.07em}

@media(max-width:1000px){
    .login-hero__inner{grid-template-columns:1fr;gap:38px;padding-top:58px}
    .login-panel{justify-self:start}
    .features-grid{grid-template-columns:repeat(2,1fr)}
    .app-layout{grid-template-columns:1fr}
    .sidebar{position:relative;height:auto}
    .dashboard-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
    .login-hero{min-height:auto;background-position:55% top}
    .login-hero__inner{min-height:auto;padding:42px 18px 70px}
    .game-logo{font-size:29px}.game-logo__z{font-size:46px}
    .kicker{margin-top:28px}
    .login-copy h1{font-size:39px}
    .login-copy>p{font-size:16px}
    .hero-points{display:none}
    .login-panel{padding:26px 20px}
    .features-section{padding:32px 18px 18px}
    .features-grid{grid-template-columns:1fr}
    .unity-banner{margin:8px 18px 0;padding:18px}
    .workspace{padding:20px}
    .workspace__top{align-items:flex-start;flex-direction:column}
}

/* ===== PATCH: ROSTER + VS ===== */
.sidebar__divider{
    height:1px;
    margin:6px 8px 8px;
    background:#242a30;
}
.module-card--ready{
    border-color:#4a2628;
    box-shadow:inset 0 1px rgba(255,255,255,.02);
}
.module-link{
    display:inline-block;
    margin-top:20px;
    padding:10px 16px;
    border:1px solid #b52b2e;
    background:linear-gradient(180deg,#b82125,#741014);
    color:#fff;
    font-weight:800;
    font-size:13px;
}
.module-link--muted{
    border-color:#3a4248;
    background:#171c20;
    color:#ccd1d5;
}
.roster-count{
    margin-top:7px;
    color:#8e969c;
    font-size:13px;
}
.roster-panel{
    margin-top:28px;
    border:1px solid #2f363d;
    background:linear-gradient(180deg,#12171b,#0c1013);
}
.panel-heading{
    padding:22px 24px;
    border-bottom:1px solid #282f35;
}
.panel-heading h2{margin:0 0 5px;font-size:21px}
.panel-heading p{margin:0;color:#8f979d;font-size:13px}
.add-member-form{
    display:grid;
    grid-template-columns:minmax(220px,1fr) 120px auto;
    gap:10px;
    padding:18px 24px;
    border-bottom:1px solid #282f35;
}
.add-member-form input,
.member-row input{
    min-width:0;
    border:1px solid #343c42;
    background:#090d10;
    color:#fff;
    padding:11px 12px;
    outline:none;
}
.add-member-form input:focus,
.member-row input:focus{
    border-color:#8a2427;
    box-shadow:0 0 0 3px rgba(190,34,38,.08);
}
.add-member-form button{
    border:1px solid #d43539;
    background:linear-gradient(180deg,#bd2529,#791014);
    color:#fff;
    padding:0 18px;
    font-weight:800;
    cursor:pointer;
}
.roster-list{padding:8px 0}
.member-row{
    display:grid;
    grid-template-columns:70px minmax(220px,1fr) 110px 110px 90px;
    align-items:center;
    gap:10px;
    padding:9px 24px;
    border-bottom:1px solid #20262b;
}
.member-row:last-child{border-bottom:0}
.member-num{color:#616a71;font-size:12px}
.row-save,.row-delete{
    height:40px;
    cursor:pointer;
    border:1px solid #3a4248;
    background:#171c20;
    color:#dce0e3;
}
.row-save:hover{border-color:#8f272a;color:#fff}
.row-delete{
    border-color:#522124;
    background:#211214;
    color:#ca7779;
}
.empty-state{
    padding:42px 24px;
    text-align:center;
    color:#727b82;
}
.coming-panel{
    margin-top:28px;
    padding:54px 30px;
    border:1px solid #2f363d;
    background:linear-gradient(180deg,#12171b,#0c1013);
    text-align:center;
}
.coming-icon{font-size:48px}
.coming-panel h2{font-size:34px;margin:12px 0}
.coming-panel p{color:#a3abb1;line-height:1.6}
@media(max-width:760px){
    .add-member-form{grid-template-columns:1fr 90px}
    .add-member-form button{grid-column:1/-1;height:44px}
    .member-row{
        grid-template-columns:1fr 80px;
    }
    .member-num{display:none}
    .row-save,.row-delete{width:100%}
}

/* ===== ROSTER EXTENDED ===== */
.panel-heading--actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}
.bulk-toggle,.secondary-btn,.primary-btn{
    border:1px solid #a62b2e;
    background:linear-gradient(180deg,#a92125,#6e0e12);
    color:#fff;
    padding:11px 16px;
    font-weight:800;
    cursor:pointer;
}
.secondary-btn{
    border-color:#404950;
    background:#171d21;
    color:#d5dadd;
}
.add-member-form--extended{
    grid-template-columns:minmax(180px,1.4fr) minmax(130px,1fr) 100px 110px auto;
}
.roster-message{
    margin-top:20px;
    padding:12px 15px;
    border:1px solid #493033;
    background:#171113;
    color:#d9dcdf;
}
.bulk-panel{
    margin:0 24px 22px;
    border:1px solid #343c42;
    background:#0b0f12;
}
.bulk-panel[hidden]{display:none}
.bulk-panel__head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:18px;
    border-bottom:1px solid #2b3237;
}
.bulk-panel__head h3{margin:0 0 5px}
.bulk-panel__head p{margin:0;color:#858e95;font-size:13px}
.bulk-table{overflow-x:auto}
.bulk-row{
    min-width:760px;
    display:grid;
    grid-template-columns:minmax(210px,1.45fr) minmax(150px,1fr) 100px 115px 42px;
    gap:9px;
    padding:7px 12px;
}
.bulk-row--header{
    padding-top:12px;
    padding-bottom:5px;
    color:#7f8990;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.bulk-row input{
    min-width:0;
    border:1px solid #30383e;
    background:#080c0f;
    color:#fff;
    padding:10px 11px;
    outline:none;
}
.bulk-remove{
    border:1px solid #492124;
    background:#211214;
    color:#ce6b6e;
    font-size:20px;
    cursor:pointer;
}
.bulk-actions{
    padding:14px 18px 18px;
    text-align:right;
}
.roster-table-wrap{overflow-x:auto}
.roster-head,
.member-row--extended{
    min-width:850px;
    display:grid;
    grid-template-columns:minmax(220px,1.5fr) minmax(150px,1fr) 100px 115px 200px;
    gap:10px;
    align-items:center;
}
.roster-head{
    padding:10px 24px;
    border-top:1px solid #282f35;
    border-bottom:1px solid #282f35;
    color:#7e878e;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.member-row--extended{
    padding:9px 24px;
    border-bottom:1px solid #20262b;
}
.member-row--extended input{
    min-width:0;
    border:1px solid #343c42;
    background:#090d10;
    color:#fff;
    padding:11px 12px;
    outline:none;
}
.member-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
}
.member-actions button{height:40px}
@media(max-width:900px){
    .panel-heading--actions{align-items:flex-start;flex-direction:column}
    .add-member-form--extended{
        grid-template-columns:1fr 1fr;
    }
    .add-member-form--extended button{
        grid-column:1/-1;
        height:44px;
    }
}


/* ===== ROSTER SEARCH ===== */
.roster-search{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:16px 24px;
    border-top:1px solid #282f35;
    border-bottom:1px solid #282f35;
    background:#0d1114;
}
.roster-search__field{
    position:relative;
    flex:1;
    max-width:620px;
}
.roster-search__field input{
    width:100%;
    height:44px;
    padding:0 44px 0 42px;
    border:1px solid #343c42;
    background:#080c0f;
    color:#fff;
    outline:none;
}
.roster-search__field input:focus{
    border-color:#8a2427;
    box-shadow:0 0 0 3px rgba(190,34,38,.08);
}
.roster-search__icon{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:#707980;
    pointer-events:none;
}
.roster-search__clear{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:30px;
    height:30px;
    border:0;
    background:transparent;
    color:#8b949b;
    font-size:21px;
    cursor:pointer;
}
.roster-search__clear:hover{color:#fff}
.roster-search__meta{
    color:#858e95;
    font-size:13px;
    white-space:nowrap;
}
.roster-search__meta strong{color:#e0e4e7}
@media(max-width:700px){
    .roster-search{
        align-items:stretch;
        flex-direction:column;
    }
    .roster-search__field{max-width:none}
    .roster-search__meta{align-self:flex-end}
}

/* ===== VS FULL MODULE ===== */
.vs-weekbar{
    margin-top:24px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:15px;
    padding:14px 18px;
    border:1px solid #2e353b;
    background:#0f1417;
}
.vs-weekbar>a{color:#c6ccd0;font-size:13px}
.vs-weekbar>div{text-align:center}
.vs-weekbar span{display:block;color:#7f8990;font-size:11px;text-transform:uppercase}
.vs-weekbar strong{display:block;margin-top:3px}
.vs-tabs{
    margin-top:16px;
    display:flex;
    gap:8px;
    border-bottom:1px solid #2c3338;
}
.vs-tabs a{
    padding:12px 17px;
    color:#929ba2;
    border:1px solid transparent;
    border-bottom:0;
}
.vs-tabs a.active{
    color:#fff;
    background:#12171b;
    border-color:#343c42;
}
.vs-panel{
    border:1px solid #343c42;
    border-top:0;
    background:linear-gradient(180deg,#12171b,#0b0f12);
}
.day-tabs{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    border-bottom:1px solid #2c3338;
}
.day-tab{
    padding:13px 8px;
    background:#0d1114;
    color:#879097;
    border:0;
    border-right:1px solid #252b30;
    cursor:pointer;
    font-weight:800;
}
.day-tab.active{background:#1b1214;color:#ef4b4e}
.announcement-editor{display:none;padding:24px}
.announcement-editor.active{display:block}
.editor-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:15px;
}
.editor-heading h2{margin:4px 0 0}
.editor-actions{display:flex;gap:8px}
.copy-vs-btn{
    border:1px solid #3b444b;
    background:#171d21;
    color:#dce1e4;
    padding:10px 14px;
    cursor:pointer;
}
.vs-textarea{
    width:100%;
    min-height:330px;
    resize:vertical;
    border:1px solid #343c42;
    background:#080c0f;
    color:#fff;
    padding:17px;
    outline:none;
    line-height:1.55;
    font-family:Consolas,Monaco,monospace;
}
.vs-textarea:focus{border-color:#8c2528}
.copy-status{height:20px;margin-top:8px;color:#6dbb7a;font-size:12px}
.threshold-form{
    display:flex;
    align-items:center;
    gap:10px;
    padding:18px;
    border-bottom:1px solid #2c3338;
}
.threshold-form label{color:#a9b0b5;font-size:13px}
.threshold-form input{
    min-width:220px;
    border:1px solid #343c42;
    background:#080c0f;
    color:#fff;
    padding:10px 12px;
}
.vs-score-wrap{overflow:auto}
.vs-score-table{
    width:100%;
    min-width:1050px;
    border-collapse:collapse;
}
.vs-score-table th{
    position:sticky;top:0;
    background:#0d1114;
    z-index:1;
}
.vs-score-table th,.vs-score-table td{
    padding:8px;
    border-bottom:1px solid #242b30;
}
.vs-score-table th{font-size:11px;color:#7f8990;text-transform:uppercase}
.score-name{min-width:190px;font-weight:700}
.score-input{
    width:105px;
    padding:9px 8px;
    border:1px solid #30383e;
    background:#080c0f;
    color:#fff;
}
.score-total{white-space:nowrap;font-weight:800;color:#e5e8ea}
.score-savebar{
    padding:16px 18px;
    text-align:right;
    border-top:1px solid #2c3338;
}
.vs-summary-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    padding:18px;
    border-top:1px solid #2c3338;
}
.summary-card{
    padding:18px;
    border:1px solid #343c42;
    background:#0d1114;
}
.summary-card h3{margin:0}
.summary-card h3 span{color:#e33d40}
.summary-card p{color:#899198;font-size:13px}
.summary-list{margin-top:12px;max-height:300px;overflow:auto}
.summary-list>div{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:8px 0;
    border-bottom:1px solid #242a2f;
}
.summary-list b{color:#b4bbc0}
@media(max-width:760px){
    .vs-weekbar{grid-template-columns:1fr; text-align:center}
    .day-tabs{grid-template-columns:repeat(3,1fr)}
    .editor-heading{align-items:flex-start;flex-direction:column}
    .threshold-form{align-items:stretch;flex-direction:column}
    .vs-summary-grid{grid-template-columns:1fr}
}

/* ===== VS RICH EDITOR ===== */
.vs-rich-wrap{
 display:grid;
 grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr);
 gap:18px;
 margin-top:0;
}
.vs-rich-main,.vs-preview-card{
 border:1px solid #343c42;
 background:linear-gradient(180deg,#12171b,#0b0f12);
}
.vs-rich-daytabs{display:flex;flex-wrap:wrap;gap:7px;padding:16px;border-bottom:1px solid #2c3338}
.vs-rich-day{
 border:1px solid #343c42;background:#171d21;color:#aeb5ba;padding:10px 13px;font-weight:800;cursor:pointer
}
.vs-rich-day.active{border-color:#a72b2f;background:#2a1215;color:#ff575a}
.vs-rich-toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:13px 16px;border-bottom:1px solid #2c3338;background:#0d1114}
.vs-tool{height:38px;padding:0 12px;border:1px solid #3b444b;background:#171d21;color:#fff;cursor:pointer}
.vs-swatch{width:38px;height:38px;border:2px solid rgba(255,255,255,.78);cursor:pointer}
.vs-rich-editor-form{display:none;padding:16px}
.vs-rich-editor-form.active{display:block}
.vs-rich-editor{
 min-height:430px;padding:16px;border:1px solid #394249;background:#080c0f;color:#fff;outline:none;
 line-height:1.55;white-space:pre-wrap;overflow:auto
}
.vs-rich-editor:focus{border-color:#8c2528;box-shadow:0 0 0 3px rgba(190,34,38,.08)}
.vs-rich-hint{margin-top:9px;color:#858e95;font-size:12px}
.vs-rich-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.vs-rich-actions button{padding:11px 14px;cursor:pointer}
.copy-html-btn{border:1px solid #b32d31;background:linear-gradient(180deg,#ae2327,#6f0e12);color:#fff;font-weight:800}
.reset-template-btn{border:1px solid #542428;background:#211315;color:#cf7a7d}
.vs-rich-side{display:grid;gap:18px;align-content:start}
.vs-preview-card{padding:18px}
.vs-preview-card h2{margin:0 0 12px}
.vs-preview{min-height:250px;padding:15px;border:1px solid #343c42;background:#080c0f;color:#fff;line-height:1.55;overflow-wrap:anywhere}
.vs-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}
.vs-stats>div{padding:11px;border:1px solid #2e363c;background:#0d1114;text-align:center}
.vs-stats span{display:block;color:#7f8990;font-size:11px}
.vs-stats b{font-size:21px}
.vs-code-output{width:100%;min-height:210px;resize:vertical;border:1px solid #343c42;background:#080c0f;color:#fff;padding:13px;font:12px/1.45 Consolas,monospace}
.vs-history-list{max-height:340px;overflow:auto}
.vs-history-item{margin-top:7px}
.vs-history-item button{
 width:100%;text-align:left;padding:10px;border:1px solid #2f373d;background:#0d1114;color:#fff;cursor:pointer
}
.vs-history-item button:hover{border-color:#772428}
.vs-history-item b,.vs-history-item span{display:block}
.vs-history-item span{margin-top:3px;color:#7e878e;font-size:11px}
@media(max-width:1100px){.vs-rich-wrap{grid-template-columns:1fr}.vs-rich-editor{min-height:340px}}