:root {
    --bg: #0f1419;
    --surface: #171d25;
    --surface-2: #1f2733;
    --border: #2a3441;
    --text: #e8eef5;
    --muted: #8b98a8;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --danger: #ef4444;
    --success: #22c55e;
    --radius: 12px;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 76px;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

* { box-sizing: border-box; }

/* 24-hour time fields (hide AM/PM in Chromium / Edge). */
input[type="time"],
.input-time-24h {
    font-variant-numeric: tabular-nums;
}

input[type="time"]::-webkit-datetime-edit-ampm-field {
    display: none;
}

input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field {
    padding: 0 2px;
}

body {
    margin: 0;
    background: linear-gradient(180deg, #0b1015 0%, #121820 100%);
    color: var(--text);
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

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

.sidebar {
    position: sticky;
    top: 0;
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    background: rgba(15, 20, 25, 0.95);
    border-right: 1px solid var(--border);
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    transition: width 0.2s ease, flex-basis 0.2s ease, padding 0.2s ease;
}

html.sidebar-collapsed {
    --sidebar-width: var(--sidebar-width-collapsed);
}

html.sidebar-collapsed .sidebar {
    padding-left: 10px;
    padding-right: 10px;
}

.sidebar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

html.sidebar-collapsed .sidebar-head {
    flex-direction: column;
    align-items: center;
}

.sidebar-toggle {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sidebar-toggle:hover {
    color: var(--text);
    border-color: #3d4a5c;
    background: var(--surface);
}

.sidebar-toggle-icon {
    width: 18px;
    height: 18px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.2s ease;
}

html.sidebar-collapsed .sidebar-toggle-icon {
    transform: rotate(180deg);
}

html.sidebar-collapsed .brand-text,
html.sidebar-collapsed .sidebar .nav-label,
html.sidebar-collapsed .sidebar-footer-link small {
    display: none;
}

html.sidebar-collapsed .brand {
    justify-content: center;
    width: 100%;
}

html.sidebar-collapsed .sidebar-notify {
    justify-content: center;
    padding-left: 8px;
    padding-right: 8px;
}

html.sidebar-collapsed .sidebar-notify--denied .nav-label::after,
html.sidebar-collapsed .sidebar-notify--unsupported .nav-label::after {
    content: none;
}

html.sidebar-collapsed .sidebar-footer-link {
    justify-content: center;
}

.nav-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    opacity: 0.88;
}

.nav-link:hover .nav-icon,
.nav-link.active .nav-icon,
.sidebar-footer-link:hover .nav-icon,
.sidebar-footer-link.active .nav-icon {
    opacity: 1;
}

.nav-icon--overview {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav-icon--settings {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav-icon--calendar {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav-icon--history {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 3v6h6'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 3v6h6'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav-icon--moderation {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav-icon--photos {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav-icon--integration {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav-icon--webhook {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav-icon--api {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav-icon--logout {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 16px;
}

.sidebar-footer {
    flex-shrink: 0;
    margin-top: 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 8px;
}

.sidebar-notify {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.35;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, color .15s ease;
}

.sidebar-notify:hover {
    background: var(--surface-2);
    color: var(--text);
}

.sidebar-notify-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sidebar-notify-bell {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    opacity: 0.88;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: color .15s ease, opacity .15s ease, transform .15s ease;
}

.sidebar-notify-input:checked + .sidebar-notify-bell {
    background-color: var(--accent);
    opacity: 1;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a1 1 0 0 1 1 1v.17A6 6 0 0 1 18 9v4l2 2v1H4v-1l2-2V9a6 6 0 0 1 5-5.83V3a1 1 0 0 1 1-1zm0 20a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a1 1 0 0 1 1 1v.17A6 6 0 0 1 18 9v4l2 2v1H4v-1l2-2V9a6 6 0 0 1 5-5.83V3a1 1 0 0 1 1-1zm0 20a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sidebar-notify-input:focus-visible + .sidebar-notify-bell {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.sidebar-notify-input:disabled + .sidebar-notify-bell {
    opacity: 0.4;
}

.sidebar-notify-input:disabled ~ .nav-label {
    opacity: 0.55;
}

.sidebar-notify:has(.sidebar-notify-input:disabled) {
    cursor: not-allowed;
}

.sidebar-notify-input:checked ~ .nav-label {
    color: var(--text);
}

.sidebar-notify--denied {
    color: var(--muted);
}

.sidebar-notify--denied .nav-label::after {
    content: ' (запрещено в браузере)';
    font-size: 11px;
    color: var(--muted);
}

.sidebar-notify--unsupported .nav-label::after {
    content: ' (не поддерживается)';
    font-size: 11px;
    color: var(--muted);
}

.sidebar-footer-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--muted);
    transition: background .15s ease, color .15s ease;
}

.sidebar-footer-link-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.sidebar-footer-link small {
    font-size: 11px;
    color: var(--muted);
}

.sidebar-footer-link:hover,
.sidebar-footer-link.active {
    background: var(--surface-2);
    color: var(--text);
}

.logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--muted);
    transition: background .15s ease, color .15s ease;
}

html.sidebar-collapsed .logout {
    justify-content: center;
}

.logout:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand.centered { justify-content: center; }

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    font-weight: 700;
}

.brand small {
    display: block;
    color: var(--muted);
    font-size: 12px;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--muted);
    transition: background .15s ease, color .15s ease;
}

.nav a:hover,
.nav a.active,
.nav-link:hover,
.nav-link.active {
    background: var(--surface-2);
    color: var(--text);
}

html.sidebar-collapsed .nav-link {
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
}

.main {
    flex: 1;
    min-width: 0;
    padding: 28px;
    --main-padding-x: 28px;
    --main-padding-top: 28px;
}

.page-sticky-zone {
    position: sticky;
    top: 0;
    z-index: 50;
    margin: calc(-1 * var(--main-padding-top)) calc(-1 * var(--main-padding-x)) 16px;
    padding: var(--main-padding-top) var(--main-padding-x) 12px;
    background: linear-gradient(180deg, #0b1015 0%, #101820 92%, rgba(16, 24, 32, 0.97) 100%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
}

.page-sticky-zone.page-sticky-zone--static {
    position: static;
    box-shadow: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
}

.page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.page-header-row h1 {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 28px;
}

.page-header-pin {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.page-header-pin:hover {
    color: var(--text);
    border-color: #3d4a5c;
    background: var(--surface);
}

.page-header-pin--active {
    color: var(--accent);
    border-color: rgba(59, 130, 246, 0.45);
    background: rgba(59, 130, 246, 0.12);
}

.page-header-pin-icon {
    width: 18px;
    height: 18px;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a3 3 0 0 0-6 0v3.76z'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a3 3 0 0 0-6 0v3.76z'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.page-header-pin:not(.page-header-pin--active) .page-header-pin-icon {
    transform: rotate(-45deg);
    opacity: 0.75;
}

.page-sticky-zone .page-header h1 {
    margin: 0 0 12px;
    font-size: 28px;
}

.page-sticky-zone .page-header-row + .tabs,
.page-sticky-zone .page-header-row ~ .tabs {
    margin-top: 0;
}

.page-sticky-zone .page-header-row {
    margin-bottom: 12px;
}

.page-sticky-zone .page-header-row h1 {
    margin: 0;
}

.page-sticky-zone .tabs,
.page-sticky-zone .moderation-tabs {
    margin-bottom: 10px;
}

.page-sticky-zone .moderation-banner {
    margin-bottom: 10px;
}

.page-sticky-zone .toolbar {
    margin-bottom: 0;
}

.page-header h1 {
    margin: 0 0 20px;
    font-size: 28px;
}

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

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}

.stat {
    display: block;
    transition: transform .15s ease, border-color .15s ease;
}

.stat:hover {
    transform: translateY(-2px);
    border-color: #3b82f6;
}

.stat-value {
    display: block;
    font-size: 32px;
    font-weight: 700;
}

.stat-label {
    color: var(--muted);
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.panel-upcoming {
    margin-bottom: 24px;
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    align-items: flex-end;
}

.toolbar-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.toolbar-field--actions .toolbar-field-label {
    visibility: hidden;
}

.plan-import-wrap {
    display: inline-flex;
}

.toolbar--plan {
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.toolbar-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.toolbar-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.toolbar-field {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 auto;
}

.toolbar-field--search {
    min-width: 180px;
}

.toolbar-field-label {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
}

.input--date {
    width: 150px;
}

.plan-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.panel-title-with-help {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-help {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.btn-help:hover {
    color: var(--text);
    border-color: #3d4a5c;
    background: var(--surface);
}

#moderation-help-dialog .moderation-help-dialog-body,
#cp-force-queue-dialog .cp-force-queue-dialog-body {
    padding: 24px 28px 12px;
}

.cp-force-queue-table-wrap {
    max-height: min(420px, 55vh);
    overflow: auto;
    margin-top: 12px;
}

#moderation-help-dialog .dialog-actions,
#cp-force-queue-dialog .dialog-actions {
    padding: 8px 28px 24px;
    margin-top: 0;
}

.moderation-help-dialog-body h2 {
    margin: 0 0 16px;
    font-size: 20px;
}

.moderation-help-section + .moderation-help-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.moderation-help-section-title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.plan-row--inactive {
    opacity: 0.55;
}

.plan-row--inactive td {
    color: var(--muted);
}

.col-active {
    width: 1%;
    white-space: nowrap;
}

.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.table td.col-actions {
    width: 1%;
    white-space: nowrap;
}

.table-actions {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    line-height: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.table th {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.muted { color: var(--muted); }

.btn {
    border: none;
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font: inherit;
}

.btn-sm { padding: 6px 10px; font-size: 13px; }

.btn-primary {
    background: var(--accent);
    color: white;
}

.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.btn-success {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.btn-success:hover {
    background: rgba(34, 197, 94, 0.28);
}

.btn-warning {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.btn-warning:hover {
    background: rgba(245, 158, 11, 0.28);
}

.input,
.form input,
.form textarea,
.form select {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    width: 100%;
}

.form label {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
}

.settings-list {
    display: grid;
    gap: 16px;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.tab {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.tab:hover {
    color: var(--text);
    border-color: rgba(59, 130, 246, 0.45);
}

.tab.active {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.55);
    color: var(--text);
}

.settings-tab-hint {
    margin: 0;
    align-self: center;
    font-size: 13px;
}

.plan-type-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.plan-form-grid {
    display: grid;
    gap: 14px;
    max-height: min(58vh, 560px);
    overflow-y: auto;
    padding-right: 4px;
    margin-right: -4px;
}

.plan-schedule-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    margin-bottom: 14px;
    align-items: end;
}

.plan-field--schedule .plan-field-control input[type="date"],
.plan-field--schedule .plan-field-control input[type="time"] {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    padding: 11px 13px;
    font: inherit;
    width: 100%;
}

@media (max-width: 640px) {
    .plan-schedule-row {
        grid-template-columns: 1fr;
    }
}

.plan-form-grid::-webkit-scrollbar {
    width: 8px;
}

.plan-form-grid::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 999px;
}

.plan-form #plan-dialog-title,
.plan-form h2 {
    margin: 0 0 16px;
    font-size: 20px;
    letter-spacing: -0.02em;
}

.plan-field {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%), var(--surface-2);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.plan-field:focus-within {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.plan-field-label {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.plan-field-control {
    display: grid;
    gap: 10px;
}

.plan-field-control input[type="text"],
.plan-field-control input[type="number"],
.plan-field-control textarea,
.plan-field-control select,
.plan-field-control .field-custom-input {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    padding: 11px 13px;
    font: inherit;
    width: 100%;
    transition: border-color .15s ease, background .15s ease;
}

.plan-field-control input:focus,
.plan-field-control textarea:focus,
.plan-field-control select:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.55);
    background: rgba(59, 130, 246, 0.06);
}

.plan-field-control textarea {
    min-height: 88px;
    resize: vertical;
    line-height: 1.5;
}

.select-wrap {
    position: relative;
}

.select-wrap::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.select-wrap select {
    appearance: none;
    padding-right: 40px;
    cursor: pointer;
}

.plan-field-custom {
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.plan-field-custom.is-hidden {
    display: none;
}

.checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.checkbox-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    cursor: pointer;
    user-select: none;
    transition: transform .12s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.checkbox-chip:hover {
    border-color: rgba(59, 130, 246, 0.35);
    transform: translateY(-1px);
}

.checkbox-chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.checkbox-chip-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.checkbox-chip:has(input:checked) {
    border-color: rgba(59, 130, 246, 0.6);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0.1) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.checkbox-chip:has(input:checked) .checkbox-chip-text {
    color: #dbeafe;
}

.checkbox-chip--star:has(input:checked) {
    border-color: rgba(251, 191, 36, 0.55);
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.18) 0%, rgba(251, 191, 36, 0.08) 100%);
}

.checkbox-chip--star:has(input:checked) .checkbox-chip-text {
    color: #fde68a;
}

.range-input {
    display: grid;
    gap: 14px;
}

.range-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.range-value-box {
    display: grid;
    gap: 4px;
    min-width: 84px;
}

.range-value-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.range-value-box input[type="number"] {
    width: 84px;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.range-value-box input[type="number"]::-webkit-outer-spin-button,
.range-value-box input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.range-separator {
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    padding-top: 16px;
}

.range-unit {
    padding-top: 16px;
    font-size: 13px;
    color: var(--muted);
}

.range-track-wrap {
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
}

.range-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.range-track-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.85), rgba(96, 165, 250, 0.95));
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
    transition: left .12s ease, width .12s ease;
}

.range-slider {
    position: absolute;
    left: 0;
    width: 100%;
    height: 28px;
    margin: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.range-slider::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
}

.range-slider::-moz-range-track {
    background: transparent;
    border: none;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
    cursor: grab;
    transition: transform .12s ease;
}

.range-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
    cursor: grab;
}

.range-slider:active::-webkit-slider-thumb {
    cursor: grabbing;
    transform: scale(1.08);
}

.range-slider-max {
    z-index: 2;
}

.range-preview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dialog-wide {
    width: min(820px, 94vw);
}

.dialog-wide .dialog-actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.field-custom-input.is-hidden {
    display: none;
}

.setting-row {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    gap: 12px;
    align-items: start;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.setting-meta {
    display: grid;
    gap: 4px;
}

.setting-label {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
}

.setting-key {
    font-size: 12px;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-word;
}

.setting-row--default .setting-key::after {
    content: ' · шаблон';
}

.setting-value-wrap {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.setting-value {
    width: 100%;
    min-height: 108px;
    resize: vertical;
    line-height: 1.55;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 12px;
    padding: 12px 14px;
    font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.setting-value:hover {
    border-color: rgba(148, 163, 184, 0.45);
}

.setting-value:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    background: var(--surface-2);
}

.setting-value--prompt {
    min-height: 240px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.6;
}

.setting-placeholder-bar {
    position: relative;
}

.setting-placeholder-toggle::before {
    content: '{ }';
    margin-right: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    opacity: 0.75;
}

.setting-placeholder-panel {
    display: none;
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    width: min(520px, calc(100vw - 48px));
    max-height: 320px;
    overflow: auto;
    padding: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.setting-placeholder-bar.is-open .setting-placeholder-panel {
    display: block;
}

.setting-placeholder-group + .setting-placeholder-group {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.setting-placeholder-group-title {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.setting-placeholder-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.setting-placeholder-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}

.setting-placeholder-chip:hover {
    border-color: rgba(59, 130, 246, 0.45);
    background: rgba(59, 130, 246, 0.08);
}

.setting-placeholder-chip:active {
    transform: scale(0.98);
}

.setting-placeholder-chip code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    color: rgba(59, 130, 246, 0.95);
    white-space: nowrap;
}

.setting-placeholder-chip span {
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

.row-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dialog {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    width: min(640px, 92vw);
    padding: 0;
}

.dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.dialog form {
    padding: 20px;
}

.dialog-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.login-page {
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: min(420px, 100%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
}

.login-card h1 {
    margin: 16px 0 20px;
    font-size: 24px;
}

.alert {
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 12px;
}

.alert-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fecaca;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 12px;
}

.badge--post-resubmit {
    background: color-mix(in srgb, var(--warning) 18%, transparent);
    color: var(--warning);
    margin-left: 4px;
}

.badge--post-pending {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}

.badge--post-approved {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
}

.badge--post-rejected {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
}

.badge--post-published {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

.badge--wf-processing {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}

.badge--wf-awaiting {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.badge--wf-ready {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
}

.badge--wf-completed {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

.badge--wf-failed {
    background: rgba(239, 68, 68, 0.18);
    color: #fecaca;
}

.badge--wf-discarded {
    background: rgba(100, 116, 139, 0.22);
    color: #cbd5e1;
}

.btn-danger-outline {
    border-color: rgba(239, 68, 68, 0.45);
    color: #fecaca;
}

.btn-danger-outline:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.65);
}

.plan-row--discarded {
    opacity: 0.72;
}

.plan-workflow-panel {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 16px;
}

.plan-workflow-panel .plan-field {
    margin: 0;
}

.plan-workflow-panel .plan-workflow-actions {
    margin-top: 4px;
}

.is-hidden {
    display: none !important;
}

.plan-workflow-panel.is-hidden {
    display: none;
}

.plan-workflow-title {
    margin: 0 0 12px;
    font-size: 1rem;
}

.plan-workflow-message {
    margin: 0;
    white-space: pre-wrap;
}

.plan-workflow-hint {
    margin: 8px 0 0;
    font-size: 12px;
}

.plan-workflow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.plan-editor-notes {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.col-notes {
    width: 2.5rem;
    text-align: center;
}

.moderation-hint {
    margin: 0;
    max-width: 52rem;
    line-height: 1.55;
    font-size: 13px;
}

.toolbar--moderation {
    margin-bottom: 16px;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.moderation-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 14px;
    flex: 1 1 320px;
}

.moderation-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.moderation-filter--grow {
    flex: 1 1 160px;
    max-width: 220px;
}

.moderation-filter-label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.moderation-filter-datetime {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.moderation-filter input[type="date"],
.moderation-filter input[type="time"],
.moderation-filter input[type="text"] {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 6px 10px;
    font-size: 13px;
}

.moderation-filter input[type="time"] {
    min-width: 5.75rem;
}

.badge--post-scheduled {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    font-size: 11px;
    margin-left: 4px;
    vertical-align: middle;
}

.post-schedule-date {
    font-weight: 600;
}

.moderation-panel--hidden {
    display: none;
}

.moderation-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

.moderation-banner[hidden] {
    display: none !important;
}

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.tab-badge[hidden] {
    display: none !important;
}

.row-needs-search td {
    vertical-align: top;
}

.moderation-tabs {
    margin-bottom: 12px;
}

.table--moderation .col-topic {
    max-width: 280px;
}

.table--moderation .col-corrections {
    max-width: 200px;
    font-size: 13px;
    color: var(--muted);
}

.table--moderation .col-corrections--has-note {
    color: #fcd34d;
}

.table--moderation tbody tr.row-pending {
    background: rgba(59, 130, 246, 0.08);
}

.table--moderation tbody tr.row-clickable {
    cursor: pointer;
}

.table--moderation tbody tr.row-clickable:hover {
    background: rgba(59, 130, 246, 0.12);
}

.table-actions--moderation {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
}

.dialog-moderation .moderation-dialog-body,
.dialog-moderation form {
    padding: 24px;
}

.dialog-moderation .dialog-head,
.dialog-moderation h2 {
    margin: 0 0 20px;
}

.moderation-form > .plan-field,
.moderation-form > .plan-field--full,
#workflow-alert-form > .plan-field {
    margin-bottom: 16px;
}

.moderation-form > .moderation-meta,
#workflow-alert-form > .moderation-meta {
    margin-bottom: 20px;
}

.moderation-form > .plan-field:last-of-type,
#workflow-alert-form > .plan-field:last-of-type {
    margin-bottom: 0;
}

.dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.dialog-head h2 {
    margin: 0 0 8px;
    font-size: 20px;
    letter-spacing: -0.02em;
}

.moderation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--muted);
}

.meta-pill strong {
    color: var(--text);
    font-weight: 600;
}

.webhook-panel {
    margin-bottom: 16px;
}

.moderation-references {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.moderation-reference-block {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    overflow: hidden;
}

.moderation-reference-block summary {
    cursor: pointer;
    padding: 10px 14px;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.moderation-reference-block summary::-webkit-details-marker {
    display: none;
}

.moderation-reference-block--collapsible summary::before {
    content: '';
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.moderation-reference-block--collapsible[open] summary::before {
    transform: rotate(45deg);
    margin-top: -3px;
}

.moderation-reference-summary-text {
    flex: 1;
}

.table--moderation .col-status {
    white-space: nowrap;
}

.moderation-reference-body {
    padding: 0 14px 14px;
    display: grid;
    gap: 10px;
}

.moderation-reference-body pre {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
    line-height: 1.45;
    max-height: 220px;
    overflow-y: auto;
}

.moderation-reference-note {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

.moderation-preview {
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%), var(--surface-2);
    margin-bottom: 16px;
}

.moderation-preview-topic {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.moderation-preview-text {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.55;
    color: var(--text);
    max-height: min(42vh, 420px);
    overflow-y: auto;
}

.moderation-corrections-block {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.08);
}

.moderation-corrections-text {
    margin: 8px 0 0;
    white-space: pre-wrap;
    line-height: 1.5;
}

.moderation-form-lead {
    margin: -8px 0 16px;
}

.moderation-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 4px;
}

.plan-field--full {
    grid-column: 1 / -1;
}

.moderation-form .plan-field-control select,
.moderation-form .plan-field-control input,
.moderation-form .plan-field-control textarea {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
    padding: 11px 13px;
    font: inherit;
    width: 100%;
}

.dialog-actions--moderation {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.dialog-actions-primary,
.dialog-actions-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.post-photos-section {
    margin-bottom: 16px;
}

.post-photos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.post-photos-selected-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.35rem 0 0.5rem;
}

.post-photos-grid--selected {
    min-height: 2.5rem;
    margin-bottom: 0.25rem;
}

.post-photo-thumb--attached,
.post-photo-thumb--stub {
    cursor: default;
}

.post-photo-thumb--stub {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    color: var(--muted);
}

.post-photo-stub-label {
    font-size: 0.85rem;
    font-weight: 600;
}

.post-photos-grid--picker {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}

.post-photo-thumb {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--surface);
    cursor: pointer;
    padding: 0;
}

.post-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-photo-thumb.is-selected {
    border-color: rgba(59, 130, 246, 0.85);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.post-photo-thumb--readonly {
    cursor: default;
}

.post-photo-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.post-photos-picker-head {
    display: flex;
    gap: 8px;
    margin: 10px 0 8px;
}

.post-photos-picker-head .input {
    flex: 1;
}

.col-photos {
    white-space: nowrap;
    font-size: 13px;
    color: var(--muted);
}

@media (max-width: 720px) {
    .moderation-form-grid {
        grid-template-columns: 1fr;
    }

    .dialog-actions--moderation {
        flex-direction: column;
        align-items: stretch;
    }

    .dialog-actions-primary,
    .dialog-actions-secondary {
        width: 100%;
    }

    .dialog-actions-primary .btn,
    .dialog-actions-secondary .btn {
        flex: 1 1 auto;
    }
}

.plan-count {
    flex-shrink: 0;
    font-size: 13px;
    white-space: nowrap;
}

.table tbody tr.row-highlight {
    background: rgba(59, 130, 246, 0.18);
    outline: 1px solid rgba(59, 130, 246, 0.45);
}

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

    .api-docs-index {
        position: static;
        max-height: none;
    }
}

@media (max-width: 900px) {
    .app { flex-direction: column; }
    html.sidebar-collapsed { --sidebar-width: auto; }
    .sidebar {
        position: relative;
        flex: none;
        width: auto;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .sidebar-toggle { display: none; }
    html.sidebar-collapsed .brand-text,
    html.sidebar-collapsed .sidebar .nav-label,
    html.sidebar-collapsed .sidebar-footer-link small {
        display: block;
    }
    .sidebar-scroll { overflow: visible; }
    .nav { flex-direction: row; flex-wrap: wrap; }
    .nav-link { flex: 1 1 auto; min-width: 140px; justify-content: flex-start; }
    .setting-row { grid-template-columns: 1fr; }
}

/* Icon action buttons — must come after .btn-secondary/.btn-danger (background shorthand resets image) */
.btn.btn-secondary.btn-icon {
    background-color: var(--surface-2);
    border: 1px solid var(--border);
}

.btn.btn-danger.btn-icon {
    background-color: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.btn.btn-secondary.btn-icon-edit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5d0dc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E");
}

.btn.btn-danger.btn-icon-delete {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
}

.btn.btn-secondary.btn-icon-edit:hover {
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8eef5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E");
}

.btn.btn-danger.btn-icon-delete:hover {
    background-color: rgba(239, 68, 68, 0.25);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
}

.photos-upload-panel {
    margin-bottom: 20px;
}

.photos-upload-panel h2 {
    margin: 0 0 12px;
    font-size: 18px;
}

.photos-upload-form {
    display: grid;
    gap: 14px;
}

.upload-dropzone {
    display: grid;
    gap: 12px;
    place-items: stretch;
    text-align: center;
    padding: 28px 16px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--muted);
    transition: border-color .15s ease, background .15s ease;
}

.upload-dropzone-title {
    display: block;
    color: var(--text);
}

.upload-dropzone-empty {
    display: grid;
    gap: 6px;
    place-items: center;
}

.upload-dropzone.has-files {
    border-color: var(--success);
    border-style: solid;
    background: rgba(34, 197, 94, 0.08);
    color: var(--text);
}

.upload-dropzone:hover,
.upload-dropzone.dragover {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.08);
    color: var(--text);
}

.upload-dropzone.has-files:hover,
.upload-dropzone.has-files.dragover {
    border-color: #4ade80;
    background: rgba(34, 197, 94, 0.12);
}

.upload-pending-summary {
    display: grid;
    gap: 6px;
    place-items: center;
}

.upload-pending-summary[hidden] {
    display: none !important;
}

.upload-pending-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.18);
    border: 1px solid rgba(34, 197, 94, 0.45);
    color: #bbf7d0;
    font-size: 13px;
    font-weight: 600;
}

.upload-pending-badge:empty,
.upload-pending-badge[hidden] {
    display: none !important;
}

.upload-pending-hint {
    font-size: 12px;
    color: var(--muted);
}

.upload-pending-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    width: 100%;
    text-align: left;
}

.upload-pending-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.upload-pending-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #0b1015;
}

.upload-pending-meta {
    padding: 8px 10px;
    display: grid;
    gap: 2px;
}

.upload-pending-name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}

.upload-pending-size {
    font-size: 11px;
    color: var(--muted);
}

.upload-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.upload-actions-row .btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.upload-dropzone input[type="file"],
.upload-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.upload-dropzone {
    position: relative;
    cursor: pointer;
}

.upload-change-btn {
    border: none;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
}

.upload-change-btn:hover {
    background: rgba(59, 130, 246, 0.12);
}

.upload-pending-list {
    pointer-events: none;
}

.upload-folder-field {
    display: grid;
    gap: 6px;
    max-width: 280px;
    font-size: 13px;
}

.upload-folder-field select {
    width: 100%;
}

.upload-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.photos-layout {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.photo-folders-panel {
    position: sticky;
    top: 16px;
    padding: 16px;
}

.photo-folders-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.photo-folders-head h2 {
    margin: 0;
    font-size: 16px;
}

.photo-folders-list {
    display: grid;
    gap: 4px;
}

.photo-folder-row {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: var(--radius);
}

.photo-folder-row.active {
    background: rgba(59, 130, 246, 0.08);
}

.photo-folder-row .photo-folder-item {
    flex: 1;
    min-width: 0;
}

.photo-folder-actions {
    display: flex;
    gap: 1px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s ease;
}

.photo-folder-row:hover .photo-folder-actions,
.photo-folder-row.active .photo-folder-actions {
    opacity: 1;
}

.photo-folder-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    opacity: 0.45;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
    transition: opacity .15s ease, background-color .15s ease;
}

.photo-folder-action-btn:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.06);
}

.photo-folder-action-btn--edit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E");
}

.photo-folder-action-btn--edit:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E");
}

.photo-folder-action-btn--delete {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
}

.photo-folder-action-btn--delete:hover {
    background-color: rgba(239, 68, 68, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
}

@media (hover: none) {
    .photo-folder-actions {
        opacity: 0.7;
    }

    .photo-folder-action-btn {
        opacity: 0.65;
    }
}

.photo-folder-item {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.photo-folder-item:hover {
    background: var(--surface-2);
    border-color: var(--border);
}

.photo-folder-item.active {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
}

.photo-folder-item-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.photo-folder-item-count {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--muted);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 2px 8px;
    margin-right: 4px;
}

.photos-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.photos-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.photos-select-all {
    font-weight: 600;
}

.photos-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.photos-selected-count {
    font-size: 13px;
}

.photo-folder-delete-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.photos-grid--select-mode .photo-card {
    cursor: pointer;
}

.photo-card.selected {
    border-color: rgba(59, 130, 246, 0.65);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
}

.ui-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.ui-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.ui-checkbox-box {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(148, 163, 184, 0.55);
    border-radius: 5px;
    background: rgba(15, 23, 42, 0.55);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .12s ease;
}

.ui-checkbox-box::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid transparent;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .12s ease;
}

.ui-checkbox:hover .ui-checkbox-box {
    border-color: rgba(96, 165, 250, 0.75);
    background: rgba(59, 130, 246, 0.12);
}

.ui-checkbox:has(input:checked) .ui-checkbox-box {
    border-color: rgba(96, 165, 250, 0.9);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.95) 0%, rgba(37, 99, 235, 0.95) 100%);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35);
}

.ui-checkbox:has(input:checked) .ui-checkbox-box::after {
    border-color: #fff;
    transform: rotate(45deg) scale(1);
}

.ui-checkbox:has(input:indeterminate) .ui-checkbox-box {
    border-color: rgba(96, 165, 250, 0.9);
    background: rgba(59, 130, 246, 0.35);
}

.ui-checkbox:has(input:indeterminate) .ui-checkbox-box::after {
    left: 3px;
    top: 7px;
    width: 10px;
    height: 0;
    border: none;
    border-top: 2px solid #fff;
    transform: none;
}

.ui-checkbox-label {
    font-size: 13px;
    color: var(--text);
}

.ui-checkbox--overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    gap: 0;
    padding: 4px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(4px);
    opacity: 0.82;
    transition: opacity .15s ease, background .15s ease;
}

.photo-card:hover .ui-checkbox--overlay,
.photo-card.selected .ui-checkbox--overlay,
.ui-checkbox--overlay:has(input:checked) {
    opacity: 1;
    background: rgba(15, 23, 42, 0.88);
}

.ui-checkbox--overlay .ui-checkbox-box {
    width: 20px;
    height: 20px;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(15, 23, 42, 0.35);
}

.ui-checkbox--overlay:hover .ui-checkbox-box,
.ui-checkbox--overlay:has(input:checked) .ui-checkbox-box {
    border-color: rgba(147, 197, 253, 0.95);
}

.photo-card {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease;
}

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

    .photo-folders-panel {
        position: static;
    }
}

.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.pagination-info {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
}

.photo-card:hover {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.5);
}

.photo-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #0b1015;
}

.photo-card-body {
    padding: 10px 12px;
    display: grid;
    gap: 4px;
}

.photo-card-title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.photo-card-meta {
    font-size: 11px;
    color: var(--muted);
}

.photo-preview img {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    border-radius: 10px;
    background: #0b1015;
}

.photo-meta {
    font-size: 12px;
    color: var(--muted);
    display: grid;
    gap: 4px;
}

.integration-grid {
    display: grid;
    gap: 20px;
}

.integration-card--wide {
    grid-column: 1 / -1;
}

.credentials-list {
    display: grid;
    gap: 10px;
}

.moderation-notify-settings {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.moderation-notify-credential {
    max-width: 28rem;
}

.publish-messengers-list {
    display: grid;
    gap: 8px;
}

.publish-messenger-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    cursor: pointer;
}

.publish-messenger-option input {
    margin-top: 3px;
}

.publish-messenger-option span {
    display: grid;
    gap: 2px;
}

.credential-item {
    display: grid;
    grid-template-columns: minmax(140px, 1.2fr) minmax(120px, 0.9fr) minmax(160px, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}

.credential-item-meta {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.credential-item-label {
    font-weight: 600;
    font-size: 14px;
}

.credential-item-key {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    color: var(--muted);
    word-break: break-all;
}

.credential-type-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: rgba(59, 130, 246, 0.12);
    color: rgba(147, 197, 253, 0.95);
}

.credential-type-badge--token {
    background: rgba(34, 197, 94, 0.12);
    color: rgba(134, 239, 172, 0.95);
}

.credential-item-preview {
    font-size: 13px;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    word-break: break-all;
}

.credential-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

@media (max-width: 860px) {
    .credential-item {
        grid-template-columns: 1fr;
    }

    .credential-item-actions {
        justify-content: flex-start;
    }
}

.integration-card h2 {
    margin: 0 0 8px;
    font-size: 18px;
}

.integration-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

.integration-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 13px;
    margin-bottom: 12px;
}

.integration-status.is-on .status-dot {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}

.integration-status.is-off .status-dot {
    background: var(--muted);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.integration-note,
.integration-warning {
    font-size: 13px;
    margin: 0;
}

.integration-warning {
    margin-top: 12px;
    color: #fca5a5;
}

.integration-key-field {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.integration-key-field > span {
    font-size: 13px;
    color: var(--muted);
}

.credential-field {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.credential-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.credential-control {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 4px 6px 4px 14px;
    background: linear-gradient(180deg, #0d1218 0%, #0a0f14 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.credential-control:focus-within {
    border-color: rgba(59, 130, 246, 0.65);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.credential-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.4;
    color: #dbe4ee;
    letter-spacing: 0.02em;
}

.credential-input:focus {
    outline: none;
}

.credential-input::selection {
    background: rgba(59, 130, 246, 0.35);
}

.credential-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn.btn-secondary.btn-icon-eye {
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5d0dc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.btn.btn-secondary.btn-icon-eye.is-visible {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5d0dc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-6.5 0-10-7-10-7a20.3 20.3 0 0 1 5.06-6.94'/%3E%3Cpath d='M9.9 4.24A10.73 10.73 0 0 1 12 5c6.5 0 10 7 10 7a20.3 20.3 0 0 1-3.25 4.06'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

.btn.btn-secondary.btn-icon-eye:hover {
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8eef5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.btn.btn-secondary.btn-icon-eye.is-visible:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8eef5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 19c-6.5 0-10-7-10-7a20.3 20.3 0 0 1 5.06-6.94'/%3E%3Cpath d='M9.9 4.24A10.73 10.73 0 0 1 12 5c6.5 0 10 7 10 7a20.3 20.3 0 0 1-3.25 4.06'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

.integration-key-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.integration-key-row input {
    flex: 1;
    min-width: 0;
}

.integration-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.toggle {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-track {
    width: 48px;
    height: 28px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    transition: background .15s ease, border-color .15s ease;
}

.toggle-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform .15s ease, background .15s ease;
}

.toggle input:checked + .toggle-track {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
}

.toggle input:checked + .toggle-track .toggle-thumb {
    transform: translateX(20px);
    background: var(--success);
}

.toggle input:focus-visible + .toggle-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.api-docs-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.api-docs-index {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.api-docs-index h2 {
    margin: 0 0 12px;
    font-size: 15px;
}

.api-docs-index h3 {
    margin: 16px 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.api-docs-index ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.api-docs-index a {
    display: block;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--muted);
}

.api-docs-index a:hover {
    background: var(--surface-2);
    color: var(--text);
}

.api-docs-content {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.api-endpoint {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    scroll-margin-top: 20px;
}

.api-endpoint h2 {
    margin: 0 0 10px;
    font-size: 20px;
}

.api-endpoint h3 {
    margin: 18px 0 8px;
    font-size: 14px;
    color: var(--text);
}

.api-endpoint p {
    margin: 0 0 10px;
    color: var(--muted);
    line-height: 1.5;
}

.api-endpoint-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.api-method {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    font-family: ui-monospace, monospace;
}

.api-method-get { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.api-method-post { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.api-method-put { background: rgba(234, 179, 8, 0.2); color: #fde047; }
.api-method-patch { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; }
.api-method-delete { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }

.api-path {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    word-break: break-all;
    color: #cbd5e1;
}

.api-list {
    margin: 0 0 12px;
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.6;
}

.api-list code {
    font-family: ui-monospace, monospace;
    font-size: 12px;
}

.api-note {
    margin-top: 10px !important;
    padding: 10px 12px;
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: #bfdbfe !important;
}

.api-docs {
    display: grid;
    gap: 28px;
}

.api-docs-section h2 {
    margin: 0 0 10px;
    font-size: 20px;
}

.api-docs-section p {
    margin: 0 0 12px;
    color: var(--muted);
}

.api-docs-box {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
}

.api-code {
    display: block;
    margin-top: 6px;
    padding: 10px 12px;
    background: #0b1015;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    word-break: break-all;
}

.api-docs-spacer {
    margin-top: 14px;
}

.api-docs-note {
    margin: 10px 0 0 !important;
    font-size: 13px;
}

.api-pre {
    margin: 0;
    padding: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
}

.api-pre code {
    font-family: ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre;
}

.api-table code {
    font-family: ui-monospace, monospace;
    font-size: 12px;
}