:root{
    --bg:#0f1117;
    --bg-2:#151924;
    --bg-3:#1c2230;
    --panel:#171b25;
    --panel-2:#1d2330;
    --panel-3:#202838;
    --soft:#96a0b8;
    --text:#f4f7fb;
    --text-dim:#b8c0d4;
    --line:rgba(255,255,255,0.08);
    --line-2:rgba(255,255,255,0.14);
    --primary:#7c89ff;
    --primary-2:#5e6df4;
    --accent:#8fd3c2;
    --success:#4ecb71;
    --danger:#f26a6a;
    --warning:#f0c265;
    --shadow-lg:0 30px 80px rgba(0,0,0,0.45);
    --shadow-md:0 18px 40px rgba(0,0,0,0.30);
    --shadow-sm:0 8px 22px rgba(0,0,0,0.24);
    --radius-xl:28px;
    --radius-lg:22px;
    --radius-md:16px;
    --radius-sm:12px;
}

/* THEME: BLACK GOLD */
html[data-theme="black-gold"]{
    --bg:#0d0b09;
    --bg-2:#15110d;
    --bg-3:#1e1811;
    --panel:#15110d;
    --panel-2:#1c1711;
    --panel-3:#261f17;
    --soft:#d1b98a;
    --text:#f7f1e7;
    --text-dim:#d7c7aa;
    --line:rgba(201,158,92,0.12);
    --line-2:rgba(201,158,92,0.22);
    --primary:#c89e5c;
    --primary-2:#a97d39;
    --accent:#f0d9ab;
    --success:#89cf8c;
    --danger:#f08a7e;
    --warning:#d9b35f;
    --shadow-lg:0 30px 80px rgba(0,0,0,0.58);
    --shadow-md:0 18px 40px rgba(0,0,0,0.40);
    --shadow-sm:0 8px 22px rgba(0,0,0,0.30);
}

/* THEME: SOFT LIGHT */
html[data-theme="soft-light"]{
    --bg:#f3efe9;
    --bg-2:#f6f2ec;
    --bg-3:#ffffff;
    --panel:rgba(255,255,255,0.88);
    --panel-2:rgba(255,255,255,0.82);
    --panel-3:rgba(255,255,255,0.75);
    --soft:#6b6258;
    --text:#131313;
    --text-dim:#5f5f5f;
    --line:rgba(185,138,74,0.25);
    --line-2:rgba(185,138,74,0.45);
    --primary:#b98a4a;
    --primary-2:#d2ac73;
    --accent:#e2c9a1;
    --success:#1b8b4d;
    --danger:#b52b27;
    --warning:#b77900;
    --shadow-lg:0 18px 40px rgba(0,0,0,0.18);
    --shadow-md:0 12px 30px rgba(0,0,0,0.14);
    --shadow-sm:0 8px 20px rgba(0,0,0,0.10);
}

*{
    box-sizing:border-box;
}

html, body{
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
    overflow-x:hidden;
}

body{
    font-family:'Dosis', sans-serif;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 18%, transparent), transparent 22%),
        radial-gradient(circle at bottom right, color-mix(in srgb, var(--accent) 16%, transparent), transparent 24%),
        linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 45%, var(--bg) 100%);
    color:var(--text);
    transition: background 0.35s ease, color 0.35s ease;
}

.page-shell{
    position:relative;
    min-height:100dvh;
    overflow:hidden;
}

.bg-orb{
    position:absolute;
    border-radius:999px;
    filter:blur(90px);
    pointer-events:none;
    opacity:0.5;
    z-index:0;
}

.bg-orb-1{
    width:360px;
    height:360px;
    background:color-mix(in srgb, var(--primary) 22%, transparent);
    top:-100px;
    left:-120px;
}

.bg-orb-2{
    width:380px;
    height:380px;
    background:color-mix(in srgb, var(--accent) 16%, transparent);
    bottom:-120px;
    right:-100px;
}

.bg-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px);
    background-size:28px 28px;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,0.55), transparent 80%);
    pointer-events:none;
    z-index:0;
}

.layout{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(360px, 0.95fr) minmax(420px, 1.2fr);
    min-height:100dvh;
    gap:0;
}

.left-side{
    display:flex;
    align-items:stretch;
    justify-content:center;
    padding:34px 18px 34px 34px;
}

.hero-panel{
    position:relative;
    width:100%;
    max-width:720px;
    min-height:calc(100dvh - 68px);
    background:linear-gradient(180deg, color-mix(in srgb, var(--panel-3) 82%, transparent), color-mix(in srgb, var(--panel) 90%, transparent));
    border:1px solid var(--line);
    border-radius:32px;
    padding:34px;
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    backdrop-filter:blur(12px);
}

.hero-panel::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 22%),
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 20%),
        linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent 55%);
    pointer-events:none;
}

.hero-toolbar{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    flex-wrap:wrap;
}

.hero-topline{
    display:inline-flex;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:color-mix(in srgb, var(--panel-2) 70%, transparent);
    color:var(--text-dim);
    font-size:12px;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.theme-switcher{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:180px;
}

.theme-switcher label{
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--text-dim);
}

.theme-select{
    height:42px;
    border-radius:12px;
    border:1px solid var(--line-2);
    background:color-mix(in srgb, var(--panel-2) 86%, transparent);
    color:var(--text);
    padding:0 12px;
    font:inherit;
    outline:none;
    cursor:pointer;
}

.theme-select:focus{
    box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

.hero-brand{
    position:relative;
    z-index:1;
    margin-top:24px;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    align-items:center;
    gap:10px;
    min-height:280px;
}

.hero-brand-left,
.hero-brand-right{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-logo{
    width:min(360px, 100%);
    max-width:100%;
    height:auto;
    filter:drop-shadow(0 16px 28px rgba(0,0,0,0.22));
}

.dev-image{
    width:min(300px, 100%);
    max-width:100%;
    height:auto;
    opacity:0.72;
    filter:drop-shadow(0 18px 32px rgba(0,0,0,0.22));
}

.hero-copy{
    position:relative;
    z-index:1;
    margin-top:8px;
    max-width:620px;
}

.hero-copy h1{
    margin:0 0 8px 0;
    font-size:clamp(50px, 6vw, 84px);
    line-height:0.94;
    font-weight:700;
    letter-spacing:0.3px;
}

.hero-copy h2{
    margin:0 0 16px 0;
    font-size:clamp(24px, 2.3vw, 34px);
    line-height:1.05;
    font-weight:600;
    color:var(--text-dim);
}

.hero-copy p{
    margin:0;
    max-width:560px;
    font-size:18px;
    line-height:1.5;
    color:var(--text-dim);
}

.hero-status-strip{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px;
    margin-top:28px;
}

.hero-status-box{
    background:color-mix(in srgb, var(--panel-2) 80%, transparent);
    border:1px solid var(--line);
    border-radius:18px;
    padding:16px;
    backdrop-filter:blur(10px);
    box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
}

.hero-status-box span{
    display:block;
    margin-bottom:6px;
    font-size:13px;
    color:var(--soft);
}

.hero-status-box strong{
    display:block;
    font-size:28px;
    line-height:1;
    color:var(--text);
}

.hero-footer-line{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:26px;
    flex-wrap:wrap;
}

.hero-build{
    display:inline-flex;
    align-items:center;
    padding:8px 12px;
    border-radius:999px;
    background:color-mix(in srgb, var(--primary) 16%, transparent);
    border:1px solid color-mix(in srgb, var(--primary) 24%, transparent);
    color:var(--text);
    font-size:13px;
    font-weight:700;
}

.hero-separator{
    width:34px;
    height:1px;
    background:var(--line-2);
}

.hero-caption{
    color:var(--soft);
    font-size:14px;
}

.right-side{
    padding:34px 34px 34px 18px;
    display:grid;
    align-content:center;
    gap:18px;
}

.summary-strip{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:16px;
}

.summary-box{
    background:linear-gradient(180deg, color-mix(in srgb, var(--panel-3) 76%, transparent), color-mix(in srgb, var(--panel) 88%, transparent));
    border:1px solid var(--line);
    border-radius:20px;
    padding:18px 18px 16px 18px;
    box-shadow:var(--shadow-sm);
    backdrop-filter:blur(12px);
}

.summary-label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    color:var(--soft);
}

.summary-box strong{
    display:block;
    font-size:30px;
    line-height:1;
    color:var(--text);
}

.state-on{
    color:var(--success) !important;
}

.state-off{
    color:var(--danger) !important;
}

.section-kicker{
    margin-bottom:4px;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--soft);
}

.group-card{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg, color-mix(in srgb, var(--panel-3) 76%, transparent), color-mix(in srgb, var(--panel) 88%, transparent));
    border:1px solid var(--line);
    border-radius:var(--radius-xl);
    padding:24px;
    box-shadow:var(--shadow-md);
    backdrop-filter:blur(14px);
}

.group-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent 40%);
    pointer-events:none;
}

.group-header{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:8px;
}

.group-header h2{
    margin:0;
    font-size:29px;
    font-weight:700;
    line-height:1.05;
    color:var(--text);
}

.group-subtitle{
    position:relative;
    z-index:1;
    margin-bottom:20px;
    font-size:16px;
    line-height:1.45;
    color:var(--text-dim);
}

.group-count{
    min-width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:color-mix(in srgb, var(--panel-2) 86%, transparent);
    border:1px solid var(--line);
    color:var(--text);
    font-size:16px;
    font-weight:700;
    flex:0 0 auto;
}

.admin-card{
    background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 16%, var(--panel-3)), color-mix(in srgb, var(--panel) 90%, transparent));
    border:1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}

.admin-card .group-subtitle{
    color:var(--text-dim);
}

.admin-card .group-count{
    background:color-mix(in srgb, var(--primary) 18%, transparent);
    border-color:color-mix(in srgb, var(--primary) 22%, transparent);
}

.admin-panel{
    position:relative;
    z-index:1;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    align-items:center;
}

.admin-input{
    flex:1 1 250px;
    min-width:0;
    height:46px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid var(--line);
    background:color-mix(in srgb, var(--bg) 26%, var(--panel-2));
    color:var(--text);
    outline:none;
    font:inherit;
}

.admin-input::placeholder{
    color:color-mix(in srgb, var(--text-dim) 80%, transparent);
}

.admin-input:focus{
    border-color:color-mix(in srgb, var(--primary) 55%, transparent);
    box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

.admin-message{
    position:relative;
    z-index:1;
    margin-top:12px;
    min-height:22px;
    font-size:15px;
    line-height:1.35;
}

.admin-message.success{
    color:var(--success);
}

.admin-message.error{
    color:var(--danger);
}

.admin-on{
    background:color-mix(in srgb, var(--success) 18%, transparent);
    border-color:color-mix(in srgb, var(--success) 32%, transparent);
    color:var(--success) !important;
}

.admin-off{
    background:color-mix(in srgb, var(--danger) 14%, transparent);
    border-color:color-mix(in srgb, var(--danger) 24%, transparent);
    color:var(--danger) !important;
}

.apps-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:16px;
    min-height:40px;
}

.app-card{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:240px;
    text-align:center;
    padding:62px 20px 20px 20px;
    background:linear-gradient(180deg, color-mix(in srgb, var(--panel-3) 80%, transparent), color-mix(in srgb, var(--panel) 90%, transparent));
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow-sm);
    transition:transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.app-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 34px rgba(0,0,0,0.30);
    border-color:color-mix(in srgb, var(--primary) 24%, transparent);
}

.card-noise{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 20%),
        radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 18%);
    pointer-events:none;
}

.app-icon-shell{
    position:relative;
    z-index:1;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    margin-bottom:14px;
    font-size:18px;
    font-weight:700;
    color:var(--text);
    background:linear-gradient(145deg, color-mix(in srgb, var(--primary) 24%, transparent), color-mix(in srgb, var(--panel-2) 60%, transparent));
    border:1px solid color-mix(in srgb, var(--primary) 22%, transparent);
    box-shadow:inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}

.app-type{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:10px;
    padding:7px 12px;
    border-radius:999px;
    background:color-mix(in srgb, var(--panel-2) 70%, transparent);
    border:1px solid var(--line);
    color:var(--soft);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.8px;
    text-transform:uppercase;
}

.app-card h3{
    position:relative;
    z-index:1;
    margin:0 0 8px 0;
    font-size:22px;
    line-height:1.15;
    color:var(--text);
    word-break:break-word;
}

.app-version{
    position:relative;
    z-index:1;
    margin:0 0 18px 0;
    color:var(--text-dim);
    font-size:15px;
    line-height:1.3;
}

.card-actions{
    position:relative;
    z-index:1;
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
}

.app-btn,
.secondary-btn,
.start-btn,
.stop-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 18px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    text-decoration:none;
    font:inherit;
    font-weight:700;
    transition:transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
    font-family:inherit;
}

.app-btn{
    background:linear-gradient(145deg, var(--primary), var(--primary-2));
    color:white;
    box-shadow:0 10px 20px color-mix(in srgb, var(--primary-2) 26%, transparent);
}

.secondary-btn{
    background:color-mix(in srgb, var(--panel-2) 86%, transparent);
    color:var(--text);
    border:1px solid var(--line);
}

.start-btn{
    background:linear-gradient(145deg, var(--success), color-mix(in srgb, var(--success) 78%, #000));
    color:white;
    box-shadow:0 8px 16px color-mix(in srgb, var(--success) 22%, transparent);
}

.stop-btn{
    background:linear-gradient(145deg, var(--danger), color-mix(in srgb, var(--danger) 78%, #000));
    color:white;
    box-shadow:0 8px 16px color-mix(in srgb, var(--danger) 22%, transparent);
}

.app-btn:hover,
.secondary-btn:hover,
.start-btn:hover,
.stop-btn:hover{
    transform:translateY(-2px);
}

.admin-only{
    display:none;
}

.status-badge{
    position:absolute;
    top:12px;
    right:12px;
    z-index:3;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    max-width:calc(100% - 24px);
    padding:7px 11px;
    border-radius:999px;
    font-size:11px;
    line-height:1;
    font-weight:700;
    letter-spacing:0.4px;
    white-space:nowrap;
    border:1px solid var(--line);
    backdrop-filter:blur(8px);
    box-shadow:0 6px 16px rgba(0,0,0,0.18);
}

.status-unknown{
    background:color-mix(in srgb, var(--panel-2) 80%, transparent);
    color:var(--text);
}

.status-up{
    background:color-mix(in srgb, var(--success) 16%, transparent);
    color:var(--success);
    border-color:color-mix(in srgb, var(--success) 24%, transparent);
}

.status-down{
    background:color-mix(in srgb, var(--danger) 14%, transparent);
    color:var(--danger);
    border-color:color-mix(in srgb, var(--danger) 22%, transparent);
}

.hidden{
    display:none !important;
}

.modal-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(8,10,16,0.72);
    backdrop-filter:blur(8px);
}

.modal-overlay.hidden{
    display:none;
}

.modal-box{
    width:100%;
    max-width:430px;
    text-align:center;
    padding:26px;
    border-radius:24px;
    background:linear-gradient(180deg, color-mix(in srgb, var(--panel-3) 92%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
    border:1px solid var(--line);
    box-shadow:0 28px 60px rgba(0,0,0,0.46);
    color:var(--text);
}

.modal-title{
    font-size:26px;
    font-weight:700;
    margin-bottom:10px;
}

.modal-text{
    font-size:17px;
    line-height:1.45;
    color:var(--text-dim);
    margin-bottom:20px;
}

.modal-btn{
    min-width:140px;
}

.spinner{
    width:54px;
    height:54px;
    margin:0 auto 18px auto;
    border-radius:50%;
    border:4px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-top-color:var(--primary);
    animation:spin 0.9s linear infinite;
    box-shadow:0 0 16px color-mix(in srgb, var(--primary) 18%, transparent);
}
/* =========================================================
   SOFT LIGHT – CUSTOM DESIGN OVERRIDES
========================================================= */

html[data-theme="soft-light"] body{
    font-family:"Segoe UI", Arial, sans-serif;
    color:var(--text);
    background:#f3efe9;
}

html[data-theme="soft-light"] .page-shell{
    background:none;
}

html[data-theme="soft-light"] .page-shell::before{
    content:"";
    position:fixed;
    inset:0;
    background:url("../IMG/background.png") center top / cover no-repeat;
    z-index:0;
    pointer-events:none;
}

html[data-theme="soft-light"] .page-shell::after{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(255,255,255,0.55);
    z-index:0;
    pointer-events:none;
}

html[data-theme="soft-light"] .bg-orb,
html[data-theme="soft-light"] .bg-grid{
    display:none;
}

html[data-theme="soft-light"] .layout{
    position:relative;
    z-index:1;
}

/* HERO */
html[data-theme="soft-light"] .hero-panel{
    background:rgba(255,255,255,0.88);
    border:1px solid rgba(185,138,74,0.25);
    box-shadow:0 12px 30px rgba(0,0,0,0.18);
    backdrop-filter:none;
}

html[data-theme="soft-light"] .hero-panel::before{
    background:
        linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.02));
}

html[data-theme="soft-light"] .hero-topline{
    background:rgba(255,255,255,0.78);
    border:1px solid rgba(185,138,74,0.18);
    color:#5f5f5f;
}

html[data-theme="soft-light"] .theme-switcher label{
    color:#5f5f5f;
}

html[data-theme="soft-light"] .theme-select{
    border:1px solid rgba(0,0,0,0.12);
    border-radius:12px;
    background:rgba(255,255,255,0.90);
    color:#131313;
}

html[data-theme="soft-light"] .theme-select:focus{
    border-color:rgba(185,138,74,0.65);
    box-shadow:0 0 0 3px rgba(185,138,74,0.15);
}

html[data-theme="soft-light"] .hero-copy h1{
    color:var(--primary);
}

html[data-theme="soft-light"] .hero-copy h2{
    color:#5f5f5f;
}

html[data-theme="soft-light"] .hero-copy p{
    color:#5f5f5f;
}

html[data-theme="soft-light"] .hero-status-box{
    background:rgba(255,255,255,0.78);
    border:1px solid rgba(185,138,74,0.18);
    box-shadow:none;
}

html[data-theme="soft-light"] .hero-status-box span{
    color:#666;
}

html[data-theme="soft-light"] .hero-status-box strong{
    color:#5a3c1f;
}

html[data-theme="soft-light"] .hero-build{
    background:rgba(185,138,74,0.12);
    border:1px solid rgba(185,138,74,0.35);
    color:#5a3c1f;
}

html[data-theme="soft-light"] .hero-separator{
    background:rgba(185,138,74,0.25);
}

html[data-theme="soft-light"] .hero-caption{
    color:#777;
}

/* SUMMARY + CARDOK */
html[data-theme="soft-light"] .summary-box,
html[data-theme="soft-light"] .group-card,
html[data-theme="soft-light"] .app-card{
    background:rgba(255,255,255,0.88);
    border:1px solid rgba(185,138,74,0.25);
    box-shadow:0 12px 30px rgba(0,0,0,0.18);
    backdrop-filter:none;
}

html[data-theme="soft-light"] .summary-box strong{
    color:#5a3c1f;
}

html[data-theme="soft-light"] .summary-label,
html[data-theme="soft-light"] .section-kicker,
html[data-theme="soft-light"] .group-subtitle,
html[data-theme="soft-light"] .app-version{
    color:#666;
}

html[data-theme="soft-light"] .group-card::before,
html[data-theme="soft-light"] .app-card::before{
    display:none;
}

html[data-theme="soft-light"] .group-header h2,
html[data-theme="soft-light"] .app-card h3,
html[data-theme="soft-light"] .app-type,
html[data-theme="soft-light"] .app-icon-shell{
    color:var(--primary);
}

html[data-theme="soft-light"] .group-count{
    background:rgba(255,255,255,0.75);
    border:1px solid rgba(185,138,74,0.28);
    color:#5a3c1f;
}

html[data-theme="soft-light"] .admin-card{
    background:rgba(255,255,255,0.88);
    border:1px solid rgba(185,138,74,0.25);
}

html[data-theme="soft-light"] .card-noise{
    background:
        radial-gradient(circle at 15% 20%, rgba(185,138,74,0.10), transparent 20%),
        radial-gradient(circle at 85% 80%, rgba(226,201,161,0.14), transparent 18%);
}

html[data-theme="soft-light"] .app-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(0,0,0,0.14);
    border-color:rgba(185,138,74,0.35);
}

html[data-theme="soft-light"] .app-icon-shell{
    background:rgba(185,138,74,0.14);
    border:1px solid rgba(185,138,74,0.22);
    box-shadow:none;
}

html[data-theme="soft-light"] .app-type{
    background:rgba(255,255,255,0.82);
    border:1px solid rgba(185,138,74,0.28);
}

/* INPUTOK */
html[data-theme="soft-light"] .admin-input{
    border:1px solid rgba(0,0,0,0.12);
    border-radius:12px;
    background:rgba(255,255,255,0.90);
    color:#131313;
}

html[data-theme="soft-light"] .admin-input::placeholder{
    color:#777;
}

html[data-theme="soft-light"] .admin-input:focus{
    border-color:rgba(185,138,74,0.65);
    box-shadow:0 0 0 3px rgba(185,138,74,0.15);
}

/* GOMBOK */
html[data-theme="soft-light"] .app-btn{
    background:var(--primary);
    color:#fff;
    box-shadow:0 10px 22px rgba(185,138,74,0.25);
}

html[data-theme="soft-light"] .secondary-btn{
    background:#ffffff;
    color:var(--primary);
    border:1px solid rgba(185,138,74,0.45);
    box-shadow:none;
}

html[data-theme="soft-light"] .start-btn{
    background:#1b8b4d;
    color:#fff;
    box-shadow:0 8px 18px rgba(27,139,77,0.18);
}

html[data-theme="soft-light"] .stop-btn{
    background:#b52b27;
    color:#fff;
    box-shadow:0 8px 18px rgba(181,43,39,0.18);
}

/* STÁTUSZOK */
html[data-theme="soft-light"] .status-badge{
    border:1px solid rgba(185,138,74,0.22);
    box-shadow:none;
    backdrop-filter:none;
}

html[data-theme="soft-light"] .status-unknown{
    background:rgba(255,255,255,0.82);
    color:#5a3c1f;
}

html[data-theme="soft-light"] .status-up{
    background:rgba(37,165,95,0.14);
    color:#1b8b4d;
    border-color:rgba(37,165,95,0.20);
}

html[data-theme="soft-light"] .status-down{
    background:rgba(213,83,79,0.14);
    color:#b52b27;
    border-color:rgba(213,83,79,0.20);
}

html[data-theme="soft-light"] .state-on,
html[data-theme="soft-light"] .admin-message.success{
    color:#1b8b4d !important;
}

html[data-theme="soft-light"] .state-off,
html[data-theme="soft-light"] .admin-message.error{
    color:#b52b27 !important;
}

html[data-theme="soft-light"] .admin-on{
    background:rgba(37,165,95,0.14);
    border-color:rgba(37,165,95,0.22);
    color:#1b8b4d !important;
}

html[data-theme="soft-light"] .admin-off{
    background:rgba(213,83,79,0.14);
    border-color:rgba(213,83,79,0.20);
    color:#b52b27 !important;
}

/* MODAL */
html[data-theme="soft-light"] .modal-overlay{
    background:rgba(20,20,20,0.45);
    backdrop-filter:blur(5px);
}

html[data-theme="soft-light"] .modal-box{
    background:rgba(255,255,255,0.96);
    border:1px solid rgba(185,138,74,0.22);
    border-radius:22px;
    box-shadow:0 24px 60px rgba(0,0,0,0.22);
    color:#131313;
}

html[data-theme="soft-light"] .modal-title{
    color:var(--primary);
}

html[data-theme="soft-light"] .modal-text{
    color:#333;
}

html[data-theme="soft-light"] .spinner{
    border:4px solid rgba(185,138,74,0.12);
    border-top-color:var(--primary);
    box-shadow:none;
}
@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

@media (max-width: 1180px){
    .layout{
        grid-template-columns:1fr;
    }

    .left-side{
        padding:24px 24px 12px 24px;
    }

    .right-side{
        padding:12px 24px 24px 24px;
    }

    .hero-panel{
        min-height:auto;
    }
}

@media (max-width: 900px){
    .hero-toolbar{
        flex-direction:column;
        align-items:stretch;
    }

    .theme-switcher{
        min-width:0;
    }

    .hero-brand{
        grid-template-columns:1fr;
        min-height:auto;
        gap:18px;
    }

    .hero-copy h1{
        font-size:42px;
    }

    .hero-copy h2{
        font-size:24px;
    }

    .hero-copy p{
        font-size:16px;
    }

    .hero-status-strip,
    .summary-strip{
        grid-template-columns:1fr;
    }

    .group-header{
        flex-wrap:wrap;
        align-items:flex-start;
        gap:10px;
    }

    .group-header h2{
        font-size:24px;
    }

    .apps-grid{
        grid-template-columns:1fr;
    }

    .app-card{
        min-height:auto;
    }

    .card-actions{
        flex-direction:column;
        width:100%;
    }

    .app-btn,
    .secondary-btn,
    .start-btn,
    .stop-btn{
        width:100%;
    }

    .admin-panel{
        flex-direction:column;
        align-items:stretch;
    }

    .admin-input{
        width:100%;
    }
}

@media (max-width: 520px){
    .left-side{
        padding:14px 14px 10px 14px;
    }

    .right-side{
        padding:10px 14px 16px 14px;
    }

    .hero-panel{
        padding:20px;
        border-radius:22px;
    }

    .group-card{
        padding:16px;
        border-radius:18px;
    }

    .hero-copy h1{
        font-size:34px;
    }

    .hero-copy h2{
        font-size:20px;
    }

    .hero-copy p{
        font-size:15px;
    }

    .hero-status-box strong,
    .summary-box strong{
        font-size:24px;
    }

    .group-header h2{
        font-size:21px;
    }

    .app-card{
        padding:54px 16px 16px 16px;
    }

    .app-card h3{
        font-size:19px;
    }

    .app-version{
        font-size:14px;
    }

    .modal-box{
        padding:18px;
        border-radius:18px;
    }

    .modal-title{
        font-size:22px;
    }

    .modal-text{
        font-size:15px;
    }

    .modal-btn{
        width:100%;
    }
}