/* ═══════════════════════════════════════════════════════════
   Floli — Design System
   Paleta: warm white + deep rose (#e11d74) + warm grays
   Filozofija: čist, moderan, ženstveno-profesionalan
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

/* ─── CSS Variables ──────────────────────────────────────── */
:root {
    /* Pozadine */
    --bg:           #ffffff;
    --bg2:          #f9f8f7;
    --bg3:          #f2f1ef;
    --bg4:          #eae9e6;

    /* Granice */
    --border:       #e8e6e1;
    --border2:      #d4d1ca;

    /* Tekst */
    --text:         #111827;
    --text2:        #4b5563;
    --text3:        #9ca3af;
    --text4:        #d1d5db;

    /* Akcent — deep rose */
    --accent:       #e11d74;
    --accent2:      #be185d;
    --accent3:      #9d174d;
    --accent-light: #fce7f3;
    --accent-mid:   #fbcfe8;

    /* Sekundarni — lavender */
    --lavender:     #f5f3ff;
    --lavender2:    #ede9fe;

    /* Status */
    --success:      #059669;
    --success-light:#d1fae5;
    --warning:      #d97706;
    --warning-light:#fef3c7;
    --danger:       #dc2626;
    --danger-light: #fee2e2;
    --info:         #2563eb;
    --info-light:   #dbeafe;

    /* Tipografija */
    --font:         'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing */
    --radius:       10px;
    --radius-lg:    16px;
    --radius-xl:    24px;
    --radius-full:  9999px;

    /* Shadows */
    --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow:       0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
    --shadow-lg:    0 8px 32px rgba(0,0,0,.1),  0 4px 8px rgba(0,0,0,.04);
    --shadow-accent:0 4px 20px rgba(225,29,116,.25);

    --transition:   .18s ease;
}
/* ─── Dark tema ──────────────────────────────────────────── */
[data-theme="dark"] {
    --bg:           #16141a;
    --bg2:          #1d1b22;
    --bg3:          #252230;
    --bg4:          #2e2a3a;
    --border:       rgba(255,255,255,.07);
    --border2:      rgba(255,255,255,.12);
    --text:         #e8e4f0;
    --text2:        #9d97b0;
    --text3:        #5e5870;
    --text4:        #3a3548;
    --accent:       #c084fc;
    --accent2:      #d8b4fe;
    --accent3:      #a855f7;
    --accent-light: rgba(192,132,252,.10);
    --accent-mid:   rgba(192,132,252,.18);
    --lavender:     rgba(139,92,246,.12);
    --lavender2:    rgba(139,92,246,.20);
    --shadow-sm:    0 1px 3px rgba(0,0,0,.25);
    --shadow:       0 4px 12px rgba(0,0,0,.35);
    --shadow-lg:    0 8px 32px rgba(0,0,0,.45);
    --shadow-accent:0 4px 20px rgba(192,132,252,.20);
    --success:      #34d399;
}

[data-theme="dark"] body {
    background: linear-gradient(160deg, #13111a 0%, #16141a 40%);
    background-attachment: fixed;
}

[data-theme="dark"] .card {
    background: var(--bg2);
    border-color: var(--border);
}

[data-theme="dark"] .nav {
    background: rgba(22,20,26,.92);
    border-color: var(--border);
    backdrop-filter: blur(12px);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--bg3);
    border-color: var(--border2);
    color: var(--text);
}

[data-theme="dark"] .btn-ghost {
    background: var(--bg3);
    border-color: var(--border2);
    color: var(--text2);
}



/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html   { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body   { background: #cfd8d9;
         background-attachment: fixed;
         color: var(--text); font-family: var(--font);
         line-height: 1.65; min-height: 100vh; display: flex; flex-direction: column; }
a      { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover{ color: var(--accent2); }
img    { max-width: 100%; display: block; }

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.25; }
h1 { font-size: 2rem;   font-weight: 800; }
h2 { font-size: 1.35rem; font-weight: 700; }
h3 { font-size: 1.1rem;  font-weight: 600; }
h4 { font-size: .95rem;  font-weight: 600; }

p  { color: var(--text2); line-height: 1.7; }

/* ─── Forms ──────────────────────────────────────────────── */
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=url], input[type=date],
textarea, select {
    background:    var(--bg);
    border:        1.5px solid var(--border2);
    border-radius: var(--radius);
    color:         var(--text);
    font-family:   var(--font);
    font-size:     1rem;
    padding:       .75rem 1rem;
    width:         100%;
    transition:    border-color var(--transition), box-shadow var(--transition);
    outline:       none;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--accent);
    box-shadow:   0 0 0 3px rgba(225,29,116,.1);
}
input::placeholder { color: var(--text3); }
label {
    display:     block;
    font-size:   .875rem;
    font-weight: 600;
    color:       var(--text);
    margin-bottom: .4rem;
}
.form-group   { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.form-row     { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-hint    { font-size: .8rem; color: var(--text3); margin-top: .25rem; }
.required-star{ color: var(--accent); margin-left: 2px; }

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

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    gap:            .4rem;
    padding:        .65rem 1.35rem;
    border-radius:  var(--radius);
    font-family:    var(--font);
    font-size:      .9rem;
    font-weight:    600;
    cursor:         pointer;
    border:         none;
    transition:     all var(--transition);
    text-decoration:none;
    white-space:    nowrap;
    line-height:    1;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn-primary {
    background:  var(--accent);
    color:       #fff;
    box-shadow:  var(--shadow-accent);
}
.btn-primary:hover  { background: var(--accent2); box-shadow: 0 6px 24px rgba(225,29,116,.35); color:#fff; }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-secondary {
    background: var(--bg2);
    color:      var(--text);
    border:     1.5px solid var(--border2);
}
.btn-secondary:hover { background: var(--bg3); border-color: var(--border); color:var(--text); }

.btn-ghost {
    background:  transparent;
    color:       var(--text2);
    border:      1.5px solid var(--border);
}
.btn-ghost:hover { background: var(--bg2); color: var(--text); }

.btn-content {
    background: rgba(236, 72, 153, .12);
    color:      #ec4899;
    border:     1.5px solid rgba(236, 72, 153, .35);
    font-weight: 600;
}
.btn-content:hover { background: rgba(236, 72, 153, .2); color: #ec4899; }

.btn-lg  { padding: .85rem 2rem;   font-size: 1.05rem; border-radius: var(--radius-lg); }
.btn-sm  { padding: .45rem .9rem;  font-size: .82rem; }
.btn-xs  { padding: .28rem .65rem; font-size: .75rem; border-radius: 6px; }
.btn-full{ width: 100%; }
.btn-icon{ padding: .6rem; border-radius: var(--radius); }

/* ─── Navigation ─────────────────────────────────────────── */
.nav {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    padding:       .9rem 2rem;
    background:    var(--bg);
    border-bottom: 1.5px solid var(--border);
    position:      sticky;
    top:           0;
    z-index:       100;
    backdrop-filter: blur(8px);
}

.nav-logo {
    display:     flex;
    align-items: center;
    gap:         .55rem;
    color:       var(--text);
    font-family: var(--font-display);
    font-weight: 800;
    font-size:   1.05rem;
    letter-spacing: -.02em;
}
.nav-logo:hover { color: var(--text); text-decoration: none; }

.logo-mark {
    width:  32px; height: 32px;
    background: var(--accent);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .95rem; font-weight: 800;
    flex-shrink: 0;
}

.nav-links {
    display:     flex;
    align-items: center;
    gap:         1.5rem;
    font-size:   .88rem;
}
.nav-links a { color: var(--text2); font-weight: 500; }
.nav-links a:hover { color: var(--accent); text-decoration: none; }
.nav-links a.active { color: var(--accent); }
.nav-username { color: var(--text2); font-size: .85rem; font-weight: 600; }
.nav-logout   { color: var(--text3) !important; font-size: .82rem; font-weight: 400 !important;
                padding: .3rem .75rem; border: 1px solid var(--border2); border-radius: 6px;
                transition: all .15s !important; }
.nav-logout:hover { color: var(--text) !important; border-color: var(--border); background: var(--bg2); }

/* Theme toggle */
.theme-toggle { display:flex; align-items:center; gap:.4rem; cursor:pointer; user-select:none; }
.theme-toggle-track { position:relative; width:38px; height:22px;
                      background:var(--bg3); border:1.5px solid var(--border2);
                      border-radius:11px; transition:all .2s; }
.theme-toggle-track.on { background:var(--accent); border-color:var(--accent); }
.theme-toggle-thumb { position:absolute; top:2px; left:2px; width:14px; height:14px;
                      background:#fff; border-radius:50%; transition:transform .2s;
                      box-shadow:0 1px 3px rgba(0,0,0,.2); }
.theme-toggle-track.on .theme-toggle-thumb { transform:translateX(16px); }

/* ─── Layout ─────────────────────────────────────────────── */
.main-content {
    flex:       1;
    max-width:  1120px;
    margin:     0 auto;
    width:      100%;
    padding:    2.5rem 2rem;
}

.page-header {
    display:        flex;
    justify-content:space-between;
    align-items:    flex-start;
    margin-bottom:  2rem;
    gap:            1rem;
}

.back-link { font-size: .82rem; color: var(--text3); display:block; margin-bottom:.35rem;
             font-weight:500; transition: color var(--transition); }
.back-link:hover { color: var(--accent); }

.section { margin-bottom: 2.5rem; }
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem; }

.header-actions { display:flex; gap:.5rem; align-items:center; }

/* ─── Cards ──────────────────────────────────────────────── */
.card {
    background:    var(--bg);
    border:        1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       1.5rem;
    box-shadow:    var(--shadow-sm);
}
.card:hover { box-shadow: var(--shadow); }
.card-sm   { padding: 1rem 1.25rem; }
.card-flat { box-shadow: none; }

.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:1rem; }

/* ─── Badges & Tags ──────────────────────────────────────── */
.badge {
    display:        inline-flex;
    align-items:    center;
    gap:            .3rem;
    padding:        .2rem .65rem;
    border-radius:  var(--radius-full);
    font-size:      .72rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.badge-default  { background: var(--bg3);         color: var(--text2); }
.badge-accent   { background: var(--accent-light); color: var(--accent2); }
.badge-success  { background: var(--success-light);color: var(--success); }
.badge-warning  { background: var(--warning-light);color: var(--warning); }
.badge-danger   { background: var(--danger-light); color: var(--danger); }
.badge-info     { background: var(--info-light);   color: var(--info); }
.badge-premium  { background: linear-gradient(135deg, #fce7f3, #ede9fe);
                  color: var(--accent2); border: 1px solid var(--accent-mid); }

.tag { display:inline-block; padding:.2rem .6rem; background:var(--bg3);
       border:1.5px solid var(--border); border-radius:6px;
       font-size:.78rem; color:var(--text2); font-weight:500; }

/* ─── Alerts ──────────────────────────────────────────────── */
.alert { padding:.85rem 1.1rem; border-radius:var(--radius); margin-bottom:1rem;
         font-size:.88rem; border-left:3px solid; display:flex; align-items:flex-start; gap:.6rem; }
.alert-error   { background:var(--danger-light);  border-color:var(--danger);  color:#991b1b; }
.alert-warning { background:var(--warning-light); border-color:var(--warning); color:#92400e; }
.alert-success { background:var(--success-light); border-color:var(--success); color:#065f46; }
.alert-info    { background:var(--info-light);    border-color:var(--info);    color:#1e40af; }

/* ─── Stats grid ──────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; margin-bottom:2.5rem; }
@media(max-width:700px){ .stats-grid { grid-template-columns:repeat(2,1fr); } }

.stat-card { background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-lg);
             padding:1.35rem; display:flex; flex-direction:column; gap:.3rem;
             box-shadow:var(--shadow-sm); transition:box-shadow var(--transition); }
.stat-card:hover { box-shadow:var(--shadow); }
.stat-num   { font-size:2rem; font-weight:800; color:var(--accent); line-height:1;
              font-family:var(--font-display); }
.stat-label { font-size:.75rem; color:var(--text3); text-transform:uppercase; letter-spacing:.06em; font-weight:500; }

/* ─── Table ───────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; border-radius:var(--radius-lg); border:1.5px solid var(--border);
              box-shadow:var(--shadow-sm); }
.table { width:100%; border-collapse:collapse; font-size:.88rem; }
.table th { background:var(--bg2); padding:.7rem 1rem; text-align:left;
            font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
            color:var(--text3); border-bottom:1.5px solid var(--border); font-weight:600; }
.table td { padding:.8rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text2); }
.table tr:last-child td { border-bottom:none; }
.table tr:hover td { background:var(--bg2); }

/* ─── Status dots ─────────────────────────────────────────── */
.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:.4rem; background:var(--text3); }
.status-active    .status-dot, .status-dot.status-active    { background:var(--success); }
.status-draft     .status-dot, .status-dot.status-draft     { background:var(--text4); }
.status-paused    .status-dot, .status-dot.status-paused    { background:var(--warning); }
.status-completed .status-dot, .status-dot.status-completed { background:var(--info); }

/* ─── Channel cards ───────────────────────────────────────── */
.channels-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.channel-card { background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-lg);
                padding:1.25rem; display:flex; flex-direction:column; gap:.65rem;
                box-shadow:var(--shadow-sm); }
.channel-header { display:flex; justify-content:space-between; align-items:center; }
.channel-name   { font-weight:700; font-size:.8rem; letter-spacing:.06em; color:var(--accent); text-transform:uppercase; }
.channel-budget { font-size:1.1rem; font-weight:700; color:var(--text); }
.channel-bar    { background:var(--bg3); border-radius:4px; height:5px; overflow:hidden; }
.channel-bar-fill { background:linear-gradient(90deg,var(--accent),var(--accent2)); height:100%; border-radius:4px; transition:width .6s ease; }
.channel-meta   { display:flex; gap:.5rem; flex-wrap:wrap; }
.channel-meta span { font-size:.75rem; background:var(--bg2); padding:.15rem .5rem;
                     border-radius:6px; color:var(--text2); border:1px solid var(--border); }
.time-badge     { font-size:.72rem; background:var(--accent-light); color:var(--accent2);
                  padding:.1rem .45rem; border-radius:6px; font-weight:500; }
.posting-times  { display:flex; gap:.35rem; flex-wrap:wrap; }

/* ─── Two col ─────────────────────────────────────────────── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:2rem; }
@media(max-width:700px){ .two-col { grid-template-columns:1fr; } }

/* ─── Theme list ──────────────────────────────────────────── */
.theme-list { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.theme-list li { padding:.65rem 1rem; background:var(--bg2); border-radius:var(--radius);
                 font-size:.88rem; border-left:3px solid var(--accent); color:var(--text2);
                 transition:background var(--transition); }
.theme-list li:hover { background:var(--accent-light); }

/* ─── Results grid ────────────────────────────────────────── */
.results-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.result-card  { background:var(--bg2); border:1.5px solid var(--border); border-radius:var(--radius-lg);
                padding:1rem; display:flex; flex-direction:column; gap:.25rem; }
.result-value { font-size:1.25rem; font-weight:800; color:var(--accent); font-family:var(--font-display); }
.result-label { font-size:.75rem; color:var(--text3); text-transform:capitalize; font-weight:500; }

/* ─── Hashtags ────────────────────────────────────────────── */
.hashtag-wrap { display:flex; flex-wrap:wrap; gap:.5rem; }
.hashtag { background:var(--accent-light); border:1.5px solid var(--accent-mid);
           border-radius:var(--radius-full); padding:.2rem .75rem;
           font-size:.8rem; color:var(--accent2); font-weight:500; }

/* ─── Strategy summary ────────────────────────────────────── */
.strategy-summary { display:grid; grid-template-columns:1fr 260px; gap:2rem;
                    margin-bottom:2rem; align-items:start; }
.strategy-summary-text { min-width:0; }
.strategy-summary-text h2 { margin-bottom:.5rem; }
.strategy-meta { display:flex; flex-direction:column; gap:.75rem; }
.meta-item  { display:flex; flex-direction:column; gap:.1rem; }
.meta-label { font-size:.72rem; color:var(--text3); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }

@media(max-width:860px){
    .strategy-summary { grid-template-columns:1fr; }
    .strategy-meta { flex-direction:row; flex-wrap:wrap; gap:1rem; }
}

/* ─── Content cards ───────────────────────────────────────── */
.channel-section-header { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.content-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:1rem; }
.content-card { background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-lg);
                padding:1.25rem; display:flex; flex-direction:column; gap:.85rem;
                box-shadow:var(--shadow-sm); transition:box-shadow var(--transition); }
.content-card:hover { box-shadow:var(--shadow); }
.content-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; }
.format-badge { display:inline-block; background:var(--info-light); color:var(--info);
                font-size:.72rem; padding:.15rem .55rem; border-radius:6px; font-weight:600; }
.theme-label  { font-size:.72rem; color:var(--text3); margin-left:.35rem; }
.content-text { font-size:.875rem; line-height:1.7; color:var(--text2); white-space:pre-wrap;
                background:var(--bg2); border-radius:var(--radius); padding:.85rem;
                max-height:320px; overflow-y:auto; border:1.5px solid var(--border); }

/* ─── Affiliate section ───────────────────────────────────── */
.affiliate-section  { border-top:1.5px solid var(--border); padding-top:.85rem; }
.affiliate-title    { font-size:.75rem; color:var(--text3); margin-bottom:.5rem;
                      text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.affiliate-links    { display:flex; flex-direction:column; gap:.4rem; }
.affiliate-btn      { display:flex; justify-content:space-between; align-items:center;
                      background:var(--bg2); border:1.5px solid var(--border); border-radius:var(--radius);
                      padding:.55rem .85rem; color:var(--text); font-size:.82rem;
                      transition:all var(--transition); text-decoration:none; }
.affiliate-btn:hover{ background:var(--accent-light); border-color:var(--accent-mid);
                      text-decoration:none; color:var(--text); }
.affiliate-tool     { font-weight:600; }
.trial-badge        { font-size:.72rem; background:var(--success-light); color:var(--success);
                      padding:.1rem .4rem; border-radius:5px; font-weight:600; }

/* ─── Search links ────────────────────────────────────────── */
.search-links-section { margin-top:.75rem; padding-top:.75rem; border-top:1.5px solid var(--border); }
.search-links-label   { font-size:.72rem; color:var(--text3); margin-bottom:.6rem;
                        text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.keyword-links        { display:flex; flex-direction:column; gap:.45rem; }
.keyword-group        { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.keyword-label        { font-size:.85rem; font-weight:500; color:var(--text); flex:1; }
.keyword-platforms    { display:flex; gap:.4rem; flex-shrink:0; }
.platform-link        { font-size:.75rem; padding:.2rem .65rem; border-radius:6px;
                        text-decoration:none; font-weight:600; transition:opacity .15s; }
.platform-link:hover  { opacity:.8; text-decoration:none; }
.platform-pexels      { background:rgba(5,178,136,.1); color:#059669; border:1.5px solid rgba(5,178,136,.25); }
.platform-unsplash    { background:var(--bg3); color:var(--text2); border:1.5px solid var(--border2); }

/* ─── Upgrade banner ──────────────────────────────────────── */
.upgrade-banner { background:linear-gradient(135deg,var(--accent-light),var(--lavender));
                  border:1.5px solid var(--accent-mid); border-radius:var(--radius-xl);
                  padding:2rem; display:flex; justify-content:space-between;
                  align-items:center; gap:2rem; margin-top:2rem; }
.upgrade-content h3 { color:var(--accent2); margin-bottom:.4rem; }
.upgrade-content p  { color:var(--text2); font-size:.9rem; }
@media(max-width:600px){ .upgrade-banner { flex-direction:column; text-align:center; } }

/* ─── Feed ────────────────────────────────────────────────── */
.feed-compose { background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-lg);
                padding:1.25rem; margin-bottom:1.5rem; box-shadow:var(--shadow-sm); }
.feed-compose textarea { resize:vertical; min-height:80px; margin-bottom:.75rem; }
.feed-meta    { display:flex; justify-content:space-between; align-items:center; }
.char-count   { font-size:.8rem; color:var(--text3); font-family:var(--font-mono); }
.post-card    { background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-lg);
                padding:1.1rem 1.25rem; margin-bottom:.75rem; box-shadow:var(--shadow-sm); }
.post-header  { display:flex; justify-content:space-between; margin-bottom:.4rem; }
.post-biz     { font-weight:700; font-size:.88rem; color:var(--accent); }
.post-time    { font-size:.75rem; color:var(--text3); }
.post-content { font-size:.9rem; line-height:1.65; color:var(--text); }

/* ─── Auth pages ──────────────────────────────────────────── */
.auth-page    { max-width:420px; margin:3rem auto; }
.auth-logo    { text-align:center; margin-bottom:2rem; }

/* ─── Overlay / Spinner ───────────────────────────────────── */
.overlay { position:fixed; inset:0; background:rgba(255,255,255,.85);
           backdrop-filter:blur(4px); display:flex; align-items:center;
           justify-content:center; z-index:999; }
.overlay-box { background:var(--bg); border:1.5px solid var(--border);
               border-radius:var(--radius-xl); padding:2.5rem;
               text-align:center; max-width:320px; box-shadow:var(--shadow-lg); }
.overlay-box p { color:var(--text2); font-size:.95rem; }
.spinner { width:36px; height:36px; border:3px solid var(--border2);
           border-top-color:var(--accent); border-radius:50%;
           animation:spin .75s linear infinite; margin:0 auto 1.25rem; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ─── Empty state ─────────────────────────────────────────── */
.empty-state { text-align:center; padding:4rem 1rem; color:var(--text3); }
.empty-state p { margin-bottom:1.25rem; font-size:1rem; }
.empty-icon  { font-size:3rem; margin-bottom:1rem; opacity:.4; }

/* ─── Photo quota ─────────────────────────────────────────── */
.photo-quota  { margin-bottom:1.5rem; }
.quota-bar    { background:var(--bg3); border-radius:var(--radius-full); height:6px; overflow:hidden; margin-bottom:.4rem; }
.quota-fill   { background:linear-gradient(90deg,var(--accent),var(--accent2)); height:100%;
                border-radius:var(--radius-full); transition:width .4s ease; }
.quota-label  { font-size:.78rem; color:var(--text3); font-weight:500; }

/* ─── Upload zone ─────────────────────────────────────────── */
.upload-zone  { border:2px dashed var(--border2); border-radius:var(--radius-lg);
                padding:3rem 2rem; text-align:center; cursor:pointer; transition:all .2s; }
.upload-zone:hover, .upload-zone.drag-over { border-color:var(--accent); background:var(--accent-light); }
.upload-icon  { font-size:2.5rem; margin-bottom:.75rem; }
.upload-title { font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:.25rem; }
.upload-sub   { color:var(--text3); font-size:.88rem; margin-bottom:.75rem; }
.upload-hint  { margin-top:.75rem; font-size:.75rem; color:var(--text3); }

/* ─── Photo grid ──────────────────────────────────────────── */
.photo-grid   { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; }
.photo-card   { display:flex; flex-direction:column; gap:.4rem; }
.photo-thumb-wrap { position:relative; border-radius:var(--radius); overflow:hidden;
                    aspect-ratio:1; background:var(--bg3); border:1.5px solid var(--border); }
.photo-thumb-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.photo-actions-overlay { position:absolute; inset:0; background:rgba(0,0,0,.5);
                         display:flex; align-items:center; justify-content:center;
                         gap:.4rem; opacity:0; transition:opacity .2s; }
.photo-thumb-wrap:hover .photo-actions-overlay { opacity:1; }
.photo-stats  { display:flex; justify-content:space-between; align-items:center; }
.compression-badge { font-size:.7rem; background:var(--success-light); color:var(--success);
                     padding:.1rem .4rem; border-radius:5px; font-weight:600; }

/* ─── Format selector ─────────────────────────────────────── */
.format-grid    { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:.6rem; }
.format-option  { display:flex; flex-direction:column; gap:.3rem; padding:.9rem;
                  background:var(--bg2); border:1.5px solid var(--border);
                  border-radius:var(--radius-lg); cursor:pointer; transition:all .15s; position:relative; }
.format-option input[type=checkbox] { position:absolute; top:.65rem; right:.65rem;
                  accent-color:var(--accent); width:15px; height:15px; }
.format-option.selected { border-color:var(--accent); background:var(--accent-light); }
.format-icon    { font-size:1.4rem; }
.format-label   { font-weight:600; font-size:.85rem; }
.format-desc    { font-size:.72rem; color:var(--text3); line-height:1.4; }

/* ─── Biz dashboard cards ─────────────────────────────────── */
.biz-cards          { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1rem; }
.biz-dashboard-card { display:flex; flex-direction:column; gap:1rem; }
.biz-dc-header      { display:flex; align-items:center; gap:.85rem; }
.biz-dc-logo        { width:48px; height:48px; border-radius:10px; object-fit:contain;
                      background:var(--bg2); border:1.5px solid var(--border); padding:4px; flex-shrink:0; }
.biz-dc-avatar      { width:48px; height:48px; border-radius:12px; flex-shrink:0;
                      background:var(--accent-light); border:2px solid var(--accent-mid);
                      display:flex; align-items:center; justify-content:center;
                      font-size:1.4rem; font-weight:800; color:var(--accent); font-family:var(--font-display); }
.biz-dc-info h3     { margin:0; font-size:1rem; }
.biz-dc-stats       { display:flex; gap:1.5rem; padding:.85rem 1rem;
                      background:var(--bg2); border-radius:var(--radius); border:1.5px solid var(--border); }
.biz-dc-stat        { display:flex; flex-direction:column; gap:.1rem; }
.biz-dc-num         { font-size:1.5rem; font-weight:800; color:var(--accent); line-height:1; font-family:var(--font-display); }
.biz-dc-label       { font-size:.7rem; color:var(--text3); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.biz-dc-invite      { display:flex; flex-direction:column; gap:.35rem; }
.invite-label       { font-size:.7rem; color:var(--text3); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
.invite-row         { display:flex; align-items:center; gap:.5rem; background:var(--bg2);
                      border-radius:var(--radius); padding:.4rem .7rem; border:1.5px solid var(--border); }
.invite-url         { font-size:.72rem; color:var(--accent2); word-break:break-all; flex:1; font-family:var(--font-mono); }
.biz-dc-actions     { display:flex; gap:.5rem; flex-wrap:wrap; padding-top:.25rem; border-top:1.5px solid var(--border); }
.biz-dc-actions .btn{ flex:1; }

/* ─── Duration slider ─────────────────────────────────────── */
.duration-ticks { display:flex; justify-content:space-between; font-size:.7rem;
                  color:var(--text3); margin-top:.3rem; padding:0 2px; font-weight:500; }
input[type=range] { -webkit-appearance:none; width:100%; height:5px;
                    background:var(--bg3); border-radius:var(--radius-full);
                    outline:none; margin-top:.4rem; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px;
                    background:var(--accent); border-radius:50%; cursor:pointer;
                    box-shadow:0 2px 6px rgba(225,29,116,.3); }
input[type=range]::-moz-range-thumb    { width:18px; height:18px;
                    background:var(--accent); border-radius:50%; cursor:pointer;
                    border:none; box-shadow:0 2px 6px rgba(225,29,116,.3); }

/* ─── Logo upload ─────────────────────────────────────────── */
.logo-upload-zone   { border:2px dashed var(--border2); border-radius:var(--radius);
                      padding:1.25rem; cursor:pointer; transition:all .15s; text-align:center; }
.logo-upload-zone:hover{ border-color:var(--accent); background:var(--accent-light); }
.logo-edit-row      { display:flex; gap:1.5rem; align-items:flex-start; }
.current-logo-wrap  { display:flex; flex-direction:column; align-items:center; gap:.4rem; min-width:100px; }

/* ─── Info box ────────────────────────────────────────────── */
.info-box { display:flex; gap:1rem; background:var(--lavender); border:1.5px solid var(--lavender2);
            border-radius:var(--radius-lg); padding:1rem 1.25rem; margin-bottom:1.25rem; }
.info-icon { color:var(--accent); font-size:1.1rem; flex-shrink:0; margin-top:.1rem; }

/* ─── New campaign wrap ───────────────────────────────────── */
.new-campaign-wrap { max-width:680px; margin:0 auto; }

/* ─── Join page ───────────────────────────────────────────── */
.join-wrap  { max-width:460px; margin:2rem auto; }
.join-card  { padding:2rem; }
.join-biz-header { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.join-avatar { width:52px; height:52px; border-radius:12px; flex-shrink:0;
               background:var(--accent-light); border:2px solid var(--accent-mid);
               display:flex; align-items:center; justify-content:center;
               font-size:1.5rem; font-weight:800; color:var(--accent); font-family:var(--font-display); }
.consent-box { display:flex; align-items:flex-start; gap:.75rem; background:var(--bg2);
               border:1.5px solid var(--border); border-radius:var(--radius); padding:.9rem 1rem; }
.consent-box input[type=checkbox] { width:18px; height:18px; min-width:18px; margin-top:2px;
               flex-shrink:0; accent-color:var(--accent); cursor:pointer; }
.consent-text { font-size:.88rem; color:var(--text2); line-height:1.55; cursor:pointer; }

/* ─── Toast notifikacije ──────────────────────────────────── */
#toast-container { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
                   display:flex; flex-direction:column; gap:.5rem; pointer-events:none; }
.toast { display:flex; align-items:center; gap:.65rem; padding:.8rem 1.1rem;
         border-radius:var(--radius-lg); background:var(--bg);
         border:1.5px solid var(--border); box-shadow:var(--shadow-lg);
         font-size:.875rem; color:var(--text); pointer-events:all;
         animation:toastIn .25s ease forwards; max-width:360px; line-height:1.4; }
.toast-success { border-left:3px solid var(--success); }
.toast-error   { border-left:3px solid var(--danger);  }
.toast-warning { border-left:3px solid var(--warning); }
.toast-info    { border-left:3px solid var(--info);    }
.toast-icon    { font-size:1rem; flex-shrink:0; }
.toast.hide    { animation:toastOut .25s ease forwards; }
@keyframes toastIn  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes toastOut { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(10px)} }

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    h1             { font-size: 1.5rem; }
    .main-content  { padding: 1.25rem 1rem; }
    .nav           { padding: .75rem 1rem; }
    .results-grid  { grid-template-columns: 1fr 1fr; }
    .content-grid  { grid-template-columns: 1fr; }
    .upgrade-banner{ flex-direction: column; text-align: center; }
    .page-header   { flex-direction: column; }
}

/* ─── Footer ──────────────────────────────────────────────── */
.footer { background:var(--bg2); border-top:1.5px solid var(--border);
          padding:1rem 2rem; display:flex; justify-content:space-between;
          font-size:.8rem; color:var(--text3); }

/* ─── Dark theme toggle ──────────────────────────────────── */
.nav-theme-btn {
    background: var(--bg3);
    border: 1px solid var(--border2);
    color: var(--text2);
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem; transition: all var(--transition);
    padding: 0;
}
.nav-theme-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.theme-icon-light { display: block; }
.theme-icon-dark  { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark  { display: block; }