:root {
    --tg-theme-bg-color: #1e1e1e;
    --tg-theme-text-color: #ffffff;
    --tg-theme-hint-color: #a0a0a0;
    --tg-theme-link-color: #4a90e2;
    --tg-theme-button-color: #4a90e2;
    --tg-theme-button-text-color: #ffffff;
    --tg-theme-secondary-bg-color: #121212;
    
    --primary-gradient: linear-gradient(135deg, #1f1c2c 0%, #928DAB 100%);
    --card-bg: rgba(30, 30, 30, 0.95);
    --glass-blur: 10px;
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--tg-theme-secondary-bg-color, #f0f2f5);
    color: var(--tg-theme-text-color, #222);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 16px;
    box-sizing: border-box;
}

/* Hide app content until JS init() completes — prevents flash of unstyled content */
#app > header,
#app > main {
    opacity: 0;
    transition: opacity 0.35s ease;
}
#app.app-ready > header,
#app.app-ready > main {
    opacity: 1;
}

header {
    margin-bottom: 24px;
}


.header-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

header h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--tg-theme-text-color);
}

#user-info {
    font-size: 13px;
    color: var(--tg-theme-hint-color);
    margin: 0;
}

/* Tabs */
.tabs {
    display: flex;
    background: var(--tg-theme-secondary-bg-color, #eee);
    border-radius: 12px;
    padding: 4px;
    margin-top: 16px;
}

.tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    color: var(--tg-theme-hint-color);
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn.active {
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-text-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Status View Styles */
.search-box {
    margin-bottom: 16px;
}

.search-box input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid var(--tg-theme-secondary-bg-color);
    background: var(--tg-theme-bg-color);
    color: var(--tg-theme-text-color);
    font-size: 16px;
    box-sizing: border-box;
}

/* ══════════════════════════════════════
   STATUS TAB — PREMIUM REDESIGN
   ══════════════════════════════════════ */

/* Section label */
.st-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--tg-theme-hint-color);
    margin-bottom: 12px;
    padding: 0 2px;
}

/* Back button bar */
.st-back-bar {
    margin-bottom: 16px;
}
.st-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(108,99,255,0.15);
    color: #a78bfa;
    border: 1px solid rgba(108,99,255,0.3);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
}
.st-btn-back:active { transform: scale(0.96); opacity: 0.8; }

/* ── Campaign cards ── */
.st-campaign-grid { display: flex; flex-direction: column; gap: 12px; }
.st-campaign-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: none;
    border-radius: 18px;
    cursor: pointer;
    text-align: left;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.st-campaign-card:active { transform: scale(0.97); }
.st-campaign-icon { font-size: 32px; flex-shrink: 0; }
.st-campaign-text { flex: 1; }
.st-campaign-name { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: 0.3px; }
.st-campaign-desc { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.st-campaign-arrow { font-size: 24px; color: rgba(255,255,255,0.6); font-weight: 300; }

/* ── Format cards ── */
.st-format-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-format-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    border: none;
    border-radius: 18px;
    cursor: pointer;
    transition: transform 0.15s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    gap: 8px;
}
.st-format-card:active { transform: scale(0.96); }
.st-format-icon  { font-size: 36px; }
.st-format-label { font-size: 16px; font-weight: 700; color: #fff; }
.st-format-desc  { font-size: 11px; color: rgba(255,255,255,0.65); text-align: center; }

/* ── Agency list ── */
.st-agency-list { display: flex; flex-direction: column; gap: 8px; }
.st-agency-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--tg-theme-bg-color);
    border: 1px solid rgba(108,99,255,0.2);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.st-agency-card:active { transform: scale(0.98); background: rgba(108,99,255,0.08); }
.st-agency-icon  { font-size: 22px; }
.st-agency-name  { flex: 1; font-size: 15px; font-weight: 600; color: var(--tg-theme-text-color); }
.st-agency-arrow { font-size: 22px; color: var(--tg-theme-hint-color); font-weight: 300; }

/* ── Market status cards ── */
.st-market-card {
    background: var(--tg-theme-bg-color);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 10px;
    border: 1px solid rgba(108,99,255,0.15);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    transition: transform 0.15s;
}
.st-market-card.st-market-done {
    border-color: rgba(34,197,94,0.35);
    background: linear-gradient(135deg, var(--tg-theme-bg-color) 80%, rgba(34,197,94,0.05));
}
.st-market-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.st-market-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--tg-theme-text-color);
    flex: 1;
}
.st-market-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: 8px;
    flex-shrink: 0;
}
.badge-done    { background: rgba(34,197,94,0.18); color: #22c55e; }
.badge-pending { background: rgba(108,99,255,0.15); color: #a78bfa; }

/* Progress bar */
.st-progress-track {
    height: 4px;
    background: rgba(108,99,255,0.12);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}
.st-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Status item list */
.st-items-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.st-item {
    font-size: 13px;
    font-weight: 500;
    padding: 7px 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(128,128,128,0.08);
}
.st-items-wrap .st-item:last-child { border-bottom: none; }
.st-item-ok   { color: #22c55e; }
.st-item-fail { color: #f87171; }

/* Empty state */
.st-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--tg-theme-hint-color);
    font-size: 15px;
    opacity: 0.6;
}

/* Loading ring inside list */
.st-loading {
    display: flex;
    justify-content: center;
    padding: 48px 0;
}
.st-loading-ring {
    width: 36px; height: 36px;
    border: 3px solid rgba(108,99,255,0.2);
    border-top-color: #6C63FF;
    border-radius: 50%;
    animation: ringRotate 0.8s linear infinite;
}


.card {
    background: var(--tg-theme-bg-color, #fff);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
}

label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--tg-theme-hint-color);
    text-transform: uppercase;
    margin-bottom: 8px;
    margin-top: 16px;
}

label:first-child { margin-top: 0; }

select {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--tg-theme-secondary-bg-color, #ddd);
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-text-color);
    font-size: 16px;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.segmented-control {
    display: flex;
    background: var(--tg-theme-secondary-bg-color, #eee);
    border-radius: 10px;
    padding: 2px;
}

.segmented-control button {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    color: var(--tg-theme-hint-color);
    cursor: pointer;
    transition: all 0.2s;
}

.segmented-control button.active {
    background: var(--tg-theme-bg-color, #fff);
    color: var(--tg-theme-text-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.hidden { display: none !important; }

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

.header-row h2 {
    font-size: 18px;
    margin: 0;
}

.btn-text {
    background: none;
    border: none;
    color: var(--tg-theme-link-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.sticky-nav {
    position: sticky;
    top: -16px;
    background: var(--tg-theme-secondary-bg-color);
    padding: 12px 16px;
    margin: 0 -16px 12px -16px;
    z-index: 100;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.btn-back {
    display: inline-flex;
    align-items: center;
    background: var(--tg-theme-button-color, #2481cc);
    color: var(--tg-theme-button-text-color, #fff);
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(36, 129, 204, 0.2);
    transition: transform 0.1s;
}

.btn-back:active {
    transform: scale(0.96);
}

.material-item {
    background: var(--tg-theme-bg-color, #fff);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.material-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.material-name {
    font-weight: 600;
    font-size: 16px;
}

.photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.photo-thumb {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    object-fit: cover;
    background: var(--tg-theme-secondary-bg-color);
}

.add-photo-btn {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 2px dashed var(--tg-theme-hint-color);
    border-radius: 8px;
    background: transparent;
    color: var(--tg-theme-hint-color);
    font-weight: 600;
    cursor: pointer;
}

footer {
    position: sticky;
    bottom: 0;
    padding: 16px 0;
    background: var(--tg-theme-secondary-bg-color);
}

.btn-primary {
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    border: none;
    background-color: var(--tg-theme-button-color, #2481cc);
    color: var(--tg-theme-button-text-color, #fff);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(36, 129, 204, 0.3);
}

/* ══════════════════════════════════════
   PREMIUM SPLASH / LOADING SCREEN
   ══════════════════════════════════════ */
#status-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(160deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    /* No fade-in: overlay must cover content instantly */
}

/* splashFadeIn removed — overlay is instant */

/* Logo container */
.splash-logo {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 28px;
}

/* Animated rings */
.splash-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
}
.splash-ring-1 {
    inset: 0;
    border-top-color: #6C63FF;
    border-right-color: rgba(108,99,255,0.3);
    animation: ringRotate 1.8s linear infinite;
}
.splash-ring-2 {
    inset: 12px;
    border-top-color: #a78bfa;
    border-left-color: rgba(167,139,250,0.3);
    animation: ringRotate 1.4s linear infinite reverse;
}
.splash-ring-3 {
    inset: 24px;
    border-top-color: #c4b5fd;
    animation: ringRotate 1.0s linear infinite;
}

@keyframes ringRotate {
    to { transform: rotate(360deg); }
}

/* Icon in center */
.splash-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    animation: splashPulse 2s ease-in-out infinite;
}
@keyframes splashPulse {
    0%, 100% { transform: scale(1);   opacity: 1;   }
    50%       { transform: scale(1.1); opacity: 0.85; }
}

/* Brand title */
.splash-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1.5px;
    background: linear-gradient(90deg, #c4b5fd, #a78bfa, #6C63FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    text-transform: uppercase;
}

/* Bouncing dots */
.splash-dots {
    display: flex;
    gap: 8px;
}
.splash-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6C63FF;
    animation: dotBounce 1.2s ease-in-out infinite;
}
.splash-dots span:nth-child(2) { animation-delay: 0.2s; background: #a78bfa; }
.splash-dots span:nth-child(3) { animation-delay: 0.4s; background: #c4b5fd; }
@keyframes dotBounce {
    0%, 80%, 100% { transform: translateY(0);   opacity: 0.5; }
    40%            { transform: translateY(-8px); opacity: 1;   }
}

/* Legacy .loader class (keep for compatibility) */
.loader { display: none; }


/* ADMIN LIST STYLES */
.admin-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: var(--tg-theme-secondary-bg-color);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
}

.admin-list-item-info {
    display: flex;
    flex-direction: column;
}

.admin-list-item-meta {
    font-size: 11px;
    color: var(--tg-theme-hint-color);
}

.admin-btn-delete {
    background: #ff3b30;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: bold;
}

/* ═══════════════════════════════════════════
   EXPORT TAB STYLES
   ═══════════════════════════════════════════ */

/* Hero-блок */
.export-hero {
    text-align: center;
    padding: 28px 16px 20px;
    margin-bottom: 4px;
}

.export-hero-icon {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 12px rgba(74, 144, 226, 0.4));
    animation: export-float 3s ease-in-out infinite;
}

@keyframes export-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.export-hero-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--tg-theme-text-color);
}

.export-hero-sub {
    font-size: 14px;
    color: var(--tg-theme-hint-color);
    margin: 0;
}

/* Карточка */
.export-card {
    background: var(--tg-theme-bg-color, #fff);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* Метка секции */
.export-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tg-theme-hint-color);
    margin-bottom: 10px;
}

/* Сегментированный контрол для экспорта */
.export-segmented {
    display: flex;
    background: var(--tg-theme-secondary-bg-color, #eee);
    border-radius: 12px;
    padding: 3px;
    gap: 2px;
}

.export-segmented button {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 8px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    color: var(--tg-theme-hint-color);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.export-segmented button.active {
    background: var(--tg-theme-button-color, #2481cc);
    color: #fff;
    box-shadow: 0 3px 10px rgba(36, 129, 204, 0.35);
    transform: scale(1.02);
}

/* Карточка быстрого экспорта */
.export-full-card {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(74, 144, 226, 0.2);
    min-height: 72px;
}

.export-full-info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.export-full-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.export-full-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}

.export-full-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}

.export-btn-run {
    flex-shrink: 0;
    background: linear-gradient(135deg, #4a90e2, #7c5cbf);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(74, 144, 226, 0.45);
    transition: all 0.2s;
    white-space: nowrap;
}

.export-btn-run:active {
    transform: scale(0.94);
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}

/* Заголовок блока материалов */
.export-mat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.export-refresh-btn {
    background: var(--tg-theme-secondary-bg-color, #eee);
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tg-theme-link-color, #4a90e2);
    cursor: pointer;
    transition: all 0.2s;
}

.export-refresh-btn:active { transform: scale(0.94); }

/* Поиск */
.export-search-wrap {
    display: flex;
    align-items: center;
    background: var(--tg-theme-secondary-bg-color, #f5f5f5);
    border-radius: 12px;
    padding: 0 14px;
    margin-bottom: 12px;
    gap: 10px;
}

.export-search-icon { font-size: 16px; flex-shrink: 0; }

.export-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 0;
    font-size: 15px;
    color: var(--tg-theme-text-color);
    outline: none;
    font-family: 'Inter', sans-serif;
}

.export-search-input::placeholder { color: var(--tg-theme-hint-color); }

/* Список материалов */
.export-mat-list {
    max-height: 300px;
    overflow-y: auto;
    border-radius: 12px;
}

.export-mat-empty {
    text-align: center;
    padding: 28px 16px;
    color: var(--tg-theme-hint-color);
    font-size: 14px;
    line-height: 1.6;
}

.export-mat-empty-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

/* Пункт материала с чекбоксом */
.export-mat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
    border: 1.5px solid transparent;
    margin-bottom: 6px;
    background: var(--tg-theme-secondary-bg-color, #f5f5f5);
}

.export-mat-item:last-child { margin-bottom: 0; }

.export-mat-item:active { transform: scale(0.98); }

.export-mat-item.selected {
    background: rgba(74, 144, 226, 0.1);
    border-color: rgba(74, 144, 226, 0.4);
}

.export-mat-checkbox {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 2px solid var(--tg-theme-hint-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    font-size: 13px;
}

.export-mat-item.selected .export-mat-checkbox {
    background: var(--tg-theme-button-color, #2481cc);
    border-color: var(--tg-theme-button-color, #2481cc);
    color: #fff;
}

.export-mat-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--tg-theme-text-color);
    flex: 1;
    line-height: 1.4;
}

/* Панель выбранного */
.export-selected-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(74,144,226,0.12), rgba(124,92,191,0.12));
    border-radius: 12px;
    border: 1px solid rgba(74,144,226,0.25);
    gap: 10px;
}

#export-selected-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--tg-theme-link-color, #4a90e2);
}

.export-btn-selected {
    background: linear-gradient(135deg, #4a90e2, #7c5cbf);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(74, 144, 226, 0.4);
    transition: all 0.2s;
    white-space: nowrap;
}

.export-btn-selected:active { transform: scale(0.95); }

/* Toast уведомление */
.export-toast {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(-120px);
    background: #1a1a2e;
    color: #fff;
    padding: 14px 20px;
    border-radius: 18px;
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.07);
    transition: transform 0.38s cubic-bezier(0.34, 1.46, 0.64, 1), opacity 0.3s;
    white-space: normal;
    word-break: break-word;
    max-width: calc(100vw - 48px);
    width: max-content;
    max-width: min(420px, calc(100vw - 48px));
    line-height: 1.4;
}

.export-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.export-toast.toast-success { background: #1a472a; border: 1px solid #2d7a45; }
.export-toast.toast-error { background: #4a1a1a; border: 1px solid #c0392b; }
.export-toast.toast-info { background: #1a2a4a; border: 1px solid #2471cc; }

/* Оверлей прогресса */
.export-progress-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    animation: fade-in 0.2s ease;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.export-progress-box {
    background: var(--tg-theme-bg-color, #fff);
    border-radius: 24px;
    padding: 36px 32px;
    text-align: center;
    min-width: 220px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.export-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(74,144,226,0.2);
    border-top-color: #4a90e2;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 0.8s linear infinite;
}

.export-progress-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--tg-theme-text-color);
    margin-bottom: 8px;
}

.export-progress-sub {
    font-size: 13px;
    color: var(--tg-theme-hint-color);
}


/* ═══════════════════════════════════════════
   DELETE MODE STYLES
   ═══════════════════════════════════════════ */

/* Группа кнопок в шапке материалов */
.export-mat-header-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Кнопка режима удаления */
.export-delete-mode-btn {
    background: var(--tg-theme-secondary-bg-color, #f0f0f0);
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.export-delete-mode-btn:active { transform: scale(0.88); }

.export-delete-mode-btn.active {
    background: rgba(255, 59, 48, 0.15);
    color: #ff3b30;
}

/* Баннер режима удаления */
.export-delete-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 59, 48, 0.1);
    border: 1px solid rgba(255, 59, 48, 0.25);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #ff3b30;
    animation: slide-down 0.25s ease;
}

@keyframes slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.export-delete-banner button {
    background: rgba(255, 59, 48, 0.15);
    border: none;
    border-radius: 7px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #ff3b30;
    cursor: pointer;
}

/* Кнопка удаления на каждом элементе */
.export-mat-delete-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    opacity: 0;
    transform: scale(0.7);
    pointer-events: none;
}

/* Показываем кнопку удаления в режиме удаления */
.delete-mode .export-mat-delete-btn {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.export-mat-delete-btn:active {
    background: rgba(255, 59, 48, 0.25);
    transform: scale(0.88);
}

/* В режиме удаления чекбоксы скрываем */
.delete-mode .export-mat-checkbox {
    opacity: 0;
    pointer-events: none;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    transition: all 0.2s;
}

/* Анимация удаления элемента */
@keyframes mat-delete-out {
    0%   { opacity: 1; transform: translateX(0) scaleY(1); max-height: 60px; margin-bottom: 6px; }
    40%  { opacity: 0; transform: translateX(60px) scaleY(1); }
    100% { opacity: 0; transform: translateX(60px) scaleY(0); max-height: 0; margin-bottom: 0; padding: 0; }
}

.export-mat-item.deleting {
    animation: mat-delete-out 0.35s ease forwards;
    pointer-events: none;
}

/* ═══ Диалог подтверждения удаления ═══ */
.export-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
    padding: 24px;
    animation: fade-in 0.2s ease;
}

.export-confirm-box {
    background: var(--tg-theme-bg-color, #fff);
    border-radius: 24px;
    padding: 32px 24px 24px;
    width: 100%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
    animation: confirm-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes confirm-pop {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.export-confirm-icon {
    font-size: 44px;
    margin-bottom: 14px;
    filter: grayscale(0.1);
}

.export-confirm-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--tg-theme-text-color);
    margin-bottom: 8px;
}

.export-confirm-name {
    font-size: 14px;
    font-weight: 600;
    color: #ff3b30;
    background: rgba(255,59,48,0.1);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    word-break: break-word;
    line-height: 1.4;
}

.export-confirm-sub {
    font-size: 12px;
    color: var(--tg-theme-hint-color);
    line-height: 1.6;
    margin-bottom: 24px;
}

.export-confirm-btns {
    display: flex;
    gap: 10px;
}

.export-confirm-cancel {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: var(--tg-theme-secondary-bg-color, #f0f0f0);
    color: var(--tg-theme-text-color);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.export-confirm-cancel:active { opacity: 0.7; }

.export-confirm-ok {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff3b30, #c0392b);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255,59,48,0.4);
    transition: all 0.15s;
}

.export-confirm-ok:active { transform: scale(0.95); }

/* ═══════════════════════════════════════════
   ADMIN PANEL — PREMIUM REDESIGN
   ═══════════════════════════════════════════ */

/* Hero */
.adm-hero {
    text-align: center;
    padding: 28px 20px 20px;
}
.adm-hero-icon {
    font-size: 48px;
    margin-bottom: 10px;
    display: block;
    animation: float 3s ease-in-out infinite;
}
.adm-hero-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--tg-theme-text-color);
}
.adm-hero-sub {
    font-size: 13px;
    color: var(--tg-theme-hint-color);
    margin: 0;
}

/* Card */
.adm-card {
    background: var(--tg-theme-secondary-bg-color, #f7f7f7);
    border-radius: 20px;
    padding: 20px;
    margin: 0 16px 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.04);
}

/* Section header with icon */
.adm-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.adm-section-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.adm-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--tg-theme-text-color);
    margin-bottom: 2px;
}
.adm-section-sub {
    font-size: 12px;
    color: var(--tg-theme-hint-color);
}

/* Input row */
.adm-input-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.adm-input {
    flex: 1;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1.5px solid rgba(0,0,0,0.08);
    background: var(--tg-theme-bg-color, #fff);
    font-size: 14px;
    font-family: inherit;
    color: var(--tg-theme-text-color);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 0;
}
.adm-input:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74,144,226,0.12);
}
.adm-input::placeholder { color: var(--tg-theme-hint-color); }

/* Icon button (save) */
.adm-btn-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #ff9500, #ff6b00);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255,149,0,0.35);
    transition: all 0.2s;
}
.adm-btn-icon:active { transform: scale(0.9); }

/* Select row */
.adm-select-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.adm-select-wrap {
    flex: 1;
    min-width: 0;
}
.adm-select-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--tg-theme-hint-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.adm-select {
    width: 100%;
    padding: 11px 14px;
    border-radius: 12px;
    border: 1.5px solid rgba(0,0,0,0.08);
    background: var(--tg-theme-bg-color, #fff);
    font-size: 14px;
    font-family: inherit;
    color: var(--tg-theme-text-color);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.adm-select:focus { border-color: #4a90e2; }

/* Add button */
.adm-btn-add {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, #4a90e2, #7c5cbf);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(74,144,226,0.35);
    transition: all 0.2s;
    letter-spacing: 0.2px;
}
.adm-btn-add:active { transform: scale(0.97); opacity: 0.9; }
.adm-btn-add.adm-btn-green {
    background: linear-gradient(135deg, #34c759, #28a347);
    box-shadow: 0 4px 14px rgba(52,199,89,0.35);
}

/* List section */
.adm-list-wrap {
    margin-top: 18px;
}
.adm-list-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--tg-theme-hint-color);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
    padding-left: 2px;
}
.adm-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}
.adm-list-empty {
    text-align: center;
    color: var(--tg-theme-hint-color);
    font-size: 13px;
    padding: 20px;
}

/* List item */
.adm-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--tg-theme-bg-color, #fff);
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    animation: adm-item-in 0.25s ease;
}
@keyframes adm-item-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.adm-list-item-badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4a90e2;
    flex-shrink: 0;
}
.adm-list-item-badge.green { background: #34c759; }
.adm-list-item-text {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--tg-theme-text-color);
    min-width: 0;
    word-break: break-word;
}
.adm-list-item-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(74,144,226,0.12);
    color: #4a90e2;
    flex-shrink: 0;
    white-space: nowrap;
}
.adm-list-item-tag.green {
    background: rgba(52,199,89,0.12);
    color: #28a347;
}
.adm-list-item-del {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: rgba(255,59,48,0.08);
    color: #ff3b30;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.adm-list-item-del:active {
    background: rgba(255,59,48,0.2);
    transform: scale(0.88);
}

/* Deleting animation */
@keyframes adm-item-out {
    to { opacity: 0; transform: translateX(40px) scaleY(0); max-height: 0; margin: 0; padding: 0; }
}
.adm-list-item.removing {
    animation: adm-item-out 0.3s ease forwards;
    pointer-events: none;
}

/* ══════════════════════════════════════
   RESET STATUS — Button & Modal
   ══════════════════════════════════════ */

/* Reset bar */
#reset-bar { margin-bottom: 14px; }

/* Trigger button — muted slate */
.st-reset-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 18px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    letter-spacing: 0.2px;
}
.st-reset-btn:active {
    transform: scale(0.98);
    background: rgba(255,255,255,0.1);
}
.st-reset-btn span { font-size: 16px; }

/* Modal overlay */
.reset-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 10000;
    padding: 0;
}

/* Modal box — bottom sheet style */
.reset-modal-box {
    background: var(--tg-theme-bg-color, #1e1e1e);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px 24px 0 0;
    padding: 24px 20px 32px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.4);
}

@keyframes resetSlideIn {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Drag handle */
.reset-modal-box::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    margin: 0 auto 20px;
}

.reset-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--tg-theme-text-color, #fff);
    margin: 0 0 6px;
}
.reset-modal-desc {
    font-size: 13px;
    color: var(--tg-theme-hint-color, #999);
    line-height: 1.5;
    margin: 0 0 20px;
}
.reset-modal-desc b { color: #4ade80; font-weight: 600; }

/* Campaign choice cards */
.reset-campaign-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.reset-camp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.18s;
}
.reset-camp-card:active { transform: scale(0.97); }
.reset-camp-card.rc-active {
    border-color: #6C63FF;
    background: rgba(108,99,255,0.12);
    box-shadow: 0 0 0 1px rgba(108,99,255,0.3);
}
.rc-icon { font-size: 28px; }
.rc-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--tg-theme-text-color, #fff);
}
.reset-camp-card.rc-active .rc-label { color: #a78bfa; }

/* Checkbox row */
.reset-option-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 20px;
}
.reset-option-row input[type="checkbox"] {
    width: 17px; height: 17px;
    accent-color: #6C63FF;
    cursor: pointer;
}
.reset-option-row span {
    font-size: 13px;
    color: var(--tg-theme-hint-color, #999);
    font-weight: 500;
}

/* Action buttons */
.reset-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.reset-btn-cancel {
    padding: 13px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.reset-btn-cancel:active { transform: scale(0.97); }

.reset-btn-confirm {
    padding: 13px;
    background: #6C63FF;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
}
.reset-btn-confirm:not(:disabled):active { transform: scale(0.97); background: #5a52e0; }
.reset-btn-confirm:disabled {
    opacity: 0.35;
    cursor: default;
    background: rgba(108,99,255,0.4);
}



/* ===============================================================
   EXPORT v2  Campaign Card Styles
   =============================================================== */

/* Load button */
.exp-load-btn {
    width: 100%;
    margin-top: 16px;
    background: linear-gradient(135deg, rgba(79,142,247,0.2) 0%, rgba(123,94,167,0.2) 100%);
    border: 1.5px solid rgba(79,142,247,0.35);
    border-radius: 12px;
    color: #7eb3ff;
    font-size: 14px;
    font-weight: 600;
    padding: 13px;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.3px;
}
.exp-load-btn:hover  { background: linear-gradient(135deg, rgba(79,142,247,0.3) 0%, rgba(123,94,167,0.3) 100%); }
.exp-load-btn:active { transform: scale(0.97); }
.exp-load-btn:disabled { opacity: 0.45; cursor: not-allowed; }

#exp-campaigns-wrap { padding-bottom: 24px; }

/* Campaign card */
.exp-camp-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.025) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s;
}
.exp-camp-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.5px;
    border-radius: 18px 18px 0 0;
}
.exp-camp-card.accent-blue::before   { background: linear-gradient(90deg, #4f8ef7, #7b5ea7); }
.exp-camp-card.accent-green::before  { background: linear-gradient(90deg, #27ae60, #1abc9c); }
.exp-camp-card.accent-orange::before { background: linear-gradient(90deg, #f39c12, #e67e22); }

/* Card header */
.exp-camp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.exp-camp-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.exp-camp-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.exp-camp-name-wrap { flex: 1; min-width: 0; }
.exp-camp-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.exp-camp-stats {
    font-size: 12px;
    color: rgba(255,255,255,0.42);
    margin-top: 3px;
}

/* Export all button */
.exp-camp-export-all-btn {
    background: linear-gradient(135deg, #4f8ef7 0%, #7b5ea7 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.15s, transform 0.12s;
    letter-spacing: 0.2px;
}
.exp-camp-export-all-btn:active { transform: scale(0.93); opacity: 0.8; }
.accent-green  .exp-camp-export-all-btn { background: linear-gradient(135deg, #27ae60, #1abc9c); }
.accent-orange .exp-camp-export-all-btn { background: linear-gradient(135deg, #f39c12, #e67e22); }

/* Accordion toggle */
.exp-camp-toggle {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 11px;
    color: rgba(255,255,255,0.6);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.exp-camp-toggle:active    { transform: scale(0.98); }
.exp-camp-toggle.open      { background: rgba(255,255,255,0.09); color: #fff; border-color: rgba(255,255,255,0.16); }
.exp-toggle-arrow          { transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); font-size: 10px; }
.exp-camp-toggle.open .exp-toggle-arrow { transform: rotate(180deg); }

/* Accordion body */
.exp-camp-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.38s cubic-bezier(0.4,0,0.2,1);
}
.exp-camp-body.open { max-height: 1600px; }
.exp-camp-body-inner { padding-top: 13px; }

/* Loading state */
.exp-mat-loading {
    text-align: center;
    color: rgba(255,255,255,0.35);
    font-size: 13px;
    padding: 18px 0;
}

/* Material item */
.exp-mat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 11px;
    margin-bottom: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, transform 0.1s;
    user-select: none;
}
.exp-mat-item:last-child { margin-bottom: 0; }
.exp-mat-item:active { transform: scale(0.98); }
.exp-mat-item.selected {
    background: rgba(79,142,247,0.13);
    border-color: rgba(79,142,247,0.32);
}

/* Checkbox */
.exp-mat-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #4f8ef7;
    flex-shrink: 0;
    transition: all 0.15s;
    background: rgba(255,255,255,0.03);
    font-weight: 700;
}
.exp-mat-item.selected .exp-mat-check {
    border-color: #4f8ef7;
    background: rgba(79,142,247,0.18);
}

/* Material name */
.exp-mat-name {
    flex: 1;
    font-size: 13px;
    color: rgba(255,255,255,0.82);
    font-weight: 500;
    line-height: 1.35;
    min-width: 0;
}

/* Delete button (shown in delete mode) */
.exp-mat-del-btn {
    opacity: 0;
    pointer-events: none;
    background: rgba(192,57,43,0.12);
    border: 1px solid rgba(192,57,43,0.28);
    border-radius: 8px;
    color: #e74c3c;
    width: 30px;
    height: 30px;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.exp-mat-del-btn:active { transform: scale(0.86); }
.exp-camp-body.delete-mode .exp-mat-del-btn  { opacity: 1; pointer-events: auto; }
.exp-camp-body.delete-mode .exp-mat-check    { opacity: 0.25; }
.exp-camp-body.delete-mode .exp-mat-item     { cursor: default; }

/* Footer actions */
.exp-camp-footer {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.07);
    align-items: center;
}
.exp-camp-select-all {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 9px;
    color: rgba(255,255,255,0.65);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 11px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.exp-camp-select-all:active { transform: scale(0.93); }

.exp-camp-export-sel {
    flex: 1;
    background: linear-gradient(135deg, rgba(79,142,247,0.22) 0%, rgba(123,94,167,0.22) 100%);
    border: 1.5px solid rgba(79,142,247,0.38);
    border-radius: 9px;
    color: #7eb3ff;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.18s;
    letter-spacing: 0.2px;
}
.exp-camp-export-sel:not(:disabled):active { transform: scale(0.96); }
.exp-camp-export-sel:disabled { opacity: 0.35; cursor: not-allowed; }

.exp-camp-delete-toggle {
    background: rgba(192,57,43,0.08);
    border: 1px solid rgba(192,57,43,0.2);
    border-radius: 9px;
    color: rgba(255,255,255,0.42);
    font-size: 14px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.exp-camp-delete-toggle.active {
    background: rgba(192,57,43,0.22);
    border-color: rgba(192,57,43,0.55);
    color: #e74c3c;
}
.exp-camp-delete-toggle:active { transform: scale(0.88); }

/* Delete animation */
@keyframes exp-item-out {
    from { max-height: 52px; opacity: 1; margin-bottom: 6px; transform: translateX(0); }
    to   { max-height: 0;    opacity: 0; margin-bottom: 0;   transform: translateX(-16px); }
}
.exp-mat-item.deleting {
    animation: exp-item-out 0.3s ease forwards;
    overflow: hidden;
    pointer-events: none;
}

/* === Exp Type Buttons ( / POSM) === */
.exp-type-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.exp-type-btn {
    background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 22px 12px 18px;
    cursor: pointer;
    text-align: center;
    transition: all 0.22s;
    color: inherit;
    position: relative;
    overflow: hidden;
}
.exp-type-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    transition: background 0.25s;
}
.exp-type-btn:active { transform: scale(0.96); }

.exp-type-btn.active {
    border-color: rgba(79,142,247,0.5);
    background: linear-gradient(145deg, rgba(79,142,247,0.15), rgba(123,94,167,0.08));
    box-shadow: 0 0 0 1px rgba(79,142,247,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
}
.exp-type-btn.active::before { background: linear-gradient(90deg, #4f8ef7, #7b5ea7); }

#exp-type-posm.active {
    border-color: rgba(39,174,96,0.5);
    background: linear-gradient(145deg, rgba(39,174,96,0.15), rgba(26,188,156,0.08));
    box-shadow: 0 0 0 1px rgba(39,174,96,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
}
#exp-type-posm.active::before { background: linear-gradient(90deg, #27ae60, #1abc9c); }

.exp-type-icon {
    font-size: 30px;
    margin-bottom: 10px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
    transition: transform 0.2s;
}
.exp-type-btn.active .exp-type-icon { transform: scale(1.1); }

.exp-type-name {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    margin-bottom: 4px;
    letter-spacing: 0.3px;
    transition: color 0.2s;
}
.exp-type-btn.active .exp-type-name { color: #fff; }

.exp-type-sub {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    line-height: 1.3;
    transition: color 0.2s;
}
.exp-type-btn.active .exp-type-sub { color: rgba(255,255,255,0.55); }

#exp-content-area { padding-bottom: 24px; }


/* ═══════════════════════════════════════════════════════════
   UPLOAD TAB — Premium Redesign
   ═══════════════════════════════════════════════════════════ */

/* Hero banner */
.up-hero {
    background: linear-gradient(135deg, #1a1040 0%, #2d1f63 60%, #1e1440 100%);
    border-radius: 22px;
    padding: 20px 22px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
    border: 1.5px solid rgba(108,99,255,0.25);
    box-shadow: 0 8px 32px rgba(108,99,255,0.2);
}
.up-hero-glow {
    position: absolute;
    top: -40px; right: -40px;
    width: 130px; height: 130px;
    background: rgba(108,99,255,0.4);
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}
.up-hero-icon { font-size: 40px; line-height: 1; }
.up-hero-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
}
.up-hero-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin-top: 3px;
}

/* Section labels */
.up-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(108,99,255,0.85);
    letter-spacing: 0.09em;
    margin: 22px 0 10px;
    text-transform: uppercase;
}

/* Campaign type cards grid */
.up-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.up-type-card {
    background: rgba(28,28,46,0.9);
    border: 2px solid rgba(108,99,255,0.12);
    border-radius: 18px;
    padding: 16px 6px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
    color: rgba(255,255,255,0.4);
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
}
.up-type-card:active { transform: scale(0.95); }
.up-type-card.active {
    background: linear-gradient(145deg, #2d1f63 0%, #1a1040 100%);
    border-color: #6C63FF;
    color: #fff;
    box-shadow: 0 6px 24px rgba(108,99,255,0.4);
    transform: translateY(-3px) scale(1.02);
}
.up-type-emoji { font-size: 26px; line-height: 1; }
.up-type-name  { font-size: 12px; font-weight: 700; letter-spacing: 0.01em; }

/* Format toggle */
.up-format-toggle {
    display: flex;
    background: rgba(28,28,46,0.9);
    border-radius: 16px;
    padding: 4px;
    border: 1.5px solid rgba(108,99,255,0.12);
}
.up-fmt-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 8px;
    font-size: 13px;
    font-weight: 800;
    border-radius: 13px;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
    letter-spacing: 0.06em;
    -webkit-tap-highlight-color: transparent;
}
.up-fmt-btn.active {
    background: linear-gradient(135deg, #6C63FF, #9b8cff);
    color: #fff;
    box-shadow: 0 4px 14px rgba(108,99,255,0.45);
}

/* Select dropdowns */
.up-select {
    width: 100%;
    padding: 14px 42px 14px 16px;
    background: rgba(28,28,46,0.9);
    border: 1.5px solid rgba(108,99,255,0.15);
    border-radius: 16px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C63FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.up-select:focus {
    border-color: rgba(108,99,255,0.6);
    box-shadow: 0 0 0 3px rgba(108,99,255,0.15);
}
.up-select:disabled { opacity: 0.35; cursor: not-allowed; }
.up-select option { background: #1c1c2e; color: #fff; }

/* Materials nav bar */
.up-mat-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.up-back-btn {
    background: rgba(108,99,255,0.12);
    border: 1.5px solid rgba(108,99,255,0.28);
    color: #a78bfa;
    border-radius: 13px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.up-back-btn:active { transform: scale(0.95); background: rgba(108,99,255,0.22); }

.up-market-badge {
    flex: 1;
    background: linear-gradient(135deg, rgba(45,31,99,0.7), rgba(26,16,64,0.7));
    border: 1.5px solid rgba(108,99,255,0.3);
    border-radius: 11px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #c4b5fd;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.up-finish-btn {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border: none;
    border-radius: 13px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(34,197,94,0.35);
    transition: all 0.18s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.up-finish-btn:active { transform: scale(0.95); }

/* Material cards */
.up-mat-card {
    background: rgba(28,28,46,0.95);
    border: 1.5px solid rgba(108,99,255,0.14);
    border-radius: 22px;
    padding: 18px;
    margin-bottom: 14px;
    animation: upCardIn 0.42s cubic-bezier(0.34, 1.28, 0.64, 1) both;
    transition: border-color 0.3s;
}
.up-mat-card.has-photos-card {
    border-color: rgba(34,197,94,0.35);
}
@keyframes upCardIn {
    from { opacity: 0; transform: translateY(22px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

.up-mat-header {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 0;
}
.up-mat-icon-box {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(108,99,255,0.2), rgba(167,139,250,0.1));
    border-radius: 15px;
    border: 1px solid rgba(108,99,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.up-mat-info { flex: 1; min-width: 0; }
.up-mat-name {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.up-mat-count {
    font-size: 12px;
    color: rgba(255,255,255,0.38);
    margin-top: 3px;
    transition: color 0.35s;
    font-weight: 500;
}
.up-mat-count.up-has-photos { color: #4ade80; }

.up-mat-check {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(34,197,94,0.4);
    animation: upCheckPop 0.35s cubic-bezier(0.34, 1.7, 0.64, 1);
}
@keyframes upCheckPop {
    from { transform: scale(0) rotate(-30deg); }
    to   { transform: scale(1) rotate(0deg); }
}

/* Photo preview grid - enhanced */
.up-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 14px;
}
.up-photo-grid img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}

/* Обёртка фото с кнопкой удаления */
.up-photo-wrap {
    position: relative;
    border-radius: 10px;
    animation: upThumbIn 0.3s cubic-bezier(0.34, 1.5, 0.64, 1);
}

/* Кнопка удаления фото — красный кружок сверху справа */
.up-photo-del {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff3b30, #c0392b);
    color: #fff;
    border: 2.5px solid #1a1a2e;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    padding: 0;
    box-shadow: 0 2px 8px rgba(255,59,48,0.55);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.up-photo-del:hover {
    transform: scale(1.22);
    box-shadow: 0 4px 14px rgba(255,59,48,0.72);
}
.up-photo-del:active {
    transform: scale(0.88);
}
@keyframes upThumbIn {
    from { opacity: 0; transform: scale(0.65); }
    to   { opacity: 1; transform: scale(1); }
}

/* Add photo button */
.up-add-btn {
    width: 100%;
    padding: 14px;
    margin-top: 14px;
    background: rgba(108,99,255,0.08);
    border: 2px dashed rgba(108,99,255,0.32);
    border-radius: 16px;
    color: #a78bfa;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: all 0.22s;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.up-add-btn:active { background: rgba(108,99,255,0.18); transform: scale(0.98); }
.up-add-btn.up-loading {
    opacity: 0.65;
    cursor: wait;
    border-style: solid;
    animation: upPulse 1s ease infinite;
}
@keyframes upPulse {
    0%,100% { opacity: 0.65; }
    50%      { opacity: 0.9; }
}
.up-add-btn-icon { font-size: 18px; }

/* Submit all button */
#submit-all {
    width: 100%;
    padding: 17px;
    background: linear-gradient(135deg, #6C63FF 0%, #9b8cff 100%);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(108,99,255,0.45);
    transition: all 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
    letter-spacing: 0.02em;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}
#submit-all:active { transform: scale(0.97); }

/* Footer styling */
#app-footer {
    padding: 12px 16px 16px;
    background: transparent;
}