* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

:root {
 --primary: #1e4976;
 --primary-dark: #153660;
 --primary-light: #e8eef4;
 --sidebar-bg: #1a2b42;
 --sidebar-text: #b8c4d0;
 --sidebar-active: #ffffff;
 --sidebar-accent: #3d6a9e;
 --body-bg: #eef1f5;
 --card-bg: #ffffff;
 --surface-muted: #f9fafb;
 --surface-hover: #f3f4f6;
 --input-bg: #ffffff;
 --text: #1f2937;
 --text-muted: #6b7280;
 --border: #d1d5db;
 --border-light: #e5e7eb;
 --success: #1a7f4e;
 --success-bg: #ecfdf3;
 --danger: #b42318;
 --danger-bg: #fef3f2;
 --warning: #b54708;
 --warning-bg: #fffaeb;
 --info-bg: #eff6ff;
 --info: #1e4976;
 --radius: 4px;
 --shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

[data-theme="dark"] {
 --primary: #5b9fd4;
 --primary-dark: #4a8bc2;
 --primary-light: #1e3a52;
 --body-bg: #0f1419;
 --card-bg: #1a2129;
 --surface-muted: #222a33;
 --surface-hover: #2a333d;
 --input-bg: #161c24;
 --text: #e8edf2;
 --text-muted: #9aa5b1;
 --border: #2f3a45;
 --border-light: #252e38;
 --success-bg: #0d2a1a;
 --danger-bg: #2a1210;
 --warning-bg: #2a1f0a;
 --info-bg: #152535;
 --info: #5b9fd4;
 --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body {
 font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
 background: var(--body-bg);
 color: var(--text);
 line-height: 1.5;
 font-size: 14px;
}

.layout {
 display: flex;
 min-height: 100vh;
}

/* ===== Sidebar ===== */
.sidebar {
 width: 240px;
 background: var(--sidebar-bg);
 color: var(--sidebar-text);
 position: fixed;
 height: 100vh;
 overflow: hidden;
 border-right: 1px solid #152536;
 z-index: 100;
 display: flex;
 flex-direction: column;
}

.sidebar-brand {
 padding: 1.25rem 1.5rem;
 border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand h1 {
 color: #fff;
 font-size: 1.125rem;
 font-weight: 600;
 letter-spacing: 0.02em;
}

.sidebar-brand small {
 color: var(--sidebar-text);
 font-size: 0.75rem;
 display: block;
 margin-top: 0.25rem;
}

.sidebar-nav {
 flex: 1;
 overflow-y: auto;
 padding: 0.75rem 0;
}

.sidebar-nav a {
 display: block;
 padding: 0.625rem 1.5rem;
 color: var(--sidebar-text);
 text-decoration: none;
 font-size: 0.875rem;
 border-left: 3px solid transparent;
 transition: background 0.15s, color 0.15s;
}

.sidebar-nav a:hover {
 background: rgba(255, 255, 255, 0.05);
 color: #fff;
}

.sidebar-nav a.active {
 background: rgba(255, 255, 255, 0.08);
 color: var(--sidebar-active);
 border-left-color: var(--sidebar-accent);
 font-weight: 500;
}

.sidebar-footer {
 margin-top: auto;
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 padding: 1rem 1.5rem;
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
}

.sidebar-footer-link {
 display: block;
 padding: 0.5rem 0;
 color: var(--sidebar-text);
 text-decoration: none;
 font-size: 0.8125rem;
 transition: color 0.15s;
}

.sidebar-footer-link:hover,
.sidebar-footer-link.active {
 color: #fff;
}

.theme-toggle {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 0.75rem;
 padding: 0.5rem 0;
 cursor: pointer;
 font-size: 0.8125rem;
 color: var(--sidebar-text);
 user-select: none;
}

.theme-switch {
 position: relative;
 width: 40px;
 height: 22px;
 flex-shrink: 0;
}

.theme-switch input {
 opacity: 0;
 width: 0;
 height: 0;
 position: absolute;
}

.theme-slider {
 position: absolute;
 inset: 0;
 background: rgba(255, 255, 255, 0.15);
 border-radius: 11px;
 transition: background 0.2s;
}

.theme-slider::before {
 content: '';
 position: absolute;
 width: 16px;
 height: 16px;
 left: 3px;
 top: 3px;
 background: #fff;
 border-radius: 50%;
 transition: transform 0.2s;
}

.theme-switch input:checked + .theme-slider {
 background: var(--sidebar-accent);
}

.theme-switch input:checked + .theme-slider::before {
 transform: translateX(18px);
}

/* ===== Main area ===== */
.content-wrap {
 margin-left: 240px;
 flex: 1;
 display: flex;
 flex-direction: column;
 min-height: 100vh;
}

.topbar {
 background: var(--card-bg);
 border-bottom: 1px solid var(--border);
 padding: 0 2rem;
 height: 52px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 position: sticky;
 top: 0;
 z-index: 50;
}

.topbar-title {
 font-size: 0.875rem;
 font-weight: 600;
 color: var(--text-muted);
 text-transform: uppercase;
 letter-spacing: 0.04em;
}

.topbar-meta {
 font-size: 0.8125rem;
 color: var(--text-muted);
 font-variant-numeric: tabular-nums;
}

.main {
 flex: 1;
 padding: 1.5rem 2rem 2rem;
}

/* ===== Page header ===== */
.page-header {
 margin-bottom: 1.5rem;
 padding-bottom: 1rem;
 border-bottom: 1px solid var(--border);
}

.page-header h2 {
 font-size: 1.375rem;
 font-weight: 600;
 color: var(--text);
 margin-bottom: 0.25rem;
}

.page-header p {
 color: var(--text-muted);
 font-size: 0.875rem;
}

/* ===== Cards & panels ===== */
.card,
.send-card,
.stat-card {
 background: var(--card-bg);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
}

.card {
 padding: 0;
 margin-bottom: 1.25rem;
}

.card > .card-header,
.card > form,
.card > .empty-state,
.card > table,
.card > .alert {
 margin: 0;
}

.card-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0.875rem 1.25rem;
 background: var(--surface-muted);
 border-bottom: 1px solid var(--border);
}

.card-body {
 padding: 1.25rem;
}

.card-header h3 {
 font-size: 0.9375rem;
 font-weight: 600;
 color: var(--text);
}

.card > form,
.card > .empty-state {
 padding: 1.25rem;
}

.card > table {
 border: none;
}

.stats-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: 1rem;
 margin-bottom: 1.25rem;
}

.stat-card {
 padding: 1rem 1.25rem;
}

.stat-card .label {
 color: var(--text-muted);
 font-size: 0.8125rem;
 margin-bottom: 0.375rem;
}

.stat-card .value {
 font-size: 1.75rem;
 font-weight: 600;
 color: var(--primary);
}

.panel-section-title {
 font-size: 0.8125rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 color: var(--text-muted);
 margin-bottom: 1rem;
 padding-bottom: 0.5rem;
 border-bottom: 1px solid var(--border-light);
}

/* ===== Buttons ===== */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.375rem;
 padding: 0.5rem 1rem;
 border: 1px solid transparent;
 border-radius: var(--radius);
 font-size: 0.8125rem;
 font-weight: 500;
 cursor: pointer;
 text-decoration: none;
 transition: background 0.15s, border-color 0.15s;
 font-family: inherit;
 line-height: 1.4;
}

.btn-primary {
 background: var(--primary);
 color: #fff;
 border-color: var(--primary);
}

.btn-primary:hover {
 background: var(--primary-dark);
 border-color: var(--primary-dark);
}

.btn-danger {
 background: var(--danger);
 color: #fff;
 border-color: var(--danger);
}

.btn-danger:hover {
 background: #912018;
}

.btn-success {
 background: var(--success);
 color: #fff;
 border-color: var(--success);
}

.btn-success:hover {
 background: #15663f;
}

.btn-outline {
 background: var(--input-bg);
 border-color: var(--border);
 color: var(--text);
}

.btn-outline:hover {
 background: var(--surface-hover);
 border-color: var(--text-muted);
}

.btn-sm {
 padding: 0.375rem 0.75rem;
 font-size: 0.75rem;
}

.btn-send {
 width: 100%;
 margin-top: 1rem;
 padding: 0.625rem 1rem;
 background: var(--primary);
 color: #fff;
 border: 1px solid var(--primary);
 border-radius: var(--radius);
 font-weight: 500;
 font-size: 0.875rem;
 cursor: pointer;
}

.btn-send:not(:disabled):hover {
 background: var(--primary-dark);
 border-color: var(--primary-dark);
}

.btn-send:disabled {
 background: var(--surface-muted);
 border-color: var(--border);
 color: var(--text-muted);
 cursor: not-allowed;
}

.btn-link {
 background: none;
 border: none;
 color: var(--primary);
 cursor: pointer;
 font-size: 0.8125rem;
 padding: 0;
 text-decoration: underline;
 font-family: inherit;
}

/* ===== Tables ===== */
table {
 width: 100%;
 border-collapse: collapse;
 font-size: 0.875rem;
}

table th,
table td {
 padding: 0.625rem 1rem;
 text-align: left;
 border-bottom: 1px solid var(--border-light);
}

table th {
 font-weight: 600;
 color: var(--text-muted);
 font-size: 0.75rem;
 text-transform: uppercase;
 letter-spacing: 0.04em;
 background: var(--surface-muted);
 border-bottom: 1px solid var(--border);
}

table tbody tr:hover {
 background: var(--surface-hover);
}

/* ===== Badges ===== */
.badge {
 display: inline-block;
 padding: 0.125rem 0.5rem;
 border-radius: var(--radius);
 font-size: 0.75rem;
 font-weight: 500;
 border: 1px solid transparent;
}

.badge-success {
 background: var(--success-bg);
 color: var(--success);
 border-color: #abefc6;
}

.badge-danger {
 background: var(--danger-bg);
 color: var(--danger);
 border-color: #fecdca;
}

.badge-warning {
 background: var(--warning-bg);
 color: var(--warning);
 border-color: #fedf89;
}

.badge-info {
 background: var(--primary-light);
 color: var(--primary);
 border-color: #c5d4e3;
}

/* ===== Şablonlar düzeni + yedek şablon paneli ===== */
.templates-layout {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 gap: 1.5rem;
 align-items: stretch;
}
.templates-layout > .card {
 display: flex;
 flex-direction: column;
}
.templates-layout > .card > .card-body {
 display: flex;
 flex-direction: column;
 flex: 1 1 auto;
}
@media (max-width: 1024px) {
 .templates-layout {
 grid-template-columns: 1fr;
 }
}
.fallback-card .fallback-hint {
 font-size: 0.88rem;
 color: var(--text-muted, #667);
 margin: 0 0 1rem;
 line-height: 1.5;
}
.fb-button-row {
 display: flex;
 gap: 8px;
 margin-bottom: 8px;
 align-items: center;
}
.fb-button-row input[type="text"] {
 flex: 0 0 38%;
}
.fb-button-row input[type="url"] {
 flex: 1 1 auto;
}
.fb-button-row .fb-remove {
 flex: 0 0 auto;
 padding: 6px 10px;
}
#fb-add-button {
 margin-top: 4px;
}

.removed-flag,
.text-fallback-flag {
 color: #16a34a;
 font-weight: 600;
 font-size: 0.82rem;
 white-space: nowrap;
}

/* ===== Medya önizleme ===== */
.media-preview {
 margin-bottom: 0.75rem;
}
.media-preview-media {
 max-width: 100%;
 max-height: 260px;
 border-radius: 8px;
 border: 1px solid var(--border, #d8dee6);
 display: block;
}
.media-remove-label {
 display: block;
 margin-bottom: 0.75rem;
 font-size: 0.85rem;
 color: var(--text-muted, #667);
}

/* ===== Grup/Kanal adresi ===== */
.chat-name {
 display: block;
 font-weight: 500;
}
.chat-addr {
 display: inline-block;
 margin-top: 2px;
 font-size: 0.8rem;
 color: var(--primary);
 text-decoration: none;
 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.chat-addr:hover {
 text-decoration: underline;
}

/* ===== Mesaj Geçmişi ===== */
.history-actions {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 flex-wrap: wrap;
}
.btn-retry {
 background: var(--primary-light);
 color: var(--primary);
 border: 1px solid #c5d4e3;
 white-space: nowrap;
}
.btn-retry:hover {
 background: var(--primary);
 color: #fff;
 border-color: var(--primary);
}
.history-table .history-label {
 font-weight: 600;
 color: var(--text);
 text-decoration: none;
}
.history-table .history-label:hover {
 color: var(--primary);
 text-decoration: underline;
}
.history-progress-cell {
 min-width: 180px;
}
.history-progress-cell .job-progress-bar {
 margin-bottom: 0.375rem;
}
.history-progress-text {
 font-size: 0.75rem;
 color: var(--text-muted);
 font-variant-numeric: tabular-nums;
}
.history-mini {
 margin-left: 0.25rem;
}
.history-row.is-active .history-label::after {
 content: '';
 display: inline-block;
 width: 6px;
 height: 6px;
 margin-left: 0.4rem;
 border-radius: 50%;
 background: var(--primary);
 animation: tgpost-pulse 1.2s ease-in-out infinite;
 vertical-align: middle;
}
@keyframes tgpost-pulse {
 0%, 100% { opacity: 0.3; }
 50% { opacity: 1; }
}

.report-stats {
 display: flex;
 gap: 1rem;
 margin-top: 1.25rem;
 flex-wrap: wrap;
}
.report-stat {
 flex: 1;
 min-width: 110px;
 background: var(--surface-muted);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 0.875rem 1rem;
 text-align: center;
}
.report-stat-value {
 display: block;
 font-size: 1.5rem;
 font-weight: 700;
 color: var(--text);
 line-height: 1.2;
}
.report-stat.is-success .report-stat-value { color: var(--success); }
.report-stat.is-danger .report-stat-value { color: var(--danger); }
.report-stat-label {
 font-size: 0.75rem;
 color: var(--text-muted);
 text-transform: uppercase;
 letter-spacing: 0.03em;
}
.report-times {
 display: flex;
 gap: 1.5rem;
 margin-top: 1rem;
 flex-wrap: wrap;
 font-size: 0.8125rem;
 color: var(--text-muted);
}
.report-error {
 font-size: 0.8125rem;
 color: var(--danger);
 max-width: 320px;
}

/* ===== Forms ===== */
.form-group {
 margin-bottom: 1rem;
}

.form-group > label {
 display: block;
 margin-bottom: 0.375rem;
 font-weight: 500;
 font-size: 0.8125rem;
 color: var(--text);
}

.form-control {
 width: 100%;
 padding: 0.5rem 0.75rem;
 border: 1px solid var(--border);
 border-radius: var(--radius);
 font-size: 0.875rem;
 background: var(--input-bg);
 color: var(--text);
 font-family: inherit;
 transition: border-color 0.15s;
}

.form-control:focus {
 outline: none;
 border-color: var(--primary);
 box-shadow: 0 0 0 2px rgba(30, 73, 118, 0.12);
}

textarea.form-control {
 min-height: 100px;
 resize: vertical;
}

.form-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0.75rem;
}

.form-row-2 {
 grid-template-columns: 1fr 1fr;
}

.field-narrow {
 max-width: 400px;
}

.checkbox-label {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-weight: normal;
 cursor: pointer;
}

.form-hint {
 display: block;
 font-size: 0.8125rem;
 color: var(--text-muted);
 margin-top: 0.375rem;
 line-height: 1.5;
}

.settings-form .form-actions {
 margin-top: 0.25rem;
}

.form-actions {
 display: flex;
 gap: 0.5rem;
 flex-wrap: wrap;
}

.checkbox-group {
 display: flex;
 flex-wrap: wrap;
 gap: 1rem;
}

.checkbox-group label {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-weight: normal;
 cursor: pointer;
}

.actions {
 display: flex;
 gap: 0.5rem;
 flex-wrap: wrap;
}

/* ===== Alerts ===== */
.alert {
 padding: 0.75rem 1rem;
 border-radius: var(--radius);
 margin-bottom: 1.25rem;
 font-size: 0.875rem;
 border: 1px solid;
}

.alert-danger {
 background: var(--danger-bg);
 color: var(--danger);
 border-color: #fecdca;
}

.alert-success {
 background: var(--success-bg);
 color: var(--success);
 border-color: #abefc6;
}

.alert-info {
 background: var(--info-bg);
 color: var(--info);
 border-color: #bfdbfe;
}

.empty-state {
 text-align: center;
 padding: 2.5rem 1.5rem;
 color: var(--text-muted);
}

.empty-state p {
 margin-bottom: 1rem;
}

/* ===== Auth ===== */
.auth-layout {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background: var(--body-bg);
}

.auth-card {
 background: var(--card-bg);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 2rem;
 width: 100%;
 max-width: 400px;
 box-shadow: var(--shadow);
}

.auth-card h1 {
 text-align: center;
 margin-bottom: 0.375rem;
 color: var(--primary);
 font-size: 1.375rem;
 font-weight: 600;
}

.auth-card .subtitle {
 text-align: center;
 color: var(--text-muted);
 margin-bottom: 1.5rem;
 font-size: 0.875rem;
}

/* ===== Mesaj Gönder ===== */
.send-page .page-header {
 border-bottom: none;
 padding-bottom: 0;
 margin-bottom: 1.25rem;
}

.send-layout {
 display: grid;
 grid-template-columns: minmax(380px, 40%) 1fr;
 gap: 1.5rem;
 align-items: start;
}

.send-panel-settings {
 position: sticky;
 top: 1rem;
}

.send-settings-card {
 margin-bottom: 0;
}

.send-settings-body {
 display: flex;
 flex-direction: column;
 gap: 0.25rem;
 min-height: 520px;
}

.send-targets-group {
 flex: 1;
 display: flex;
 flex-direction: column;
 min-height: 0;
 margin-bottom: 0;
}

.send-targets-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 0.75rem;
 margin-bottom: 0.5rem;
}

.send-targets-header label {
 margin-bottom: 0;
}

.targets-selected-count {
 font-size: 0.75rem;
 font-weight: 500;
 color: var(--text-muted);
 white-space: nowrap;
}

.targets-selected-count.has-selection {
 color: var(--primary);
 font-weight: 600;
}

.targets-search {
 margin-bottom: 0.625rem;
}

.targets-search:disabled {
 opacity: 0.55;
 cursor: not-allowed;
}

.targets-container {
 flex: 1;
 min-height: 280px;
 max-height: min(480px, calc(100vh - 340px));
 overflow-y: auto;
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 0.625rem;
 background: var(--surface-muted);
}

.send-settings-footer {
 margin-top: auto;
 padding-top: 1rem;
 border-top: 1px solid var(--border-light);
}

.btn-send-wide {
 width: 100%;
 padding: 0.75rem 1rem;
 font-size: 0.9375rem;
 font-weight: 600;
}

.send-panel-compose .card:last-child {
 margin-bottom: 0;
}

.template-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1rem 1.25rem;
 align-items: end;
}

.template-grid .form-group {
 margin-bottom: 0;
}

.template-actions {
 display: flex;
 gap: 0.625rem;
 justify-content: flex-end;
}

.template-actions .btn {
 flex: 1;
 min-width: 0;
}

.send-panel-compose .links-section {
 margin-top: 0.5rem;
 padding-top: 0;
 border-top: none;
}

.send-panel-compose .links-section summary {
 padding: 0.625rem 0;
 border-top: 1px solid var(--border-light);
 margin-top: 0.5rem;
}

.target-item.hidden-by-search {
 display: none;
}

.target-category.hidden-by-search {
 display: none;
}

.targets-placeholder {
 color: var(--text-muted);
 font-size: 0.8125rem;
 text-align: center;
 padding: 1.25rem 0.5rem;
}

.targets-placeholder.error {
 color: var(--danger);
}

.target-category {
 margin-bottom: 0.625rem;
}

.target-category-name {
 font-size: 0.75rem;
 font-weight: 600;
 color: var(--primary);
 text-transform: uppercase;
 letter-spacing: 0.03em;
 margin-bottom: 0.25rem;
 padding: 0.25rem 0.375rem;
 background: var(--primary-light);
 border-radius: var(--radius);
}

.target-item {
 display: flex;
 align-items: center;
 gap: 0.625rem;
 padding: 0.5rem 0.625rem;
 cursor: pointer;
 font-size: 0.875rem;
 border-radius: var(--radius);
 border: 1px solid transparent;
}

.target-item span {
 flex: 1;
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.target-item:hover {
 background: var(--input-bg);
 border-color: var(--border-light);
}

.target-item input {
 accent-color: var(--primary);
}

.target-item small {
 margin-left: auto;
 color: var(--text-muted);
 font-size: 0.6875rem;
}

.targets-actions {
 margin-top: 0.5rem;
 font-size: 0.8125rem;
}

.links-section {
 margin-top: 1rem;
 padding-top: 1rem;
 border-top: 1px solid var(--border-light);
}

.links-section summary {
 cursor: pointer;
 font-weight: 500;
 font-size: 0.875rem;
 color: var(--text);
 margin-bottom: 0.75rem;
}

/* ===== Telegram Editor ===== */
.tg-editor {
 border: 1px solid var(--border);
 border-radius: var(--radius);
 overflow: hidden;
 background: var(--input-bg);
}

.tg-editor-toolbar {
 display: flex;
 align-items: center;
 gap: 1px;
 padding: 0.375rem 0.5rem;
 background: var(--surface-muted);
 border-bottom: 1px solid var(--border);
 flex-wrap: wrap;
}

.tg-editor-toolbar button {
 background: var(--input-bg);
 border: 1px solid var(--border-light);
 color: var(--text);
 min-width: 30px;
 height: 30px;
 padding: 0 0.5rem;
 border-radius: var(--radius);
 cursor: pointer;
 font-size: 0.75rem;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background 0.15s;
 font-family: inherit;
 white-space: nowrap;
}

.tg-editor-toolbar button:hover {
 background: var(--primary-light);
 border-color: #c5d4e3;
}

.toolbar-divider {
 width: 1px;
 height: 20px;
 background: var(--border);
 margin: 0 3px;
}

.tg-editor-content {
 min-height: 180px;
 max-height: 360px;
 overflow-y: auto;
 padding: 0.875rem;
 color: var(--text);
 font-size: 0.875rem;
 line-height: 1.6;
 outline: none;
 background: var(--input-bg);
}

.tg-editor-content:empty:before {
 content: attr(data-placeholder);
 color: #9ca3af;
 pointer-events: none;
}

.tg-editor-content tg-spoiler,
.tg-editor-content .tg-spoiler {
 background: #d1d5db;
 color: #d1d5db;
 border-radius: 2px;
 padding: 0 2px;
}

.tg-emoji-picker {
 display: none;
 padding: 0.5rem;
 background: var(--surface-muted);
 border-bottom: 1px solid var(--border);
}

.tg-emoji-picker.open {
 display: block;
}

.tg-emoji-tabs {
 display: flex;
 gap: 4px;
 margin-bottom: 0.5rem;
}

.tg-emoji-tab {
 background: var(--input-bg);
 border: 1px solid var(--border-light);
 border-radius: var(--radius);
 padding: 4px 10px;
 font-size: 0.8rem;
 cursor: pointer;
 color: var(--text-muted, #667);
}

.tg-emoji-tab.active {
 background: var(--primary);
 color: #fff;
 border-color: var(--primary);
}

.tg-emoji-panel {
 display: flex;
 flex-wrap: wrap;
 gap: 2px;
 max-height: 220px;
 overflow-y: auto;
}

.tg-emoji-btn {
 background: var(--input-bg);
 border: 1px solid var(--border-light);
 font-size: 1rem;
 cursor: pointer;
 padding: 4px 6px;
 border-radius: var(--radius);
 line-height: 1;
}

.tg-emoji-btn:hover {
 background: var(--primary-light);
}

.tg-premium-btn {
 width: 34px;
 height: 34px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 2px;
}

.tg-premium-btn img {
 width: 26px;
 height: 26px;
 object-fit: contain;
 display: block;
}

.tg-emoji-panel[data-panel="premium"] {
 display: block;
}

.tg-premium-set {
 font-size: 0.72rem;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.03em;
 color: var(--text-muted, #667);
 margin: 0.4rem 0 0.25rem;
 padding: 0 2px;
}

.tg-premium-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 2px;
 margin-bottom: 0.4rem;
}

.tg-premium-status {
 padding: 0.75rem 0.5rem;
 font-size: 0.82rem;
 color: var(--text-muted, #667);
}

.tg-lottie {
 width: 28px;
 height: 28px;
 display: block;
}

.tg-lottie-inline {
 display: inline-block;
 width: 20px;
 height: 20px;
 vertical-align: middle;
}

/* ===== Telegram'dan içe aktar modalı ===== */
.tg-import-overlay {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.45);
 z-index: 1000;
 align-items: center;
 justify-content: center;
 padding: 1rem;
}

.tg-import-overlay.open {
 display: flex;
}

.tg-import-modal {
 background: var(--card-bg, #fff);
 border-radius: var(--radius);
 box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
 width: 100%;
 max-width: 560px;
 max-height: 80vh;
 display: flex;
 flex-direction: column;
 overflow: hidden;
}

.tg-import-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0.875rem 1.25rem;
 background: var(--surface-muted);
 border-bottom: 1px solid var(--border);
}

.tg-import-close {
 background: none;
 border: none;
 font-size: 1.1rem;
 cursor: pointer;
 color: var(--text-muted, #667);
}

.tg-import-hint {
 padding: 0.75rem 1.25rem 0;
 margin: 0;
 font-size: 0.82rem;
 color: var(--text-muted, #667);
 line-height: 1.5;
}

.tg-import-tabs {
 display: flex;
 gap: 4px;
 padding: 0.75rem 1.25rem 0;
}

.tg-import-tab {
 background: var(--input-bg, #fff);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 5px 12px;
 font-size: 0.8rem;
 cursor: pointer;
 color: var(--text-muted, #667);
}

.tg-import-tab.active {
 background: var(--primary);
 color: #fff;
 border-color: var(--primary);
}

.tg-import-group-bar {
 padding: 0.6rem 1.25rem 0;
}

.tg-import-group-bar.hidden {
 display: none;
}

.tg-import-list {
 padding: 0.75rem 1.25rem 1.25rem;
 overflow-y: auto;
}

.tg-import-status {
 padding: 1rem 0;
 font-size: 0.85rem;
 color: var(--text-muted, #667);
 text-align: center;
}

.tg-import-item {
 display: block;
 width: 100%;
 text-align: left;
 background: var(--input-bg, #fff);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 0.6rem 0.75rem;
 margin-bottom: 0.5rem;
 cursor: pointer;
 font-size: 0.875rem;
 color: var(--text);
 line-height: 1.5;
}

.tg-import-item:hover {
 border-color: var(--primary);
 background: var(--primary-light);
}

.tg-import-badge {
 display: inline-block;
 font-size: 0.7rem;
 font-weight: 600;
 color: #b45309;
 background: #fef3c7;
 border-radius: 4px;
 padding: 1px 6px;
 margin-bottom: 4px;
}

.tg-import-preview {
 white-space: pre-wrap;
 word-break: break-word;
 max-height: 120px;
 overflow: hidden;
}

.tg-import-preview tg-emoji {
 display: inline-block;
}

.tg-lottie svg {
 width: 100% !important;
 height: 100% !important;
}

.tg-premium-btn img {
 width: 26px;
 height: 26px;
 object-fit: contain;
 display: block;
}

.ep-sticker-row {
 display: flex;
 gap: 8px;
 align-items: center;
 margin-bottom: 8px;
}

.ep-sticker-row input[type="file"] {
 flex: 1 1 45%;
}

.ep-sticker-row input[type="text"] {
 flex: 0 0 120px;
}

.ep-file-list {
 margin-top: 0.5rem;
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 0.4rem 0.5rem;
 max-height: 180px;
 overflow-y: auto;
 background: rgba(0, 0, 0, 0.02);
}

.ep-file-count {
 font-size: 0.82rem;
 font-weight: 600;
 color: var(--primary);
 margin-bottom: 0.35rem;
}

.ep-file-item {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.15rem 0;
 font-size: 0.85rem;
}

.ep-file-idx {
 flex: 0 0 auto;
 min-width: 1.4rem;
 height: 1.4rem;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border-radius: 50%;
 background: rgba(59, 130, 246, 0.12);
 color: var(--primary);
 font-size: 0.72rem;
 font-weight: 600;
}

.ep-file-name {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.ep-mode-tabs {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
}

.ep-mode-tab {
 display: inline-flex;
 align-items: center;
 gap: 0.35rem;
 padding: 0.45rem 0.75rem;
 border: 1px solid var(--border);
 border-radius: var(--radius);
 cursor: pointer;
 font-size: 0.92rem;
}

.ep-mode-tab:has(input:checked) {
 border-color: var(--primary);
 background: rgba(59, 130, 246, 0.08);
}

.ep-mosaic-result {
 margin: 1rem 0;
 padding: 0.75rem;
 border: 1px dashed var(--border);
 border-radius: var(--radius);
 background: rgba(0, 0, 0, 0.02);
}

.ep-mosaic-render {
 display: inline-block;
 line-height: 0;
 margin-bottom: 0.5rem;
 max-width: 100%;
 overflow: auto;
}

.ep-mosaic-render img.ep-mosaic-tile {
 width: 34px;
 height: 34px;
 object-fit: contain;
 vertical-align: top;
}

.ep-emoji-static img {
 width: 34px;
 height: 34px;
 object-fit: contain;
 display: block;
}

/* ===== Premium emoji yönetim sayfası ===== */
.ep-installed {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
}

.ep-pack {
 border: 1px solid var(--border);
 border-radius: var(--radius);
 padding: 0.75rem;
 margin-bottom: 0.75rem;
}

.ep-pack-head {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 margin-bottom: 0.5rem;
 flex-wrap: wrap;
}

.ep-pack-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.35rem;
 margin-left: auto;
}

.ep-pack-head .ep-remove {
 margin-left: 0;
}

.ep-pack-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 4px;
}

.ep-emoji {
 width: 34px;
 height: 34px;
}

.ep-emoji svg {
 width: 100% !important;
 height: 100% !important;
}

.ep-emoji-cell {
 position: relative;
 width: 34px;
 height: 34px;
 border-radius: 4px;
}

.ep-emoji-cell:hover {
 background: rgba(0, 0, 0, 0.05);
}

.ep-emoji-del {
 position: absolute;
 top: -6px;
 right: -6px;
 width: 16px;
 height: 16px;
 line-height: 14px;
 padding: 0;
 border: none;
 border-radius: 50%;
 background: var(--danger, #ef4444);
 color: #fff;
 font-size: 12px;
 cursor: pointer;
 display: none;
 text-align: center;
}

.ep-emoji-cell:hover .ep-emoji-del {
 display: block;
}

.ep-emoji-deleting {
 opacity: 0.4;
 pointer-events: none;
}

.ep-pack-note {
 margin-top: 0.5rem;
}

.tg-editor-content tg-emoji {
 display: inline-block;
 background: var(--primary-light);
 border-radius: 3px;
 padding: 0 1px;
}

.media-upload {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 flex-wrap: wrap;
}

.media-file-input {
 display: none;
}

.media-preview {
 margin-top: 0.5rem;
}

/* ===== Chat picker (categories) ===== */
.chat-picker { margin-top: 0.5rem; }
.filter-tabs {
 display: flex;
 flex-wrap: wrap;
 gap: 0.375rem;
 margin-bottom: 0.625rem;
}
.filter-tabs-secondary {
 margin-bottom: 0;
}
.filter-tab {
 padding: 0.375rem 0.75rem;
 font-size: 0.8125rem;
 font-weight: 500;
 border: 1px solid var(--border);
 border-radius: var(--radius);
 background: var(--input-bg);
 color: var(--text-muted);
 cursor: pointer;
 font-family: inherit;
 transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.filter-tab:hover {
 background: var(--surface-hover);
 color: var(--text);
}
.filter-tab.active {
 background: var(--primary-light);
 border-color: var(--primary);
 color: var(--primary);
}
.filter-tab:disabled {
 opacity: 0.55;
 cursor: not-allowed;
}
.chat-picker-meta {
 display: flex;
 justify-content: space-between;
 margin-bottom: 0.5rem;
 font-size: 0.8125rem;
 color: var(--text-muted);
}
.chat-list {
 max-height: 400px;
 overflow-y: auto;
 border: 1px solid var(--border);
 border-radius: var(--radius);
 background: var(--surface-muted);
 margin-bottom: 1rem;
}
.chat-item {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 padding: 0.5rem 1rem;
 border-bottom: 1px solid var(--border-light);
 cursor: pointer;
 user-select: none;
}
.chat-item:last-child { border-bottom: none; }
.chat-item:hover { background: var(--surface-hover); }
.chat-item.selected { background: var(--primary-light); }
.chat-item.disabled { opacity: 0.55; cursor: not-allowed; }
.chat-item input { pointer-events: none; }
.chat-item-title { flex: 1; font-size: 0.875rem; min-width: 0; }
.chat-item-main {
 flex: 1;
 min-width: 0;
 display: flex;
 flex-direction: column;
 gap: 0.125rem;
}
.chat-item-username {
 font-size: 0.75rem;
 color: var(--text-muted);
}
.chat-item-badges {
 display: flex;
 align-items: center;
 gap: 0.375rem;
 flex-shrink: 0;
}
.chat-item-badges .badge {
 font-size: 0.625rem;
 padding: 0.125rem 0.375rem;
}
.chat-item-type {
 font-size: 0.6875rem;
 color: var(--text-muted);
 background: var(--input-bg);
 border: 1px solid var(--border-light);
 padding: 0.125rem 0.375rem;
 border-radius: var(--radius);
}
.chat-list-empty {
 padding: 1.5rem;
 text-align: center;
 color: var(--text-muted);
 font-size: 0.875rem;
}

.job-progress-card {
 border-left: 3px solid var(--primary);
}
.job-progress-card.is-done {
 border-left-color: var(--success, #16a34a);
}
.job-progress-card.is-failed {
 border-left-color: var(--danger, #dc2626);
}
.job-progress-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 0.625rem;
}
.job-progress-title {
 font-weight: 600;
 font-size: 0.9375rem;
 color: var(--text);
}
.job-progress-count {
 font-size: 0.8125rem;
 font-weight: 600;
 color: var(--text-muted);
 font-variant-numeric: tabular-nums;
}
.job-progress-bar {
 height: 8px;
 background: var(--surface-muted);
 border: 1px solid var(--border);
 border-radius: 999px;
 overflow: hidden;
}
.job-progress-fill {
 height: 100%;
 width: 0;
 background: var(--primary);
 border-radius: 999px;
 transition: width 0.4s ease;
}
.job-progress-card.is-done .job-progress-fill {
 background: var(--success, #16a34a);
}
.job-progress-card.is-failed .job-progress-fill {
 background: var(--danger, #dc2626);
}
.job-progress-note {
 margin: 0.625rem 0 0;
 font-size: 0.8125rem;
 color: var(--text-muted);
}

.loading-state {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 0.75rem;
 padding: 2.5rem 1rem;
 min-height: 200px;
 color: var(--text-muted);
 font-size: 0.875rem;
 text-align: center;
}

.loading-state p {
 margin: 0;
 font-weight: 500;
 color: var(--text);
}

.loading-spinner {
 width: 28px;
 height: 28px;
 border: 3px solid var(--border);
 border-top-color: var(--primary);
 border-radius: 50%;
 animation: tgpost-spin 0.7s linear infinite;
}

@keyframes tgpost-spin {
 to { transform: rotate(360deg); }
}

.chat-picker.is-loading .filter-tab,
.chat-picker.is-loading #chat_search {
 opacity: 0.55;
 pointer-events: none;
}

.targets-container.is-loading {
 display: flex;
 align-items: center;
 justify-content: center;
}

.targets-container.is-loading .loading-state {
 width: 100%;
 min-height: 280px;
}

@media (max-width: 768px) {
 .sidebar { display: none; }
 .content-wrap { margin-left: 0; }
 .main { padding: 1rem; }
 .form-row,
 .form-row-2 { grid-template-columns: 1fr; }
 .send-layout { grid-template-columns: 1fr; }
 .send-panel-settings { position: static; }
 .send-settings-body { min-height: auto; }
 .targets-container { max-height: 320px; min-height: 200px; }
 .template-grid { grid-template-columns: 1fr; }
 .template-actions { justify-content: stretch; }
 .field-narrow { max-width: none; }
}

/* ===== Login ===== */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--body-bg);
  padding: 1.5rem;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 1.75rem;
}
.login-card h1 {
  text-align: center;
  color: var(--primary);
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}
.login-card > p {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
}
.btn-block { width: 100%; display: block; text-align: center; }
.flash-messages { margin-bottom: 1rem; }
.day-checkboxes { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.checkbox-inline { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; cursor: pointer; }
.progress-bar { height: 8px; background: var(--border-light); border-radius: 4px; overflow: hidden; margin: 0.75rem 0; }
.progress-fill { height: 100%; background: var(--primary); transition: width 0.3s; }