/**
 * AGORA Protocol - Centralized Styles
 * Created: 2025-12-25 20:10 CET
 * Modified: 2026-01-04 19:00 CET
 * 
 * SPREMEMBE 2026-01-04 19:00:
 * - Sekcija 18: FEEDBACK FORM (zamenjal TRANSLATION NOTICE)
 * - Stili za feedback formo v dashboard notifications
 *
 * SPREMEMBE 2026-01-03 14:30:
 * - .address-value font zmanjšan iz 0.75rem na 0.65rem
 * - .address-value barva zelena (--accent) - lasten naslov
 * - Wallet address se ne preliva več v drugo vrstico
 * - #sendAddress (recipient) enak font (0.65rem), padding, border-radius kot .address-value
 * - #sendAddress ima rdečo barvo (--danger) - tuj naslov
 * - .address-label ima min-width: 50px za poravnavo Receive/Send
 * - Dodani .upgrade-options stili za radio izbiro tierja v dashboardu
 *
 * SPREMEMBE 2026-01-03 10:45:
 * - Dodani .text-input stili za ime/priimek text inpute
 * - Dodani .date-select-row in .date-select stili za datum dropdown
 * - .date-select-year za širši leto dropdown
 * - Uporabljeno na login.html za identity avtentikacijo
 *
 * SPREMEMBE 2026-01-02 15:00:
 * - Dodan .step-title stil za podnaslov korakov (npr. "1. Rules")
 * - Dodan .package-tooltip stil - stalen tekst na kartici, manjši siv font
 * - Dodani .countdown-ring stili za SVG progress na prepare.html
 *
 * SPREMEMBE 2026-01-01 11:00:
 * - Sekcija 12.1 Transactions: kompaktnejši enovrstični layout
 * - Manjši fonti, vse v eni vrstici
 * - Dodan .tx-contact za prikaz imena kontakta
 *
 * SPREMEMBE 2026-01-01 10:00:
 * - Dodana sekcija 12.2: Dashboard Solana Explorer Link
 * - Stili za .solana-row, .solana-link, .solana-address
 *
 * SPREMEMBE 2025-12-31 16:15:
 * - Dodana sekcija 12.1: Dashboard Transactions
 * - Stili za recent transactions seznam (.tx-item, .tx-amount, etc.)
 *
 * SPREMEMBE 2025-12-30 08:15:
 * - addon-input: brez spinner puščic, avtomatska širina
 *
 * SPREMEMBE 2025-12-30 08:00:
 * - Dodani stili za addon input sistem (.addon-input-wrap, .addon-price, .addon-input)
 * - Dodani stili za checkout vrstico (.checkout-row, .checkout-total, .btn-checkout)
 *
 * SPREMEMBE 2025-12-30 07:15:
 * - Dodan .btn-upgrade stil za Upgrade/Buy/Renew gumbe v Status kartici
 * - Posodobljen .account-row za 3 elemente (label, value, button)
 *
 * SPREMEMBE 2025-12-30 06:30:
 * - Dodan font-family: 'Play' v vse tooltip stile za konsistentnost
 *   (.has-tooltip::after, .info-tip::after, .rule-tooltip, .contacts-toggle)
 *
 * SPREMEMBE 2025-12-29 20:00:
 * - Dodan .has-tooltip stil za generične tooltipe na gumbih
 * - Uporablja data-tip atribut za vsebino
 *
 * SPREMEMBE 2025-12-29 19:30:
 * - Dodan .clickable stil za klikabilen balance label
 * - Dodana @keyframes pulse animacija za refresh feedback
 *
 * SPREMEMBE 2025-12-29 19:00:
 * - Dodan .settings-select stil za language dropdown v settings modalu
 *
 * SPREMEMBE 2025-12-29 18:25:
 * - Dodan generičen .hint razred za pojasnilne tekste
 * - Odstranjena sekcija 30.1 (.info-tip) - ni bila potrebna
 *
 * SPREMEMBE 2025-12-29 17:00:
 * - Dodan .btn bazni razred, .btn-full modifier, .btn-secondary.copied
 * - Dodani .input-group, .input-label, .input-hint stili
 * - Dodan .secret-key-display za prikaz 64-char ključa
 *
 * SPREMEMBE 2025-12-29 16:45:
 * - QR koda povečana: 200x200 → 300x300
 * - Dodan .qr-steps in .qr-step stil za navodila v korakih
 * - .btn-link: dodan reset za button elemente (background, border, padding, cursor, font-family)
 *
 * SPREMEMBE 2025-12-29 16:30:
 * - Dodan .close-corner stil za pozicioniranje gumba v zgornjem desnem kotu
 *
 * SPREMEMBE 2025-12-29 16:15:
 * - Dodan .buttons.right za poravnavo enega gumba desno
 * - .app-links: dodan justify-content: center
 *
 * SPREMEMBE 2025-12-29 15:45:
 * - Dodan .btn-next:disabled stil (opacity, brez animacije)
 * - Dodan .rules-consent stil za margin
 *
 * SPREMEMBE 2025-12-29 15:30:
 * - Dodani .rule-tooltip stili za hover razširjene opise na rules.html
 * - Mobile: klik za prikaz tooltipa (toggle .expanded class)
 *
 * SPREMEMBE 2025-12-29 14:50:
 * - POENOSTAVITEV: .btn-login, .demo-link, .lock-wallet-link zdaj uporabljajo
 *   skupen stil z enim selektorjem. Enak izgled, enak hover (zelena).
 * - Odstranjeni podvojeni stili za demo-link in lock-wallet-link
 * - .login-row: flex column z gap:8px
 *
 * SPREMEMBE 2025-12-29 12:00:
 * - VELIKO ČIŠČENJE: Premaknjeni vsi inline stili iz HTML datotek
 * - Dodane sekcije 25-30: Index, Error, Welcome, Prepare, Verify, Register
 * - POENOTENJE: Nova sekcija 25.5 - generični feedback komponente
 *   .feedback-icon, .feedback-title, .feedback-desc
 *   Modifierji: .lg, .danger, .success, .warning
 * 
 * SPREMEMBE 2025-12-29 10:30:
 * - Dodani demo page stili (sekcija 23): demo-banner, btn-demo-disabled, tx-*
 * - Dodan status-hint stil za verify.html (sekcija 22)
 * - Dodani rules page stili (sekcija 24): .rules, .rule, .rule-number, .rule-title, .rule-desc
 * 
 * SPREMEMBE 2025-12-28 20:15:
 * - Dodani stili za info tooltips (.info-tip) - sekcija 21
 * 
 * SPREMEMBE 2025-12-28 06:30:
 * - Dodani stili za Contacts dropdown (.contacts-*, .contact-*)
 * 
 * SPREMEMBE 2025-12-28 03:30:
 * - Dodani send-error stili (inline napaka pri pošiljanju)
 * 
 * Skupni stili za vse AGORA strani.
 * 
 * STRUKTURA:
 * 1. CSS Spremenljivke
 * 2. Reset
 * 3. Body & Noise Overlay
 * 4. Layout (.main, .wrapper, .container)
 * 5. Typography (.title, .tagline, .header)
 * 6. Cards
 * 7. Buttons
 * 8. Inputs
 * 9. Step Indicator
 * 10. Forms (divider, char-counter, error)
 * 11. Components (toast, modal, spinner)
 * 12. Dashboard - Wallet
 * 13. Dashboard - Proposals
 * 14. Dashboard - Voting
 * 15. Dashboard - Account
 * 16. Dashboard - Notifications
 * 17. Dashboard - Settings
 * 18. Login Specific
 * 19. Scrollbar
 * 20. Mobile
 * 21. Info Tooltips
 * 22. Verify Page (status-hint)
 * 23. Demo Page
 * 24. Rules Page
 * 25. Index Page
 * 25.5 Feedback Components (GENERIČNI)
 * 26. Error Page
 * 27. Welcome Page
 * 28. Prepare Page
 * 29. Verify Page (full)
 * 30. Register Page
 * 
 * UPORABA:
 * - index.html, login.html, dashboard.html, demo.html, prepare.html, error.html, etc.
 * - <link rel="stylesheet" href="styles.css">
 */

/* ================================================================
   1. CSS SPREMENLJIVKE
   ================================================================ */
:root {
    --bg-primary: #0a0a0b;
    --bg-secondary: #111113;
    --bg-tertiary: #1a1a1d;
    --text: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --accent: #22c55e;
    --accent-dim: #16a34a;
    --accent-glow: rgba(34, 197, 94, 0.3);
    --border: #27272a;
    --danger: #ef4444;
    --danger-glow: rgba(239, 68, 68, 0.3);
    --warning: #f59e0b;
}

/* ================================================================
   2. RESET
   ================================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

/* ================================================================
   3. BODY & NOISE OVERLAY
   ================================================================ */
body {
    font-family: 'Play', sans-serif;
    background: var(--bg-primary);
    color: var(--text);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    padding: 16px;
    padding-top: 24px;
    overflow-y: auto;
}

/* Dashboard ima drugačen layout */
body.dashboard-body {
    display: block;
    padding-bottom: 80px;
}

/* Login ima vertikalno centriran layout */
body.centered-body {
    align-items: center;
    overflow-x: hidden;
}

/* Noise overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 1000;
}

/* ================================================================
   4. LAYOUT
   ================================================================ */

/* Centered content wrapper (index, login, prepare, error) */
.main {
    text-align: center;
    width: 100%;
    max-width: 500px;
}

/* Card-like wrapper */
.wrapper {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    position: relative;
    width: 100%;
}

/* Dashboard container */
.container {
    max-width: 500px;
    margin: 0 auto;
}

/* ================================================================
   5. TYPOGRAPHY
   ================================================================ */

/* Main title: agora<span class="ubi">ubi</span>.org */
.title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
}

.title .ubi {
    color: var(--accent);
}

/* Smaller title variant */
.title-sm {
    font-size: 1.5rem;
    margin-bottom: 16px;
}

/* Dashboard header */
.header {
    text-align: center;
    margin-bottom: 20px;
}

.header-title {
    font-size: 1.3rem;
    font-weight: 700;
}

.header-title .ubi {
    color: var(--accent);
}

/* Tagline under title */
.tagline {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

/* Hint text - manjši pojasnilni tekst, uporaben povsod */
.hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0 0 1rem 0;
}

/* Section blocks (login page) */
.section {
    margin-bottom: 1.5rem;
}

.section:last-child {
    margin-bottom: 0;
}

.section-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.section-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--text);
}

.section-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* ================================================================
   Info Box
   ================================================================
   Informativni box za dodatne informacije (npr. na logout strani).
   ================================================================ */
.info-box {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.info-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ================================================================
   6. CARDS
   ================================================================ */
.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.card-title {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.card-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: -8px;
    margin-bottom: 12px;
}

/* Klikabilen element z hover efektom */
.clickable {
    cursor: pointer;
    transition: color 0.2s;
}

.clickable:hover {
    color: var(--accent);
}

/* Animacija vrtenja (za refresh feedback na balance-value) */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.refreshing {
    animation: pulse 0.5s ease-in-out;
}

/* ================================================================
   7. BUTTONS
   ================================================================ */

/* Bazni gumb stil - uporabi skupaj z btn-primary ali btn-secondary */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Play', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Full width modifier */
.btn-full {
    width: 100%;
}

/* Primary action button (green) */
.btn-primary {
    padding: 14px 20px;
    font-family: 'Play', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: var(--bg-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover:not(:disabled) {
    background: var(--accent-dim);
    box-shadow: 0 0 20px var(--accent-glow);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Secondary button (outline) */
.btn-secondary {
    padding: 10px 20px;
    font-family: 'Play', sans-serif;
    font-size: 0.85rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Copied state za copy gumbe */
.btn-secondary.copied {
    border-color: var(--accent);
    color: var(--accent);
}

/* Circle buttons (navigation) */
.btn-circle {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.btn-close {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 1.2rem;
}

.btn-close:hover {
    border-color: var(--text-muted);
    color: var(--text);
}

/* Close button v zgornjem desnem kotu (verify.html) */
.close-corner {
    position: absolute;
    top: 16px;
    right: 16px;
}

.btn-next {
    background: var(--bg-tertiary);
    border: 2px solid var(--accent);
    animation: pulse 2s infinite;
}

.btn-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    animation: none;
    border-color: var(--border);
}

.btn-next:disabled svg {
    stroke: var(--text-muted);
}

.btn-next:hover:not(:disabled) {
    background: var(--accent);
    transform: scale(1.1);
    box-shadow: 0 0 20px var(--accent-glow);
}

.btn-next:hover:not(:disabled) svg {
    stroke: var(--bg-primary);
}

.btn-next svg {
    width: 24px;
    height: 24px;
    stroke: var(--accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: stroke 0.25s ease;
}

/* Icon buttons (small square) */
.btn-icon {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s;
}

.btn-icon:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Login button (full width outline) */
/* Skupen stil za vse gumbe v login-row */
.btn-login,
.demo-link,
.lock-wallet-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 6px;
    padding: 12px 16px;
    font-family: 'Play', sans-serif;
    font-size: 0.9rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-login:hover,
.demo-link:hover,
.lock-wallet-link:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Claim button */
.btn-claim {
    padding: 12px 24px;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: var(--bg-primary);
    font-family: 'Play', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

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

/* Send button (small arrow) */
.btn-send {
    padding: 8px 12px;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    color: var(--bg-primary);
    font-family: 'Play', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    --hold-progress: 0;
}

.btn-send::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(var(--hold-progress) * 100%);
    background: rgba(0, 0, 0, 0.3);
    transition: width 0.05s linear;
    pointer-events: none;
}

.btn-send.holding {
    background: #f87171;
}

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

.btn-send.holding:hover {
    background: #f87171;
}

/* Submit button (proposals) - s hold funkcionalnostjo */
.btn-submit {
    padding: 12px 16px;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: var(--bg-primary);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    --hold-progress: 0;
}

.btn-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(var(--hold-progress) * 100%);
    background: rgba(0, 0, 0, 0.3);
    transition: width 0.05s linear;
    pointer-events: none;
}

.btn-submit.holding {
    background: #f87171;
}

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

.btn-submit.holding:hover {
    background: #f87171;
}

/* Unlock button (login) */
.btn-unlock {
    width: 100%;
    padding: 14px 20px;
    font-family: 'Play', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: var(--bg-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.btn-unlock:hover:not(:disabled) {
    background: var(--accent-dim);
    box-shadow: 0 0 20px var(--accent-glow);
}

.btn-unlock:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ================================================================
   Danger variant (za logout in podobne akcije)
   ================================================================ */
.btn-unlock.btn-danger {
    background: var(--danger);
}

.btn-unlock.btn-danger:hover:not(:disabled) {
    background: #dc2626;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.btn-unlock svg {
    width: 20px;
    height: 20px;
    stroke: var(--bg-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Reverify button */
.btn-reverify {
    padding: 10px 20px;
    font-family: 'Play', sans-serif;
    font-size: 0.85rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reverify:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Back button (text only) */
.btn-back {
    font-family: 'Play', sans-serif;
    font-size: 0.85rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 8px 16px;
}

.btn-back:hover {
    color: var(--text);
}

/* Navigation buttons row */
.buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Ko je samo en gumb, poravnaj desno */
.buttons.right {
    justify-content: flex-end;
}

.back-row {
    margin-top: 16px;
}

/* Pulse animation */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--accent-glow);
    }
    50% {
        box-shadow: 0 0 0 8px transparent;
    }
}

/* ================================================================
   8. INPUTS
   ================================================================ */

/* Generic text input */
.input {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Play', sans-serif;
    font-size: 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
}

.input:focus {
    border-color: var(--accent);
}

.input::placeholder {
    color: var(--text-muted);
}

.input.error {
    border-color: var(--danger);
}

/* Password input (textarea) */
.password-wrapper {
    position: relative;
}

.password-input {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Play', monospace;
    font-size: 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
    resize: none;
    height: 72px;
    line-height: 1.5;
}

.password-input::placeholder {
    color: var(--text-muted);
    font-family: 'Play', sans-serif;
}

.password-input:focus {
    border-color: var(--accent);
}

.password-input.error {
    border-color: var(--danger);
}

/* Send input (dashboard) */
.send-input {
    flex: 1;
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text);
    background: var(--bg-tertiary);
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
}

/* Recipient address input - enaka velikost in širina kot wallet address output */
#sendAddress {
    flex: 1;
    font-family: monospace;
    font-size: 0.65rem;  /* Enako kot .address-value */
    color: var(--danger);  /* Rdeča za razlikovanje od lastnega naslova */
    background: var(--bg-tertiary);
    padding: 8px 10px;  /* Enako kot .address-value */
    border: 1px solid var(--border);
    border-radius: 6px;  /* Enako kot .address-value */
    outline: none;
}

#sendAddress:focus {
    border-color: var(--accent);
}

#sendAddress::placeholder {
    color: var(--text-muted);  /* Placeholder ostane siv */
}

.send-input[type="number"],
#sendAmount {
    text-align: right;
    -moz-appearance: textfield !important; /* Firefox: skrij spinner */
}

/* Chrome/Safari/Edge: skrij spinner puščice */
.send-input[type="number"]::-webkit-inner-spin-button,
.send-input[type="number"]::-webkit-outer-spin-button,
#sendAmount::-webkit-inner-spin-button,
#sendAmount::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0;
    display: none !important;
}

.send-input:focus {
    border-color: var(--accent);
}

.send-input::placeholder {
    color: var(--text-muted);
}

/* Send input error state */
.send-input.error {
    border-color: var(--danger);
    background: rgba(255, 77, 77, 0.1);
}

/* Send error message (inline) */
.send-error {
    padding: 4px 0;
    font-size: 0.75rem;
    color: var(--danger);
    text-align: center;
}

/* ================================================================
   CONTACTS DROPDOWN
   ================================================================ */

.contacts-dropdown {
    margin: 8px 0;
}

.contacts-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-family: 'Play', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

.contacts-toggle:hover {
    background: var(--bg-secondary);
    color: var(--text);
}

.contacts-arrow {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.contacts-arrow.open {
    transform: rotate(180deg);
}

.contacts-list {
    margin-top: 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.contact-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s ease;
}

.contact-item:hover {
    background: var(--bg-secondary);
}

.contact-item:last-of-type {
    border-bottom: none;
}

.contact-label {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contact-label-input {
    flex: 1;
    font-size: 0.85rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--accent);
    color: var(--text);
    outline: none;
    padding: 2px 0;
}

.contact-address {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-family: monospace;
    margin-left: 8px;
}

.contact-delete {
    margin-left: 8px;
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.contact-delete:hover {
    color: var(--danger);
    background: rgba(255, 77, 77, 0.1);
}

/* Progress ring za 3s hold */
.contact-delete::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--danger);
    opacity: 0.3;
    transform: scaleX(0);
    transform-origin: left;
    transition: none;
}

.contact-delete.holding::after {
    transform: scaleX(1);
    transition: transform 3s linear;
}

.contacts-empty {
    padding: 12px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.contacts-export {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.contacts-export:hover {
    background: var(--bg-secondary);
    color: var(--accent);
}

/* Amount unit label (AGR) */
.amount-unit {
    color: var(--accent);
    font-weight: 700;
    margin-right: 8px;
}

/* Proposal input */
.proposal-input-wrapper {
    display: flex;
    gap: 8px;
}

.proposal-input {
    flex: 1;
    padding: 12px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: 'Play', sans-serif;
    font-size: 0.9rem;
    outline: none;
}

.proposal-input:focus {
    border-color: var(--accent);
}

.proposal-input::placeholder {
    color: var(--text-muted);
}

.proposal-counter {
    text-align: right;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Region search input */
.region-search {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-family: 'Play', sans-serif;
    font-size: 0.85rem;
    outline: none;
}

.region-search::placeholder {
    color: var(--text-muted);
}

/* ================================================================
   9. STEP INDICATOR
   ================================================================ */
.steps {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.step {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.step.completed {
    background: var(--accent);
    color: var(--bg-primary);
}

.step.active {
    background: var(--accent);
    color: var(--bg-primary);
    box-shadow: 0 0 12px var(--accent-glow);
}

.step.upcoming {
    background: var(--bg-tertiary);
    border: 2px solid var(--border);
    color: var(--text-muted);
}

.step-line {
    width: 24px;
    height: 2px;
    background: var(--border);
}

.step-line.completed {
    background: var(--accent);
}

/* Step title - podnaslov ki prikazuje trenutni korak */
.step-title {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* ================================================================
   10. FORMS
   ================================================================ */

/* Input group - label + input + hint */
.input-group {
    margin-bottom: 16px;
}

.input-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.input-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* ============================================================
   TEXT INPUT - za ime, priimek in druge tekst inpute
   ============================================================ */
.text-input {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Play', sans-serif;
    font-size: 0.9rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.text-input::placeholder {
    color: var(--text-muted);
}

.text-input:focus {
    border-color: var(--accent);
}

.text-input.error {
    border-color: var(--danger);
}

/* ============================================================
   DATE SELECT ROW - 3 dropdowni za dan, mesec, leto
   ============================================================ */
.date-select-row {
    display: flex;
    gap: 8px;
}

.date-select {
    flex: 1;
    padding: 12px 12px;
    font-family: 'Play', sans-serif;
    font-size: 0.9rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Puščica ikona */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.date-select:focus {
    border-color: var(--accent);
}

/* Leto dropdown je širši (4 cifre) */
.date-select-year {
    flex: 1.3;
}

/* Dropdown opcije */
.date-select option {
    background: var(--bg-secondary);
    color: var(--text);
    padding: 8px;
}

/* Secret Key Display - monospace box za 64-char ključ */
.secret-key-display {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--accent);
    word-break: break-all;
    line-height: 1.6;
    user-select: all;
}

/* Divider with text */
.divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.divider-text {
    padding: 0 12px;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Character counter */
.char-counter {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 0.7rem;
    color: var(--text-muted);
    pointer-events: none;
}

.char-counter.valid {
    color: var(--accent);
}

.char-counter.error {
    color: var(--danger);
}

/* Error text */
.error-text {
    font-size: 0.75rem;
    color: var(--danger);
    margin-top: 8px;
    text-align: left;
    display: none;
}

.error-text.visible {
    display: block;
}

/* Reverify section */
.reverify-section {
    text-align: center;
}

.reverify-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.reverify-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* ================================================================
   11. COMPONENTS
   ================================================================ */

/* Toast notification */
.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 0.85rem;
    color: var(--text);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 2000;
    max-width: 90%;
    text-align: center;
    pointer-events: none;
}

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

.toast.error {
    border-color: var(--danger);
    color: var(--danger);
}

.toast.success {
    border-color: var(--accent);
    color: var(--accent);
}

/* Login page toast (centered bottom) */
body.centered-body .toast {
    bottom: 24px;
}

/* Spinner */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--bg-primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: none;
}

.btn-unlock.loading .spinner {
    display: block;
}

.btn-unlock.loading .btn-text,
.btn-unlock.loading svg {
    display: none;
}

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

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    align-items: flex-end;
    justify-content: center;
    z-index: 2000;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    padding: 20px;
    width: 100%;
    max-width: 500px;
}

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

.modal-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hide reCAPTCHA badge */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* ================================================================
   12. DASHBOARD - WALLET
   ================================================================ */
.balance-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.balance-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.balance-value {
    font-size: 1.8rem;
    font-weight: 700;
}

.balance-value span {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 400;
}

/* ----------------------------------------------------------------
   12.2 DASHBOARD - SOLANA EXPLORER LINK
   ----------------------------------------------------------------
   "Don't trust, verify" - link na Solana Explorer za neodvisno
   preverjanje stanja na blockchainu.
   
   Dizajn:
   - Majhen, diskreten element pod balance
   - Zelena barva (accent) za blockchain/crypto občutek
   - Hover učinek za jasno klikabilnost
   - Puščica ↗ nakazuje zunanji link
   ---------------------------------------------------------------- */
.solana-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 4px 0;
}

.solana-label {
    /* Majhen, diskreten label */
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.solana-link {
    /* Klikabilen link z blockchain vizualnim stilom */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: monospace;
    font-size: 0.7rem;
    color: var(--accent);
    text-decoration: none;
    padding: 3px 8px;
    background: rgba(74, 222, 128, 0.08);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.solana-link:hover {
    /* Hover: bolj vidna barva, temnejše ozadje */
    background: rgba(74, 222, 128, 0.18);
    color: #6ee7a0;
}

.solana-address {
    /* Monospace za konsistentno širino znakov */
}

.solana-icon {
    /* Puščica za zunanji link */
    font-size: 0.6rem;
    opacity: 0.7;
}

.claim-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.claim-available {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
}

.claim-available span {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.claim-timer {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.address-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.address-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    min-width: 50px;  /* Fiksna širina za poravnavo receive/send */
}

.address-value {
    flex: 1;
    font-family: monospace;
    font-size: 0.65rem;  /* Zmanjšano iz 0.75rem - wallet address se ne preliva več */
    color: var(--accent);  /* Zelena - lasten naslov */
    background: var(--bg-tertiary);
    padding: 8px 10px;
    border-radius: 6px;
    word-break: break-all;
}

.send-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* ----------------------------------------------------------------
   12.1 DASHBOARD - TRANSACTIONS
   ----------------------------------------------------------------
   Kompakten enovrstični prikaz zadnjih transakcij.
   Format: "Sent 4Zw3...xF9p · 2h ago     +100 AGR"
   Če je naslov v kontaktih, prikaži ime pod naslovom.
   ---------------------------------------------------------------- */
.transactions-section {
    margin: 0.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.5rem;
}

.transactions-header {
    margin-bottom: 0.35rem;
}

.transactions-title {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.transactions-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 150px;
    overflow-y: auto;
}

/* Posamezna transakcija - ena vrstica */
.tx-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    font-size: 0.7rem;
}

.tx-item:last-child {
    border-bottom: none;
}

/* Levi del: type + address + time */
.tx-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

/* Glavna vrstica: "Sent 4Zw3...xF9p · 2h ago" */
.tx-main {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.68rem;
}

.tx-type {
    color: rgba(255, 255, 255, 0.7);
}

.tx-address {
    font-family: monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.4);
}

.tx-separator {
    color: rgba(255, 255, 255, 0.2);
}

.tx-time {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.6rem;
}

/* Ime kontakta - isti slog kot naslov, inline */
.tx-contact {
    font-family: monospace;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Desni del: amount */
.tx-amount {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 0.5rem;
}

.tx-amount.positive {
    color: #4ade80;
}

.tx-amount.negative {
    color: #f87171;
}

.transactions-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.65rem;
    padding: 0.5rem 0;
}

/* ================================================================
   13. DASHBOARD - PROPOSALS
   ================================================================ */
.proposals-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.proposals-count {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
}

.proposals-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.proposals-locked {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.proposals-locked-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

/* Region selector dropdown */
.region-selector {
    position: relative;
    margin-bottom: 8px;
}

.region-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.region-selected:hover {
    border-color: var(--accent);
}

.region-flag {
    font-size: 1.1rem;
}

.region-name {
    flex: 1;
    font-size: 0.9rem;
}

.region-arrow {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.region-selector.open .region-arrow {
    transform: rotate(180deg);
}

.region-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    z-index: 100;
    overflow: hidden;
}

.region-selector.open .region-dropdown {
    display: block;
}

.region-list {
    max-height: 200px;
    overflow-y: auto;
}

.region-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.region-item:hover {
    background: var(--bg-tertiary);
}

.region-item .flag {
    font-size: 1.1rem;
}

.region-item .name {
    font-size: 0.85rem;
}

/* ================================================================
   14. DASHBOARD - VOTING
   ================================================================ */
.vote-filter {
    position: relative;
    margin-bottom: 12px;
}

.vote-filter-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.vote-filter-selected:hover {
    border-color: var(--accent);
}

.vote-filter.open .region-arrow {
    transform: rotate(180deg);
}

.vote-filter.open .region-dropdown {
    display: block;
}

.vote-item {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}

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

.vote-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.vote-category {
    font-size: 0.65rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vote-region {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.vote-text {
    font-size: 0.9rem;
    margin-bottom: 10px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.vote-buttons {
    display: flex;
    gap: 8px;
}

.btn-vote {
    flex: 1;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

/* Hold-to-confirm vote buttons */
.btn-vote-hold {
    flex: 1;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text);
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    --hold-progress: 0;
}

.btn-vote-hold::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(var(--hold-progress) * 100%);
    transition: width 0.05s linear;
    pointer-events: none;
}

.btn-vote-hold.yes::before {
    background: rgba(34, 197, 94, 0.3);
}

.btn-vote-hold.no::before {
    background: rgba(239, 68, 68, 0.3);
}

.btn-vote-hold.yes {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-vote-hold.no {
    border-color: var(--danger);
    color: var(--danger);
}

.btn-vote-hold.yes:hover {
    background: rgba(34, 197, 94, 0.1);
}

.btn-vote-hold.no:hover {
    background: rgba(239, 68, 68, 0.1);
}

.btn-vote-hold.holding {
    transform: scale(0.98);
}

.btn-vote-hold.yes.holding {
    background: rgba(34, 197, 94, 0.2);
}

.btn-vote-hold.no.holding {
    background: rgba(239, 68, 68, 0.2);
}

/* Vote card context (zgoraj) */
.vote-context {
    font-size: 0.9rem;
    margin-bottom: 16px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: center;
    color: var(--text);
}

/* Vote choices container */
.vote-choices {
    display: flex;
    gap: 16px;
}

/* Posamezna izbira (label + gumb) */
.vote-choice {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Label nad gumbom */
.vote-choice-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    min-height: 2.6em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vote-choice.yes .vote-choice-label {
    color: var(--accent);
}

.vote-choice.no .vote-choice-label {
    color: var(--danger);
}

.btn-vote.yes:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(34, 197, 94, 0.1);
}

.btn-vote.no:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
}

.btn-vote.voting,
.btn-vote:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-tertiary);
}

.btn-vote.voting:hover,
.btn-vote:disabled:hover {
    border-color: var(--border);
    color: var(--text);
    background: var(--bg-tertiary);
}

.btn-vote.voted {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-vote.selected.yes {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--bg-primary);
}

.btn-vote.selected.no {
    border-color: var(--danger);
    background: var(--danger);
    color: var(--bg-primary);
}

.vote-results {
    margin-top: 8px;
}

.vote-bar {
    height: 8px;
    background: var(--danger);
    border-radius: 4px;
    overflow: hidden;
}

.vote-bar-yes {
    height: 100%;
    background: var(--accent);
    border-radius: 4px 0 0 4px;
}

.vote-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.75rem;
}

.stat-yes {
    color: var(--accent);
}

.stat-no {
    color: var(--danger);
}

.vote-my-choice {
    margin-top: 10px;
    font-size: 1.1rem;
    text-align: center;
}

.vote-my-choice .yes {
    color: var(--accent);
}

.vote-my-choice .no {
    color: var(--danger);
}

.empty-state {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ================================================================
   15. DASHBOARD - ACCOUNT
   ================================================================ */
.account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    gap: 8px;
}

.account-row:last-of-type {
    border-bottom: none;
}

.account-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.account-value {
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 500;
    flex: 1;
    text-align: right;
}

/* Upgrade/Buy gumb v account row - diskreten stil */
.btn-upgrade {
    padding: 4px 8px;
    font-size: 0.65rem;
    font-family: 'Play', sans-serif;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.btn-upgrade:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--bg);
}

.btn-upgrade:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Skrij upgrade gumb če ni potreben */
.btn-upgrade.hidden {
    display: none;
}

/* ================================================================
   UPGRADE OPTIONS - Radio izbira tierja
   ================================================================ */

.upgrade-options {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.upgrade-option {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.65rem;
}

.upgrade-option:hover {
    border-color: var(--accent);
}

/* Ko je radio izbran */
.upgrade-option:has(input:checked) {
    border-color: var(--accent);
    background: rgba(34, 197, 94, 0.1);
}

.upgrade-option input[type="radio"] {
    width: 12px;
    height: 12px;
    accent-color: var(--accent);
    margin: 0;
}

.upgrade-label {
    color: var(--text);
    font-weight: 500;
}

.upgrade-price {
    color: var(--accent);
    font-weight: 700;
}

/* Skrij upgrade row če ni potreben */
#upgradeRow.hidden {
    display: none;
}

/* Skrij posamezno opcijo */
.upgrade-option.hidden {
    display: none;
}

/* Addon input wrapper - cena + input */
.addon-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.addon-price {
    font-size: 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.addon-input {
    width: 45px;
    min-width: 45px;
    max-width: 70px;
    padding: 4px 6px;
    font-size: 0.75rem;
    font-family: 'Play', sans-serif;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    text-align: center;
    /* Skrij spinner puščice */
    -moz-appearance: textfield;
}

/* Webkit (Chrome, Safari) spinner removal */
.addon-input::-webkit-outer-spin-button,
.addon-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.addon-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Checkout summary row */
.checkout-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    margin-bottom: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    border: 1px solid var(--accent);
}

.checkout-total {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent);
}

.btn-checkout {
    padding: 8px 16px;
    font-size: 0.8rem;
    font-family: 'Play', sans-serif;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    color: var(--bg);
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.btn-checkout:hover {
    background: var(--accent-hover);
    transform: scale(1.02);
}

.btn-checkout:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    /* Omogoči hover za tooltip */
    pointer-events: auto;
}

.account-value.pro {
    color: var(--accent);
}

.account-value.warning {
    color: var(--warning);
}

.account-value.danger {
    color: var(--danger);
}

.verification-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    margin-top: 12px;
    overflow: hidden;
}

.verification-progress {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.3s;
}

.verification-progress.warning {
    background: var(--warning);
}

.verification-progress.danger {
    background: var(--danger);
}

.verification-status {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 8px;
    text-align: center;
}

/* ================================================================
   16. DASHBOARD - NOTIFICATIONS
   ================================================================ */
.notification-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.notification-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.notification-item:first-child {
    padding-top: 0;
}

.notification-icon {
    font-size: 1.2rem;
}

.notification-text {
    font-size: 0.85rem;
    line-height: 1.4;
}

.notification-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ================================================================
   17. DASHBOARD - SETTINGS
   ================================================================ */
.settings-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 100;
}

.settings-fab:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.settings-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.settings-item:hover {
    border-color: var(--text-muted);
}

.settings-item.danger:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.settings-item-icon {
    font-size: 1.2rem;
}

.settings-item-text {
    flex: 1;
    font-size: 0.9rem;
}

/* Settings dropdown (npr. language selector) */
.settings-select {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.settings-select:hover,
.settings-select:focus {
    border-color: var(--accent);
}

.settings-select option {
    background: var(--bg-secondary);
    color: var(--text);
}

/* ================================================================
   18. LOGIN SPECIFIC
   ================================================================ */
/* Min/max width for login wrapper */
body.centered-body .wrapper {
    min-width: 360px;
    max-width: 440px;
}

/* ================================================================
   19. SCROLLBAR
   ================================================================ */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ================================================================
   21. LOCK WALLET
   ================================================================ */

/* Lock wallet ikona */
.lock-wallet-link .icon {
    font-size: 1rem;
}

/* Lock wallet sekcija na dashboard settings */
.settings-item.danger {
    color: var(--danger);
}

.settings-item.danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Lock page specifični stili */
.lock-warning-box {
    /* Navaden wrapper namesto rdečega */
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.lock-warning-header {
    /* Ikona in naslov na sredino */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.lock-warning-icon {
    font-size: 1.5rem;
}

.lock-warning-title {
    /* Navadna barva namesto rdeče */
    font-weight: 700;
    color: var(--text);
}

.lock-warning-text {
    /* Navadna barva namesto rdeče */
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ================================================================
   Back Link (btn-link)
   ================================================================
   Navaden tekstovni link za navigacijo nazaj.
   Uporablja se na lock.html in drugih straneh.
   Deluje tako za <a> kot za <button> elemente.
   ================================================================ */
.btn-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
    /* Reset za button elemente */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.btn-link:hover {
    color: var(--text);
}

/* Lock confirmation checkbox */
.lock-confirm-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 20px;
}

.lock-confirm-container input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--danger);
    cursor: pointer;
}

.lock-confirm-container label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.5;
}

/* Lock button */
.btn-lock {
    width: 100%;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-family: 'Play', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: not-allowed;
    transition: all 0.2s;
}

.btn-lock.enabled {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
    cursor: pointer;
}

.btn-lock.enabled:hover {
    background: #dc2626;
    box-shadow: 0 0 20px var(--danger-glow);
}

/* Lock success page */
.lock-success-icon {
    font-size: 4rem;
    margin-bottom: 16px;
}

.lock-success-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 12px;
}

.lock-success-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
}

.lock-recovery-info {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.lock-recovery-info p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ================================================================
   21. LOCK TYPE SELECTION
   ================================================================ 
   Radio buttons za izbiro tipa zaklepanja:
   - password_unlock: Geslo lahko odklene
   - unconditional: Potrebna RECOVERY
   ================================================================ */

/* Container za vse opcije */
.lock-type-container {
    margin: 20px 0;
    text-align: left;
}

/* Container za izbiro tipa zaklepanja */
.lock-type-selection {
    margin-bottom: 20px;
}

/* Naslov nad opcijami */
.lock-type-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

/* Posamezna opcija */
.lock-type-option {
    display: block;
    cursor: pointer;
    margin-bottom: 12px;
}

/* Skrij privzeti radio button */
.lock-type-option input[type="radio"] {
    display: none;
}

/* Vsebina opcije */
.lock-type-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border);
    border-radius: 12px;
    transition: all 0.2s;
}

/* Hover efekt */
.lock-type-option:hover .lock-type-content {
    border-color: var(--text-muted);
    background: var(--bg-secondary);
}

/* Izbrana opcija */
.lock-type-option input[type="radio"]:checked + .lock-type-content {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
}

/* Ikona (emoji) */
.lock-type-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Info del (ime + opis) */
.lock-type-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Ime tipa */
.lock-type-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

/* Opis tipa */
.lock-type-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ================================================================
   22. MOBILE
   ================================================================ */
@media (max-width: 480px) {
    body {
        padding: 12px;
        padding-top: 16px;
    }
    
    body.dashboard-body {
        padding-bottom: 80px;
    }
    
    .wrapper {
        padding: 20px 16px;
    }
    
    .title {
        font-size: 1.75rem;
    }
    
    .title-sm {
        font-size: 1.25rem;
    }
    
    body.centered-body .wrapper {
        min-width: unset;
        max-width: unset;
    }
}

/* ================================================================
   21. INFO TOOLTIPS
   ================================================================
   Majhne (?) ikone za pojasnila funkcionalnosti.
   Uporabljeno na demo.html in potencialno drugje.
   ================================================================ */
.info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    font-size: 10px;
    font-weight: 600;
    cursor: help;
    margin-left: 6px;
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
}

.info-tip:hover {
    background: rgba(99, 102, 241, 0.25);
    transform: scale(1.1);
}

/* Tooltip popup */
.info-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e1e2e;
    color: #e0e0e0;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: 'Play', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    width: max-content;
    max-width: 240px;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    text-align: left;
    text-transform: none;   /* Prepreči dedovanje iz parent (.card-title) */
    letter-spacing: normal; /* Prepreči dedovanje iz parent (.card-title) */
}

/* Tooltip arrow */
.info-tip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1e1e2e;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1001;
}

.info-tip:hover::after,
.info-tip:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Mobile - tooltip pozicija */
@media (max-width: 400px) {
    .info-tip::after {
        left: auto;
        right: -10px;
        transform: none;
        max-width: 200px;
    }
    .info-tip::before {
        left: auto;
        right: 4px;
        transform: none;
    }
}

/* --------------------------------------------------------
   Generični tooltip za gumbe (.has-tooltip)
   Uporablja data-tip atribut za vsebino
   -------------------------------------------------------- */

.has-tooltip {
    position: relative;
    cursor: pointer;
}

/* Tooltip popup - prikaže se nad gumbom */
.has-tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e1e2e;
    color: #e0e0e0;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: 'Play', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    width: max-content;
    max-width: 220px;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    text-align: left;
    pointer-events: none;
}

/* Tooltip arrow */
.has-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1e1e2e;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1001;
    pointer-events: none;
}

/* Hover prikaz */
.has-tooltip:hover::after,
.has-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Mobile prilagoditev */
@media (max-width: 400px) {
    .has-tooltip::after {
        left: auto;
        right: 0;
        transform: none;
        max-width: 180px;
    }
    .has-tooltip::before {
        left: auto;
        right: 12px;
        transform: none;
    }
}

/* ================================================================
   22. VERIFY PAGE - Status Hint
   ================================================================
   Poudarjen hint za uporabnika da se vrne na tab.
   Uporabljen na verify.html med čakanjem na verifikacijo.
   ================================================================ */
.status-hint {
    font-size: 0.85rem;
    color: var(--accent);
    background: rgba(99, 102, 241, 0.1);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: 500;
    text-align: center;
}

/* ================================================================
   23. DEMO PAGE
   ================================================================
   Stili za demo.html - banner, shimmer efekt, transakcije.
   ================================================================ */

/* Demo banner na vrhu */
.demo-banner {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    text-align: center;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.demo-banner a {
    color: white;
    text-decoration: underline;
    font-weight: 600;
}

/* Disabled look za demo gumbe - shimmer efekt */
.btn-demo-disabled {
    position: relative;
    overflow: hidden;
}

.btn-demo-disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    100% { left: 100%; }
}

/* Transaction history */
.tx-list {
    margin-top: 12px;
}

.tx-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.tx-item:last-child {
    border-bottom: none;
}

.tx-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-right: 12px;
}

.tx-icon.receive { background: rgba(34, 197, 94, 0.15); }
.tx-icon.send { background: rgba(239, 68, 68, 0.15); }
.tx-icon.claim { background: rgba(99, 102, 241, 0.15); }

.tx-details {
    flex: 1;
}

/* tx-type, tx-address, tx-amount, tx-time so definirani v sekciji 12.1 */

/* ================================================================
   24. RULES PAGE
   ================================================================
   Stili za rules.html - seznam pravil.
   ================================================================ */

.rules {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.rule {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.rule-number {
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: var(--bg-tertiary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
}

.rule-content {
    flex: 1;
}

.rule-title {
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--text);
}

.rule-desc {
    font-size: 0.7rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Rules consent checkbox - potrditev pravil */
.rules-consent {
    margin-top: 16px;
    margin-bottom: 8px;
}

/* Rule tooltip - razširjen opis na hover */
.rule {
    position: relative;
    cursor: help;
    padding: 8px;
    margin: -8px;
    border-radius: 8px;
    transition: background 0.2s;
}

.rule:hover {
    background: var(--bg-tertiary);
}

.rule-tooltip {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 8px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--accent);
    border-radius: 8px;
    font-family: 'Play', sans-serif;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.5;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.rule:hover .rule-tooltip {
    display: block;
}

/* Na mobilnih napravah tooltip ostane viden po kliku */
@media (max-width: 768px) {
    .rule-tooltip {
        position: relative;
        top: auto;
        margin-top: 8px;
        display: none;
    }
    
    .rule.expanded .rule-tooltip {
        display: block;
    }
}

/* ================================================================
   25. INDEX PAGE
   ================================================================
   Stili za index.html - country selector, dropdown, headline.
   ================================================================ */

.main-headline {
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 8px;
    color: var(--text);
    line-height: 1.5;
    padding: 0 8px;
}

.tagline {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* Country selector */
.selector {
    position: relative;
    margin-bottom: 20px;
}

.selector input {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: 'Play', sans-serif;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}

.selector input::placeholder {
    color: var(--text-muted);
}

.selector input:focus {
    border-color: var(--accent);
}

.selector.hidden {
    display: none;
}

/* Country dropdown */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-top: 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    z-index: 100;
}

.dropdown.open {
    max-height: 240px;
    overflow-y: auto;
    opacity: 1;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.dropdown-item:hover,
.dropdown-item.active {
    background: var(--bg-secondary);
}

.dropdown-item .flag {
    font-size: 1.3rem;
}

.dropdown-item .name {
    font-size: 0.95rem;
    color: var(--text);
}

.dropdown::-webkit-scrollbar {
    width: 6px;
}

.dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.dropdown-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Selected country pill */
.selected-country {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 2px solid var(--accent);
    border-radius: 10px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.selected-country.visible {
    display: flex;
}

.selected-country:hover {
    background: var(--bg-secondary);
}

.selected-country .flag {
    font-size: 1.5rem;
}

.selected-country .name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.selected-country .change {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-left: auto;
}

/* Demo link ikona */
.demo-link .icon {
    font-size: 1rem;
}

/* Promise section */
.promise-section {
    display: none;
    margin-top: 1.5rem;
    align-items: center;
    gap: 16px;
}

.promise-section.visible {
    display: flex;
}

.promise {
    flex: 1;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.6;
    text-align: left;
}

/* Time slogan */
.time-slogan {
    width: 100%;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 24px;
    font-style: italic;
}

/* Login row - gumbi pod wrapper (login, demo, lock) */
.login-row {
    width: 100%;
    margin-top: 16px;
    display: none;
    flex-direction: column;
    gap: 8px;
}

.login-row.visible {
    display: flex;
}

/* Globe sprite - 72 frames rotating globe */
.globe-sprite {
    width: 32px;
    height: 32px;
    background-image: url('globe-sprite.png');
    background-repeat: no-repeat;
    background-size: 2304px 32px;
    display: inline-block;
    vertical-align: middle;
    background-position: -1152px 0;
}

.selected-country .globe-sprite {
    margin-right: 4px;
}

/* Document info - shows accepted documents for selected country */
.doc-info {
    display: none;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: left;
}

.doc-info.visible {
    display: block;
}

.doc-info-title {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.doc-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.9rem;
}

.doc-info-row:last-child {
    margin-bottom: 0;
}

.doc-info-row .icon {
    font-size: 1rem;
}

.doc-info-row.accepted {
    color: var(--accent);
}

.doc-info-row.rejected {
    color: var(--text-muted);
}

.doc-info-warn {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: var(--danger);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .main-headline {
        font-size: 1rem;
    }
}

/* ================================================================
   25.5 FEEDBACK COMPONENTS (GENERIČNI)
   ================================================================
   Poenoteni stili za vse feedback ekrane (error, success, status).
   Uporabljaj te razrede namesto page-specific variant.
   
   Uporaba:
   - .feedback-icon           → emoji ikona (3rem)
   - .feedback-icon.lg        → večja ikona (4rem)
   - .feedback-title          → naslov (neutral)
   - .feedback-title.danger   → rdeč naslov (napake)
   - .feedback-title.success  → zelen naslov (uspeh)
   - .feedback-title.warning  → oranžen naslov (opozorilo)
   - .feedback-desc           → opis tekst
   ================================================================ */

.feedback-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    text-align: center;
}

.feedback-icon.lg {
    font-size: 4rem;
    margin-bottom: 20px;
}

.feedback-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
    color: var(--text);
}

.feedback-title.danger {
    color: var(--danger);
}

.feedback-title.success {
    color: var(--accent);
}

.feedback-title.warning {
    color: var(--warning);
}

.feedback-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: center;
}

/* Feedback header wrapper */
.feedback-header {
    text-align: center;
    margin-bottom: 24px;
}

/* Loading state - generično */
.loading-state {
    text-align: center;
    padding: 40px 0;
}

.loading-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 16px;
}

/* ================================================================
   26. ERROR PAGE
   ================================================================
   Stili za error.html - attempts box, error code.
   Uporablja generične .feedback-* razrede za icon/title/desc.
   ================================================================ */

.attempts-box {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 24px;
    display: none;
    text-align: center;
}

.attempts-box.visible {
    display: block;
}

.attempts-text {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.attempts-count {
    color: var(--warning);
    font-weight: 700;
}

.btn-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.error-code {
    margin-top: 24px;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}

/* ================================================================
   27. WELCOME PAGE
   ================================================================
   Stili za welcome.html - reverification, wallet card, warning box.
   Uporablja generične .feedback-* razrede za success state.
   ================================================================ */

/* Reverification info */
.reverification-info {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    display: none;
}

.reverification-info.visible {
    display: block;
}

.reverification-title {
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reverification-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.reverification-text .balance {
    color: var(--accent);
    font-weight: 700;
}

.reverification-text .old-wallet {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Error state container */
.error-state {
    text-align: center;
    padding: 20px;
    display: none;
}

/* Main content hidden during loading */
.main-content {
    display: none;
}

/* Warning box */
.warning-box {
    background: rgba(245, 158, 11, 0.1);
    border: 2px solid var(--warning);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.warning-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.warning-icon {
    font-size: 1.5rem;
}

.warning-title {
    font-weight: 700;
    color: var(--warning);
}

.warning-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Wallet card */
.wallet-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

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

.wallet-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wallet-badge {
    font-size: 0.7rem;
    padding: 4px 8px;
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent);
    border-radius: 4px;
    font-weight: 700;
}

.wallet-address {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text);
    background: var(--bg-secondary);
    padding: 12px;
    border-radius: 8px;
    word-break: break-all;
    margin-bottom: 16px;
}

.wallet-copy {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-family: 'Play', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.wallet-copy:hover {
    background: var(--bg-secondary);
    color: var(--text);
}

.wallet-copy.copied {
    border-color: var(--accent);
    color: var(--accent);
}

/* Tier badge display */
.tier-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 20px;
}

.tier-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.tier-value {
    font-weight: 700;
    color: var(--accent);
}

/* ================================================================
   28. PREPARE PAGE
   ================================================================
   Stili za prepare.html - instructions, app links, doc types.
   ================================================================ */

.instructions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.instruction {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.instruction-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.instruction-content {
    flex: 1;
}

.instruction-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text);
}

.instruction-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* App download links */
.app-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.app-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-decoration: none;
    transition: all 0.2s;
}

.app-link:hover {
    background: var(--bg-secondary);
    border-color: var(--accent);
    color: var(--text);
}

/* Country display */
.country-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
}

.country-display .flag {
    font-size: 2rem;
}

.country-display .name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

/* Document types */
.doc-types {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
}

.doc-type {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
}

.doc-type.available {
    background: rgba(34, 197, 94, 0.1);
    color: var(--accent);
}

.doc-type.unavailable {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    text-decoration: line-through;
}

/* Status container for payment verification */
.status-container {
    text-align: center;
    padding: 20px 0;
}

.status-container.hidden {
    display: none;
}

/* Countdown ring - SVG krožni progress za timeout */
.countdown-ring {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto;
}

.countdown-ring svg {
    transform: rotate(-90deg);
    width: 64px;
    height: 64px;
}

.countdown-ring circle.bg {
    fill: none;
    stroke: var(--bg-tertiary);
    stroke-width: 4;
}

.countdown-ring circle.progress {
    fill: none;
    stroke: var(--accent);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
}

.countdown-ring.error circle.progress {
    stroke: var(--danger);
}

.countdown-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

.status-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 12px;
}

.status-text.success {
    color: var(--accent);
}

.status-text.error {
    color: var(--danger);
}

.status-container.success {
    /* Dodatni stili za uspeh če potrebno */
}

.status-container.error {
    /* Dodatni stili za napako če potrebno */
}

/* Buttons waiting state - skrij gumbe med čakanjem */
.buttons.waiting {
    opacity: 0.5;
    pointer-events: none;
}

/* ================================================================
   29. VERIFY PAGE
   ================================================================
   Stili za verify.html - QR code, status screens, attempts badge.
   Uporablja generične .feedback-* razrede.
   ================================================================ */

.status-screen {
    display: none;
    text-align: center;
    padding: 20px 0;
}

.status-screen.active {
    display: block;
}

/* Aliasi za backward compatibility - uporabi .feedback-* v novem kodu */
.status-icon { font-size: 3rem; margin-bottom: 16px; text-align: center; }
.status-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; color: var(--text); text-align: center; }
.status-desc { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.5; text-align: center; }

/* QR Code container */
.qr-container {
    background: white;
    padding: 20px;
    border-radius: 12px;
    display: inline-block;
    margin: 16px 0;
}

.qr-container img,
.qr-container canvas {
    display: block;
    width: 300px;
    height: 300px;
}

/* QR navodila v korakih */
.qr-steps {
    text-align: left;
    display: inline-block;
    margin: 16px 0;
}

.qr-step {
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding: 6px 0;
}

.qr-instructions {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

/* Attempts badge */
.attempts-badge {
    display: inline-block;
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 16px;
}

/* Button group for verify page */
.button-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

/* ================================================================
   30. REGISTER PAGE
   ================================================================
   Stili za register.html - packages, checkboxes.
   ================================================================ */

.packages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.package {
    padding: 16px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.package:hover {
    border-color: var(--text-muted);
}

.package.selected {
    border-color: var(--accent);
    background: rgba(34, 197, 94, 0.05);
}

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

.package-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: color 0.2s;
}

.package.selected .package-name {
    color: var(--accent);
}

.package-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.package-features {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.package-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.package-feature .icon {
    color: var(--accent);
}

.package-note {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Package tooltip - razširjen opis tiera, vedno viden na kartici */
.package {
    position: relative;
}

.package-tooltip {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-family: 'Play', sans-serif;
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.5;
    text-align: left;
}

/* Checkbox group */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    display: none;
}

.checkbox-box {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-top: 2px;
}

.checkbox-item input:checked + .checkbox-box {
    background: var(--accent);
    border-color: var(--accent);
}

.checkbox-item input:checked + .checkbox-box::after {
    content: '✓';
    color: var(--bg-primary);
    font-size: 12px;
    font-weight: 700;
}

.checkbox-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.checkbox-label strong {
    color: var(--text);
}

.checkbox-label a {
    color: var(--accent);
    text-decoration: none;
}

.checkbox-label a:hover {
    text-decoration: underline;
}

/* ================================================================
   31. ADMIN DASHBOARD
   Created: 2025-12-30
   Modified: 2026-01-01
   
   Desktop-first layout za administracijo.
   Grid sistem za več podatkov hkrati.
   ================================================================ */

/* Body za admin - full width */
body.admin-body {
    display: block;
    padding: 0;
    align-items: flex-start;
}

/* Login overlay */
.admin-login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.admin-login-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    width: 90%;
    max-width: 360px;
    text-align: center;
}

.admin-login-box h2 {
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.admin-login-box p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

.admin-login-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
    font-family: 'Play', sans-serif;
    margin-bottom: 1rem;
}

.admin-login-input:focus {
    outline: none;
    border-color: var(--accent);
}

.admin-login-btn {
    width: 100%;
    padding: 12px;
    background: var(--accent);
    color: var(--bg-primary);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    font-family: 'Play', sans-serif;
    cursor: pointer;
    transition: opacity 0.2s;
}

.admin-login-btn:hover {
    opacity: 0.9;
}

.admin-login-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.admin-login-error {
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: 1rem;
    display: none;
}

/* Main admin layout */
.admin-main {
    display: none;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.admin-main.visible {
    display: block;
}

/* Admin header */
.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.admin-header-left .title {
    font-size: 1.5rem;
    margin-bottom: 0;
}

.admin-header-left .tagline {
    margin-bottom: 0;
    font-size: 0.8rem;
}

.admin-logout-btn {
    padding: 8px 16px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Play', sans-serif;
    font-size: 0.85rem;
    transition: all 0.2s;
}

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

/* Grid layout za wrapperje */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.admin-grid-full {
    grid-column: 1 / -1;
}

/* Admin wrapper boxes */
.admin-main .wrapper {
    margin-bottom: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.admin-wrapper-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.admin-wrapper-content {
    color: var(--text-muted);
    flex: 1;
    min-height: 120px;
}

/* Stats grid */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
}

.admin-stat-item {
    text-align: center;
    padding: 16px 8px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.admin-stat-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent);
    line-height: 1;
}

.admin-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Message list */
.admin-message-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.admin-message-item {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 12px;
}

.admin-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.admin-message-from {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--accent);
}

.admin-message-date {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.admin-message-subject {
    font-weight: bold;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.admin-message-body {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

.admin-message-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    text-transform: uppercase;
    font-weight: bold;
}

.admin-message-status.unread {
    background: var(--danger);
    color: #fff;
}

.admin-message-status.read {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

.admin-message-status.replied {
    background: var(--accent);
    color: var(--bg-primary);
}

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

.admin-message-actions button {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: 'Play', sans-serif;
    cursor: pointer;
    transition: opacity 0.2s;
}

.admin-message-actions button:hover {
    opacity: 0.8;
}

.admin-btn-reply {
    background: var(--accent);
    color: var(--bg-primary);
}

.admin-btn-badge {
    background: var(--warning);
    color: var(--bg-primary);
}

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

/* Proposal list */
.admin-proposal-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.admin-proposal-item {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 12px;
}

.admin-proposal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.admin-proposal-title {
    font-weight: bold;
    font-size: 0.9rem;
}

.admin-proposal-votes {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 8px;
}

.admin-proposal-votes .yes {
    color: var(--accent);
}

.admin-proposal-votes .no {
    color: var(--danger);
}

/* Error list */
.admin-error-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.admin-error-item {
    background: var(--bg-tertiary);
    border-left: 3px solid var(--danger);
    padding: 10px 12px;
    border-radius: 0 6px 6px 0;
    font-size: 0.8rem;
}

.admin-error-time {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.admin-error-message {
    color: var(--text-secondary);
    margin-top: 4px;
}

/* User table */
.admin-user-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.admin-user-table th {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.admin-user-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
}

.admin-user-table tr:hover {
    background: var(--bg-tertiary);
}

/* Empty state */
.admin-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.admin-empty-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: 0.5;
}

/* Modal */
.admin-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.admin-modal-overlay.active {
    display: flex;
}

.admin-modal-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 500px;
}

.admin-modal-box h3 {
    margin-bottom: 16px;
}

.admin-modal-box textarea {
    width: 100%;
    height: 120px;
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.9rem;
    font-family: 'Play', sans-serif;
    resize: vertical;
    margin-bottom: 16px;
}

.admin-modal-box textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.admin-modal-box select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.9rem;
    font-family: 'Play', sans-serif;
    margin-bottom: 16px;
}

.admin-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.admin-modal-actions button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-family: 'Play', sans-serif;
    cursor: pointer;
}

.admin-btn-cancel {
    background: var(--bg-tertiary);
    color: var(--text);
}

.admin-btn-send {
    background: var(--accent);
    color: var(--bg-primary);
    font-weight: bold;
}

/* ============================================================================
   18. FEEDBACK FORM
   ============================================================================
   Forma za pošiljanje sporočila adminu v notifications sekciji.
   Max 200 znakov, character counter, status sporočila.
   Dodano: 2026-01-04
*/

.feedback-form {
    padding: 16px;
    margin: 8px 0;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.feedback-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.feedback-icon {
    font-size: 18px;
}

.feedback-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.feedback-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feedback-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-family: 'Play', sans-serif;
    resize: none;
    transition: border-color 0.2s;
}

.feedback-input:focus {
    outline: none;
    border-color: var(--accent);
}

.feedback-input::placeholder {
    color: var(--text-muted);
}

.feedback-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.feedback-counter {
    font-size: 12px;
    color: var(--text-muted);
    transition: color 0.2s;
}

.feedback-submit {
    padding: 8px 16px;
    background: var(--accent);
    border: none;
    border-radius: 6px;
    color: var(--bg-primary);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Play', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.feedback-submit:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.feedback-submit:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
    transform: none;
}

.feedback-status {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
}

.feedback-status.success {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid var(--success);
    color: var(--success);
}

.feedback-status.error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--danger);
    color: var(--danger);
}

.feedback-status.hidden {
    display: none;
}

/* ============================================================================
   SII - DASHBOARD GRID
   ============================================================================
   Grid layout za SII nadzorno ploščo.
   Dodano: 2026-01-04
*/

.container-wide {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.container-wide .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    width: 90vw;
    margin: 0 auto;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    width: 90vw;
    margin: 0 auto;
}

.card.wide {
    grid-column: span 2;
}

.card.full {
    grid-column: span 3;
}

.card.topics-card {
    grid-column: 4;
    grid-row: 1 / span 10;
    align-self: start;
}

.container-wide {
    max-width: 100%;
    padding: 0;
}

.dashboard-nav {
    display: flex;
    gap: 16px;
}

.dashboard-nav a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.dashboard-nav a:hover,
.dashboard-nav a.active {
    color: var(--accent);
}

@media (max-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .card.wide {
        grid-column: span 2;
    }
    
    .card.topics-card {
        grid-column: 3;
        grid-row: 1 / span 10;
    }
}

@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .card.wide,
    .card.full {
        grid-column: span 2;
    }
    
    .card.topics-card {
        grid-column: span 2;
        grid-row: auto;
    }
}

@media (max-width: 600px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        width: 95vw;
    }
    
    .card.wide,
    .card.full,
    .card.topics-card {
        grid-column: span 1;
        grid-row: auto;
    }
    
    .container-wide .header {
        flex-direction: column;
        gap: 16px;
        width: 95vw;
    }
}

/* ============================================================================
   SII - STUDENT LIST
   ============================================================================
   Seznam učencev za settings in dashboard.
   Dodano: 2026-01-05
*/

.student-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.student-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    gap: 8px;
}

.student-row.selected {
    border: 1px solid var(--accent);
    background: var(--accent-glow);
}

.class-select {
    cursor: pointer;
}

.class-select:hover {
    color: var(--accent);
}

.student-name {
    font-size: 0.85rem;
    color: var(--text);
    flex: 1;
}

.student-actions {
    display: flex;
    gap: 8px;
}

.student-actions .btn-secondary {
    padding: 4px 10px;
    font-size: 0.75rem;
}

/* ============================================================================
   SII - ATTENDANCE STATUS
   ============================================================================
   Statusi prisotnosti: present, absent, late, excused
   Dodano: 2026-01-05
*/

.attendance-options {
    display: flex;
    gap: 4px;
}

.attendance-option {
    padding: 6px 10px;
    font-family: 'Play', sans-serif;
    font-size: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.attendance-option:hover {
    border-color: var(--text-muted);
    color: var(--text);
}

.attendance-option.active {
    border-color: var(--accent);
    background: var(--accent-glow);
    color: var(--accent);
}

.attendance-option.absent.active {
    border-color: var(--danger);
    background: var(--danger-glow);
    color: var(--danger);
}

.attendance-option.late.active {
    border-color: var(--warning);
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

/* ============================================================================
   SII - ADD STUDENT FORM
   ============================================================================
   Forma za dodajanje učencev.
   Dodano: 2026-01-05
*/

.add-form {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.add-form .input {
    flex: 1;
}

.add-form .btn-primary {
    padding: 12px 16px;
    white-space: nowrap;
}

/* Inline edit forma v vrstici */
.student-row .add-form {
    flex: 1;
    margin-bottom: 0;
}

.card > .btn-full {
    margin-top: 16px;
}

/* ============================================================================
   SII - CARD LOCK
   ============================================================================
   Zaklep kartic za preprečevanje nenamernih sprememb.
   Odklepanje z dolgim pritiskom (3s).
   Dodano: 2026-01-05
*/

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.card-header .card-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.btn-lock {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.btn-lock:hover {
    border-color: var(--text-muted);
    color: var(--text);
}

.btn-lock.locked {
    border-color: var(--accent);
    color: var(--accent);
}

/* Progress za dolgi pritisk */
.btn-lock .unlock-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--accent);
    transition: none;
}

.btn-lock.unlocking .unlock-progress {
    width: 100%;
    transition: width 3s linear;
}

/* Zaklenjene vsebine */
.card.locked .card-content {
    pointer-events: none;
    opacity: 0.5;
    user-select: none;
}

.card-content {
    transition: opacity 0.2s;
}

@media (max-width: 600px) {
    .student-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .attendance-options {
        width: 100%;
        justify-content: space-between;
    }
    
    .add-form {
        flex-direction: column;
    }
    
    .add-form .input-abbr {
        max-width: none;
    }
}

.input-abbr {
    max-width: 80px;
    text-transform: uppercase;
}

.input-abbr::placeholder {
    font-size: 0.7rem;
}

/* ============================================================================
   SII - TOPICS / TEME
   ============================================================================
   Učne teme za posamezni predmet in razred.
   Dodano: 2026-01-05
*/

.topics-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.topics-selectors {
    display: flex;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.topics-selector {
    display: flex;
    align-items: center;
    gap: 4px;
}

.topics-selector strong {
    color: var(--accent);
}

.topics-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-import {
    cursor: pointer;
}

.add-topic-form {
    margin-bottom: 12px;
}

.topic-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.topic-number {
    min-width: 28px;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: right;
}

.topic-input {
    min-width: 150px;
    width: auto;
    padding: 6px 8px;
    font-family: 'Play', sans-serif;
    font-size: 0.8rem;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
}

.topic-input:focus {
    border-color: var(--accent);
    background: var(--bg-primary);
}

.topic-input::placeholder {
    color: var(--text-muted);
}

.topic-delete {
    padding: 4px 8px;
    font-size: 0.7rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
}

.topic-row:hover .topic-delete {
    opacity: 1;
}

.topic-delete:hover {
    color: var(--danger);
}

.topics-footer {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.topics-copy-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.topics-copy-wrapper select {
    flex: 1;
    padding: 6px 8px;
    font-family: 'Play', sans-serif;
    font-size: 0.8rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    outline: none;
}

.topics-copy-wrapper select:focus {
    border-color: var(--accent);
}

/* ============================================================================
   SII - SCHEDULE / URNIK
   ============================================================================
   Urnik tabela s combobox izbiro predmetov.
   Dodano: 2026-01-05
*/

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

.schedule-tabs {
    display: flex;
    gap: 4px;
}

.schedule-tab {
    padding: 8px 16px;
    font-family: 'Play', sans-serif;
    font-size: 0.85rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.schedule-tab:hover {
    border-color: var(--text-muted);
    color: var(--text);
}

.schedule-tab.active {
    border-color: var(--accent);
    background: var(--accent-glow);
    color: var(--accent);
}

.schedule-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.schedule-actions {
    display: flex;
    gap: 8px;
}

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

.schedule-table th,
.schedule-table td {
    padding: 8px;
    text-align: center;
    border: 1px solid var(--border);
    vertical-align: top;
}

.schedule-table th {
    background: var(--bg-tertiary);
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.schedule-table th.hour-col {
    width: 40px;
}

.schedule-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.schedule-cell-row {
    display: flex;
    gap: 4px;
}

.schedule-cell-row .combobox-wrapper {
    flex: 1;
    min-width: 0;
}

.schedule-cell-row .schedule-input {
    width: 100%;
    font-size: 0.7rem;
    padding: 4px 6px;
}

.schedule-input {
    width: 100%;
    padding: 6px 8px;
    font-family: 'Play', sans-serif;
    font-size: 0.8rem;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    outline: none;
    transition: border-color 0.2s;
}

.schedule-input:focus {
    border-color: var(--accent);
}

.schedule-input::placeholder {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.schedule-input.bold {
    font-weight: 700;
}

.schedule-input.room {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Combobox dropdown */
.combobox-wrapper {
    position: relative;
}

.combobox-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 150px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.combobox-dropdown.active {
    display: block;
}

.combobox-option {
    padding: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s;
}

.combobox-option:hover,
.combobox-option.highlighted {
    background: var(--bg-tertiary);
    color: var(--accent);
}

/* Add/remove hour buttons */
.schedule-footer {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.btn-add-hour,
.btn-remove-hour {
    padding: 6px 12px;
    font-family: 'Play', sans-serif;
    font-size: 0.8rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-hour:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-remove-hour:hover {
    border-color: var(--danger);
    color: var(--danger);
}

/* B urnik toggle */
#btnCopyToB {
    display: none;
}

#btnCopyToB.visible {
    display: block;
}

.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-switch.active {
    background: var(--accent-glow);
    border-color: var(--accent);
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--text-muted);
    border-radius: 50%;
    transition: all 0.2s;
}

.toggle-switch.active::after {
    left: 22px;
    background: var(--accent);
}

@media (max-width: 600px) {
    .schedule-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .schedule-tabs {
        justify-content: center;
    }
    
    .schedule-table {
        font-size: 0.75rem;
    }
    
    .schedule-table th,
    .schedule-table td {
        padding: 4px;
    }
    
    .schedule-input {
        padding: 4px 6px;
        font-size: 0.7rem;
    }
}