:root {
    --primary: #e50914;
    --dark: #0d1117;
    --panel: #151b24;
    --panel-2: #1d2632;
    --text: #f6f7f9;
    --muted: #9ca8b7;
    --border: #2c3745;
    --success: #20c977;
    --danger: #ff5f67;
    --warning: #ffbd3d;
    --info: #4da3ff;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: Inter, Arial, sans-serif; background: #0a0e14; color: var(--text); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 250px; flex: 0 0 250px; background: var(--dark); border-right: 1px solid var(--border); padding: 24px 16px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { font-size: 24px; font-weight: 800; padding: 5px 12px 24px; }
.brand span { color: var(--primary); }
.sidebar nav { display: grid; gap: 7px; }
.sidebar nav a, .logout { padding: 13px 14px; border-radius: 12px; color: var(--muted); }
.sidebar nav a:hover, .sidebar nav a.active { background: var(--panel-2); color: white; }
.logout { margin-top: auto; border: 1px solid var(--border); text-align: center; }
.content { width: 100%; padding: 28px; max-width: 1500px; }
.topbar { display: flex; gap: 16px; align-items: center; margin-bottom: 25px; }
.topbar h1 { margin: 0; font-size: 28px; }
.topbar p { margin: 5px 0 0; color: var(--muted); }
.menu-button { display: none; background: var(--panel); color: white; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 20px; box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.stat .label { color: var(--muted); font-size: 14px; }
.stat .value { margin-top: 10px; font-size: 34px; font-weight: 800; }
.shortcuts { margin-top: 20px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
.shortcut { background: var(--panel); border: 1px solid var(--border); border-radius: 15px; padding: 20px; transition: .2s; }
.shortcut:hover { transform: translateY(-2px); border-color: var(--primary); }
.section-title { margin: 28px 0 14px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.panel-header { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.panel-body { padding: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 17px; }
.form-group { display: grid; gap: 8px; }
.form-group.full { grid-column: 1 / -1; }
label { color: #d8dee8; font-weight: 650; font-size: 14px; }
input, select, textarea { width: 100%; padding: 12px 13px; color: white; background: #0f151d; border: 1px solid var(--border); border-radius: 10px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(229,9,20,.12); }
input[type=color] { min-height: 46px; padding: 4px; }
.checkbox { display: flex; align-items: center; gap: 10px; }
.checkbox input { width: auto; }
.actions { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn { border: 0; border-radius: 10px; padding: 11px 16px; cursor: pointer; font-weight: 750; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary { background: var(--primary); color: white; }
.btn-secondary { background: #2c3745; color: white; }
.btn-danger { background: #5d2229; color: #ffd4d7; }
.btn-small { padding: 8px 10px; font-size: 13px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 14px 15px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { color: var(--muted); font-size: 13px; }
.thumb { width: 74px; height: 48px; border-radius: 9px; object-fit: cover; background: #0d1117; }
.icon-thumb { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: #0d1117; }
.badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 750; }
.badge-success { background: rgba(32,201,119,.14); color: #67e5aa; }
.badge-muted { background: #28313d; color: #b5bfca; }
.inline-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.alert { padding: 13px 16px; border-radius: 11px; margin-bottom: 16px; transition: opacity .4s; }
.alert.fade { opacity: .2; }
.alert-success { background: rgba(32,201,119,.15); color: #74e9b4; border: 1px solid rgba(32,201,119,.3); }
.alert-danger { background: rgba(255,95,103,.14); color: #ffb3b7; border: 1px solid rgba(255,95,103,.3); }
.alert-warning { background: rgba(255,189,61,.14); color: #ffd482; border: 1px solid rgba(255,189,61,.3); }
.alert-info { background: rgba(77,163,255,.14); color: #a9d1ff; border: 1px solid rgba(77,163,255,.3); }
.preview { margin-top: 12px; max-width: 360px; max-height: 190px; border-radius: 14px; border: 1px solid var(--border); object-fit: cover; }
.code-box { background: #0b1017; border: 1px solid var(--border); padding: 14px; border-radius: 12px; overflow-x: auto; color: #c8d3df; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at top right, #311017, #0a0e14 46%); }
.login-card { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--border); border-radius: 22px; padding: 30px; box-shadow: 0 25px 70px rgba(0,0,0,.35); }
.login-card h1 { margin: 0 0 6px; }
.login-card p { margin: 0 0 22px; color: var(--muted); }
.help { color: var(--muted); font-size: 13px; }
@media (max-width: 1050px) { .grid { grid-template-columns: repeat(2,1fr); } .shortcuts { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 760px) {
    .sidebar { position: fixed; z-index: 20; transform: translateX(-105%); transition: .2s; }
    .sidebar.open { transform: translateX(0); }
    .menu-button { display: inline-block; }
    .content { padding: 18px; }
    .grid, .shortcuts, .form-grid { grid-template-columns: 1fr; }
}

/* PRO modules */
.brand { display:flex; align-items:baseline; gap:9px; letter-spacing:.02em; }
.brand span { font-size:30px; color:#fff; }
.brand small { font-size:11px; letter-spacing:.22em; color:var(--primary); }
.login-logo { width:76px; height:76px; border-radius:22px; display:grid; place-items:center; margin-bottom:20px; background:linear-gradient(135deg,#ff2636,var(--primary)); color:#fff; font-size:30px; font-weight:900; box-shadow:0 18px 38px rgba(229,9,20,.25); }
.online-value { color:#67e5aa; }
.api-list { display:grid; gap:10px; }
.api-list code, td code { background:#0b1017; border:1px solid var(--border); border-radius:8px; padding:7px 9px; color:#c8d3df; overflow-wrap:anywhere; }
.status-dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:7px; box-shadow:0 0 10px currentColor; }
.status-dot.is-online { background:#20c977; color:#20c977; }
.status-dot.is-offline { background:#697586; color:#697586; box-shadow:none; }
.online-line { display:inline-flex; align-items:center; font-weight:750; }
.badge-danger, .badge-failed { background:rgba(255,95,103,.14); color:#ffb3b7; }
.badge-pending { background:rgba(255,189,61,.14); color:#ffd482; }
.badge-delivered { background:rgba(77,163,255,.14); color:#a9d1ff; }
.badge-completed { background:rgba(32,201,119,.14); color:#67e5aa; }
.command-form { min-width:330px; display:grid; gap:9px; }
.command-form select { padding:9px 10px; }
.devices-table { min-width:1260px; }
textarea { resize:vertical; }
@media (max-width:760px) {
    .command-form { min-width:270px; }
    .brand span { font-size:26px; }
}