/* Hidden must override layout utilities (including .center's display:grid). */
[hidden] { display: none !important; }
:root { color-scheme: dark; --bg:#1b2435; --panel:#242f43; --text:#e5ecf8; --muted:#a4b2c9; --line:#35435c; --accent:#8b9aff; --sidebar:#172032; --ok:#7fdfbc; --err:#ffa0af; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif; font-size:15px; line-height:1.7; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }
button:focus-visible,a:focus-visible { outline:3px solid #98a3ff; outline-offset:4px; }
a { color:var(--accent); text-decoration:none; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:30px; line-height:1.4; letter-spacing:-.7px; margin-bottom:8px; }
h2 { font-size:18px; margin-bottom:8px; }
h3 { font-size:16px; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.error { color:var(--err); background:#fff0f1; padding:10px; border-radius:10px; }
.eyebrow { color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.8px; margin-bottom:8px; }
code { display:inline-block; font:12px/1.6 Consolas,monospace; direction:ltr; overflow-wrap:anywhere; background:#f1f4f9; border-radius:5px; padding:3px 6px; max-width:100%; }
.center { min-height:100dvh; display:grid; place-items:center; padding:28px; background:radial-gradient(ellipse at 25% 10%,#e1e7ff,transparent 55%),var(--bg); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:26px; margin-bottom:22px; box-shadow:0 4px 16px #182d4b03; min-width:0; }
.login-card { width:min(440px,100%); padding:42px; text-align:center; box-shadow:0 20px 70px #23365b0c; }
.login-logo,.brand-icon { display:grid; place-items:center; background:var(--accent); color:white; border-radius:14px; font-size:32px; width:56px; height:56px; font-family:Arial,sans-serif; }
.login-logo { margin:0 auto 24px; box-shadow:0 8px 20px #5365e930; }
.login-card h1 { font-size:27px; }
.login-card form { display:grid; gap:12px; margin-top:28px; text-align:right; }
.login-card form label { font-size:13px; font-weight:600; }
.login-card form .btn { margin-top:6px; }
.login-note { margin:24px 0 0; color:var(--muted); font-size:11px; }
input,textarea,select { width:100%; background:#fafbfd; border:1px solid #e1e7f0; color:var(--text); border-radius:10px; padding:12px 14px; outline:none; transition:border-color .15s,box-shadow .15s; }
input::placeholder,textarea::placeholder { color:#9ba6b8; }
input:focus,textarea:focus,select:focus { border-color:#919df5; box-shadow:0 0 0 3px #5365e912; background:white; }
textarea { resize:vertical; min-height:110px; }
input[type=checkbox] { accent-color:var(--accent); }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:8px; background:#f6f8fc; border:1px solid #e1e7f0; color:#465673; border-radius:10px; padding:10px 18px; font-weight:600; font-size:13px; transition:background .15s,transform .15s; white-space:nowrap; }
.btn:hover { background:#eaf0f8; }
.btn:active { transform:translateY(1px); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 3px 8px #5365e91a; }
.btn.primary:hover { background:#4455d6; }
.btn.ghost { background:transparent; }
.btn.danger { color:#c14353; background:#fff3f4; border-color:#ffe0e4; }
.btn.small { padding:6px 11px; font-size:11px; }
.topbar { position:fixed; inset:0 0 0 auto; width:236px; background:var(--sidebar); color:#b3bfd4; display:flex; flex-direction:column; padding:32px 18px 20px; z-index:10; }
.brand { display:flex; gap:12px; align-items:center; padding:0 12px 36px; }
.brand-icon { width:42px; height:42px; font-size:27px; border-radius:12px; }
.brand b { color:white; font-size:22px; letter-spacing:-.5px; line-height:1.2; }
.brand small,.admin-profile small { display:block; color:#7787a4; font-size:11px; margin-top:4px; }
.nav-caption { font-size:10px; color:#64748f; padding:8px 16px 12px; }
#tabs { display:flex; flex-direction:column; gap:7px; }
.tab { display:flex; align-items:center; gap:14px; color:#a1afc7; border:0; background:transparent; border-radius:10px; padding:12px 17px; text-align:right; font-size:13px; }
.tab span { font-size:22px; width:22px; text-align:center; line-height:1; }
.tab:hover { background:#ffffff08; color:white; }
.tab.active { background:#5365e9; color:#fff; box-shadow:0 6px 18px #00000012; }
.sidebar-bottom { margin-top:auto; padding-top:28px; }
.admin-profile { display:flex; align-items:center; gap:10px; border-top:1px solid #ffffff0e; padding:20px 10px; font-size:13px; color:#d9e1f0; }
.avatar { display:grid; place-items:center; width:34px; height:34px; background:#28364f; border-radius:50%; color:#adbfff; font-size:12px; }
#logout { width:100%; color:#9baac4; border-color:#ffffff10; font-size:12px; }
#logout:hover { background:#ffffff08; }
main { margin-right:236px; padding:0 40px 32px; max-width:1800px; }
.workspace-bar { display:flex; justify-content:space-between; align-items:center; height:76px; border-bottom:1px solid var(--line); font-size:12px; margin-bottom:30px; }
.session-indicator { display:flex; gap:7px; align-items:center; color:#648476; font-size:11px; }
.session-indicator::before { content:""; width:6px; height:6px; border-radius:50%; background:#3caf87; box-shadow:0 0 0 4px #3caf8710; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.page-heading p { color:var(--muted); margin-bottom:0; font-size:13px; }
.page-heading .eyebrow { color:var(--accent); }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.stat { position:relative; padding:20px 24px; background:white; border:1px solid var(--line); border-radius:16px; min-width:0; }
.stat .label { font-size:12px; color:var(--muted); margin-bottom:14px; }
.stat .value { font-size:29px; font-weight:650; line-height:1.3; letter-spacing:-.5px; direction:ltr; text-align:right; }
.stat-icon { position:absolute; left:20px; top:20px; width:31px; height:31px; display:grid; place-items:center; border-radius:9px; background:#eff1ff; color:var(--accent); font-size:17px; }
.stat:nth-child(2n) .stat-icon { color:#269178; background:#eaf8f2; }
.stat:nth-child(3n) .stat-icon { color:#c28a3c; background:#fff7e8; }
.dashboard-columns { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:22px; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.card-head h2 { margin-bottom:0; }
.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.broadcast-card .row { margin-top:16px; }
.broadcast-attachment { margin-top:18px; padding:16px; border:1px dashed var(--line); border-radius:12px; }
.broadcast-attachment input { font-size:12px; }
.broadcast-attachment input::file-selector-button { font:inherit; background:#34425c; color:#e5ecf8; border:0; border-radius:6px; padding:6px 10px; margin-inline-end:12px; cursor:pointer; }
.attachment-details { justify-content:space-between; }
.broadcast-attachment p { margin:8px 0 0; }
.field-label { display:block; font-size:12px; font-weight:600; margin-bottom:8px; }
.tools { display:grid; gap:14px; margin-top:22px; }
.tool { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:15px; border:1px solid var(--line); border-radius:12px; }
.tool code,.tool .small { flex-basis:100%; font-size:10px; }
.badge { display:inline-block; padding:3px 9px; border-radius:6px; font-size:10px; background:#f0f3f9; color:#71819a; white-space:nowrap; }
.badge.ok { background:#eaf8f2; color:#19876b; }
.badge.warn { background:#fff7e8; color:#b57d23; }
.badge.err { background:#fff0f1; color:#c14353; }
.platform-overview { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.platform-summary { display:flex; justify-content:space-between; align-items:center; padding:14px; border:1px solid var(--line); border-radius:10px; font-size:12px; gap:8px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:24px; }
.form-grid label { display:flex; flex-direction:column; gap:8px; font-size:12px; font-weight:600; color:#66758d; }
.form-grid .span2 { grid-column:span 2; }
.form-grid .check { flex-direction:row; align-items:center; }
.check input { width:auto; }
#cleanupCron,#namingTemplate,[id^=crop_] { direction:ltr; text-align:left; font-family:Consolas,monospace; font-size:12px; }
.platforms { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.platform { display:flex; justify-content:space-between; align-items:center; background:#fafbfd; border:1px solid var(--line); border-radius:10px; padding:14px; font-size:12px; }
.switch { position:relative; width:38px; height:22px; flex:none; }
.switch input { opacity:0; width:100%; height:100%; position:absolute; margin:0; }
.slider { position:absolute; inset:0; border-radius:20px; background:#d8dfeb; pointer-events:none; }
.slider::before { content:""; position:absolute; width:16px; height:16px; right:3px; top:3px; background:white; border-radius:50%; transition:transform .15s; }
.switch input:checked + .slider { background:var(--accent); }
.switch input:checked + .slider::before { transform:translateX(-16px); }
.switch input:focus-visible + .slider { outline:3px solid #98a3ff; outline-offset:3px; }
.table-wrap { overflow:auto; margin-top:20px; }
table { width:100%; border-collapse:collapse; font-size:12px; }
th,td { text-align:right; padding:16px 12px; border-bottom:1px solid var(--line); }
th { background:#f8fafd; color:var(--muted); font-size:11px; font-weight:600; white-space:nowrap; }
td { max-width:320px; overflow-wrap:anywhere; }
td .btn { margin:3px; }
tbody tr:hover { background:#fafbfd; }
td[colspan] { padding:54px 20px; text-align:center; }
.logs { display:flex; flex-direction:column; max-height:65vh; overflow:auto; margin-top:20px; }
.log-line { display:flex; align-items:baseline; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); font-size:12px; overflow-wrap:anywhere; }
.log-line .t { white-space:nowrap; color:var(--muted); font-size:10px; }
@media(min-width:1500px) { .grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media(max-width:1100px) { main { padding-inline:24px; } .topbar { width:205px; } main { margin-right:205px; } .dashboard-columns { grid-template-columns:1fr; gap:0; } .platform-overview { grid-template-columns:repeat(2,1fr); } }
@media(max-width:760px) { .topbar { position:static; width:auto; padding:18px 16px 12px; } .brand { padding:0 0 18px; } .brand small { display:none; } .brand b { font-size:20px; } .brand-icon { width:34px; height:34px; } .nav-caption,.admin-profile { display:none; } #tabs { flex-direction:row; overflow:auto; gap:5px; padding-bottom:4px; } .tab { white-space:nowrap; padding:9px 12px; font-size:11px; gap:6px; } .tab span { font-size:16px; width:18px; } .sidebar-bottom { position:absolute; left:16px; top:20px; padding:0; } #logout { font-size:10px; width:auto; padding:6px 10px; } main { margin:0; padding:0 16px 24px; } .workspace-bar { height:52px; margin-bottom:22px; } h1 { font-size:25px; } .page-heading { align-items:flex-start; flex-direction:column; gap:10px; } .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .stat { padding:16px; } .stat .value { font-size:25px; } .stat-icon { left:12px; top:12px; width:25px; height:25px; font-size:14px; } .stat .label { font-size:10px; padding-left:20px; } .card { padding:20px; border-radius:14px; } .form-grid { grid-template-columns:1fr; } .form-grid .span2 { grid-column:span 1; } .platforms { grid-template-columns:repeat(2,1fr); } .platform-overview { grid-template-columns:1fr; } .log-line { flex-wrap:wrap; gap:8px; } .login-card { padding:30px 24px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none !important; } }

/* Soft midnight palette: raised surfaces, readable contrast, no pure black. */
.center { background:radial-gradient(ellipse at 25% 10%,#343d64,transparent 60%),var(--bg); }
.error { background:#49303e; }
code { background:#1e293e; color:#c2cff5; }
input,textarea,select { background:#202b3f; border-color:#40506a; }
input::placeholder,textarea::placeholder { color:#95a4be; }
input:focus,textarea:focus,select:focus { background:#263249; border-color:#9caaFF; box-shadow:0 0 0 3px #8b9aff24; }
.btn { background:#303e56; border-color:#485a76; color:#e0e9f8; }
.btn:hover { background:#3b4c68; }
.btn.primary { background:#8293fa; border-color:#8293fa; color:#101b36; }
.btn.primary:hover { background:#9ba9ff; }
.btn.danger { color:#ffb3be; background:#473040; border-color:#664254; }
.login-logo,.brand-icon { color:#16223f; }
.stat { background:var(--panel); }
.stat-icon { background:#394467; color:#bdc6ff; }
.stat:nth-child(2n) .stat-icon { background:#2c4b48; color:#8ae6c6; }
.stat:nth-child(3n) .stat-icon { background:#51473b; color:#f1cb8b; }
.badge { background:#34425c; color:#c0cce2; }
.badge.ok { background:#2b4b47; color:#91e6c8; }
.badge.warn { background:#514537; color:#f2cf8d; }
.badge.err { background:#4e3342; color:#ffb0bf; }
.session-indicator { color:#a2d9c4; }
.form-grid label { color:#bdc9dd; }
.platform { background:#202b3f; }
.slider { background:#53637e; }
th { background:#202b3f; }
tbody tr:hover { background:#2c3950; }