:root {
    --bg:       #f0f2f7;
    --surface:  #ffffff;
    --card:     #ffffff;
    --border:   #dde1ea;
    --accent:   #2563eb;
    --accent2:  #7c3aed;
    --green:    #16a34a;
    --red:      #dc2626;
    --text:     #1a1d2e;
    --muted:    #8892a4;
    --radius:   12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Syne', sans-serif;
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center;
    padding: 28px 16px;
}

/* ── LOGIN ─────────────────────────────────── */
.login-wrap { width:100%; max-width:400px; margin:auto; text-align:center; }
.logo { font-size:2rem; font-weight:800; margin-bottom:8px; }
.logo span { color:var(--accent); }
.sub { color:var(--muted); margin-bottom:36px; font-size:.9rem; }
.login-card {
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); padding:32px;
    box-shadow:0 4px 24px rgba(0,0,0,.07); text-align:left;
}
.login-error {
    background:#fef2f2; border:1px solid #fecaca;
    border-radius:8px; padding:10px 14px;
    color:var(--red); font-size:.85rem; margin-bottom:16px; font-weight:600;
}

/* ── FIELDS ────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field label { font-size:.72rem; color:var(--muted); font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.field input, .field textarea, .field select {
    background:var(--bg); border:1px solid var(--border);
    border-radius:8px; color:var(--text);
    padding:11px 14px; font-family:'Syne',sans-serif; font-size:.95rem;
    outline:none; transition:border-color .2s; width:100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
    border-color:var(--accent); background:#fff;
}
.field textarea { resize:vertical; min-height:150px; }

/* ── BUTTONS ───────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 22px; border-radius:var(--radius); border:none; cursor:pointer;
    font-family:'Syne',sans-serif; font-size:.92rem; font-weight:700;
    transition:opacity .15s, transform .1s; text-decoration:none; white-space:nowrap;
}
.btn:active { transform:scale(.97); }
.btn-primary   { background:var(--accent);  color:#fff; }
.btn-secondary { background:var(--card); color:var(--text); border:1px solid var(--border); }
.btn-green     { background:var(--green);   color:#fff; }
.btn-red       { background:var(--red);     color:#fff; }
.btn-ghost     { background:transparent; color:var(--muted); border:1px solid var(--border); }
.btn:disabled  { opacity:.4; cursor:not-allowed; }
.btn-full      { width:100%; }
.btn-sm        { padding:7px 14px; font-size:.82rem; border-radius:8px; }
.btn-xs        { padding:5px 10px; font-size:.76rem; border-radius:6px; }
.btn-primary:hover { opacity:.88; }
.btn-green:hover   { opacity:.88; }
.btn-red:hover     { opacity:.88; }

/* ── APP SHELL ─────────────────────────────── */
.app { width:100%; max-width:1100px; display:flex; flex-direction:column; gap:20px; }

/* ── TOPBAR ────────────────────────────────── */
.topbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 20px; background:var(--surface);
    border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:0 1px 4px rgba(0,0,0,.05);
    gap:12px; flex-wrap:wrap;
}
.topbar-left  { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.topbar-right { display:flex; align-items:center; gap:12px; }
.brand { font-size:1rem; font-weight:800; white-space:nowrap; }
.brand span { color:var(--accent); }
.topbar-meta  { font-size:.8rem; color:var(--muted); }

/* ── NAV ───────────────────────────────────── */
.nav { display:flex; gap:2px; flex-wrap:wrap; }
.nav-link {
    padding:6px 13px; border-radius:8px;
    font-size:.84rem; font-weight:700;
    color:var(--muted); text-decoration:none;
    transition:all .18s; border:1px solid transparent;
    white-space:nowrap;
}
.nav-link:hover  { color:var(--text); background:var(--bg); }
.nav-link.active { color:var(--accent); background:#eff4ff; border-color:#c7d9fc; }

/* ── CARD ──────────────────────────────────── */
.card {
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); padding:22px;
    display:flex; flex-direction:column; gap:18px;
    box-shadow:0 1px 4px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.03);
}
.card-title {
    font-size:.72rem; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--muted);
    padding-bottom:12px; border-bottom:1px solid var(--border);
}

/* ── BROADCAST GRID ────────────────────────── */
.broadcast-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:720px) { .broadcast-grid { grid-template-columns:1fr; } }

/* ── TAG TOOLBAR ───────────────────────────── */
.tag-toolbar { display:flex; flex-wrap:wrap; gap:5px; }
.tag-btn {
    padding:5px 12px; border-radius:6px;
    border:1px solid var(--border); background:var(--bg);
    color:var(--text); cursor:pointer;
    font-family:'Syne',sans-serif; font-size:.82rem; font-weight:600;
    transition:all .15s; line-height:1.4;
}
.tag-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.tag-btn b, .tag-btn i, .tag-btn u, .tag-btn s { pointer-events:none; }

/* ── TABS ──────────────────────────────────── */
.target-tabs { display:flex; gap:8px; }
.tab {
    flex:1; padding:10px; border-radius:8px; border:1px solid var(--border);
    background:transparent; color:var(--muted);
    cursor:pointer; font-family:'Syne',sans-serif;
    font-size:.85rem; font-weight:600; text-align:center; transition:all .2s;
}
.tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.tab-content { display:none; }
.tab-content.active { display:flex; flex-direction:column; gap:12px; }

/* ── SEARCH BOX ────────────────────────────── */
.search-box { position:relative; }
.search-box input {
    width:100%; background:var(--bg); border:1px solid var(--border);
    border-radius:8px; color:var(--text); padding:10px 14px;
    font-family:'Syne',sans-serif; font-size:.9rem; outline:none;
    transition:border-color .2s;
}
.search-box input:focus { border-color:var(--accent); background:#fff; }
.search-results {
    position:absolute; top:calc(100% + 4px); left:0; right:0;
    background:var(--surface); border:1px solid var(--border);
    border-radius:8px; max-height:260px; overflow-y:auto; z-index:100; display:none;
    box-shadow:0 8px 28px rgba(0,0,0,.1);
}
.search-results.open { display:block; }
.search-item {
    padding:10px 14px; cursor:pointer;
    display:flex; flex-direction:column; gap:2px;
    transition:background .15s; border-bottom:1px solid var(--border);
}
.search-item:last-child { border-bottom:none; }
.search-item:hover { background:var(--bg); }
.search-item .name { font-size:.9rem; font-weight:600; }
.search-item .meta-row {
    display:flex; gap:10px; font-size:.75rem;
    font-family:'JetBrains Mono',monospace; color:var(--muted);
}

/* ── SELECTED USERS ────────────────────────── */
.selected-users { display:flex; flex-direction:column; gap:6px; max-height:200px; overflow-y:auto; }
.selected-user {
    display:flex; align-items:center; justify-content:space-between;
    background:var(--bg); border:1px solid var(--border);
    border-radius:8px; padding:8px 12px; font-size:.85rem;
}
.selected-user .info { display:flex; flex-direction:column; gap:2px; }
.selected-user .info .n { font-weight:600; }
.selected-user .info .m { font-size:.72rem; color:var(--muted); font-family:'JetBrains Mono',monospace; }
.selected-user button { background:none; border:none; color:var(--red); cursor:pointer; font-size:1rem; }

/* ── PHOTO DROP ────────────────────────────── */
.photo-drop {
    border:2px dashed var(--border); border-radius:var(--radius);
    padding:28px; text-align:center; cursor:pointer;
    transition:border-color .2s, background .2s; position:relative;
}
.photo-drop:hover { border-color:var(--accent); background:rgba(37,99,235,.03); }
.photo-drop.has-file { border-color:var(--green); background:rgba(22,163,74,.04); }
.photo-drop input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.photo-drop .icon     { font-size:2rem; margin-bottom:8px; }
.photo-drop .label    { font-size:.85rem; color:var(--muted); }
.photo-drop .filename { font-size:.8rem; color:var(--green); font-weight:600; margin-top:4px; }
.photo-preview { width:100%; border-radius:8px; object-fit:cover; max-height:180px; display:none; margin-top:10px; }

/* ── PROGRESS ──────────────────────────────── */
.progress-wrap { display:none; flex-direction:column; gap:10px; }
.progress-wrap.active { display:flex; }
.progress-bar-bg { background:var(--bg); border-radius:99px; height:8px; overflow:hidden; border:1px solid var(--border); }
.progress-bar-fill {
    height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2));
    border-radius:99px; transition:width .3s ease; width:0%;
}
.progress-text { display:flex; justify-content:space-between; font-size:.8rem; color:var(--muted); font-family:'JetBrains Mono',monospace; }
.progress-stats { display:flex; gap:16px; font-size:.85rem; font-weight:600; }
.stat-ok   { color:var(--green); }
.stat-fail { color:var(--red); }

/* ── GROUP FILTER (broadcast) ──────────────── */
.group-filter-wrap { display:flex; flex-direction:column; gap:6px; }
.group-filter-wrap label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
.group-filter-wrap select {
    background:var(--bg); border:1px solid var(--border); border-radius:8px;
    color:var(--text); padding:9px 14px;
    font-family:'Syne',sans-serif; font-size:.9rem; outline:none; cursor:pointer;
    transition:border-color .2s;
}
.group-filter-wrap select:focus { border-color:var(--accent); background:#fff; }

/* ── REPORT ────────────────────────────────── */
.report-wrap { display:none; flex-direction:column; gap:16px; }
.report-wrap.active { display:flex; }
.report-summary { display:flex; gap:12px; flex-wrap:wrap; }
.report-stat {
    flex:1; min-width:100px;
    background:var(--bg); border:1px solid var(--border);
    border-radius:10px; padding:12px 16px; text-align:center;
}
.report-stat .rs-num   { font-size:1.6rem; font-weight:800; line-height:1; }
.report-stat .rs-label { font-size:.72rem; color:var(--muted); margin-top:4px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.report-stat.ok    .rs-num { color:var(--green); }
.report-stat.fail  .rs-num { color:var(--red); }
.report-stat.total .rs-num { color:var(--accent); }
.report-failed-header {
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.report-failed-header h4 { font-size:.88rem; font-weight:800; color:var(--red); }
.failed-table-wrap { overflow-x:auto; border-radius:8px; border:1px solid var(--border); }
table.failed-tbl { width:100%; border-collapse:collapse; font-size:.82rem; }
table.failed-tbl th {
    background:#fef2f2; padding:8px 12px; text-align:left;
    font-size:.7rem; font-weight:700; letter-spacing:.07em;
    text-transform:uppercase; color:var(--red);
    border-bottom:1px solid #fecaca; white-space:nowrap;
}
table.failed-tbl td { padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.failed-tbl tr:last-child td { border-bottom:none; }
table.failed-tbl tr:hover td { background:#fff5f5; }
table.failed-tbl td.mono { font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--muted); }
.row-check { width:16px; height:16px; cursor:pointer; accent-color:var(--accent); }

/* ══════════════════════════════════════════════
   USERS PAGE
══════════════════════════════════════════════ */
.page-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.page-header h2 { font-size:1.1rem; font-weight:800; }
.page-header .badge {
    display:inline-block; background:#eff4ff; color:var(--accent);
    border:1px solid #c7d9fc; border-radius:99px;
    padding:3px 12px; font-size:.78rem; font-weight:700; margin-left:8px;
}
.users-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.users-toolbar input {
    background:var(--bg); border:1px solid var(--border);
    border-radius:8px; color:var(--text); padding:9px 14px;
    font-family:'Syne',sans-serif; font-size:.88rem; outline:none;
    transition:border-color .2s; width:220px;
}
.users-toolbar input:focus { border-color:var(--accent); background:#fff; }
.users-toolbar select {
    background:var(--bg); border:1px solid var(--border); border-radius:8px;
    color:var(--text); padding:9px 14px;
    font-family:'Syne',sans-serif; font-size:.88rem; outline:none; cursor:pointer;
    transition:border-color .2s;
}
.users-toolbar select:focus { border-color:var(--accent); background:#fff; }

.tbl-wrap { overflow-x:auto; border-radius:10px; border:1px solid var(--border); }
table.users-tbl { width:100%; border-collapse:collapse; font-size:.855rem; }
table.users-tbl th {
    background:var(--bg); padding:10px 14px; text-align:left;
    font-size:.7rem; font-weight:700; letter-spacing:.07em;
    text-transform:uppercase; color:var(--muted);
    border-bottom:2px solid var(--border); white-space:nowrap;
}
table.users-tbl td {
    padding:10px 14px; border-bottom:1px solid var(--border);
    vertical-align:middle; max-width:160px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
table.users-tbl tr:last-child td { border-bottom:none; }
table.users-tbl tbody tr:hover td { background:#f7f9ff; }
table.users-tbl td.mono { font-family:'JetBrains Mono',monospace; font-size:.8rem; color:var(--muted); }
table.users-tbl a { color:var(--accent); text-decoration:none; }
table.users-tbl a:hover { text-decoration:underline; }
table.users-tbl td.actions { display:flex; gap:6px; }

.badge-premium {
    display:inline-block; background:#fef9c3; color:#854d0e;
    border:1px solid #fde68a; border-radius:99px;
    padding:2px 8px; font-size:.72rem; font-weight:700;
}
.group-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; display:inline-block; }
.group-badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 9px; border-radius:99px;
    font-size:.72rem; font-weight:700; border:1px solid transparent;
}

.pagination { display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.pg-btn {
    padding:6px 12px; border-radius:7px; border:1px solid var(--border);
    background:var(--card); color:var(--text); cursor:pointer;
    font-family:'Syne',sans-serif; font-size:.82rem; font-weight:600;
    transition:all .15s;
}
.pg-btn:hover  { background:var(--accent); color:#fff; border-color:var(--accent); }
.pg-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.pg-btn:disabled { opacity:.35; cursor:not-allowed; }
.pg-info { font-size:.82rem; color:var(--muted); }
.tbl-empty { text-align:center; padding:48px; color:var(--muted); font-size:.9rem; font-style:italic; }

/* ══════════════════════════════════════════════
   GROUPS PAGE
══════════════════════════════════════════════ */
.groups-layout { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:720px) { .groups-layout { grid-template-columns:1fr; } }

.group-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 14px; background:var(--bg); border:1px solid var(--border);
    border-radius:10px; gap:10px; transition:box-shadow .15s;
}
.group-row:hover { box-shadow:0 2px 8px rgba(0,0,0,.07); }
.group-row-left  { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.group-row-actions { display:flex; gap:6px; flex-shrink:0; }
.group-name { font-weight:700; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.group-cnt  { font-size:.78rem; color:var(--muted); font-family:'JetBrains Mono',monospace; margin-left:4px; }

.color-presets { display:flex; gap:6px; flex-wrap:wrap; }
.cp {
    width:22px; height:22px; border-radius:50%; cursor:pointer;
    border:2px solid transparent; transition:transform .15s, border-color .15s;
}
.cp:hover { transform:scale(1.2); border-color:rgba(0,0,0,.2); }

.preset-btn {
    display:flex; align-items:center; gap:8px; width:100%; padding:9px 12px;
    background:var(--bg); border:1px solid var(--border);
    border-radius:8px; cursor:pointer;
    font-family:'Syne',sans-serif; font-size:.87rem; font-weight:600;
    color:var(--text); text-align:left; transition:all .15s;
}
.preset-btn:hover { background:var(--card); border-color:var(--accent); color:var(--accent); }

/* ══════════════════════════════════════════════
   TEXTS EDITOR
══════════════════════════════════════════════ */
.lang-tabs { display:flex; gap:4px; }
.lang-tab {
    padding:7px 16px; border-radius:8px; border:1px solid var(--border);
    background:transparent; color:var(--muted);
    cursor:pointer; font-family:'Syne',sans-serif;
    font-size:.85rem; font-weight:700; transition:all .18s;
}
.lang-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }

.text-row {
    display:grid; grid-template-columns:240px 1fr;
    border-bottom:1px solid var(--border); align-items:stretch;
}
.text-row:last-child { border-bottom:none; }
.text-row-label {
    padding:12px 14px; background:var(--bg);
    border-right:1px solid var(--border);
    display:flex; flex-direction:column; gap:4px; justify-content:center;
}
.text-key        { font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--muted); }
.text-label-name { font-size:.8rem; font-weight:700; color:var(--text); line-height:1.3; }
.text-field {
    width:100%; background:var(--card); border:none; outline:none;
    padding:12px 14px; font-family:'Syne',sans-serif; font-size:.9rem;
    color:var(--text); resize:vertical; transition:background .15s; min-height:44px;
}
.text-field:focus { background:#f7f9ff; }
@media(max-width:680px) {
    .text-row { grid-template-columns:1fr; }
    .text-row-label { border-right:none; border-bottom:1px solid var(--border); }
}

/* ── MODAL ─────────────────────────────────── */
.modal-backdrop {
    display:none; position:fixed; inset:0;
    background:rgba(15,20,40,.4); z-index:500;
    align-items:center; justify-content:center;
    backdrop-filter:blur(2px);
}
.modal-backdrop.open { display:flex; }
.modal {
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); padding:28px 28px 24px;
    width:100%; max-width:440px;
    box-shadow:0 24px 64px rgba(0,0,0,.14);
    display:flex; flex-direction:column; gap:16px;
}
.modal h3 { font-size:1.05rem; font-weight:800; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:4px; }

/* ── TOAST ─────────────────────────────────── */
#toast {
    position:fixed; bottom:24px; right:24px;
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); padding:14px 20px;
    font-size:.9rem; font-weight:600;
    transform:translateY(80px); opacity:0;
    transition:all .3s; z-index:999; max-width:320px;
    box-shadow:0 4px 20px rgba(0,0,0,.1);
}
#toast.show { transform:translateY(0); opacity:1; }
#toast.ok   { border-color:var(--green); color:var(--green); }
#toast.err  { border-color:var(--red);   color:var(--red);   }

/* ── GROUP CHECKBOXES (broadcast) ──────────────── */
.grp-check-label {
    display: flex; align-items: center; gap: 8px;
    font-size: .88rem; font-weight: 600;
    cursor: pointer; padding: 5px 8px;
    border-radius: 7px; transition: background .15s;
    user-select: none;
}
.grp-check-label:hover { background: #f0f4ff; }
#group-checkboxes {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    background: var(--bg);
}

/* ── RASM GALLERY (kits.php) ──────────────── */
.rasm-grid {
    display: flex; flex-wrap: wrap; gap: 8px;
    max-height: 260px; overflow-y: auto; padding: 4px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg);
}
.rasm-thumb, img.rasm-thumb {
    width: 80px !important; height: 80px !important;
    object-fit: cover !important; display: inline-block !important;
    border-radius: 8px; cursor: pointer;
    border: 3px solid transparent; transition: all .2s;
    flex-shrink: 0; vertical-align: top;
}
.rasm-thumb:hover    { border-color: var(--accent); transform: scale(1.05); box-shadow: 0 2px 8px rgba(37,99,235,.3); }
.rasm-thumb.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.25); }
.rasm-selected-name  { font-size: .78rem; color: var(--accent); font-weight: 700; margin-top: 6px; }