*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:'Inter',system-ui,sans-serif;background:#0f172a;min-height:100vh;color:#fff}
.login-box{padding:24px 20px;max-width:100%;margin:0 auto}.login-logo{text-align:center;padding:60px 0 40px}.login-logo h1{font-size:26px;font-weight:800;color:#f59e0b;margin-bottom:8px}.login-logo p{font-size:14px;color:rgba(255,255,255,.5)}
.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:10px;font-size:15px;font-weight:600;color:rgba(255,255,255,.8)}.form-group input{width:100%;padding:18px 16px;border:2px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(30,41,59,.8);color:#fff;font-size:17px}.form-group input:focus{outline:none;border-color:#f59e0b}
.btn{width:100%;padding:18px;border:none;border-radius:14px;font-size:17px;font-weight:700;cursor:pointer;min-height:58px}.btn-primary{background:linear-gradient(135deg,#f59e0b,#d97706);color:#0f172a}.btn-logout{background:rgba(239,68,68,.15);color:#ef4444;border:2px solid #ef4444;padding:14px 20px;font-size:14px;min-height:48px;width:auto}
.error{background:rgba(239,68,68,.15);border:1px solid #ef4444;color:#ef4444;padding:16px;border-radius:14px;margin-bottom:20px;font-size:15px;text-align:center}
.container{padding:16px;padding-bottom:120px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}.header-left{display:flex;align-items:center;gap:10px}.menu-icon{width:24px;height:24px;color:#fff;cursor:pointer;display:none;padding:4px;border-radius:6px;transition:background .2s}.menu-icon:hover{background:rgba(255,255,255,.1)}.header h1{font-size:18px;font-weight:700;flex:1}
.nav-menu{display:flex;gap:6px;background:rgba(30,41,59,.95);padding:8px;border-radius:18px;margin-bottom:20px;flex-wrap:wrap}
@media(max-width:768px){.menu-icon{display:block}.nav-menu{display:none}.nav-menu.open{display:flex}}
.nav-item{flex:1;padding:12px 6px;background:transparent;border:none;border-radius:14px;color:rgba(255,255,255,.5);font-size:11px;font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:62px;justify-content:center;min-width:60px}
.nav-item.active{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.nav-item.instagram.active{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.nav-item svg{width:22px;height:22px}.section{display:none}.section.active{display:block}
.info-box{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.25);border-radius:14px;padding:16px;margin-bottom:20px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.75)}.info-box strong{color:#3b82f6}.info-box.instagram{background:linear-gradient(135deg,rgba(240,148,51,.1),rgba(188,24,136,.1));border-color:rgba(225,48,108,.25)}.info-box.instagram strong{color:#e1306c}
.card{background:rgba(30,41,59,.9);border-radius:18px;padding:18px;margin-bottom:14px;border:2px solid transparent}.card.active{border-color:rgba(34,197,94,.35)}.card.inactive{opacity:.55}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.card-title{font-weight:700;font-size:13px;letter-spacing:.5px}.card-title.blue{color:#3b82f6}.card-title.purple{color:#a855f7}.card-title.instagram{background:linear-gradient(90deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.toggle-wrap{display:flex;align-items:center;gap:10px}.toggle-label{font-size:13px;color:rgba(255,255,255,.5)}.toggle{position:relative;width:58px;height:34px;cursor:pointer}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;inset:0;background:rgba(255,255,255,.1);border-radius:34px;transition:.3s}.toggle-slider::before{content:'';position:absolute;width:28px;height:28px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}.toggle input:checked+.toggle-slider{background:#22c55e}.toggle input:checked+.toggle-slider::before{transform:translateX(24px)}
textarea{width:100%;padding:16px;border:2px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(15,23,42,.8);color:#fff;font-size:16px;font-family:inherit;resize:none;min-height:110px}textarea:focus{outline:none;border-color:#3b82f6}
.char-count{font-size:12px;color:rgba(255,255,255,.35);text-align:right;margin-top:8px}
.btn-save{width:100%;padding:16px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:14px;font-weight:700;font-size:16px;cursor:pointer;min-height:56px;margin-top:14px}.btn-save.saved{background:#10b981}
.ig-box{background:linear-gradient(135deg,rgba(240,148,51,.08),rgba(188,24,136,.08));border:1px solid rgba(225,48,108,.25);border-radius:18px;padding:18px;margin-bottom:20px}
.ig-title{font-size:13px;font-weight:700;background:linear-gradient(90deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}
.ig-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}.ig-label{font-size:14px;color:rgba(255,255,255,.65);min-width:110px}
.ig-input{flex:1;min-width:150px;padding:14px;border:2px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(15,23,42,.8);color:#fff;font-size:16px}.ig-input:focus{outline:none;border-color:#e1306c}
.ig-input-small{width:85px;padding:14px 10px;border:2px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(15,23,42,.8);color:#fff;font-size:18px;text-align:center;font-weight:600}.ig-input-small:focus{outline:none;border-color:#e1306c}
.ig-unit{font-size:13px;color:rgba(255,255,255,.45)}
.btn-ig{width:100%;padding:16px;background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff;border:none;border-radius:14px;font-weight:700;font-size:16px;cursor:pointer;min-height:56px;margin-top:10px}
.btn-refresh{width:100%;padding:16px;background:rgba(59,130,246,.15);color:#3b82f6;border:2px solid #3b82f6;border-radius:14px;font-weight:700;font-size:16px;cursor:pointer;min-height:56px;margin-top:10px}
.btn-clear{width:100%;padding:14px;background:rgba(239,68,68,.15);color:#ef4444;border:2px solid #ef4444;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;min-height:52px;margin-top:10px}
.ig-status{background:rgba(15,23,42,.6);border-radius:12px;padding:14px;margin-top:16px}.ig-status-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05)}.ig-status-row:last-child{border-bottom:none}
.ig-status-label{font-size:13px;color:rgba(255,255,255,.5)}.ig-status-value{font-size:13px;font-weight:600;color:#fff}.ig-status-value.ok{color:#22c55e}.ig-status-value.err{color:#ef4444}
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}.ig-thumb{aspect-ratio:9/16;background:rgba(15,23,42,.8);border-radius:10px;overflow:hidden}.ig-thumb img,.ig-thumb video{width:100%;height:100%;object-fit:cover}
.poster-box{background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(124,58,237,.08));border:1px solid rgba(168,85,247,.25);border-radius:18px;padding:18px;margin-bottom:20px}
.poster-title{font-size:13px;font-weight:700;color:#a855f7;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}
.poster-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}.poster-label{font-size:14px;color:rgba(255,255,255,.65);min-width:110px}
.poster-input{width:85px;padding:14px 10px;border:2px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(15,23,42,.8);color:#fff;font-size:18px;text-align:center;font-weight:600}.poster-input:focus{outline:none;border-color:#a855f7}
.poster-unit{font-size:13px;color:rgba(255,255,255,.45)}
.poster-preview{width:100%;aspect-ratio:9/16;max-height:300px;background:rgba(15,23,42,.8);border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:2px dashed rgba(255,255,255,.15);margin-bottom:14px}.poster-preview img{width:100%;height:100%;object-fit:cover}.poster-preview.has-image{border-style:solid;border-color:rgba(168,85,247,.3)}
.poster-placeholder{color:rgba(255,255,255,.25);font-size:14px;text-align:center;padding:20px}.poster-placeholder svg{width:48px;height:48px;margin-bottom:12px;opacity:.3}
.poster-actions{display:flex;gap:10px}.btn-upload{flex:1;padding:16px;background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff;border:none;border-radius:14px;font-weight:700;font-size:15px;cursor:pointer;min-height:56px}
.btn-remove{padding:16px 18px;background:rgba(239,68,68,.15);color:#ef4444;border:2px solid #ef4444;border-radius:14px;font-size:15px;font-weight:700;cursor:pointer;min-height:56px}.file-input{display:none}
.user-form{background:rgba(30,41,59,.9);border-radius:18px;padding:18px;margin-bottom:16px}.user-input{width:100%;padding:16px;border:2px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(15,23,42,.8);color:#fff;font-size:16px;margin-bottom:12px}.user-input:focus{outline:none;border-color:#f59e0b}
.btn-add{width:100%;padding:16px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#0f172a;border:none;border-radius:14px;font-weight:700;font-size:16px;cursor:pointer;min-height:56px}
.user-msg{margin-top:14px;padding:14px;border-radius:12px;font-size:14px;display:none;text-align:center}.user-msg.success{display:block;background:rgba(34,197,94,.15);color:#22c55e}.user-msg.error{display:block;background:rgba(239,68,68,.15);color:#ef4444}
.user-card{background:rgba(30,41,59,.9);border-radius:18px;padding:18px;margin-bottom:12px}.user-name{font-weight:700;font-size:17px;margin-bottom:4px}.user-date{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:14px}
.btn-delete{width:100%;padding:14px;background:rgba(239,68,68,.15);color:#ef4444;border:2px solid #ef4444;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;min-height:52px}
.footer{text-align:center;padding:30px 0;font-size:12px;color:rgba(255,255,255,.4)}.footer a{color:#f59e0b;text-decoration:none;font-weight:600}
.session-help{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);border-radius:12px;padding:14px;margin-top:14px;font-size:13px;color:rgba(255,255,255,.7);line-height:1.6}
.session-help ol{margin-left:18px;margin-top:8px}.session-help strong{color:#f59e0b}
.yt-box{background:linear-gradient(135deg,rgba(255,0,0,.1),rgba(200,0,0,.08));border:1px solid rgba(255,0,0,.25);border-radius:18px;padding:18px;margin-bottom:20px}
.yt-title{font-size:13px;font-weight:700;color:#ff0000;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}
.yt-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}.yt-label{font-size:14px;color:rgba(255,255,255,.65);min-width:110px}
.yt-input{flex:1;min-width:150px;padding:14px;border:2px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(15,23,42,.8);color:#fff;font-size:16px}.yt-input:focus{outline:none;border-color:#ff0000}
.btn-yt{width:100%;padding:16px;background:linear-gradient(135deg,#ff0000,#cc0000);color:#fff;border:none;border-radius:14px;font-weight:700;font-size:16px;cursor:pointer;min-height:56px;margin-top:10px}
.yt-help{background:rgba(255,0,0,.1);border:1px solid rgba(255,0,0,.2);border-radius:12px;padding:14px;margin-top:14px;font-size:13px;color:rgba(255,255,255,.7);line-height:1.6}
.yt-help strong{color:#ff0000}
.nav-item.youtube.active{background:linear-gradient(135deg,#ff0000,#cc0000)}
.yt-add-box{background:rgba(255,255,255,.05);border-radius:12px;padding:14px;margin-top:16px}.yt-add-title{font-size:12px;font-weight:600;color:rgba(255,255,255,.5);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}.yt-add-row{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}.yt-add-input{flex:1;min-width:120px;padding:12px;border:2px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(15,23,42,.8);color:#fff;font-size:14px}.yt-add-input:focus{outline:none;border-color:#ff0000}.btn-yt-add{padding:12px 20px;background:#ff0000;color:#fff;border:none;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.yt-playlist-list{margin-top:16px}.yt-playlist-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background:rgba(255,255,255,.05);border-radius:10px;margin-bottom:8px;gap:10px}.yt-playlist-item.playing{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.4)}.yt-playlist-item .title{font-size:14px;font-weight:500;color:#fff;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.yt-playlist-item .type{font-size:11px;padding:4px 8px;border-radius:6px;margin-right:10px;flex-shrink:0}.yt-playlist-item .type.own{background:rgba(34,197,94,.2);color:#22c55e}.yt-playlist-item .type.custom{background:rgba(59,130,246,.2);color:#3b82f6}
.btn-yt-play{width:36px;height:36px;padding:0;background:rgba(34,197,94,.2);color:#22c55e;border:1px solid #22c55e;border-radius:8px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}.btn-yt-play svg{width:18px;height:18px}.btn-yt-stop{width:36px;height:36px;padding:0;background:#ef4444;color:#fff;border:none;border-radius:8px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}.btn-yt-stop svg{width:18px;height:18px}
.btn-fractal-play{width:36px;height:36px;padding:0;background:rgba(139,92,246,.2);color:#8b5cf6;border:1px solid #8b5cf6;border-radius:8px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}.btn-fractal-play svg{width:18px;height:18px}.btn-fractal-stop{width:36px;height:36px;padding:0;background:#ef4444;color:#fff;border:none;border-radius:8px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}.btn-fractal-stop svg{width:18px;height:18px}
.btn-item-del{width:36px;height:36px;padding:0;background:rgba(239,68,68,.2);color:#ef4444;border:1px solid #ef4444;border-radius:8px;cursor:pointer;flex-shrink:0;display:none;align-items:center;justify-content:center;margin-left:6px}.btn-item-del svg{width:16px;height:16px}.btn-item-del.visible{display:flex;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.btn-loading{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.yt-playlist-item.delete-ready,.fractal-item.delete-ready{background:rgba(239,68,68,.25);border:1px solid #ef4444;animation:shake .3s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.yt-playlist-item[data-deletable="1"],.fractal-item{cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.yt-current{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);border-radius:12px;padding:14px;margin-bottom:16px}.yt-current-label{font-size:11px;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}.yt-current-title{font-size:16px;font-weight:700;color:#22c55e}.yt-current-none{font-size:14px;color:rgba(255,255,255,.4);font-style:italic}
.yt-settings-box{background:rgba(255,255,255,.03);border-radius:12px;padding:14px;margin-top:20px;border-top:1px solid rgba(255,255,255,.08)}.yt-settings-title{font-size:12px;font-weight:600;color:rgba(255,255,255,.5);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}
.logo-box{background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(217,119,6,.08));border:1px solid rgba(245,158,11,.25);border-radius:18px;padding:18px;margin-bottom:20px}.logo-title{font-size:13px;font-weight:700;color:#f59e0b;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}.logo-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}.logo-label{font-size:14px;color:rgba(255,255,255,.65);min-width:110px}.logo-input{width:85px;padding:14px 10px;border:2px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(15,23,42,.8);color:#fff;font-size:18px;text-align:center;font-weight:600}.logo-input:focus{outline:none;border-color:#f59e0b}.logo-unit{font-size:13px;color:rgba(255,255,255,.45)}.logo-preview{width:150px;height:150px;background:rgba(15,23,42,.8);border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:2px dashed rgba(255,255,255,.15);margin:0 auto 14px}.logo-preview img{max-width:100%;max-height:100%;object-fit:contain}.logo-preview.has-image{border-style:solid;border-color:rgba(245,158,11,.3)}.logo-placeholder{color:rgba(255,255,255,.25);font-size:14px;text-align:center;padding:20px}.btn-logo{width:100%;padding:16px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#0f172a;border:none;border-radius:14px;font-weight:700;font-size:16px;cursor:pointer;min-height:56px;margin-top:10px}
.nav-item.logo.active{background:linear-gradient(135deg,#f59e0b,#d97706)}.nav-item.fractals.active{background:linear-gradient(135deg,#8b5cf6,#6d28d9)}.nav-item.settings.active{background:linear-gradient(135deg,#64748b,#475569)}.nav-item.vjpanel.active{background:linear-gradient(135deg,#ec4899,#be185d)}.nav-item.radio.active{background:linear-gradient(135deg,#14b8a6,#0d9488)}
.radio-box{background:linear-gradient(135deg,rgba(20,184,166,.1),rgba(13,148,136,.08));border:1px solid rgba(20,184,166,.25);border-radius:18px;padding:18px;margin-bottom:20px}.radio-title{font-size:13px;font-weight:700;color:#14b8a6;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}.radio-current{background:rgba(20,184,166,.1);border:1px solid rgba(20,184,166,.3);border-radius:12px;padding:14px;margin-bottom:16px}.radio-current-label{font-size:11px;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}.radio-current-title{font-size:16px;font-weight:700;color:#14b8a6}.radio-list{margin-top:16px}.radio-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background:rgba(255,255,255,.05);border-radius:10px;margin-bottom:8px;gap:10px}.radio-item.playing{background:rgba(20,184,166,.15);border:1px solid rgba(20,184,166,.4)}.radio-item .title{font-size:14px;font-weight:500;color:#fff;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.radio-item .url{font-size:11px;color:rgba(255,255,255,.4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.btn-radio-play{width:36px;height:36px;padding:0;background:rgba(20,184,166,.2);color:#14b8a6;border:1px solid #14b8a6;border-radius:8px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}.btn-radio-play svg{width:18px;height:18px}.btn-radio-stop{width:36px;height:36px;padding:0;background:#ef4444;color:#fff;border:none;border-radius:8px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}.btn-radio-stop svg{width:18px;height:18px}.btn-radio-del{width:36px;height:36px;padding:0;background:rgba(239,68,68,.2);color:#ef4444;border:1px solid #ef4444;border-radius:8px;cursor:pointer;flex-shrink:0;display:none;align-items:center;justify-content:center;margin-left:6px}.btn-radio-del svg{width:16px;height:16px}.btn-radio-del.visible{display:flex}.radio-item{cursor:pointer;user-select:none}.radio-item.delete-ready{background:rgba(239,68,68,.25);border:1px solid #ef4444}
.radio-add-box{background:rgba(255,255,255,.05);border-radius:12px;padding:14px;margin-top:16px}.radio-add-title{font-size:12px;font-weight:600;color:rgba(255,255,255,.5);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}.radio-add-row{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}.radio-add-input{flex:1;min-width:120px;padding:12px;border:2px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(15,23,42,.8);color:#fff;font-size:14px}.radio-add-input:focus{outline:none;border-color:#14b8a6}.btn-radio-add{padding:12px 20px;background:#14b8a6;color:#fff;border:none;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}.radio-help{background:rgba(20,184,166,.1);border:1px solid rgba(20,184,166,.2);border-radius:12px;padding:14px;margin-top:14px;font-size:13px;color:rgba(255,255,255,.7);line-height:1.6}.radio-help strong{color:#14b8a6}
.volume-box{background:rgba(255,255,255,.05);border-radius:12px;padding:14px;margin-top:16px}.volume-title{font-size:12px;font-weight:600;color:rgba(255,255,255,.5);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.volume-slider-wrap{display:flex;align-items:center;gap:12px}.volume-slider{flex:1;height:8px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.1);border-radius:4px;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;background:#14b8a6;border-radius:50%;cursor:pointer}.volume-slider::-moz-range-thumb{width:24px;height:24px;background:#14b8a6;border-radius:50%;cursor:pointer;border:none}.volume-value{font-size:18px;font-weight:700;color:#14b8a6;min-width:50px;text-align:right}
.fractal-box{background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(109,40,217,.08));border:1px solid rgba(139,92,246,.25);border-radius:18px;padding:18px;margin-bottom:20px}.fractal-title{font-size:13px;font-weight:700;color:#8b5cf6;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}.fractal-current{background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.3);border-radius:12px;padding:14px;margin-bottom:16px}.fractal-current-label{font-size:11px;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}.fractal-current-title{font-size:16px;font-weight:700;color:#8b5cf6}
.fractal-add-box{background:rgba(255,255,255,.05);border-radius:12px;padding:14px;margin-top:16px}.fractal-add-title{font-size:12px;font-weight:600;color:rgba(255,255,255,.5);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}.fractal-add-row{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}.fractal-add-input{flex:1;min-width:120px;padding:12px;border:2px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(15,23,42,.8);color:#fff;font-size:14px}.fractal-add-input:focus{outline:none;border-color:#8b5cf6}.fractal-vj-toggle{display:flex;align-items:center;gap:8px;padding:0 10px}.fractal-vj-label{font-size:14px;font-weight:600;color:#ec4899}.btn-fractal-add{padding:12px 20px;background:#8b5cf6;color:#fff;border:none;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}.fractal-list{margin-top:16px}.fractal-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background:rgba(255,255,255,.05);border-radius:10px;margin-bottom:8px;gap:10px}.fractal-item.playing{background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.4)}.fractal-item .title{font-size:14px;font-weight:500;color:#fff;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fractal-item .video-id{font-size:11px;color:rgba(255,255,255,.4);margin-left:8px}.fractal-help{background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.2);border-radius:12px;padding:14px;margin-top:14px;font-size:13px;color:rgba(255,255,255,.7);line-height:1.6}.fractal-help strong{color:#8b5cf6}
.settings-box{background:linear-gradient(135deg,rgba(100,116,139,.1),rgba(71,85,105,.08));border:1px solid rgba(100,116,139,.25);border-radius:18px;padding:18px;margin-bottom:20px}.settings-title{font-size:13px;font-weight:700;color:#64748b;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}.settings-row{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}.settings-label{font-size:14px;color:rgba(255,255,255,.65);min-width:130px}.settings-input{flex:1;min-width:200px;padding:14px;border:2px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(15,23,42,.8);color:#fff;font-size:14px;font-family:monospace}.settings-input:focus{outline:none;border-color:#64748b}.btn-settings{width:100%;padding:16px;background:linear-gradient(135deg,#64748b,#475569);color:#fff;border:none;border-radius:14px;font-weight:700;font-size:16px;cursor:pointer;min-height:56px;margin-top:10px}
.vj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.vj-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.vj-grid{grid-template-columns:repeat(3,1fr);gap:8px}}
.vj-card{background:rgba(255,255,255,.08);border:2px solid transparent;border-radius:14px;padding:16px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100px;text-align:center}.vj-card:hover{background:rgba(236,72,153,.15);border-color:rgba(236,72,153,.3)}.vj-card.playing{background:rgba(34,197,94,.2);border-color:#22c55e}.vj-card-title{font-size:12px;font-weight:600;color:#fff;word-break:break-word;line-height:1.3}.vj-card-icon{width:32px;height:32px;color:#ec4899;margin-bottom:8px}.vj-card.playing .vj-card-icon{color:#22c55e}
.vj-pagination{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:20px}.vj-page-btn{padding:10px 16px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;font-size:13px;font-weight:600}.vj-page-btn:disabled{opacity:.4;cursor:not-allowed}.vj-page-btn:not(:disabled):hover{background:rgba(236,72,153,.3)}.vj-page-info{font-size:13px;color:rgba(255,255,255,.6)}
.vj-stop-btn{width:100%;margin-top:16px;padding:14px;background:#ef4444;color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer}
.vj-divider{height:2px;background:linear-gradient(90deg,transparent,rgba(236,72,153,.3),transparent);margin:16px 0}
.vj-text-section{padding:0}.vj-text-title{display:none}
.vj-text-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
@media(max-width:900px){.vj-text-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.vj-text-grid{grid-template-columns:repeat(3,1fr);gap:8px}}
.vj-text-card{background:rgba(255,255,255,.08);border:2px solid transparent;border-radius:14px;padding:16px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100px;text-align:center;position:relative}.vj-text-card:hover{background:rgba(236,72,153,.15);border-color:rgba(236,72,153,.3)}.vj-text-card.playing{background:rgba(34,197,94,.2);border-color:#22c55e}.vj-text-card-text{font-size:12px;font-weight:600;color:#fff;word-break:break-word;line-height:1.3}.vj-text-card-effect{font-size:10px;color:rgba(255,255,255,.5);text-transform:uppercase;margin-top:6px}.vj-text-card-del{position:absolute;top:6px;right:6px;width:20px;height:20px;background:rgba(239,68,68,.8);border:none;border-radius:50%;color:#fff;font-size:14px;cursor:pointer;display:none;align-items:center;justify-content:center;line-height:1}.vj-text-card:hover .vj-text-card-del{display:flex}
.vj-text-stop-btn{width:100%;margin-bottom:12px;padding:12px;background:#ef4444;color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer}
.vj-text-add{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}.vj-text-input{flex:1 1 100%;min-width:0;padding:12px 14px;background:rgba(255,255,255,.08);border:2px solid rgba(236,72,153,.3);border-radius:12px;color:#fff;font-size:14px}.vj-text-input:focus{outline:none;border-color:#ec4899}.vj-text-effect{flex:1 1 auto;min-width:0;width:100%;padding:12px;background:rgba(255,255,255,.08);border:2px solid rgba(236,72,153,.3);border-radius:12px;color:#fff;font-size:13px;cursor:pointer}.vj-text-effect option{background:#1e293b;color:#fff}.vj-text-add-btn{flex:0 0 auto;padding:12px 24px;background:linear-gradient(135deg,#ec4899,#be185d);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.vj-text-add .vj-text-speed-wrap{flex:1 1 100%}
@media (min-width:640px){
    .vj-text-input{flex:1 1 100%}
    .vj-text-effect{flex:1 1 auto;width:auto;max-width:60%}
    .vj-text-add .vj-text-speed-wrap{flex:1 1 auto}
}
.vj-empty{text-align:center;padding:40px;color:rgba(255,255,255,.4);font-size:14px}
.strobe-section{padding:0}.strobe-title{font-size:13px;font-weight:700;color:#fff;margin-bottom:12px;letter-spacing:.5px;display:flex;align-items:center;gap:8px}.strobe-title-icon{width:20px;height:20px;background:linear-gradient(135deg,#fff,#888);border-radius:4px;animation:strobeIconPulse 0.5s ease infinite}
@keyframes strobeIconPulse{0%,100%{opacity:1}50%{opacity:0.3}}
.strobe-speeds{display:flex;gap:8px;margin-bottom:12px}.strobe-speed-btn{flex:1;padding:10px 8px;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.2);border-radius:10px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.strobe-speed-btn:hover{background:rgba(255,255,255,.2)}.strobe-speed-btn.active{background:rgba(255,255,255,.3);border-color:#fff}
.strobe-colors{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.strobe-color-btn{aspect-ratio:1;border-radius:12px;border:3px solid rgba(0,0,0,.3);cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.strobe-color-btn:hover{transform:scale(1.05);box-shadow:0 0 20px currentColor}.strobe-color-btn.active{border-color:#fff;box-shadow:0 0 30px currentColor}
.strobe-color-btn.white{background:#fff}.strobe-color-btn.red{background:#ef4444}.strobe-color-btn.blue{background:#3b82f6}.strobe-color-btn.green{background:#22c55e}.strobe-color-btn.yellow{background:#eab308}.strobe-color-btn.magenta{background:#ec4899}.strobe-color-btn.cyan{background:#06b6d4}.strobe-color-btn.orange{background:#f97316}.strobe-color-btn.multi.police{background:linear-gradient(135deg,#ef4444 50%,#3b82f6 50%)}.strobe-color-btn.multi.fire{background:linear-gradient(135deg,#ef4444 50%,#f97316 50%)}.strobe-color-btn.multi.toxic{background:linear-gradient(135deg,#22c55e 50%,#eab308 50%)}.strobe-color-btn.multi.party{background:linear-gradient(135deg,#ec4899 50%,#06b6d4 50%)}
.strobe-special{display:flex;gap:8px;margin-bottom:12px}.strobe-special-btn{flex:1;padding:12px 8px;border:2px solid;border-radius:10px;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;text-transform:uppercase}.strobe-special-btn.rainbow{background:linear-gradient(90deg,#ef4444,#f97316,#eab308,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899);border-color:transparent;color:#000}.strobe-special-btn.blackout{background:#000;border-color:#333;color:#fff}.strobe-special-btn.blackout:hover{border-color:#ef4444}.strobe-special-btn.blackout.active{border-color:#ef4444;box-shadow:0 0 20px rgba(239,68,68,.5)}
.strobe-stop-btn{width:100%;margin-top:12px;padding:12px;background:#ef4444;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer}.strobe-status{text-align:center;font-size:11px;color:rgba(255,255,255,.5);margin-top:8px}
.vj-tabs{display:flex;gap:8px;margin-bottom:16px}.vj-tab-btn{flex:1;padding:14px 12px;background:rgba(255,255,255,.08);border:2px solid transparent;border-radius:12px;color:rgba(255,255,255,.7);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .2s ease;text-align:center}.vj-tab-btn:hover{background:rgba(255,255,255,.12);color:#fff}.vj-tab-btn.active{background:linear-gradient(135deg,#8b5cf6,#6d28d9);border-color:#8b5cf6;color:#fff;box-shadow:0 4px 15px rgba(139,92,246,.3)}.vj-tab-btn.tab-loops.active{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-color:#3b82f6;box-shadow:0 4px 15px rgba(59,130,246,.3)}.vj-tab-btn.tab-strobe.active{background:linear-gradient(135deg,#f59e0b,#d97706);border-color:#f59e0b;box-shadow:0 4px 15px rgba(245,158,11,.3)}.vj-tab-btn.tab-text.active{background:linear-gradient(135deg,#ec4899,#be185d);border-color:#ec4899;box-shadow:0 4px 15px rgba(236,72,153,.3)}
.vj-tab-content{display:none}.vj-tab-content.active{display:block}
.gp-pending-header{padding:16px;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid rgba(255,255,255,.08)}.gp-pending-title{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:#fff}.gp-pending-icon{width:20px;height:20px;color:#3b82f6;flex-shrink:0}.gp-pending-num{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 8px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:13px;font-weight:800;border-radius:13px}.gp-pending-actions{display:flex;gap:8px}
.gp-bulk-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 10px;border:none;border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;transition:opacity .2s}.gp-bulk-btn svg{width:16px;height:16px;flex-shrink:0}.gp-bulk-btn:active{opacity:.8;transform:scale(0.98)}.gp-bulk-approve{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}.gp-bulk-reject{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.3)}
.gp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}.gp-card{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;cursor:pointer;border:2px solid rgba(255,255,255,.08);transition:border-color .2s,transform .15s;background:rgba(255,255,255,.03)}.gp-card:active{border-color:#f59e0b;transform:scale(0.97)}.gp-card img{width:100%;height:100%;object-fit:cover}.gp-card-time{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.75);color:rgba(255,255,255,.9);font-size:12px;padding:4px 10px;border-radius:8px;font-weight:600;backdrop-filter:blur(4px)}.gp-card-badge{position:absolute;top:8px;left:8px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#0f172a;font-size:10px;font-weight:800;padding:4px 10px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px}.gp-card-approved{border-color:rgba(34,197,94,.2)}.gp-card-approved:active{border-color:#22c55e}
.gp-empty{padding:50px 20px;text-align:center;color:rgba(255,255,255,.3);width:100%;grid-column:1/-1;font-size:14px}
.gp-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background:rgba(0,0,0,.92);display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px}.gp-modal-overlay.active{display:flex}.gp-modal{display:flex;flex-direction:column;align-items:center;gap:20px;max-width:400px;width:100%}.gp-modal-img{width:100%;max-height:55vh;object-fit:contain;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,.5)}.gp-modal-time{font-size:14px;color:rgba(255,255,255,.5)}.gp-modal-btns{display:flex;gap:12px;width:100%}.gp-modal-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 16px;border:none;border-radius:14px;font-size:17px;font-weight:700;cursor:pointer;min-height:60px}.gp-modal-btn svg{width:24px;height:24px}.gp-modal-btn.approve{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}.gp-modal-btn.reject{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.gp-modal-btn.delete{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.gp-modal-btn:active{transform:scale(0.97)}.gp-modal-close{position:absolute;top:20px;right:20px;width:44px;height:44px;background:rgba(255,255,255,.15);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}.gp-modal-close svg{width:24px;height:24px}
.gp-alert{display:flex;align-items:center;gap:12px;padding:14px 20px;background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(239,68,68,.1));border:1px solid rgba(245,158,11,.4);border-radius:14px;margin-bottom:16px;animation:gpAlertPulse 2s ease-in-out infinite}.gp-alert-icon{width:22px;height:22px;min-width:22px;color:#f59e0b}.gp-alert span{flex:1;font-size:14px;color:rgba(255,255,255,.9);line-height:1.4}.gp-alert strong{color:#f59e0b}.gp-alert-btn{padding:10px 20px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#0f172a;font-size:13px;font-weight:700;border:none;border-radius:10px;cursor:pointer;white-space:nowrap}.gp-alert-btn:hover{opacity:.9}
@keyframes gpAlertPulse{0%,100%{border-color:rgba(245,158,11,.4)}50%{border-color:rgba(245,158,11,.8)}}

/* LIVE DJ */
.nav-item.livedj.active{background:linear-gradient(135deg,#06b6d4,#0891b2)}
/* AI DJ */
.nav-item.aidj.active{background:linear-gradient(135deg,#6366f1,#a855f7)}
.livedj-current{background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.3);border-radius:12px;padding:14px;margin-bottom:16px}
.livedj-current-label{font-size:11px;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.livedj-current-title{font-size:16px;font-weight:700;color:#06b6d4}
.livedj-controls{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;margin-bottom:16px}
.livedj-ctrl-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px 8px;border:none;border-radius:14px;font-size:13px;font-weight:700;cursor:pointer;transition:opacity .2s;white-space:nowrap;min-height:56px}
.livedj-ctrl-btn svg{width:28px;height:28px;flex-shrink:0}
.livedj-ctrl-btn.play{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}
.livedj-ctrl-btn.stop{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}
.livedj-ctrl-btn.skip{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}
.livedj-ctrl-btn.load{background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff}
.livedj-ctrl-btn.clear{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.25);min-height:44px;font-size:12px}
.livedj-ctrl-btn.clear svg{width:16px;height:16px}
.livedj-ctrl-btn.save{background:rgba(34,197,94,.1);color:#22c55e;border:1px solid rgba(34,197,94,.25);min-height:44px;font-size:12px}
.livedj-ctrl-btn.save svg{width:16px;height:16px}
.livedj-bottom-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.livedj-bottom-btn{width:100%}
.livedj-ctrl-btn:disabled{opacity:.5;cursor:not-allowed}
.livedj-saved-list{max-height:250px;overflow-y:auto;margin:12px 0}
.livedj-saved-item{display:flex;align-items:center;justify-content:space-between;padding:14px;background:rgba(255,255,255,.06);border-radius:10px;margin-bottom:6px;cursor:pointer;transition:background .15s}
.livedj-saved-item:active{background:rgba(6,182,212,.2)}
.livedj-saved-name{font-size:14px;color:#fff;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.livedj-saved-del{width:32px;height:32px;border-radius:8px;background:rgba(239,68,68,.15);color:#ef4444;border:none;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:8px}
.livedj-save-input-wrap{margin:12px 0}
.livedj-save-input{width:100%;padding:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:10px;color:#fff;font-size:15px;outline:none;box-sizing:border-box}
.livedj-save-input:focus{border-color:#06b6d4}
.livedj-confirm-btn.save{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}
.livedj-confirm-btn.save svg{width:18px;height:18px}
.livedj-search-box{background:rgba(255,255,255,.05);border-radius:12px;padding:14px;margin-bottom:16px}
.livedj-search-title{font-size:12px;font-weight:600;color:rgba(255,255,255,.5);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.livedj-search-row{display:flex;gap:8px}
.livedj-search-input{flex:1;min-width:0;padding:14px;border:2px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(15,23,42,.8);color:#fff;font-size:15px}
.livedj-search-input:focus{outline:none;border-color:#06b6d4}
.livedj-search-btn{padding:14px 18px;background:#06b6d4;color:#fff;border:none;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.livedj-search-btn:disabled{opacity:.5}
.livedj-search-results{margin-top:12px}
.livedj-sr{display:flex;align-items:center;gap:10px;padding:10px;background:rgba(255,255,255,.05);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:background .2s}
.livedj-sr:hover{background:rgba(6,182,212,.15)}
.livedj-sr-thumb{width:64px;height:48px;border-radius:6px;overflow:hidden;flex-shrink:0;background:rgba(0,0,0,.3)}
.livedj-sr-thumb img{width:100%;height:100%;object-fit:cover}
.livedj-sr-info{flex:1;min-width:0}
.livedj-sr-title{font-size:13px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.livedj-sr-channel{font-size:11px;color:rgba(255,255,255,.5)}
.livedj-sr-dur{font-size:11px;color:rgba(255,255,255,.4);margin-top:2px}
.livedj-sr-add{width:36px;height:36px;border-radius:50%;background:rgba(34,197,94,.2);color:#22c55e;border:1px solid #22c55e;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.livedj-sr-add svg{width:18px;height:18px}
.livedj-sr-add.added{background:rgba(34,197,94,.4);color:#fff;border-color:#22c55e;pointer-events:none}
.livedj-queue-title{font-size:12px;font-weight:600;color:rgba(255,255,255,.5);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:8px}
.livedj-queue-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;background:rgba(6,182,212,.3);color:#06b6d4;font-size:11px;font-weight:800;border-radius:11px}
.livedj-queue{min-height:60px}
.livedj-qi{display:flex;align-items:center;gap:8px;padding:10px;background:rgba(255,255,255,.05);border-radius:10px;margin-bottom:6px;transition:background .2s,transform .15s,opacity .3s;position:relative;cursor:grab;user-select:none;-webkit-user-select:none;overflow:hidden}
.livedj-qi-progress{position:absolute;top:0;left:0;height:100%;background:rgba(34,197,94,.12);pointer-events:none;transition:width .8s linear;z-index:0}
.livedj-qi-num{position:relative;z-index:1}
.livedj-qi-info{position:relative;z-index:1}
.livedj-qi-status{position:relative;z-index:1}
.livedj-qi:active{cursor:grabbing}
.livedj-qi.playing{background:rgba(34,197,94,.15);border:1px solid rgba(34,197,94,.4)}
.livedj-qi.played{opacity:.4}
.livedj-qi.drag-over{border-top:2px solid #06b6d4}
.livedj-qi.dragging{opacity:.3;transform:scale(.97)}
.livedj-qi-num{font-size:11px;font-weight:700;color:rgba(255,255,255,.35);min-width:18px;text-align:center;flex-shrink:0}
.livedj-qi-info{flex:1;min-width:0}
.livedj-qi-title{font-size:13px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.livedj-qi-channel{font-size:11px;color:rgba(255,255,255,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.livedj-qi-dur{color:rgba(255,255,255,.3)}
.livedj-qi-dur{font-size:11px;color:rgba(255,255,255,.4)}
.livedj-qi-status{font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
.livedj-qi-status.playing{background:rgba(34,197,94,.3);color:#22c55e}
.livedj-qi-status.played{background:rgba(255,255,255,.1);color:rgba(255,255,255,.4)}
.livedj-queue-empty{padding:30px;text-align:center;color:rgba(255,255,255,.3);font-size:13px}

/* Live DJ Confirm Popup */
.livedj-confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .2s ease;pointer-events:none}
.livedj-confirm-overlay.active{opacity:1;pointer-events:auto}
.livedj-confirm-box{background:linear-gradient(135deg,#1e293b,#0f172a);border:1px solid rgba(6,182,212,.3);border-radius:18px;padding:24px;max-width:340px;width:100%;text-align:center;transform:scale(.9);transition:transform .2s ease}
.livedj-confirm-overlay.active .livedj-confirm-box{transform:scale(1)}
.livedj-confirm-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:6px;line-height:1.4;word-break:break-word}
.livedj-confirm-meta{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:20px}
.livedj-confirm-btns{display:flex;flex-direction:column;gap:10px}
.livedj-confirm-btn{width:100%;padding:16px;border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px}
.livedj-confirm-btn.add{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}
.livedj-confirm-btn.add svg{width:20px;height:20px}
.livedj-confirm-btn.playnow{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}
.livedj-confirm-btn.playnow svg{width:20px;height:20px}
.livedj-confirm-btn.del{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}
.livedj-confirm-btn.del svg{width:18px;height:18px}
.livedj-confirm-btn.cancel{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
.livedj-confirm-btn:active{transform:scale(.97)}
.livedj-sr{cursor:pointer}
.livedj-sr.added{opacity:.5;pointer-events:none;position:relative}
.livedj-sr.added::after{content:'\2713 Dodano';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;color:#22c55e;background:rgba(34,197,94,.15);padding:4px 10px;border-radius:6px}

/* Touch drag ghost */
.livedj-qi-ghost{opacity:.85;background:rgba(6,182,212,.25);border:2px solid #06b6d4;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.5);transform:scale(1.02)}
.livedj-qi.dragging{opacity:.3;background:rgba(255,255,255,.02)}
.livedj-qi.drag-active{background:rgba(6,182,212,.2);border:1px solid rgba(6,182,212,.5)}
.livedj-qi{-webkit-touch-callout:none}/* ======================================================================
   REZERVACIJE - dodatak na kraj postojeceg style.css
   ====================================================================== */

/* Info box override za rezervacije (zelena nijansa) */
.info-box.rezv-info{background:rgba(20,184,166,.1);border-color:rgba(20,184,166,.3)}
.info-box.rezv-info strong{color:#2dd4bf}

/* Toolbar */
.rezv-toolbar{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    background:rgba(30,41,59,.9);
    border:1px solid rgba(255,255,255,.07);
    border-radius:14px;
    margin-bottom:16px;
    flex-wrap:wrap;
}
.rezv-toolbar-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rezv-toolbar-label{font-size:12px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.rezv-toolbar-value{font-size:14px;color:#fff;font-weight:700}
.rezv-btn-refresh{
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:auto;
    padding:10px 14px;
    background:rgba(20,184,166,.15);
    border:1px solid rgba(20,184,166,.4);
    color:#2dd4bf;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    min-height:42px;
}
.rezv-btn-refresh:hover{background:rgba(20,184,166,.25)}
.rezv-btn-refresh svg{width:15px;height:15px}
.rezv-btn-refresh:disabled{opacity:.5;cursor:not-allowed}

/* Kalendar kartica */
.rezv-calendar-card{
    background:rgba(30,41,59,.9);
    border:1px solid rgba(255,255,255,.07);
    border-radius:18px;
    padding:18px;
    margin-bottom:16px;
}
.rezv-calendar-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
    flex-wrap:wrap;
    gap:10px;
}
.rezv-calendar-title{font-size:14px;font-weight:700;color:#2dd4bf;text-transform:uppercase;letter-spacing:1px}
.rezv-calendar-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rezv-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(255,255,255,.55)}
.rezv-legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.rezv-legend-dot-some{background:#fbbf24}
.rezv-legend-dot-full{background:#ef4444}

.rezv-calendar-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}
@media(min-width:768px){
    .rezv-calendar-grid{
        grid-template-columns:repeat(7,1fr);
        gap:6px;
    }
}
.rezv-calendar-loading{
    grid-column:1/-1;
    text-align:center;
    padding:40px;
    color:rgba(255,255,255,.4);
    font-size:14px;
}
.rezv-calendar-weekday{
    display:none;
    text-align:center;
    font-size:10px;
    font-weight:700;
    color:rgba(255,255,255,.4);
    padding:6px 0;
    text-transform:uppercase;
    letter-spacing:.5px;
}
@media(min-width:768px){
    .rezv-calendar-weekday{display:block}
}
.rezv-calendar-day{
    position:relative;
    background:rgba(15,23,42,.8);
    border:2px solid rgba(255,255,255,.08);
    border-radius:12px;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:10px 6px;
    transition:transform .15s,border-color .15s,background .15s;
    min-height:78px;
    user-select:none;
}
@media(min-width:768px){
    .rezv-calendar-day{
        aspect-ratio:1;
        padding:4px;
        min-height:60px;
    }
}
.rezv-calendar-day:hover{background:rgba(20,184,166,.1);border-color:rgba(20,184,166,.4)}
.rezv-calendar-day:active{transform:scale(.96)}
.rezv-calendar-day.is-today{border-color:rgba(245,158,11,.6)}
.rezv-calendar-day.is-today .rezv-cal-day-num{color:#fbbf24}
.rezv-calendar-day.is-selected{
    background:linear-gradient(135deg,rgba(20,184,166,.3),rgba(13,148,136,.25));
    border-color:#2dd4bf;
    box-shadow:0 0 0 3px rgba(45,212,191,.15);
}
.rezv-calendar-day.is-past{opacity:.35;cursor:not-allowed;pointer-events:none}
.rezv-calendar-day.is-past:hover{background:rgba(15,23,42,.8);border-color:rgba(255,255,255,.08)}
.rezv-cal-day-name{font-size:11px;color:rgba(255,255,255,.55);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.rezv-cal-day-num{font-size:24px;font-weight:800;color:#fff;line-height:1.1;margin-top:4px}
.rezv-cal-day-month{font-size:10px;color:rgba(255,255,255,.45);font-weight:600;text-transform:uppercase;margin-top:2px}
@media(min-width:768px){
    .rezv-cal-day-name{font-size:10px;color:rgba(255,255,255,.45);letter-spacing:0}
    .rezv-cal-day-num{font-size:18px;margin-top:2px}
    .rezv-cal-day-month{font-size:9px;margin-top:1px}
}
.rezv-cal-day-count{
    position:absolute;
    top:4px;
    right:4px;
    font-size:9px;
    font-weight:800;
    background:rgba(251,191,36,.85);
    color:#0f172a;
    padding:1px 5px;
    border-radius:100px;
    min-width:16px;
    text-align:center;
    line-height:1.4;
}
.rezv-cal-day-count.is-full{background:rgba(239,68,68,.9);color:#fff}

/* Lokacije kartica */
.rezv-locations-card{
    background:rgba(30,41,59,.9);
    border:1px solid rgba(255,255,255,.07);
    border-radius:18px;
    padding:18px;
    margin-bottom:16px;
}
.rezv-locations-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
    flex-wrap:wrap;
    gap:10px;
}
.rezv-locations-title{font-size:14px;font-weight:700;color:#2dd4bf;text-transform:uppercase;letter-spacing:1px}

.rezv-locations-tabs{
    display:flex;
    gap:6px;
    margin-bottom:14px;
    overflow-x:auto;
    padding:0 0 6px 0;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
    position:relative;
    /* Fade indikator desno - kosi gradient da signalizira "ima još" */
    -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
    mask-image:linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
@media (min-width:768px){
    .rezv-locations-tabs{
        -webkit-mask-image:none;
        mask-image:none;
    }
}
.rezv-locations-tabs::-webkit-scrollbar{height:4px}
.rezv-locations-tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}
.rezv-tab{
    padding:8px 14px;
    background:rgba(15,23,42,.8);
    border:1px solid rgba(255,255,255,.1);
    color:rgba(255,255,255,.6);
    border-radius:10px;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    flex-shrink:0;
    min-height:36px;
}
.rezv-tab:hover{background:rgba(20,184,166,.1);color:#2dd4bf;border-color:rgba(20,184,166,.3)}
.rezv-tab.active{
    background:rgba(20,184,166,.25);
    border-color:#2dd4bf;
    color:#2dd4bf;
}
.rezv-tab-busy.active{
    background:rgba(239,68,68,.2);
    border-color:#ef4444;
    color:#f87171;
}

.rezv-locations-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    gap:10px;
}
.rezv-locations-grid.is-pending-mode{
    display:block;
}
@media(max-width:480px){
    .rezv-locations-grid{grid-template-columns:repeat(auto-fill,minmax(95px,1fr));gap:8px}
}
.rezv-locations-empty{
    grid-column:1/-1;
    text-align:center;
    padding:40px 20px;
    color:rgba(255,255,255,.35);
    font-size:14px;
}
.rezv-loc-card{
    position:relative;
    background:rgba(15,23,42,.9);
    border:2px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:14px 10px;
    cursor:pointer;
    transition:transform .15s,border-color .15s,background .15s;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    min-height:90px;
    user-select:none;
    overflow:hidden;
}
.rezv-loc-card:hover{transform:translateY(-2px);border-color:rgba(20,184,166,.4);background:rgba(20,184,166,.08)}
.rezv-loc-card:active{transform:translateY(0)}
.rezv-loc-icon{
    width:24px;
    height:24px;
    color:rgba(255,255,255,.4);
    margin-bottom:4px;
}
.rezv-loc-card.is-sank .rezv-loc-icon{color:#fbbf24}
.rezv-loc-card.is-stol .rezv-loc-icon{color:#60a5fa}
.rezv-loc-name{font-size:13px;font-weight:700;color:#fff;line-height:1.2}
.rezv-loc-cap{font-size:10px;color:rgba(255,255,255,.4);margin-top:2px;font-weight:600}

/* Slobodno = zeleni accent */
.rezv-loc-card.is-free{border-color:rgba(34,197,94,.3)}
.rezv-loc-card.is-free::after{
    content:"";
    position:absolute;
    top:6px;
    right:6px;
    width:8px;
    height:8px;
    background:#22c55e;
    border-radius:50%;
    box-shadow:0 0 6px rgba(34,197,94,.6);
}

/* Zauzeto */
.rezv-loc-card.is-busy{
    background:linear-gradient(135deg,rgba(239,68,68,.18),rgba(220,38,38,.1));
    border-color:rgba(239,68,68,.45);
}
.rezv-loc-card.is-busy:hover{background:linear-gradient(135deg,rgba(239,68,68,.28),rgba(220,38,38,.15))}
.rezv-loc-card.is-busy .rezv-loc-name{color:#fff}
.rezv-loc-busy-badge{
    position:absolute;
    top:6px;
    right:6px;
    font-size:9px;
    font-weight:800;
    background:#ef4444;
    color:#fff;
    padding:2px 6px;
    border-radius:100px;
    text-transform:uppercase;
    letter-spacing:.3px;
    line-height:1.2;
}
.rezv-loc-guest{
    font-size:10px;
    color:rgba(255,255,255,.85);
    font-weight:600;
    margin-top:6px;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding:0 4px;
}

.rezv-loc-card.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none}

/* Modal overlay */
.rezv-modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    z-index:9000;
    align-items:flex-start;
    justify-content:center;
    padding:20px 14px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
.rezv-modal-overlay.is-open{display:flex}

.rezv-modal{
    background:#1e293b;
    border:1px solid rgba(255,255,255,.1);
    border-radius:18px;
    width:100%;
    max-width:480px;
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    margin:auto;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
    -webkit-overflow-scrolling:touch;
}
.rezv-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 18px 14px;
    border-bottom:1px solid rgba(255,255,255,.08);
    position:sticky;
    top:0;
    background:#1e293b;
    z-index:1;
}
.rezv-modal-title{font-size:16px;font-weight:700;color:#fff}
.rezv-modal-close{
    background:rgba(255,255,255,.06);
    border:none;
    color:rgba(255,255,255,.6);
    width:34px;
    height:34px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.rezv-modal-close:hover{background:rgba(255,255,255,.12);color:#fff}
.rezv-modal-close svg{width:18px;height:18px}

.rezv-modal-meta{
    padding:14px 18px;
    background:rgba(15,23,42,.6);
    border-bottom:1px solid rgba(255,255,255,.05);
}
.rezv-modal-meta-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:4px 0;
    gap:10px;
}
.rezv-modal-meta-label{font-size:12px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.rezv-modal-meta-value{font-size:14px;color:#fff;font-weight:700;text-align:right;word-break:break-word}

.rezv-form{padding:18px}
.rezv-form-group{margin-bottom:14px}
.rezv-form-label{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:600;
    color:rgba(255,255,255,.75);
}
.rezv-form-optional{font-size:11px;font-weight:500;color:rgba(255,255,255,.4);margin-left:4px}
.rezv-form-input{
    width:100%;
    padding:14px 14px;
    border:2px solid rgba(255,255,255,.1);
    border-radius:12px;
    background:rgba(15,23,42,.85);
    color:#fff;
    font-size:16px;
    font-family:inherit;
}
.rezv-form-input:focus{outline:none;border-color:#2dd4bf}
.rezv-form-textarea{
    width:100%;
    padding:14px 14px;
    border:2px solid rgba(255,255,255,.1);
    border-radius:12px;
    background:rgba(15,23,42,.85);
    color:#fff;
    font-size:15px;
    font-family:inherit;
    resize:vertical;
    min-height:80px;
}
.rezv-form-textarea:focus{outline:none;border-color:#2dd4bf}
.rezv-form-counter{
    text-align:right;
    font-size:11px;
    color:rgba(255,255,255,.35);
    margin-top:4px;
}
.rezv-form-error{
    display:none;
    margin:0 18px 14px;
    padding:12px 14px;
    background:rgba(239,68,68,.12);
    border:1px solid rgba(239,68,68,.4);
    color:#fca5a5;
    border-radius:10px;
    font-size:13px;
    line-height:1.4;
}
.rezv-form-error.is-visible{display:block}

.rezv-form-actions{
    display:flex;
    gap:10px;
    padding:0 18px 18px;
}
.rezv-btn-cancel{
    flex:1;
    padding:14px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.75);
    border-radius:12px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    min-height:50px;
}
.rezv-btn-cancel:hover{background:rgba(255,255,255,.12)}
.rezv-btn-save{
    flex:2;
    padding:14px;
    background:linear-gradient(135deg,#14b8a6,#0d9488);
    border:none;
    color:#fff;
    border-radius:12px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    min-height:50px;
}
.rezv-btn-primary{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 16px;
    background:linear-gradient(135deg,#14b8a6,#0d9488);
    border:none;
    color:#fff;
    border-radius:10px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}
.rezv-btn-save:hover,
.rezv-btn-primary:hover{filter:brightness(1.1)}
.rezv-btn-save:disabled,
.rezv-btn-primary:disabled{opacity:.6;cursor:not-allowed;filter:none}

.rezv-btn-delete{
    flex:1;
    padding:14px;
    background:rgba(239,68,68,.15);
    border:1px solid #ef4444;
    color:#f87171;
    border-radius:12px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    min-height:50px;
}
.rezv-btn-delete:hover{background:rgba(239,68,68,.25)}
.rezv-btn-delete:disabled{opacity:.6;cursor:not-allowed}

/* Detalji */
.rezv-details-body{padding:18px}
.rezv-details-row{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.rezv-details-row:last-child{border-bottom:none}
.rezv-details-label{font-size:11px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.rezv-details-value{font-size:15px;color:#fff;font-weight:600;word-break:break-word}
.rezv-details-value.is-link{color:#60a5fa}
.rezv-details-value a{color:inherit;text-decoration:none}
.rezv-details-value a:hover{text-decoration:underline}
.rezv-details-email-status{
    display:inline-block;
    margin-left:6px;
    font-size:10px;
    font-weight:700;
    padding:2px 7px;
    border-radius:100px;
    text-transform:uppercase;
    letter-spacing:.3px;
}
.rezv-details-email-status.ok{background:rgba(34,197,94,.2);color:#4ade80;border:1px solid rgba(34,197,94,.4)}
.rezv-details-email-status.err{background:rgba(239,68,68,.2);color:#f87171;border:1px solid rgba(239,68,68,.4)}

/* Toast (lokalni za rezervacije) */
.rezv-toast{
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%) translateY(100px);
    background:#1e293b;
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    padding:14px 20px;
    color:#fff;
    font-size:13px;
    font-weight:600;
    box-shadow:0 10px 30px rgba(0,0,0,.5);
    z-index:9500;
    opacity:0;
    transition:opacity .25s,transform .25s;
    pointer-events:auto;
    cursor:pointer;
    max-width:92vw;
    width:auto;
    line-height:1.5;
    text-align:center;
    word-break:break-word;
}
.rezv-toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
.rezv-toast.is-success{border-color:rgba(34,197,94,.5);background:linear-gradient(135deg,#1e293b,rgba(34,197,94,.15))}
.rezv-toast.is-error{border-color:rgba(239,68,68,.5);background:linear-gradient(135deg,#1e293b,rgba(239,68,68,.15))}

/* Spinner */
.rezv-spinner{
    display:inline-block;
    width:14px;
    height:14px;
    border:2px solid rgba(255,255,255,.25);
    border-top-color:#fff;
    border-radius:50%;
    animation:rezvSpin .7s linear infinite;
    vertical-align:middle;
    margin-right:6px;
}
@keyframes rezvSpin{to{transform:rotate(360deg)}}

/* Nav item akcent za rezervacije */
.nav-item.rezv.active{background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff}


/* ======================================================================
   REZERVACIJE - INFORMATIVNA SVG MAPA (samo prikaz rasporeda)
   ====================================================================== */

.rezv-map-info-card{
    background:rgba(30,41,59,.9);
    border:1px solid rgba(255,255,255,.07);
    border-radius:18px;
    padding:18px;
    margin-bottom:16px;
}
.rezv-map-info-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    flex-wrap:wrap;
}
.rezv-map-info-icon{width:18px;height:18px;color:#2dd4bf;flex-shrink:0}
.rezv-map-info-title{
    font-size:14px;
    font-weight:700;
    color:#2dd4bf;
    text-transform:uppercase;
    letter-spacing:1px;
}
.rezv-map-info-hint{
    margin-left:auto;
    font-size:11px;
    color:rgba(255,255,255,.45);
    font-style:italic;
}
@media(max-width:480px){
    .rezv-map-info-hint{margin-left:0;width:100%;font-size:10px}
}

.rezv-map-info-canvas{
    position:relative;
    width:auto;
    aspect-ratio:1100/1000;
    overflow:hidden;
    margin-left:-18px;
    margin-right:-18px;
}
.rezv-map-info-canvas svg{
    display:block;
    width:100%;
    height:100%;
    user-select:none;
}

.rezv-map-info-legend{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:12px;
    padding:10px 12px;
    background:rgba(15,23,42,.6);
    border:1px solid rgba(255,255,255,.06);
    border-radius:10px;
}
.rezv-map-info-legend-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    color:rgba(255,255,255,.7);
    font-weight:600;
}
.rezv-map-info-swatch{
    display:inline-block;
    width:14px;
    height:14px;
    border-radius:3px;
    border:1.5px solid;
}
.rezv-swatch-sank{background:rgba(245,158,11,.2);border-color:#fbbf24;border-radius:50%}
.rezv-swatch-stol{background:rgba(96,165,250,.2);border-color:#60a5fa}
.rezv-swatch-entry{background:transparent;border-color:#2dd4bf;border-style:dashed}

/* SVG elementi mape */
.rezv-svg-bg-floor{fill:#1a2740}
.rezv-svg-room-outline{fill:none;stroke:rgba(255,255,255,.15);stroke-width:3}
.rezv-svg-room-label{
    fill:rgba(255,255,255,.18);
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

/* Sank-bar */
.rezv-svg-bar-top{
    fill:rgba(245,158,11,.12);
    stroke:rgba(245,158,11,.5);
    stroke-width:2;
}
.rezv-svg-bar-label{
    fill:#fbbf24;
    font-size:13px;
    font-weight:800;
    letter-spacing:3px;
    text-transform:uppercase;
}

/* Sankovi (krugovi) - amber boja */
.rezv-svg-sank-info{
    fill:rgba(245,158,11,.18);
    stroke:#fbbf24;
    stroke-width:2.5;
}
.rezv-svg-sank-info.is-occupied{
    fill:rgba(239,68,68,.22);
    stroke:#ef4444;
}
.rezv-svg-sank-num{
    fill:#fff;
    font-size:14px;
    font-weight:800;
    text-anchor:middle;
    dominant-baseline:central;
}
.rezv-svg-sank-num.is-occupied{
    fill:#fca5a5;
}

/* Stolovi (kvadrati) - plava boja */
.rezv-svg-stol-info{
    fill:rgba(96,165,250,.15);
    stroke:#60a5fa;
    stroke-width:2.5;
}
.rezv-svg-stol-info.is-occupied{
    fill:rgba(239,68,68,.18);
    stroke:#ef4444;
}
.rezv-svg-stol-num-info{
    fill:#fff;
    font-size:18px;
    font-weight:800;
    text-anchor:middle;
    dominant-baseline:central;
}
.rezv-svg-stol-num-info-mini{
    font-size:11px;
}
.rezv-svg-stol-num-info.is-occupied{
    fill:#fca5a5;
}

/* Ulaz */
.rezv-svg-entrance{
    fill:none;
    stroke:rgba(45,212,191,.7);
    stroke-width:3;
    stroke-dasharray:6 4;
}
.rezv-svg-entrance-label{
    fill:#2dd4bf;
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

/* ======================================================================
   REZERVACIJE - Phone country selector
   ====================================================================== */
.rezv-phone-wrap{
    display:flex;
    gap:8px;
    align-items:stretch;
}
.rezv-form-country{
    flex:0 0 auto;
    width:130px;
    padding:14px 10px;
    border:2px solid rgba(255,255,255,.1);
    border-radius:12px;
    background:rgba(15,23,42,.85);
    color:#fff;
    font-size:14px;
    font-family:inherit;
    font-weight:600;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232dd4bf'%3e%3cpath d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
    background-repeat:no-repeat;
    background-position:right 6px center;
    background-size:14px;
    padding-right:24px;
}
.rezv-form-country:focus{outline:none;border-color:#2dd4bf}
.rezv-form-country option{
    background:#1e293b;
    color:#fff;
    font-size:14px;
    padding:8px;
}
.rezv-form-phone-input{
    flex:1;
    min-width:0;
}
.rezv-form-hint{
    font-size:11px;
    color:rgba(255,255,255,.4);
    margin-top:6px;
    line-height:1.4;
}
@media(max-width:380px){
    .rezv-form-country{width:115px;font-size:13px}
}

/* Country code badge u modalu detalja */
.rezv-cc-badge{
    display:inline-block;
    background:rgba(20,184,166,.2);
    border:1px solid rgba(20,184,166,.4);
    color:#2dd4bf;
    font-size:11px;
    font-weight:800;
    padding:2px 8px;
    border-radius:6px;
    letter-spacing:.5px;
    margin-right:6px;
    text-transform:uppercase;
}

/* Test SMS dugme i dijagnostika */
.rezv-btn-test-sms{
    display:flex;
    align-items:center;
    gap:6px;
    padding:10px 14px;
    background:rgba(168,85,247,.15);
    border:1px solid rgba(168,85,247,.4);
    color:#c084fc;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    min-height:42px;
}
.rezv-btn-test-sms:hover{background:rgba(168,85,247,.25)}
.rezv-btn-test-sms svg{width:15px;height:15px}
.rezv-btn-test-sms:disabled{opacity:.5;cursor:not-allowed}

.rezv-test-sms-diag{
    background:rgba(15,23,42,.85);
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    padding:12px;
    font-family:monospace;
    font-size:11px;
    line-height:1.6;
    color:rgba(255,255,255,.85);
    white-space:pre-wrap;
    word-break:break-all;
    max-height:400px;
    overflow-y:auto;
}
.rezv-test-sms-diag-row{
    padding:4px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
}
.rezv-test-sms-diag-row:last-child{border-bottom:none}
.rezv-test-sms-diag-key{color:#2dd4bf;font-weight:700;display:inline-block;min-width:130px}
.rezv-test-sms-diag-val{color:#fff;word-break:break-all}
.rezv-test-sms-diag-success{
    background:rgba(34,197,94,.1);
    border:1px solid rgba(34,197,94,.4);
    color:#4ade80;
    padding:10px 12px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    margin-bottom:10px;
    line-height:1.5;
}
.rezv-test-sms-diag-error{
    background:rgba(239,68,68,.1);
    border:1px solid rgba(239,68,68,.4);
    color:#f87171;
    padding:10px 12px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    margin-bottom:10px;
    line-height:1.5;
}

/* Praznici u kalendaru */
.rezv-calendar-day.is-holiday{
    background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(124,58,237,.12));
    border-color:rgba(168,85,247,.5);
}
.rezv-calendar-day.is-holiday .rezv-cal-day-num{color:#c084fc}
.rezv-calendar-day.is-holiday.is-today{
    border-color:#fbbf24;
    box-shadow:0 0 0 2px rgba(251,191,36,.3);
}
.rezv-calendar-day.is-holiday.is-selected{
    background:linear-gradient(135deg,rgba(168,85,247,.4),rgba(124,58,237,.3));
    border-color:#a855f7;
    box-shadow:0 0 0 3px rgba(168,85,247,.25);
}
.rezv-cal-day-holiday{
    display:block;
    margin-top:4px;
    padding:2px 5px;
    background:rgba(168,85,247,.3);
    color:#e9d5ff;
    border-radius:5px;
    font-size:9px;
    font-weight:700;
    line-height:1.2;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-transform:uppercase;
    letter-spacing:.3px;
}
@media(min-width:768px){
    .rezv-cal-day-holiday{font-size:8px;padding:1px 4px}
}

/* Postavke - Praznici panel */
.rezv-hol-info{
    background:rgba(168,85,247,.1);
    border:1px solid rgba(168,85,247,.25);
    border-radius:12px;
    padding:12px 14px;
    font-size:13px;
    color:rgba(255,255,255,.75);
    line-height:1.5;
    margin-bottom:14px;
}
.rezv-hol-info strong{color:#fbbf24}

.rezv-hol-add-form{
    background:rgba(15,23,42,.6);
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
    padding:14px;
    margin-bottom:14px;
}
.rezv-hol-add-row{
    display:flex;
    gap:10px;
    margin-bottom:10px;
    flex-wrap:wrap;
}
.rezv-hol-add-col{
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1;
    min-width:140px;
}
.rezv-hol-add-col-name{flex:2;min-width:200px}
.rezv-hol-label{
    font-size:12px;
    color:rgba(255,255,255,.55);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.rezv-hol-add-btn{
    width:100%;
    background:linear-gradient(135deg,#a855f7,#7c3aed) !important;
    color:#fff !important;
    border:none !important;
    margin-top:0 !important;
}
.rezv-hol-add-btn:hover{filter:brightness(1.1)}
.rezv-hol-error{
    display:none;
    margin-top:10px;
    padding:10px 12px;
    background:rgba(239,68,68,.12);
    border:1px solid rgba(239,68,68,.4);
    color:#fca5a5;
    border-radius:8px;
    font-size:12px;
    line-height:1.4;
}
.rezv-hol-error.is-visible{display:block}
.rezv-hol-error.is-success{
    background:rgba(34,197,94,.12);
    border-color:rgba(34,197,94,.4);
    color:#86efac;
}

.rezv-hol-list{
    display:flex;
    flex-direction:column;
    gap:6px;
    max-height:400px;
    overflow-y:auto;
}
.rezv-hol-loading{
    text-align:center;
    padding:24px;
    color:rgba(255,255,255,.4);
    font-size:13px;
}
.rezv-hol-empty{
    text-align:center;
    padding:24px;
    color:rgba(255,255,255,.35);
    font-size:13px;
    font-style:italic;
}
.rezv-hol-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    background:rgba(15,23,42,.7);
    border:1px solid rgba(255,255,255,.06);
    border-radius:10px;
}
.rezv-hol-item.is-inactive{opacity:.4}
.rezv-hol-item-date{
    flex-shrink:0;
    background:rgba(168,85,247,.2);
    border:1px solid rgba(168,85,247,.4);
    color:#c084fc;
    font-size:11px;
    font-weight:700;
    padding:4px 8px;
    border-radius:6px;
    font-family:monospace;
    min-width:88px;
    text-align:center;
}
.rezv-hol-item.is-past .rezv-hol-item-date{
    background:rgba(100,116,139,.2);
    border-color:rgba(100,116,139,.4);
    color:#94a3b8;
}
.rezv-hol-item-name{
    flex:1;
    font-size:13px;
    color:rgba(255,255,255,.9);
    font-weight:600;
    word-break:break-word;
    min-width:0;
}
.rezv-hol-item-toggle{
    flex-shrink:0;
}
.rezv-hol-item-toggle input{display:none}
.rezv-hol-item-toggle-slider{
    display:inline-block;
    width:36px;
    height:20px;
    background:rgba(255,255,255,.15);
    border-radius:20px;
    position:relative;
    cursor:pointer;
    transition:background .2s;
}
.rezv-hol-item-toggle-slider::before{
    content:'';
    position:absolute;
    width:14px;
    height:14px;
    left:3px;
    top:3px;
    background:#fff;
    border-radius:50%;
    transition:.2s;
}
.rezv-hol-item-toggle input:checked + .rezv-hol-item-toggle-slider{background:#22c55e}
.rezv-hol-item-toggle input:checked + .rezv-hol-item-toggle-slider::before{transform:translateX(16px)}

.rezv-hol-item-del{
    flex-shrink:0;
    background:rgba(239,68,68,.15);
    border:1px solid rgba(239,68,68,.4);
    color:#f87171;
    width:30px;
    height:30px;
    border-radius:8px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .15s;
}
.rezv-hol-item-del:hover{background:rgba(239,68,68,.3)}
.rezv-hol-item-del svg{width:14px;height:14px}

@media(max-width:480px){
    .rezv-hol-add-col,.rezv-hol-add-col-name{flex:1 1 100%;min-width:0}
    .rezv-hol-item-date{min-width:75px;font-size:10px;padding:3px 6px}
    .rezv-hol-item-name{font-size:12px}
}

/* SVG mapa - terasa i zid */
.rezv-svg-bg-terrace{fill:rgba(15,23,42,.6)}
.rezv-svg-terrace-outline{
    fill:none;
    stroke:rgba(255,255,255,.2);
    stroke-width:2;
    stroke-dasharray:8,6;
}
.rezv-svg-area-label{
    fill:rgba(20,184,166,.5);
    font-size:18px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    font-family:'Inter','Segoe UI',sans-serif;
}
.rezv-svg-area-label-terrace{
    fill:rgba(168,85,247,.55);
    font-size:18px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    font-family:'Inter','Segoe UI',sans-serif;
}
.rezv-svg-wall{
    stroke:rgba(255,255,255,.55);
    stroke-width:6;
    stroke-linecap:round;
}
.rezv-svg-door-gap{
    fill:rgba(15,23,42,.95);
}
.rezv-svg-door-label{
    fill:rgba(255,255,255,.5);
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    font-family:'Inter','Segoe UI',sans-serif;
}
.rezv-svg-stol-terrace{
    fill:rgba(168,85,247,.18);
    stroke:rgba(168,85,247,.55);
    stroke-width:2;
}
.rezv-svg-stol-num-terrace{
    fill:#e9d5ff;
    font-size:18px;
    font-weight:800;
    text-anchor:middle;
    dominant-baseline:central;
    font-family:'Inter','Segoe UI',sans-serif;
    pointer-events:none;
}


/* TV display postavke u Postavke sekciji */
.rezv-tv-set-info{
    background:rgba(94,234,212,.08);
    border:1px solid rgba(94,234,212,.2);
    border-radius:12px;
    padding:12px 14px;
    font-size:13px;
    color:rgba(255,255,255,.75);
    line-height:1.5;
    margin-bottom:14px;
}
.rezv-tv-set-toggle-row{
    display:flex;
    align-items:center;
    gap:14px;
    padding:12px;
    background:rgba(15,23,42,.6);
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
    margin-bottom:14px;
}
.rezv-tv-set-toggle{
    flex-shrink:0;
    cursor:pointer;
}
.rezv-tv-set-toggle input{display:none}
.rezv-tv-set-toggle-slider{
    display:inline-block;
    width:44px;
    height:24px;
    background:rgba(255,255,255,.15);
    border-radius:24px;
    position:relative;
    transition:background .2s;
}
.rezv-tv-set-toggle-slider::before{
    content:'';
    position:absolute;
    width:18px;
    height:18px;
    left:3px;
    top:3px;
    background:#fff;
    border-radius:50%;
    transition:.2s;
}
.rezv-tv-set-toggle input:checked + .rezv-tv-set-toggle-slider{background:#22c55e}
.rezv-tv-set-toggle input:checked + .rezv-tv-set-toggle-slider::before{transform:translateX(20px)}
.rezv-tv-set-toggle-label{
    font-size:14px;
    color:rgba(255,255,255,.9);
    font-weight:600;
}
.rezv-tv-set-row{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:14px;
}
.rezv-tv-set-label{
    font-size:12px;
    color:rgba(255,255,255,.55);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.rezv-tv-set-help{
    font-size:11px;
    color:rgba(255,255,255,.4);
    font-style:italic;
}
.rezv-tv-set-save-btn{
    width:100%;
    background:linear-gradient(135deg,#5eead4,#14b8a6) !important;
    color:#0f172a !important;
    border:none !important;
    font-weight:700 !important;
}
.rezv-tv-set-save-btn:hover{filter:brightness(1.05)}

/* === REZV PENDING UI === */
/* Nav badge */
.nav-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    height:20px;
    padding:0 6px;
    background:linear-gradient(135deg,#f59e0b,#dc2626);
    color:#fff;
    font-size:11px;
    font-weight:800;
    border-radius:999px;
    margin-left:8px;
    box-shadow:0 0 12px rgba(239,68,68,.5);
    animation:rezvPendingPulse 1.8s ease-in-out infinite;
}
@keyframes rezvPendingPulse{
    0%,100%{box-shadow:0 0 12px rgba(239,68,68,.5);transform:scale(1)}
    50%{box-shadow:0 0 20px rgba(239,68,68,.8);transform:scale(1.08)}
}

/* Pending banner */
.rezv-pending-banner{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 18px;
    background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(220,38,38,.12));
    border:1.5px solid rgba(245,158,11,.5);
    border-radius:14px;
    margin-bottom:16px;
    box-shadow:0 0 20px rgba(245,158,11,.15);
    animation:rezvBannerSlide .5s ease;
}
@keyframes rezvBannerSlide{
    from{opacity:0;transform:translateY(-10px)}
    to{opacity:1;transform:translateY(0)}
}
.rezv-pending-banner-icon{
    flex-shrink:0;
    width:42px;
    height:42px;
    background:linear-gradient(135deg,#f59e0b,#dc2626);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    animation:rezvBannerIconPulse 2s ease-in-out infinite;
}
@keyframes rezvBannerIconPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.7)}
    70%{box-shadow:0 0 0 10px rgba(245,158,11,0)}
}
.rezv-pending-banner-icon svg{
    width:22px;
    height:22px;
}
.rezv-pending-banner-text{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:3px;
    color:#fff;
    font-size:14px;
    line-height:1.4;
}
.rezv-pending-banner-text strong{
    color:#fbbf24;
    font-weight:800;
}
.rezv-pending-banner-hint{
    font-size:12px;
    color:rgba(255,255,255,.7);
}
.rezv-pending-banner-btn{
    flex-shrink:0;
    padding:10px 18px;
    background:linear-gradient(135deg,#fbbf24,#f59e0b);
    color:#1f1208;
    border:none;
    border-radius:10px;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:.15s;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.rezv-pending-banner-btn:hover{
    filter:brightness(1.08);
    transform:translateY(-1px);
}

/* Pending tab */
.rezv-tab-pending{
    background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(220,38,38,.1))!important;
    border-color:rgba(245,158,11,.4)!important;
    color:#fbbf24!important;
}
.rezv-tab-pending:hover{
    background:linear-gradient(135deg,rgba(245,158,11,.25),rgba(220,38,38,.15))!important;
    border-color:rgba(245,158,11,.6)!important;
}
.rezv-tab-pending.active{
    background:linear-gradient(135deg,#f59e0b,#dc2626)!important;
    color:#fff!important;
    border-color:transparent!important;
}
.rezv-tab-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    height:20px;
    padding:0 6px;
    background:#dc2626;
    color:#fff;
    font-size:11px;
    font-weight:800;
    border-radius:999px;
    margin-left:8px;
}
.rezv-tab-pending.active .rezv-tab-badge{
    background:rgba(0,0,0,.3);
}

/* Pending kartica */
.rezv-card.is-pending{
    border-color:rgba(245,158,11,.6)!important;
    background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(220,38,38,.06))!important;
    position:relative;
}
.rezv-card.is-pending::before{
    content:'NA ČEKANJU';
    position:absolute;
    top:6px;
    right:6px;
    background:linear-gradient(135deg,#f59e0b,#dc2626);
    color:#fff;
    font-size:8px;
    font-weight:800;
    padding:2px 6px;
    border-radius:4px;
    letter-spacing:.5px;
    z-index:2;
    animation:rezvPendingPulse 2s ease-in-out infinite;
}

/* Modal pending dugmad */
.rezv-modal-pending-actions{
    display:flex;
    gap:10px;
    margin-top:14px;
    flex-wrap:wrap;
}
.rezv-modal-pending-actions button{
    flex:1;
    min-width:140px;
    padding:12px 14px;
    border:none;
    border-radius:10px;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:.15s;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.rezv-btn-approve{
    background:linear-gradient(135deg,#22c55e,#16a34a);
    color:#fff;
}
.rezv-btn-approve:hover{filter:brightness(1.08)}
.rezv-btn-reject{
    background:linear-gradient(135deg,#ef4444,#dc2626);
    color:#fff;
}
.rezv-btn-reject:hover{filter:brightness(1.08)}

/* Pending lista - drastično pojednostavljen layout */
.rezv-pending-list,
.rezv-pending-list *{
    box-sizing:border-box;
}
.rezv-pending-list{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
}
.rezv-pending-list-item{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(220,38,38,.05));
    border:1.5px solid rgba(245,158,11,.5);
    border-radius:14px;
    padding:12px;
    box-shadow:0 2px 12px rgba(245,158,11,.08);
    margin-bottom:12px;
}
.rezv-pending-list-info{
    display:block !important;
    width:100% !important;
}
.rezv-pending-list-row1{
    display:block !important;
    width:100% !important;
    margin-bottom:8px;
}
.rezv-pending-list-loc{
    display:block;
    font-size:16px;
    font-weight:800;
    color:#fff;
    word-break:break-word;
    margin-bottom:4px;
}
.rezv-pending-list-source{
    display:inline-block;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding:3px 8px;
    border-radius:6px;
    font-weight:800;
    margin-bottom:6px;
}
.rezv-pending-list-source.is-public{
    background:rgba(94,234,212,.15);
    color:#5eead4;
    border:1px solid rgba(94,234,212,.3);
}
.rezv-pending-list-source.is-admin{
    background:rgba(168,85,247,.15);
    color:#c084fc;
    border:1px solid rgba(168,85,247,.3);
}
.rezv-pending-list-date{
    display:inline-block;
    font-size:13px;
    color:#fbbf24;
    background:rgba(251,191,36,.18);
    padding:4px 10px;
    border-radius:8px;
    font-weight:700;
    border:1px solid rgba(251,191,36,.3);
    margin-bottom:8px;
}
.rezv-pending-list-guest{
    display:block !important;
    width:100% !important;
    font-size:15px;
    color:#fff;
    font-weight:700;
    margin-bottom:8px;
    word-break:break-word;
}
.rezv-pending-list-contact{
    display:block !important;
    width:100% !important;
    margin-bottom:8px;
}
.rezv-pending-list-contact-link{
    display:flex !important;
    align-items:center;
    color:rgba(255,255,255,.85);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    background:rgba(255,255,255,.04);
    padding:8px 10px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.06);
    transition:.15s;
    width:100% !important;
    word-break:break-all;
    margin-bottom:6px;
}
.rezv-pending-list-contact-link:hover,
.rezv-pending-list-contact-link:active{
    background:rgba(94,234,212,.08);
    color:#5eead4;
    border-color:rgba(94,234,212,.2);
}
.rezv-pending-list-note{
    display:flex;
    align-items:flex-start;
    gap:8px;
    background:rgba(94,234,212,.06);
    border-left:3px solid rgba(94,234,212,.4);
    padding:8px 10px;
    border-radius:6px;
    font-size:12px;
    color:rgba(255,255,255,.75);
    line-height:1.5;
    font-style:italic;
    width:100% !important;
    margin-bottom:8px;
}
.rezv-pending-list-note svg{
    color:rgba(94,234,212,.7);
    margin-top:2px;
    flex-shrink:0;
}
.rezv-pending-list-actions{
    display:flex !important;
    gap:8px;
    width:100% !important;
}
.rezv-pending-list-actions button{
    flex:1 1 0 !important;
    width:50% !important;
    padding:13px 6px;
    border:none;
    border-radius:10px;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:.5px;
    transition:.15s;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
}
.rezv-pending-list-empty{
    padding:40px 20px;
    text-align:center;
    color:rgba(255,255,255,.5);
    font-size:14px;
    width:100%;
}
@media (min-width:768px){
    .rezv-pending-list-item{
        display:flex !important;
        flex-direction:row;
        align-items:center;
        gap:16px;
    }
    .rezv-pending-list-info{
        flex:1 1 auto !important;
        min-width:0;
        margin-bottom:0;
    }
    .rezv-pending-list-contact{
        display:flex !important;
        flex-direction:row;
        gap:8px;
        flex-wrap:wrap;
        margin-bottom:0;
    }
    .rezv-pending-list-contact-link{
        flex:0 1 auto !important;
        width:auto !important;
        margin-bottom:0;
    }
    .rezv-pending-list-actions{
        flex-direction:column !important;
        margin-top:0;
        flex-shrink:0;
        width:auto !important;
    }
    .rezv-pending-list-actions button{
        min-width:140px;
        width:auto !important;
    }
}

/* Reject modal */
.rezv-reject-modal-body{padding:18px 20px}
.rezv-reject-modal-info{
    background:rgba(239,68,68,.1);
    border:1px solid rgba(239,68,68,.3);
    border-radius:10px;
    padding:12px 14px;
    margin-bottom:14px;
    color:rgba(255,255,255,.85);
    font-size:13px;
    line-height:1.5;
}

/* Kalendar dani sa pending */
.rezv-cal-day.has-pending{
    border-color:rgba(245,158,11,.6)!important;
    box-shadow:0 0 0 2px rgba(245,158,11,.2);
}
.rezv-cal-day-pending{
    position:absolute;
    bottom:4px;
    right:4px;
    background:linear-gradient(135deg,#f59e0b,#dc2626);
    color:#fff;
    font-size:9px;
    font-weight:800;
    padding:2px 6px;
    border-radius:5px;
    line-height:1;
    box-shadow:0 0 8px rgba(245,158,11,.5);
}

/* Reject modal close button */
.rezv-modal-close-btn{
    background:none;
    border:none;
    color:rgba(255,255,255,.6);
    cursor:pointer;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    transition:.15s;
    padding:0;
}
.rezv-modal-close-btn:hover{
    background:rgba(255,255,255,.1);
    color:#fff;
}
.rezv-modal-close-btn svg{width:18px;height:18px}

/* ============================================================
   PENDING - HARD OVERRIDE NA KRAJU (najveći specifičnost)
   ============================================================ */
.rezv-locations-grid.is-pending-mode{
    display:block !important;
    width:100% !important;
    grid-template-columns:none !important;
    padding:0 !important;
    margin:0 !important;
}
.rezv-locations-grid.is-pending-mode > .rezv-pending-list,
.rezv-locations-grid.is-pending-mode > .rezv-pending-list-empty{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
}
.rezv-locations-grid.is-pending-mode .rezv-pending-list-item{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 12px 0 !important;
    padding:14px !important;
    box-sizing:border-box !important;
    background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(220,38,38,.05)) !important;
    border:1.5px solid rgba(245,158,11,.5) !important;
    border-radius:14px !important;
    float:none !important;
    clear:both !important;
}
.rezv-locations-grid.is-pending-mode .rezv-pending-list-info{
    display:block !important;
    width:100% !important;
}
.rezv-locations-grid.is-pending-mode .rezv-pending-list-row1{
    display:block !important;
    width:100% !important;
    margin-bottom:8px !important;
}
.rezv-locations-grid.is-pending-mode .rezv-pending-list-loc{
    display:block !important;
    font-size:17px !important;
    font-weight:800 !important;
    color:#fff !important;
    margin:0 0 6px 0 !important;
    word-wrap:break-word !important;
}
.rezv-locations-grid.is-pending-mode .rezv-pending-list-source,
.rezv-locations-grid.is-pending-mode .rezv-pending-list-date{
    display:inline-block !important;
    margin:0 6px 6px 0 !important;
    vertical-align:top !important;
}
.rezv-locations-grid.is-pending-mode .rezv-pending-list-guest{
    display:block !important;
    width:100% !important;
    font-size:15px !important;
    color:#fff !important;
    font-weight:700 !important;
    margin:0 0 8px 0 !important;
}
.rezv-locations-grid.is-pending-mode .rezv-pending-list-contact{
    display:block !important;
    width:100% !important;
    margin:0 0 8px 0 !important;
}
.rezv-locations-grid.is-pending-mode .rezv-pending-list-contact-link{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:9px 12px !important;
    margin:0 0 6px 0 !important;
    background:rgba(255,255,255,.05) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:8px !important;
    color:rgba(255,255,255,.9) !important;
    font-size:13px !important;
    font-weight:600 !important;
    text-decoration:none !important;
    word-break:break-all !important;
}
.rezv-locations-grid.is-pending-mode .rezv-pending-list-note{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    padding:8px 12px !important;
    margin:0 0 8px 0 !important;
    background:rgba(94,234,212,.06) !important;
    border-left:3px solid rgba(94,234,212,.4) !important;
    border-radius:6px !important;
    font-size:12px !important;
    color:rgba(255,255,255,.75) !important;
    font-style:italic !important;
    line-height:1.5 !important;
}
.rezv-locations-grid.is-pending-mode .rezv-pending-list-actions{
    display:block !important;
    width:100% !important;
    margin:8px 0 0 0 !important;
    font-size:0 !important; /* uklanja whitespace između inline-block dugmadi */
}
.rezv-locations-grid.is-pending-mode .rezv-pending-list-actions > button{
    display:inline-block !important;
    width:calc(50% - 4px) !important;
    box-sizing:border-box !important;
    padding:13px 4px !important;
    margin:0 !important;
    border:none !important;
    border-radius:10px !important;
    font-size:13px !important;
    font-weight:800 !important;
    text-transform:uppercase !important;
    letter-spacing:.3px !important;
    cursor:pointer !important;
    vertical-align:top !important;
    text-align:center !important;
    min-height:44px !important;
}
.rezv-locations-grid.is-pending-mode .rezv-pending-list-actions > button:first-child{
    margin-right:8px !important;
}
.rezv-locations-grid.is-pending-mode .rezv-pending-list-actions > button.rezv-btn-approve{
    background:linear-gradient(135deg,#22c55e,#16a34a) !important;
    color:#fff !important;
}
.rezv-locations-grid.is-pending-mode .rezv-pending-list-actions > button.rezv-btn-reject{
    background:linear-gradient(135deg,#ef4444,#dc2626) !important;
    color:#fff !important;
}

/* ============================================================
   ADMINI - MANAGER UI
   ============================================================ */
.user-card{
    background:rgba(30,41,59,.9);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:14px;
    margin-bottom:10px;
}
.user-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}
.user-card-name-wrap{
    flex:1;
    min-width:0;
}
.user-name{
    font-size:15px;
    font-weight:700;
    color:#fff;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.user-date{
    font-size:11px;
    color:rgba(255,255,255,.45);
    margin-top:3px;
}
.user-mgr-badge{
    display:inline-block;
    background:linear-gradient(135deg,#3b82f6,#2563eb);
    color:#fff;
    font-size:10px;
    font-weight:800;
    padding:4px 10px;
    border-radius:999px;
    text-transform:uppercase;
    letter-spacing:.8px;
    flex-shrink:0;
    box-shadow:0 0 10px rgba(59,130,246,.3);
}
.user-me-badge{
    display:inline-block;
    background:rgba(94,234,212,.15);
    color:#5eead4;
    font-size:10px;
    font-weight:700;
    padding:2px 7px;
    border-radius:5px;
    border:1px solid rgba(94,234,212,.3);
    text-transform:uppercase;
    letter-spacing:.5px;
}
.user-card-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.06);
}
.user-mgr-toggle{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    user-select:none;
}
.user-mgr-toggle input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.user-mgr-toggle-slider{
    position:relative;
    display:inline-block;
    width:44px;
    height:24px;
    background:rgba(255,255,255,.12);
    border-radius:24px;
    transition:.2s;
    flex-shrink:0;
}
.user-mgr-toggle-slider::before{
    content:'';
    position:absolute;
    width:18px;
    height:18px;
    left:3px;
    top:3px;
    background:#fff;
    border-radius:50%;
    transition:.2s;
}
.user-mgr-toggle input:checked + .user-mgr-toggle-slider{
    background:linear-gradient(135deg,#3b82f6,#2563eb);
}
.user-mgr-toggle input:checked + .user-mgr-toggle-slider::before{
    transform:translateX(20px);
}
.user-mgr-toggle-label{
    font-size:13px;
    color:rgba(255,255,255,.85);
    font-weight:600;
}
.btn-delete{
    background:rgba(239,68,68,.12);
    border:1px solid rgba(239,68,68,.4);
    color:#f87171;
    padding:8px 16px;
    border-radius:10px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:.5px;
    transition:.15s;
    flex-shrink:0;
}
.btn-delete:hover{
    background:rgba(239,68,68,.25);
    border-color:#ef4444;
    color:#fff;
}

/* User form (dodaj novog) */
.user-form{
    background:rgba(30,41,59,.9);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:16px;
    margin-bottom:18px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.user-input{
    width:100%;
    padding:12px 14px;
    border:1.5px solid rgba(255,255,255,.1);
    border-radius:10px;
    background:rgba(15,23,42,.7);
    color:#fff;
    font-size:14px;
    box-sizing:border-box;
    outline:none;
    transition:.15s;
}
.user-input:focus{border-color:#5eead4}
.user-form-mgr{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    user-select:none;
    padding:8px 4px;
}
.user-form-mgr input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.user-form-mgr-slider{
    position:relative;
    display:inline-block;
    width:44px;
    height:24px;
    background:rgba(255,255,255,.12);
    border-radius:24px;
    transition:.2s;
    flex-shrink:0;
}
.user-form-mgr-slider::before{
    content:'';
    position:absolute;
    width:18px;
    height:18px;
    left:3px;
    top:3px;
    background:#fff;
    border-radius:50%;
    transition:.2s;
}
.user-form-mgr input:checked + .user-form-mgr-slider{
    background:linear-gradient(135deg,#3b82f6,#2563eb);
}
.user-form-mgr input:checked + .user-form-mgr-slider::before{
    transform:translateX(20px);
}
.user-form-mgr-label{
    font-size:13px;
    color:rgba(255,255,255,.85);
    font-weight:600;
}
.btn-add{
    width:100%;
    padding:14px;
    background:linear-gradient(135deg,#22c55e,#16a34a);
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:.5px;
    min-height:48px;
}
.user-msg{
    font-size:13px;
    padding:0;
    color:transparent;
    transition:.2s;
    text-align:center;
}
.user-msg.success{
    color:#22c55e;
    padding:8px;
    background:rgba(34,197,94,.1);
    border-radius:8px;
}
.user-msg.error{
    color:#f87171;
    padding:8px;
    background:rgba(239,68,68,.1);
    border-radius:8px;
}

/* ============================================================
   SUPERADMIN UI - badge, toggle, form checkbox
   ============================================================ */
.user-card-badges{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:flex-end;
    flex-shrink:0;
}
.user-sa-badge{
    display:inline-block;
    background:linear-gradient(135deg,#f59e0b,#d97706);
    color:#1f1208;
    font-size:10px;
    font-weight:900;
    padding:4px 10px;
    border-radius:999px;
    text-transform:uppercase;
    letter-spacing:.8px;
    flex-shrink:0;
    box-shadow:0 0 12px rgba(245,158,11,.45);
    border:1px solid rgba(245,158,11,.6);
}
.user-card-toggles{
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
    min-width:0;
}
.user-sa-toggle{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    user-select:none;
}
.user-sa-toggle input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.user-sa-toggle-slider{
    position:relative;
    display:inline-block;
    width:44px;
    height:24px;
    background:rgba(255,255,255,.12);
    border-radius:24px;
    transition:.2s;
    flex-shrink:0;
}
.user-sa-toggle-slider::before{
    content:'';
    position:absolute;
    width:18px;
    height:18px;
    left:3px;
    top:3px;
    background:#fff;
    border-radius:50%;
    transition:.2s;
}
.user-sa-toggle input:checked + .user-sa-toggle-slider{
    background:linear-gradient(135deg,#f59e0b,#d97706);
}
.user-sa-toggle input:checked + .user-sa-toggle-slider::before{
    transform:translateX(20px);
}
.user-sa-toggle-label{
    font-size:13px;
    color:rgba(255,255,255,.85);
    font-weight:600;
}

/* User form - superadmin checkbox (kreiranje novog usera) */
.user-form-sa{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    user-select:none;
    padding:8px 4px;
}
.user-form-sa input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.user-form-sa-slider{
    position:relative;
    display:inline-block;
    width:44px;
    height:24px;
    background:rgba(255,255,255,.12);
    border-radius:24px;
    transition:.2s;
    flex-shrink:0;
}
.user-form-sa-slider::before{
    content:'';
    position:absolute;
    width:18px;
    height:18px;
    left:3px;
    top:3px;
    background:#fff;
    border-radius:50%;
    transition:.2s;
}
.user-form-sa input:checked + .user-form-sa-slider{
    background:linear-gradient(135deg,#f59e0b,#d97706);
}
.user-form-sa input:checked + .user-form-sa-slider::before{
    transform:translateX(20px);
}
.user-form-sa-label{
    font-size:13px;
    color:rgba(255,255,255,.85);
    font-weight:600;
}

/* ============================================================
   AUTOCOMPLETE - lista postojecih gostiju ispod imena
   ============================================================ */
.rezv-form-group-autocomplete{
    position:relative;
}
.rezv-name-suggestions{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:rgba(15,23,42,.98);
    border:1.5px solid rgba(94,234,212,.35);
    border-radius:12px;
    margin-top:4px;
    box-shadow:0 12px 32px rgba(0,0,0,.5),0 0 30px rgba(20,184,166,.15);
    z-index:30;
    max-height:280px;
    overflow-y:auto;
    backdrop-filter:blur(10px);
}
.rezv-name-suggestion{
    display:block;
    width:100%;
    padding:10px 12px;
    background:none;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:#fff;
    text-align:left;
    cursor:pointer;
    transition:.15s;
    box-sizing:border-box;
}
.rezv-name-suggestion:last-child{border-bottom:none}
.rezv-name-suggestion:hover,
.rezv-name-suggestion.is-active{
    background:rgba(20,184,166,.12);
}
.rezv-name-suggestion-name{
    font-size:14px;
    font-weight:700;
    color:#fff;
    margin-bottom:2px;
}
.rezv-name-suggestion-meta{
    font-size:11px;
    color:rgba(255,255,255,.55);
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.rezv-name-suggestion-meta span{
    display:inline-flex;
    align-items:center;
    gap:3px;
}
.rezv-name-suggestion-count{
    color:#5eead4;
    font-weight:700;
}
.rezv-name-suggestion-empty{
    padding:14px;
    text-align:center;
    color:rgba(255,255,255,.4);
    font-size:13px;
}

/* ============================================================
   ARHIVA - dugmad na dnu sekcije
   ============================================================ */
.rezv-archive-btns{
    display:flex;
    gap:12px;
    margin-top:24px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.06);
}
.rezv-archive-btn{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:16px 18px;
    background:linear-gradient(135deg,rgba(30,41,59,.9),rgba(20,184,166,.05));
    border:1.5px solid rgba(94,234,212,.25);
    border-radius:14px;
    color:#fff;
    cursor:pointer;
    transition:.2s;
    text-align:left;
    font-family:inherit;
}
.rezv-archive-btn:hover{
    background:linear-gradient(135deg,rgba(20,184,166,.15),rgba(94,234,212,.08));
    border-color:rgba(94,234,212,.55);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(20,184,166,.2);
}
.rezv-archive-btn svg{
    width:24px;
    height:24px;
    color:#5eead4;
    margin-bottom:4px;
}
.rezv-archive-btn-label{
    font-size:15px;
    font-weight:800;
    color:#fff;
    line-height:1.2;
}
.rezv-archive-btn-hint{
    font-size:11px;
    color:rgba(255,255,255,.55);
    font-weight:500;
    line-height:1.3;
}
@media(max-width:640px){
    .rezv-archive-btns{flex-direction:column}
}

/* ============================================================
   ARHIVA - modal i lista
   ============================================================ */
.rezv-modal-wide{
    max-width:780px !important;
}
.rezv-arch-search-wrap{
    position:relative;
    margin:0 0 12px;
}
.rezv-arch-search-icon{
    position:absolute;
    top:50%;
    left:14px;
    transform:translateY(-50%);
    width:16px;
    height:16px;
    color:rgba(255,255,255,.5);
    pointer-events:none;
}
.rezv-arch-search-input{
    width:100%;
    padding:11px 14px 11px 40px;
    background:rgba(15,23,42,.7);
    border:1.5px solid rgba(255,255,255,.1);
    border-radius:10px;
    color:#fff;
    font-size:14px;
    box-sizing:border-box;
    outline:none;
    transition:.15s;
}
.rezv-arch-search-input:focus{
    border-color:#5eead4;
    box-shadow:0 0 0 3px rgba(94,234,212,.1);
}
.rezv-arch-filters{
    display:flex;
    gap:8px;
    margin:0 0 12px;
    flex-wrap:wrap;
}
.rezv-arch-filter-select,
.rezv-arch-filter-date{
    padding:9px 12px;
    background:rgba(15,23,42,.7);
    border:1.5px solid rgba(255,255,255,.1);
    border-radius:10px;
    color:#fff;
    font-size:13px;
    outline:none;
    box-sizing:border-box;
    font-family:inherit;
    color-scheme:dark;
}
.rezv-arch-filter-select{flex:1;min-width:140px}
.rezv-arch-filter-date{flex:1;min-width:130px}
.rezv-arch-filter-reset{
    padding:9px;
    background:rgba(239,68,68,.12);
    border:1.5px solid rgba(239,68,68,.3);
    border-radius:10px;
    color:#f87171;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.15s;
}
.rezv-arch-filter-reset:hover{background:rgba(239,68,68,.25)}
.rezv-arch-filter-reset svg{width:16px;height:16px}
.rezv-arch-stats{
    font-size:12px;
    color:rgba(255,255,255,.55);
    margin:0 0 10px;
    padding:0 4px;
}
.rezv-arch-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:55vh;
    overflow-y:auto;
    padding-right:4px;
}
.rezv-arch-loading,
.rezv-arch-empty{
    text-align:center;
    padding:32px 16px;
    color:rgba(255,255,255,.4);
    font-size:13px;
}

/* Guest item - kartica */
.rezv-arch-guest-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
    border-radius:12px;
    transition:.15s;
}
.rezv-arch-guest-item:hover{background:rgba(255,255,255,.07)}
.rezv-arch-guest-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:linear-gradient(135deg,#5eead4,#a78bfa);
    color:#0f172a;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:14px;
    flex-shrink:0;
    text-transform:uppercase;
    letter-spacing:-.5px;
}
.rezv-arch-guest-info{
    flex:1;
    min-width:0;
}
.rezv-arch-guest-name{
    font-size:14px;
    font-weight:700;
    color:#fff;
    margin-bottom:3px;
    word-break:break-word;
}
.rezv-arch-guest-contact{
    font-size:11px;
    color:rgba(255,255,255,.55);
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.rezv-arch-guest-contact a{
    color:rgba(94,234,212,.8);
    text-decoration:none;
}
.rezv-arch-guest-contact a:hover{color:#5eead4}
.rezv-arch-guest-stats{
    text-align:right;
    flex-shrink:0;
}
.rezv-arch-guest-count{
    display:inline-block;
    padding:3px 10px;
    background:rgba(94,234,212,.15);
    color:#5eead4;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    border:1px solid rgba(94,234,212,.3);
}
.rezv-arch-guest-last{
    font-size:10px;
    color:rgba(255,255,255,.4);
    margin-top:4px;
}

/* Reservation item - kartica */
.rezv-arch-rezv-item{
    display:block;
    padding:12px 14px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.07);
    border-radius:12px;
    transition:.15s;
    border-left:4px solid rgba(255,255,255,.1);
}
.rezv-arch-rezv-item:hover{background:rgba(255,255,255,.07)}
.rezv-arch-rezv-item.is-active{border-left-color:#22c55e}
.rezv-arch-rezv-item.is-pending{border-left-color:#f59e0b}
.rezv-arch-rezv-item.is-cancelled{border-left-color:#94a3b8}
.rezv-arch-rezv-item.is-rejected{border-left-color:#ef4444}
.rezv-arch-rezv-item.is-released{border-left-color:#64748b}
.rezv-arch-rezv-row1{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:6px;
}
.rezv-arch-rezv-loc{
    font-size:14px;
    font-weight:800;
    color:#fff;
}
.rezv-arch-rezv-date{
    font-size:12px;
    color:#fbbf24;
    background:rgba(251,191,36,.12);
    padding:2px 8px;
    border-radius:6px;
    font-weight:700;
    border:1px solid rgba(251,191,36,.25);
}
.rezv-arch-rezv-status{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding:2px 7px;
    border-radius:5px;
    font-weight:800;
    margin-left:auto;
}
.rezv-arch-rezv-status.is-active{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
.rezv-arch-rezv-status.is-pending{background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.3)}
.rezv-arch-rezv-status.is-cancelled{background:rgba(148,163,184,.15);color:#94a3b8;border:1px solid rgba(148,163,184,.3)}
.rezv-arch-rezv-status.is-rejected{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.3)}
.rezv-arch-rezv-status.is-released{background:rgba(100,116,139,.15);color:#64748b;border:1px solid rgba(100,116,139,.3)}
.rezv-arch-rezv-guest{
    font-size:13px;
    color:rgba(255,255,255,.85);
    font-weight:600;
    margin-bottom:3px;
}
.rezv-arch-rezv-meta{
    font-size:11px;
    color:rgba(255,255,255,.45);
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.rezv-arch-rezv-meta span{display:inline-flex;align-items:center;gap:3px}
.rezv-arch-rezv-source{
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding:1px 6px;
    border-radius:4px;
    font-weight:700;
}
.rezv-arch-rezv-source.is-public{background:rgba(94,234,212,.15);color:#5eead4}
.rezv-arch-rezv-source.is-admin{background:rgba(168,85,247,.15);color:#c084fc}

/* Pagination */
.rezv-arch-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.06);
    flex-wrap:wrap;
}
.rezv-arch-page-btn{
    min-width:36px;
    padding:7px 11px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    color:rgba(255,255,255,.7);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.15s;
}
.rezv-arch-page-btn:hover:not(:disabled){
    background:rgba(94,234,212,.15);
    border-color:rgba(94,234,212,.35);
    color:#5eead4;
}
.rezv-arch-page-btn.is-active{
    background:rgba(94,234,212,.2);
    border-color:rgba(94,234,212,.5);
    color:#5eead4;
    font-weight:800;
    cursor:default;
}
.rezv-arch-page-btn:disabled{opacity:.35;cursor:not-allowed}
.rezv-arch-page-info{
    font-size:12px;
    color:rgba(255,255,255,.5);
    margin:0 8px;
}

/* ============================================================
   CJENIK - admin sekcija
   ============================================================ */
.cjenik-tier-bar{
    background:linear-gradient(135deg,rgba(15,23,42,.6),rgba(2,6,23,.6));
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:14px 18px;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}
.cjenik-tier-bar-label{
    color:#94a3b8;
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.cjenik-tier-bar-tabs{
    display:flex;
    gap:6px;
    background:rgba(2,6,23,.6);
    border-radius:10px;
    padding:4px;
}
.cjenik-tier-tab{
    background:transparent;
    border:0;
    color:#cbd5e1;
    padding:8px 16px;
    border-radius:7px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:all .15s;
}
.cjenik-tier-tab:hover{color:#fff;background:rgba(255,255,255,.04)}
.cjenik-tier-tab.active{
    background:linear-gradient(135deg,#0d9488,#0f766e);
    color:#fff;
    box-shadow:0 4px 12px rgba(13,148,136,.35);
}

.cjenik-cat-card{
    background:linear-gradient(135deg,rgba(15,23,42,.5),rgba(2,6,23,.3));
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    margin-bottom:18px;
    overflow:hidden;
}
.cjenik-cat-card.inactive{opacity:.5}
.cjenik-cat-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 18px;
    background:rgba(15,23,42,.4);
    border-bottom:1px solid rgba(255,255,255,.06);
    flex-wrap:wrap;
}
.cjenik-cat-title{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-size:17px;
    font-weight:800;
}
.cjenik-cat-title-icon{
    width:30px;height:30px;
    border-radius:8px;
    background:linear-gradient(135deg,#14b8a6,#0d9488);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:14px;font-weight:800;
}
.cjenik-cat-meta{
    color:#64748b;
    font-size:12px;
    font-weight:600;
}
.cjenik-cat-actions{display:flex;gap:6px;flex-wrap:wrap}
.cjenik-cat-actions button{
    background:rgba(15,23,42,.6);
    border:1px solid rgba(255,255,255,.08);
    color:#cbd5e1;
    padding:6px 12px;
    border-radius:7px;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:all .15s;
    display:inline-flex;
    align-items:center;
    gap:5px;
}
.cjenik-cat-actions button:hover{background:rgba(255,255,255,.06);color:#fff}
.cjenik-cat-actions button.danger:hover{background:rgba(239,68,68,.15);color:#fca5a5;border-color:rgba(239,68,68,.4)}
.cjenik-cat-actions button svg{width:14px;height:14px}

.cjenik-items-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}
.cjenik-items-table th{
    text-align:left;
    padding:10px 12px;
    color:#64748b;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    border-bottom:1px solid rgba(255,255,255,.06);
    background:rgba(2,6,23,.3);
}
.cjenik-items-table th.center{text-align:center}
.cjenik-items-table td{
    padding:10px 12px;
    border-bottom:1px solid rgba(255,255,255,.04);
    color:#e2e8f0;
    vertical-align:middle;
}
.cjenik-items-table tr:hover td{background:rgba(255,255,255,.02)}
.cjenik-items-table tr.inactive td{opacity:.45}
.cjenik-items-table .nm{font-weight:700;color:#fff}
.cjenik-items-table .sz{font-size:12px;color:#94a3b8;font-weight:600;text-align:center;white-space:nowrap}
.cjenik-items-table .pr{font-weight:700;text-align:center;white-space:nowrap;font-family:'SF Mono','Monaco',monospace}
.cjenik-items-table .pr-normal{color:#e2e8f0}
.cjenik-items-table .pr-dj{color:#fca5a5}
.cjenik-items-table .pr-live{color:#93c5fd}
.cjenik-items-table .pr-empty{color:rgba(255,255,255,.15);font-weight:400}
.cjenik-items-table td.acts{text-align:right;white-space:nowrap}
.cjenik-items-table td.acts button{
    background:transparent;
    border:0;
    color:#94a3b8;
    cursor:pointer;
    padding:5px 7px;
    border-radius:6px;
    transition:all .15s;
}
.cjenik-items-table td.acts button:hover{background:rgba(255,255,255,.06);color:#fff}
.cjenik-items-table td.acts button.danger:hover{background:rgba(239,68,68,.15);color:#fca5a5}
.cjenik-items-table td.acts button svg{width:14px;height:14px;display:block}

.cjenik-items-empty{
    padding:30px 20px;
    text-align:center;
    color:rgba(255,255,255,.4);
    font-size:13px;
}
.cjenik-cat-add-item{
    padding:10px 18px;
    background:rgba(20,184,166,.06);
    border-top:1px solid rgba(20,184,166,.18);
    text-align:center;
}
.cjenik-cat-add-item button{
    background:transparent;
    border:1px dashed rgba(20,184,166,.4);
    color:#5eead4;
    padding:7px 16px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:all .15s;
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.cjenik-cat-add-item button:hover{background:rgba(20,184,166,.12);color:#fff}
.cjenik-cat-add-item button svg{width:14px;height:14px}

.cjenik-price-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:10px;
}
@media (max-width:640px){
    .cjenik-price-grid{grid-template-columns:1fr 1fr}
    .cjenik-items-table{font-size:13px}
    .cjenik-items-table .pr-dj, .cjenik-items-table .pr-live{display:none}
    .cjenik-items-table th.col-dj, .cjenik-items-table th.col-live{display:none}
}

/* ============================================================
   CJENIK - TV OVERLAY (na prikaz.php)
   ============================================================ */
@keyframes cjnSlideIn{
    0%{opacity:0;transform:translateY(40px) scale(.96)}
    100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes cjnSlideOut{
    0%{opacity:1;transform:translateY(0) scale(1)}
    100%{opacity:0;transform:translateY(-30px) scale(.97)}
}
@keyframes cjnRowFadeIn{
    0%{opacity:0;transform:translateX(-12px)}
    100%{opacity:1;transform:translateX(0)}
}
@keyframes cjnShimmer{
    0%{background-position:-200% 0}
    100%{background-position:200% 0}
}
@keyframes cjnGlow{
    0%,100%{box-shadow:0 0 60px rgba(20,184,166,.45),0 0 120px rgba(13,148,136,.25),inset 0 0 30px rgba(255,255,255,.04)}
    50%{box-shadow:0 0 80px rgba(94,234,212,.55),0 0 140px rgba(20,184,166,.35),inset 0 0 40px rgba(255,255,255,.06)}
}
@keyframes cjnParticle{
    0%{transform:translateY(100vh) scale(0);opacity:0}
    10%{opacity:.7}
    90%{opacity:.4}
    100%{transform:translateY(-10vh) scale(1.2);opacity:0}
}
@keyframes cjnTitleShimmer{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}

.cjenik-tv-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:2vh 2vw;
    box-sizing:border-box;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(ellipse at center, rgba(2,6,23,.92) 0%, rgba(0,0,0,.96) 100%);
}
.cjenik-tv-overlay.is-active{
    display:flex;
    opacity:1;
    pointer-events:auto;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    animation:cjnSlideIn .9s cubic-bezier(.22,.61,.36,1) both;
}
.cjenik-tv-overlay.is-exit{
    display:flex;
    animation:cjnSlideOut .65s cubic-bezier(.55,.06,.68,.19) both;
}

.cjenik-tv-particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}
.cjenik-tv-particle{
    position:absolute;
    bottom:0;
    width:6px;height:6px;
    border-radius:50%;
    background:radial-gradient(circle, #5eead4 0%, rgba(20,184,166,0) 70%);
    animation:cjnParticle linear infinite;
}

.cjenik-tv-card{
    position:relative;
    width:96vw;
    max-width:1900px;
    height:94vh;
    max-height:1080px;
    background:linear-gradient(135deg, rgba(15,23,42,.92) 0%, rgba(2,6,23,.95) 100%);
    border:2px solid transparent;
    border-radius:28px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:0 0 80px rgba(20,184,166,.4),0 0 160px rgba(13,148,136,.2);
    animation:cjnGlow 4s ease-in-out infinite;
}
.cjenik-tv-card::before{
    content:'';
    position:absolute;
    inset:-2px;
    background:linear-gradient(135deg,#5eead4 0%,#a78bfa 25%,#f59e0b 50%,#ec4899 75%,#5eead4 100%);
    border-radius:28px;
    z-index:-1;
    background-size:300% 300%;
    animation:cjnTitleShimmer 6s ease infinite;
}
.cjenik-tv-card::after{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 50% 0%, rgba(20,184,166,.18) 0%, transparent 50%);
    pointer-events:none;
}

.cjenik-tv-header{
    position:relative;
    padding:clamp(20px,2.5vh,40px) clamp(30px,3vw,60px);
    border-bottom:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(15,23,42,.6), transparent);
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:20px;
}
.cjenik-tv-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:rgba(20,184,166,.12);
    border:1.5px solid rgba(20,184,166,.5);
    padding:8px 18px;
    border-radius:50px;
    color:#5eead4;
    font-size:clamp(11px,1vw,15px);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    justify-self:start;
}
.cjenik-tv-badge-dot{
    width:8px;height:8px;
    border-radius:50%;
    background:#5eead4;
    box-shadow:0 0 12px #5eead4;
    animation:cjnGlow 1.5s ease-in-out infinite;
}
.cjenik-tv-title{
    text-align:center;
    color:#fff;
    font-size:clamp(28px,3.6vw,56px);
    font-weight:900;
    letter-spacing:-1px;
    line-height:1;
    background:linear-gradient(110deg,#fff 0%,#5eead4 30%,#a78bfa 60%,#fff 100%);
    background-size:200% auto;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    animation:cjnTitleShimmer 4s ease-in-out infinite;
}
.cjenik-tv-tier-badge{
    justify-self:end;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:50px;
    font-size:clamp(11px,1vw,15px);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1.5px;
}
.cjenik-tv-badge-spacer{justify-self:end}
.cjenik-tv-tier-badge.tier-normal{background:rgba(148,163,184,.15);border:1.5px solid rgba(148,163,184,.5);color:#cbd5e1}
.cjenik-tv-tier-badge.tier-dj{background:rgba(239,68,68,.15);border:1.5px solid rgba(239,68,68,.55);color:#fca5a5}
.cjenik-tv-tier-badge.tier-live{background:rgba(59,130,246,.15);border:1.5px solid rgba(59,130,246,.55);color:#93c5fd}

/* Tier legend - prikazuje se uz sve 3 cijene */
.cjenik-tv-tier-legend{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:clamp(14px,1.5vw,28px);
    padding:0 clamp(8px,.8vw,14px) clamp(8px,1vh,14px);
    margin-bottom:clamp(6px,.8vh,12px);
    border-bottom:1px solid rgba(255,255,255,.06);
}
.cjenik-tv-tier-legend-item{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:clamp(10px,.85vw,14px);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}
.cjenik-tv-tier-legend-item.tier-normal{color:#5eead4}
.cjenik-tv-tier-legend-item.tier-dj{color:#fca5a5}
.cjenik-tv-tier-legend-item.tier-live{color:#93c5fd}
.cjenik-tv-tier-dot{
    width:9px;height:9px;
    border-radius:50%;
    background:currentColor;
    box-shadow:0 0 8px currentColor;
}

.cjenik-tv-body{
    flex:1;
    padding:clamp(16px,2vh,32px) clamp(20px,2vw,48px);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:clamp(14px,1.8vh,28px);
}

.cjenik-tv-cat{
    display:flex;
    flex-direction:column;
    gap:clamp(6px,.7vh,12px);
    flex:1;
    min-height:0;
}
.cjenik-tv-cat-title{
    color:#5eead4;
    font-size:clamp(16px,1.5vw,26px);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:2px;
    padding-bottom:8px;
    border-bottom:2px solid rgba(20,184,166,.3);
    display:inline-block;
    align-self:flex-start;
    position:relative;
}
.cjenik-tv-cat-title::after{
    content:'';
    position:absolute;
    bottom:-2px;left:0;
    width:50%;
    height:2px;
    background:linear-gradient(90deg,#5eead4,transparent);
}

.cjenik-tv-cat-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:clamp(4px,.5vh,8px) clamp(20px,2vw,40px);
    overflow:hidden;
    flex:1;
    min-height:0;
}
.cjenik-tv-cat-grid.cols-1{grid-template-columns:1fr}
.cjenik-tv-cat-grid.cols-3{grid-template-columns:repeat(3,1fr)}

/* Glavni red sa 3 cijene */
.cjenik-tv-row{
    display:grid;
    grid-template-columns:1fr auto auto;
    align-items:center;
    gap:clamp(8px,.8vw,18px);
    padding:clamp(4px,.5vh,8px) clamp(8px,.8vw,14px);
    border-bottom:1px dashed rgba(255,255,255,.06);
    opacity:0;
    animation:cjnRowFadeIn .5s cubic-bezier(.22,.61,.36,1) forwards;
}
.cjenik-tv-row-secondary{
    padding-top:0;
    padding-bottom:clamp(6px,.7vh,10px);
    border-bottom:1px dashed rgba(255,255,255,.06);
    opacity:.78;
}
.cjenik-tv-row-name{
    color:#fff;
    font-size:clamp(11px,1vw,17px);
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.cjenik-tv-row-name-alt{}
.cjenik-tv-row-size{
    color:#94a3b8;
    font-size:clamp(10px,.85vw,14px);
    font-weight:600;
    font-family:'SF Mono','Monaco',monospace;
    white-space:nowrap;
    text-align:right;
    min-width:42px;
}
.cjenik-tv-row-secondary .cjenik-tv-row-size{color:#64748b}

/* Trio cijena - 3 cijene side-by-side */
.cjenik-tv-row-prices{
    display:grid;
    grid-template-columns:repeat(3, minmax(50px, auto));
    gap:clamp(8px,.8vw,16px);
    align-items:center;
    justify-items:end;
}
.cjenik-tv-price{
    font-size:clamp(12px,1.05vw,18px);
    font-weight:800;
    font-family:'SF Mono','Monaco',monospace;
    white-space:nowrap;
    text-align:right;
    min-width:50px;
    padding:2px 8px;
    border-radius:6px;
}
.cjenik-tv-price.tier-normal{
    color:#5eead4;
    text-shadow:0 0 14px rgba(94,234,212,.25);
    background:rgba(20,184,166,.06);
    border:1px solid rgba(20,184,166,.18);
}
.cjenik-tv-price.tier-dj{
    color:#fca5a5;
    text-shadow:0 0 14px rgba(252,165,165,.25);
    background:rgba(239,68,68,.06);
    border:1px solid rgba(239,68,68,.18);
}
.cjenik-tv-price.tier-live{
    color:#93c5fd;
    text-shadow:0 0 14px rgba(147,197,253,.25);
    background:rgba(59,130,246,.06);
    border:1px solid rgba(59,130,246,.18);
}

.cjenik-tv-footer{
    padding:clamp(10px,1.2vh,18px) clamp(20px,2vw,40px);
    border-top:1px solid rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:linear-gradient(0deg, rgba(15,23,42,.6), transparent);
    gap:14px;
}
.cjenik-tv-footer-brand{
    color:#fff;
    font-size:clamp(13px,1.1vw,18px);
    font-weight:800;
    letter-spacing:3px;
    text-transform:uppercase;
}
.cjenik-tv-footer-note{
    color:rgba(255,255,255,.4);
    font-size:clamp(10px,.85vw,14px);
    font-weight:500;
    text-align:right;
}

/* ============ CJENIK ADMIN - kartice za stavke (mobile-first) ============ */
.cjenik-items-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:12px;
}
.cjenik-item-card{
    background:rgba(15,23,42,.45);
    border:1px solid rgba(255,255,255,.07);
    border-radius:10px;
    padding:12px 14px;
    transition:all .15s;
}
.cjenik-item-card:hover{
    background:rgba(15,23,42,.65);
    border-color:rgba(20,184,166,.25);
}
.cjenik-item-card.inactive{opacity:.5}
.cjenik-item-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
    padding-bottom:8px;
    border-bottom:1px dashed rgba(255,255,255,.06);
}
.cjenik-item-name{
    font-size:15px;
    font-weight:700;
    color:#fff;
    flex:1;
    min-width:0;
}
.cjenik-item-acts{display:flex;gap:4px;flex-shrink:0}
.cjenik-item-acts button{
    background:transparent;
    border:0;
    color:#94a3b8;
    cursor:pointer;
    padding:6px;
    border-radius:6px;
    transition:all .15s;
}
.cjenik-item-acts button:hover{background:rgba(255,255,255,.06);color:#fff}
.cjenik-item-acts button.danger:hover{background:rgba(239,68,68,.15);color:#fca5a5}
.cjenik-item-acts button svg{width:15px;height:15px;display:block}
.cjenik-item-prices{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.cjenik-price-group{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.cjenik-price-size{
    background:rgba(15,23,42,.7);
    border:1px solid rgba(255,255,255,.08);
    color:#cbd5e1;
    font-family:'SF Mono','Monaco',monospace;
    font-size:12px;
    font-weight:700;
    padding:5px 10px;
    border-radius:7px;
    min-width:56px;
    text-align:center;
    flex-shrink:0;
}
.cjenik-price-cells{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:6px;
    flex:1;
    min-width:0;
}
.cjenik-price-cell{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    padding:6px 8px;
    border-radius:7px;
    border:1px solid;
    text-align:center;
    min-width:0;
}
.cjenik-price-cell.tier-normal{background:rgba(20,184,166,.06);border-color:rgba(20,184,166,.18)}
.cjenik-price-cell.tier-dj{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.18)}
.cjenik-price-cell.tier-live{background:rgba(59,130,246,.06);border-color:rgba(59,130,246,.18)}
.cjp-lbl{
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:rgba(255,255,255,.5);
}
.cjenik-price-cell.tier-normal .cjp-lbl{color:#5eead4}
.cjenik-price-cell.tier-dj .cjp-lbl{color:#fca5a5}
.cjenik-price-cell.tier-live .cjp-lbl{color:#93c5fd}
.cjp-val{
    font-family:'SF Mono','Monaco',monospace;
    font-size:13px;
    font-weight:800;
    color:#fff;
}
.cjenik-price-cell.tier-normal .cjp-val{color:#5eead4}
.cjenik-price-cell.tier-dj .cjp-val{color:#fca5a5}
.cjenik-price-cell.tier-live .cjp-val{color:#93c5fd}

/* Mobile - manji fontovi, kompaktnije */
@media (max-width:640px){
    .cjenik-item-head{margin-bottom:8px;padding-bottom:6px}
    .cjenik-item-name{font-size:14px}
    .cjenik-price-size{font-size:11px;padding:4px 8px;min-width:48px}
    .cjenik-price-cells{gap:4px}
    .cjenik-price-cell{padding:4px 6px}
    .cjp-lbl{font-size:8px}
    .cjp-val{font-size:12px}
}

/* ============ CJENIK ADMIN - actions bar 2 dugmeta ============ */
.cjenik-actions-bar{
    display:flex;
    gap:10px;
    margin-bottom:16px;
}
.cjenik-action-btn{
    flex:1 1 0;
    justify-content:center;
    min-width:0;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
}
.cjenik-action-btn span{
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}
@media (max-width:380px){
    .cjenik-action-btn{padding:10px 8px;font-size:13px}
    .cjenik-action-btn span{font-size:13px}
}

/* ============ Modal padding popravak ============ */
.rezv-form-body{
    padding:16px 18px 4px;
}
.rezv-form-row{
    margin-bottom:14px;
}
.rezv-form-row:last-of-type{margin-bottom:8px}
.rezv-checkbox-row{
    display:flex;
    align-items:center;
    gap:10px;
    color:#cbd5e1;
    font-size:14px;
    cursor:pointer;
}
.rezv-checkbox-row input[type=checkbox]{
    width:18px;
    height:18px;
    accent-color:#14b8a6;
    cursor:pointer;
    flex-shrink:0;
}

/* ============ VJ TEXT - SPEED SLIDER ============ */
.vj-text-speed-wrap{
    display:none;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    background:rgba(15,23,42,.6);
    border:1px solid rgba(20,184,166,.25);
    border-radius:10px;
    margin-top:8px;
}
.vj-text-speed-wrap.is-visible{display:flex}
.vj-text-speed-lbl{
    color:#5eead4;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    flex-shrink:0;
}
.vj-text-speed-slider{
    flex:1;
    height:6px;
    -webkit-appearance:none;
    appearance:none;
    background:linear-gradient(90deg,#1e293b,#5eead4);
    border-radius:6px;
    outline:none;
    cursor:pointer;
    min-width:0;
}
.vj-text-speed-slider::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:20px;
    height:20px;
    background:#5eead4;
    border:2px solid #0f172a;
    border-radius:50%;
    cursor:pointer;
    box-shadow:0 0 12px rgba(94,234,212,.6);
}
.vj-text-speed-slider::-moz-range-thumb{
    width:20px;
    height:20px;
    background:#5eead4;
    border:2px solid #0f172a;
    border-radius:50%;
    cursor:pointer;
    box-shadow:0 0 12px rgba(94,234,212,.6);
}
.vj-text-speed-val{
    color:#fff;
    font-weight:800;
    font-size:14px;
    min-width:18px;
    text-align:center;
    font-family:'JetBrains Mono','SF Mono','Monaco',monospace;
}

/* ============ VJ LOOP - LOCAL DOWNLOAD STATUS BADGES ============ */
.vj-card{position:relative}
.vj-card-status{
    position:absolute;
    top:6px;
    right:6px;
    padding:2px 6px;
    border-radius:5px;
    font-size:8px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.3px;
    z-index:2;
    pointer-events:none;
    line-height:1.3;
}
.vj-status-ready{background:rgba(34,197,94,.2);color:#86efac;border:1px solid rgba(34,197,94,.5)}
.vj-status-downloading{background:rgba(59,130,246,.2);color:#93c5fd;border:1px solid rgba(59,130,246,.5);animation:vjStatusPulse 1.2s ease-in-out infinite}
@keyframes vjStatusPulse{0%,100%{opacity:1}50%{opacity:.5}}
.vj-status-failed{background:rgba(239,68,68,.2);color:#fca5a5;border:1px solid rgba(239,68,68,.5);cursor:help;pointer-events:auto}
.vj-status-pending{background:rgba(148,163,184,.15);color:#cbd5e1;border:1px solid rgba(148,163,184,.4)}
.vj-card-actions{
    display:flex;
    gap:3px;
    margin-top:6px;
    justify-content:center;
}
.vj-card-act-btn{
    padding:3px 8px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    border-radius:5px;
    color:#fff;
    font-size:10px;
    font-weight:600;
    cursor:pointer;
    transition:all .15s;
    white-space:nowrap;
    line-height:1.4;
}
.vj-card-act-btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3)}
.vj-card-act-btn:disabled{opacity:.5;cursor:wait}
.vj-card-download{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.4);color:#86efac}
.vj-card-download:hover{background:rgba(34,197,94,.25);border-color:rgba(34,197,94,.6)}

/* ============ VJ LOOPS - EDIT MOD DUGME ============ */
.vj-edit-mode-btn{
    display:block;
    width:100%;
    margin-top:14px;
    padding:12px 20px;
    background:rgba(245,158,11,.12);
    border:2px solid rgba(245,158,11,.5);
    border-radius:12px;
    color:#fbbf24;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    cursor:pointer;
    transition:all .2s ease;
    line-height:1.4;
}
.vj-edit-mode-btn:hover{
    background:rgba(245,158,11,.22);
    border-color:rgba(245,158,11,.8);
}
.vj-edit-mode-btn.vj-edit-mode-active{
    background:rgba(34,197,94,.18);
    border-color:rgba(34,197,94,.6);
    color:#86efac;
}
.vj-edit-mode-btn.vj-edit-mode-active:hover{
    background:rgba(34,197,94,.28);
    border-color:rgba(34,197,94,.9);
}
/* Card u edit mode - dodatni vizuelni indikator */
.vj-card.edit-mode{
    border-color:rgba(245,158,11,.3);
    background:rgba(245,158,11,.05);
}
.vj-card.edit-mode:hover{
    background:rgba(245,158,11,.1);
    border-color:rgba(245,158,11,.5);
}
.vj-card.edit-mode.playing{
    background:rgba(34,197,94,.2);
    border-color:#22c55e;
}
.vj-card-delete-total{
    background:rgba(239,68,68,.15) !important;
    border-color:rgba(239,68,68,.4) !important;
    color:#fca5a5 !important;
}
.vj-card-delete-total:hover{
    background:rgba(239,68,68,.28) !important;
    border-color:rgba(239,68,68,.7) !important;
}

/* ============ VJ LOOPS - AUTO MOD ============ */
.vj-auto-mode-wrap{
    margin-top:14px;
    padding:14px;
    background:rgba(168,85,247,.08);
    border:2px solid rgba(168,85,247,.4);
    border-radius:12px;
}
.vj-auto-mode-btn{
    display:block;
    width:100%;
    padding:12px 20px;
    background:rgba(168,85,247,.15);
    border:1px solid rgba(168,85,247,.4);
    border-radius:10px;
    color:#d8b4fe;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    cursor:pointer;
    transition:all .2s ease;
    line-height:1.4;
}
.vj-auto-mode-btn:hover{
    background:rgba(168,85,247,.25);
    border-color:rgba(168,85,247,.7);
}
.vj-auto-mode-btn.vj-auto-mode-active{
    background:rgba(34,197,94,.2);
    border-color:rgba(34,197,94,.6);
    color:#86efac;
    box-shadow:0 0 15px rgba(34,197,94,.3);
}
.vj-auto-mode-btn.vj-auto-mode-active:hover{
    background:rgba(34,197,94,.3);
    border-color:rgba(34,197,94,.9);
}
.vj-auto-mode-controls{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
}
.vj-auto-mode-lbl{
    font-size:11px;
    color:#cbd5e1;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    flex-shrink:0;
}
.vj-auto-mode-slider{
    flex:1;
    min-width:0;
    height:6px;
    -webkit-appearance:none;
    appearance:none;
    background:linear-gradient(90deg,#1e293b,#a855f7);
    border-radius:6px;
    outline:none;
    cursor:pointer;
}
.vj-auto-mode-slider::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:20px;
    height:20px;
    background:#a855f7;
    border:2px solid #0f172a;
    border-radius:50%;
    cursor:pointer;
    box-shadow:0 0 10px rgba(168,85,247,.6);
}
.vj-auto-mode-slider::-moz-range-thumb{
    width:20px;
    height:20px;
    background:#a855f7;
    border:2px solid #0f172a;
    border-radius:50%;
    cursor:pointer;
    box-shadow:0 0 10px rgba(168,85,247,.6);
}
.vj-auto-mode-val{
    font-family:'JetBrains Mono','SF Mono',monospace;
    color:#fff;
    font-weight:800;
    font-size:14px;
    min-width:36px;
    text-align:center;
}
.vj-auto-mode-info{
    margin-top:8px;
    font-size:11px;
    color:rgba(203,213,225,.7);
    text-align:center;
}
.vj-auto-mode-info.vj-auto-mode-warn{
    color:#fca5a5;
    font-weight:600;
}

/* VJ kartice koje nisu lokalno skinute - vizuelno umanjene da se vidi da nisu dostupne za klik */
.vj-card.status-pending:not(.edit-mode),
.vj-card.status-failed:not(.edit-mode),
.vj-card.status-downloading:not(.edit-mode){
    opacity:.4;
    cursor:help;
}
.vj-card.status-pending:not(.edit-mode):hover,
.vj-card.status-failed:not(.edit-mode):hover,
.vj-card.status-downloading:not(.edit-mode):hover{
    opacity:.55;
    background:rgba(245,158,11,.08);
    border-color:rgba(245,158,11,.3);
}
.vj-card.status-ready{
    opacity:1;
}

/* ============================
   PWA Install Modal
   ============================ */
.pwa-install-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;background:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .25s ease,background-color .25s ease;pointer-events:none}
.pwa-install-overlay[hidden]{display:none}
.pwa-install-overlay.active{opacity:1;background:rgba(0,0,0,.85);pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pwa-install-modal{background:linear-gradient(180deg,#1e293b 0%,#0f172a 100%);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:32px 24px 24px;max-width:420px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;text-align:center;transform:translateY(20px) scale(.95);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.pwa-install-overlay.active .pwa-install-modal{transform:translateY(0) scale(1)}
.pwa-install-icon{width:80px;height:80px;border-radius:24px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 10px 30px rgba(59,130,246,.4)}
.pwa-install-icon svg{width:44px;height:44px;color:#fff}
.pwa-install-title{font-size:22px;font-weight:800;color:#fff;margin-bottom:10px;line-height:1.2}
.pwa-install-text{font-size:15px;color:rgba(255,255,255,.7);line-height:1.5;margin-bottom:20px}
.pwa-install-benefits{list-style:none;padding:0;margin:0 0 20px;width:100%;display:flex;flex-direction:column;gap:10px}
.pwa-install-benefits li{display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(255,255,255,.85);text-align:left;padding:10px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:12px}
.pwa-install-benefits li svg{flex-shrink:0;width:18px;height:18px;color:#22c55e}
.pwa-install-ios{width:100%;margin-bottom:20px;padding:16px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);border-radius:14px;display:flex;flex-direction:column;gap:12px}
.pwa-install-ios[hidden]{display:none}
.pwa-install-ios-step{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.9);text-align:left;margin:0;flex-wrap:wrap}
.pwa-install-ios-num{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:#3b82f6;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.pwa-install-ios-icon{width:18px;height:18px;color:rgba(255,255,255,.7);flex-shrink:0}
.pwa-install-btns{display:flex;gap:10px;width:100%;margin-top:4px}
.pwa-install-btn{flex:1;padding:14px 16px;border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;font-family:'Inter',system-ui,sans-serif;min-height:52px;transition:transform .1s ease,opacity .2s ease}
.pwa-install-btn[hidden]{display:none}
.pwa-install-btn:active{transform:scale(.97)}
.pwa-install-btn:disabled{opacity:.5;cursor:not-allowed}
.pwa-install-btn-primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 4px 14px rgba(59,130,246,.4)}
.pwa-install-btn-secondary{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.1)}
body.pwa-install-open{overflow:hidden}
@media (max-width:380px){
.pwa-install-modal{padding:24px 18px 18px;border-radius:20px}
.pwa-install-icon{width:64px;height:64px;border-radius:18px;margin-bottom:14px}
.pwa-install-icon svg{width:36px;height:36px}
.pwa-install-title{font-size:19px}
.pwa-install-text{font-size:14px;margin-bottom:16px}
.pwa-install-benefits li{font-size:13px;padding:8px 12px}
.pwa-install-btn{font-size:15px;min-height:48px;padding:12px 14px}
}


/* ============================
   PWA Install FAB Button
   ============================ */
.pwa-install-fab{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120%);z-index:9998;display:flex;align-items:center;gap:10px;padding:14px 22px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:50px;font-size:15px;font-weight:700;font-family:'Inter',system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 30px rgba(59,130,246,.5),0 4px 10px rgba(0,0,0,.2);transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.pwa-install-fab[hidden]{display:none}
.pwa-install-fab.visible{transform:translateX(-50%) translateY(0)}
.pwa-install-fab:active{transform:translateX(-50%) translateY(0) scale(.96);box-shadow:0 6px 18px rgba(59,130,246,.5),0 2px 6px rgba(0,0,0,.2)}
.pwa-install-fab-icon{width:20px;height:20px;flex-shrink:0}
.pwa-install-fab-text{white-space:nowrap}

/* Close X dugme u modalu */
.pwa-install-close{position:absolute;top:14px;right:14px;width:36px;height:36px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:50%;color:rgba(255,255,255,.8);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .15s ease,color .15s ease}
.pwa-install-close:hover{background:rgba(255,255,255,.15);color:#fff}
.pwa-install-close svg{width:18px;height:18px}

/* Manual install uputstvo (kada beforeinstallprompt nije dostupan) */
.pwa-install-manual{width:100%;margin-bottom:20px;padding:16px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:14px;display:flex;flex-direction:column;gap:12px}
.pwa-install-manual[hidden]{display:none}

/* Sredina modala mora imati relative za apsolutno pozicioniran close button */
.pwa-install-modal{position:relative}

/* Mobilna prilagodba FAB-a */
@media (max-width:380px){
.pwa-install-fab{bottom:18px;padding:12px 18px;font-size:14px;gap:8px}
.pwa-install-fab-icon{width:18px;height:18px}
}


/* Spacer ispod footer-a kad je FAB vidljiv da ne pokriva link */
body:has(.pwa-install-fab.visible) .footer{padding-bottom:90px}

/* ============================
   Push Notification Enable FAB & Modal
   ============================ */
.push-enable-fab{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120%);z-index:9997;display:flex;align-items:center;gap:10px;padding:14px 22px;background:linear-gradient(135deg,#f97316,#dc2626);color:#fff;border:none;border-radius:50px;font-size:15px;font-weight:700;font-family:'Inter',system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 30px rgba(249,115,22,.5),0 4px 10px rgba(0,0,0,.2);transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,bottom .25s ease;-webkit-tap-highlight-color:transparent}
.push-enable-fab[hidden]{display:none}
.push-enable-fab.visible{transform:translateX(-50%) translateY(0)}
.push-enable-fab:active{transform:translateX(-50%) translateY(0) scale(.96);box-shadow:0 6px 18px rgba(249,115,22,.5),0 2px 6px rgba(0,0,0,.2)}
.push-enable-fab-icon{width:20px;height:20px;flex-shrink:0;animation:push-enable-shake 3s ease-in-out infinite}
.push-enable-fab-text{white-space:nowrap}

@keyframes push-enable-shake{
0%,90%,100%{transform:rotate(0)}
92%{transform:rotate(-10deg)}
94%{transform:rotate(10deg)}
96%{transform:rotate(-10deg)}
98%{transform:rotate(10deg)}
}

/* Ako je install FAB takodjer vidljiv, podigni push FAB iznad njega */
body:has(.pwa-install-fab.visible) .push-enable-fab.visible{bottom:84px}

/* Overlay i modal - dijeli stil sa pwa-install-overlay ali ima vlastiti namespace */
.push-enable-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10001;background:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .25s ease,background-color .25s ease;pointer-events:none}
.push-enable-overlay[hidden]{display:none}
.push-enable-overlay.active{opacity:1;background:rgba(0,0,0,.85);pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.push-enable-modal{position:relative;background:linear-gradient(180deg,#1e293b 0%,#0f172a 100%);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:32px 24px 24px;max-width:420px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;text-align:center;transform:translateY(20px) scale(.95);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.push-enable-overlay.active .push-enable-modal{transform:translateY(0) scale(1)}

.push-enable-close{position:absolute;top:14px;right:14px;width:36px;height:36px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:50%;color:rgba(255,255,255,.8);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .15s ease,color .15s ease}
.push-enable-close:hover{background:rgba(255,255,255,.15);color:#fff}
.push-enable-close svg{width:18px;height:18px}

.push-enable-icon{width:80px;height:80px;border-radius:24px;background:linear-gradient(135deg,#f97316,#dc2626);display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 10px 30px rgba(249,115,22,.4)}
.push-enable-icon svg{width:44px;height:44px;color:#fff}
.push-enable-title{font-size:22px;font-weight:800;color:#fff;margin-bottom:10px;line-height:1.2}
.push-enable-text{font-size:15px;color:rgba(255,255,255,.7);line-height:1.5;margin-bottom:20px}
.push-enable-text-note{font-size:14px;color:rgba(255,255,255,.7);line-height:1.5;padding:12px 14px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:12px;margin:0 0 20px;text-align:left}

.push-enable-blocked{width:100%;margin-bottom:20px;padding:16px;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.2);border-radius:14px;display:flex;flex-direction:column;gap:12px}
.push-enable-blocked[hidden]{display:none}

.push-enable-unsupported{width:100%;margin-bottom:20px}
.push-enable-unsupported[hidden]{display:none}

body.push-enable-open{overflow:hidden}

@media (max-width:380px){
.push-enable-fab{bottom:18px;padding:12px 18px;font-size:14px;gap:8px}
.push-enable-fab-icon{width:18px;height:18px}
body:has(.pwa-install-fab.visible) .push-enable-fab.visible{bottom:74px}
.push-enable-modal{padding:24px 18px 18px;border-radius:20px}
.push-enable-icon{width:64px;height:64px;border-radius:18px;margin-bottom:14px}
.push-enable-icon svg{width:36px;height:36px}
.push-enable-title{font-size:19px}
.push-enable-text{font-size:14px;margin-bottom:16px}
}

/* Spacer za footer kad je push FAB vidljiv */
body:has(.push-enable-fab.visible) .footer{padding-bottom:90px}
body:has(.push-enable-fab.visible):has(.pwa-install-fab.visible) .footer{padding-bottom:150px}
/* ============================================================
   CCTV tab unutar VJ panela (admin)
   ============================================================ */
.vj-tab-btn.tab-cctv.active{background:linear-gradient(135deg,#14b8a6,#0f766e);border-color:#14b8a6;box-shadow:0 4px 15px rgba(20,184,166,.3)}
.cctv-info{
    background:rgba(20,184,166,.08);
    border:1px solid rgba(20,184,166,.25);
    color:rgba(94,234,212,.95);
    padding:12px 14px;
    border-radius:10px;
    font-size:13px;
    margin-bottom:14px;
    line-height:1.55;
}
.cctv-info strong{color:#5eead4;font-weight:700}
.cctv-current{
    background:rgba(20,184,166,.08);
    border:1px solid rgba(20,184,166,.25);
    border-radius:12px;
    padding:14px 16px;
    margin-bottom:14px;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.cctv-current-label{
    font-size:11px;
    font-weight:700;
    color:#5eead4;
    letter-spacing:1.5px;
    text-transform:uppercase;
}
.cctv-current-name{
    font-size:15px;
    font-weight:600;
    color:#fff;
}
.cctv-current-name.is-empty{
    color:rgba(255,255,255,.35);
    font-weight:500;
    font-style:italic;
}
.cctv-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-bottom:14px;
    min-height:80px;
}
.cctv-loading{
    grid-column:1/-1;
    text-align:center;
    padding:30px;
    color:rgba(255,255,255,.45);
    font-size:13px;
}
.cctv-empty{
    grid-column:1/-1;
    text-align:center;
    padding:30px;
    color:rgba(255,255,255,.35);
    font-size:13px;
}
.cctv-card{
    background:rgba(20,184,166,.08);
    border:2px solid rgba(20,184,166,.3);
    border-radius:12px;
    color:#fff;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    padding:14px 10px;
    text-align:center;
    font-family:inherit;
    min-height:100px;
}
.cctv-card:hover:not(:disabled){
    transform:translateY(-3px);
    background:rgba(20,184,166,.18);
    border-color:rgba(20,184,166,.7);
    box-shadow:0 10px 28px rgba(20,184,166,.22);
}
.cctv-card.active{
    background:linear-gradient(135deg,rgba(20,184,166,.4),rgba(15,118,110,.4));
    border-color:#14b8a6;
    box-shadow:0 0 0 3px rgba(20,184,166,.3), 0 14px 32px rgba(20,184,166,.3);
}
.cctv-card-icon{
    width:30px;height:30px;
    display:flex;align-items:center;justify-content:center;
    color:#5eead4;
}
.cctv-card-icon svg{width:100%;height:100%}
.cctv-card.active .cctv-card-icon{color:#fff}
.cctv-card-name{
    font-size:13px;
    font-weight:700;
    color:#fff;
    line-height:1.3;
}
.cctv-card-state{
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:1px;
    color:rgba(255,255,255,.55);
    display:flex;
    align-items:center;
    gap:5px;
}
.cctv-card.active .cctv-card-state{
    color:#5eead4;
}
.cctv-card.active .cctv-card-state-dot{
    width:7px;height:7px;border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 10px #22c55e;
    animation:cctvLiveDot 1.4s ease-in-out infinite;
}
@keyframes cctvLiveDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.25)}}
.cctv-stop-btn{
    width:100%;
    padding:14px;
    background:#ef4444;
    color:#fff;
    border:none;
    border-radius:12px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:background .15s, transform .12s;
    letter-spacing:.5px;
}
.cctv-stop-btn:hover:not(:disabled){background:#dc2626;transform:translateY(-1px)}
.cctv-stop-btn:active:not(:disabled){transform:translateY(0)}
.cctv-stop-btn:disabled{opacity:.4;cursor:not-allowed;background:#475569}

/* CCTV fullscreen toggle */
.cctv-fs-row{
    margin-bottom:14px;
    padding:12px 14px;
    background:rgba(20,184,166,.06);
    border:1px solid rgba(20,184,166,.2);
    border-radius:10px;
}
.cctv-fs-toggle{
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    user-select:none;
}
.cctv-fs-toggle input[type="checkbox"]{
    position:absolute;
    opacity:0;
    width:0;height:0;
    pointer-events:none;
}
.cctv-fs-slider{
    position:relative;
    width:44px;
    height:24px;
    background:rgba(255,255,255,.15);
    border-radius:20px;
    transition:background .2s ease;
    flex-shrink:0;
}
.cctv-fs-slider::before{
    content:'';
    position:absolute;
    top:3px;
    left:3px;
    width:18px;
    height:18px;
    background:#fff;
    border-radius:50%;
    transition:transform .2s ease;
    box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.cctv-fs-toggle input:checked + .cctv-fs-slider{
    background:#14b8a6;
}
.cctv-fs-toggle input:checked + .cctv-fs-slider::before{
    transform:translateX(20px);
}
.cctv-fs-label{
    font-size:13px;
    color:rgba(255,255,255,.85);
    font-weight:500;
}
.cctv-fs-toggle:hover .cctv-fs-slider{
    background:rgba(255,255,255,.22);
}
.cctv-fs-toggle:hover input:checked + .cctv-fs-slider{
    background:#0d9488;
}

/* ============================================================
   CCTV AUTO MOD
   ============================================================ */
.cctv-auto-wrap{
    margin-top:14px;
    padding:14px;
    background:rgba(20,184,166,.08);
    border:2px solid rgba(20,184,166,.4);
    border-radius:12px;
}
.cctv-auto-btn{
    display:block;
    width:100%;
    padding:12px 20px;
    background:rgba(20,184,166,.15);
    border:1px solid rgba(20,184,166,.4);
    border-radius:10px;
    color:#5eead4;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    cursor:pointer;
    transition:all .2s ease;
    line-height:1.4;
    font-family:inherit;
}
.cctv-auto-btn:hover{
    background:rgba(20,184,166,.25);
    border-color:rgba(20,184,166,.7);
}
.cctv-auto-btn.cctv-auto-active{
    background:rgba(34,197,94,.2);
    border-color:rgba(34,197,94,.6);
    color:#86efac;
    box-shadow:0 0 15px rgba(34,197,94,.3);
}
.cctv-auto-btn.cctv-auto-active:hover{
    background:rgba(34,197,94,.3);
    border-color:rgba(34,197,94,.9);
}
.cctv-auto-controls{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
}
.cctv-auto-lbl{
    font-size:11px;
    color:#cbd5e1;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
    flex-shrink:0;
}
.cctv-auto-slider{
    flex:1;
    min-width:0;
    height:6px;
    -webkit-appearance:none;
    appearance:none;
    background:linear-gradient(90deg,#1e293b,#14b8a6);
    border-radius:6px;
    outline:none;
    cursor:pointer;
}
.cctv-auto-slider::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:20px;
    height:20px;
    background:#14b8a6;
    border:2px solid #0f172a;
    border-radius:50%;
    cursor:pointer;
    box-shadow:0 0 10px rgba(20,184,166,.6);
}
.cctv-auto-slider::-moz-range-thumb{
    width:20px;
    height:20px;
    background:#14b8a6;
    border:2px solid #0f172a;
    border-radius:50%;
    cursor:pointer;
    box-shadow:0 0 10px rgba(20,184,166,.6);
}
.cctv-auto-val{
    font-family:'JetBrains Mono','SF Mono',monospace;
    color:#fff;
    font-weight:800;
    font-size:14px;
    min-width:42px;
    text-align:center;
}
.cctv-auto-info{
    margin-top:8px;
    font-size:11px;
    color:rgba(203,213,225,.7);
    text-align:center;
}
.cctv-auto-info.cctv-auto-warn{
    color:#fca5a5;
    font-weight:600;
}

/* ============================================================
   FULL AUTO MOD - dugme + modal
   ============================================================ */
.full-auto-wrap{
    margin-top:14px;
    padding:14px;
    background:linear-gradient(135deg, rgba(168,85,247,.12), rgba(20,184,166,.12));
    border:2px solid rgba(168,85,247,.4);
    border-radius:12px;
    position:relative;
    overflow:hidden;
}
.full-auto-wrap::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent 30%, rgba(168,85,247,.08) 50%, transparent 70%);
    background-size:200% 100%;
    animation:fullAutoShine 4s linear infinite;
    pointer-events:none;
}
@keyframes fullAutoShine{from{background-position:200% 0}to{background-position:-200% 0}}
.full-auto-btn{
    display:block;
    width:100%;
    padding:14px 20px;
    background:linear-gradient(135deg, rgba(168,85,247,.2), rgba(20,184,166,.2));
    border:2px solid rgba(168,85,247,.5);
    border-radius:10px;
    color:#e9d5ff;
    font-size:14px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1.2px;
    cursor:pointer;
    transition:all .2s ease;
    font-family:inherit;
    position:relative;
    z-index:1;
}
.full-auto-btn:hover{
    background:linear-gradient(135deg, rgba(168,85,247,.3), rgba(20,184,166,.3));
    border-color:rgba(168,85,247,.8);
    transform:translateY(-1px);
    box-shadow:0 8px 22px rgba(168,85,247,.25);
}
.full-auto-btn.full-auto-active{
    background:linear-gradient(135deg, rgba(34,197,94,.3), rgba(20,184,166,.3));
    border-color:rgba(34,197,94,.7);
    color:#bbf7d0;
    box-shadow:0 0 18px rgba(34,197,94,.35);
    animation:fullAutoActivePulse 2.4s ease-in-out infinite;
}
@keyframes fullAutoActivePulse{
    0%,100%{box-shadow:0 0 18px rgba(34,197,94,.35)}
    50%{box-shadow:0 0 28px rgba(34,197,94,.6)}
}
.full-auto-btn.full-auto-active:hover{
    background:linear-gradient(135deg, rgba(34,197,94,.4), rgba(20,184,166,.4));
}
.full-auto-info{
    margin-top:8px;
    font-size:11px;
    color:rgba(233,213,255,.7);
    text-align:center;
    letter-spacing:.4px;
    position:relative;
    z-index:1;
}

/* Modal */
.full-auto-modal{
    position:fixed;
    inset:0;
    z-index:9000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.full-auto-modal.is-open{
    display:flex;
}
.full-auto-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(2,6,23,.75);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    animation:fullAutoModalFadeIn .25s ease-out;
}
@keyframes fullAutoModalFadeIn{from{opacity:0}to{opacity:1}}
.full-auto-modal-dialog{
    position:relative;
    z-index:1;
    width:100%;
    max-width:560px;
    max-height:90vh;
    background:linear-gradient(135deg, #1e293b, #0f172a);
    border:1px solid rgba(168,85,247,.35);
    border-radius:18px;
    box-shadow:0 32px 80px rgba(0,0,0,.75), 0 0 60px rgba(168,85,247,.2);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    animation:fullAutoModalSlide .35s cubic-bezier(.16,1,.3,1);
}
@keyframes fullAutoModalSlide{
    from{opacity:0;transform:translateY(20px) scale(.96)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
.full-auto-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 22px;
    border-bottom:1px solid rgba(168,85,247,.2);
    background:linear-gradient(180deg, rgba(168,85,247,.08), transparent);
}
.full-auto-modal-title{
    font-size:16px;
    font-weight:700;
    color:#e9d5ff;
    margin:0;
    letter-spacing:.5px;
}
.full-auto-modal-close{
    background:none;
    border:0;
    color:rgba(255,255,255,.6);
    font-size:26px;
    line-height:1;
    cursor:pointer;
    padding:4px 8px;
    border-radius:6px;
    transition:all .2s ease;
}
.full-auto-modal-close:hover{
    color:#fff;
    background:rgba(255,255,255,.08);
}
.full-auto-modal-body{
    padding:18px 22px;
    overflow-y:auto;
    flex:1;
}
.full-auto-modal-desc{
    margin:0 0 10px;
    font-size:13px;
    color:rgba(203,213,225,.85);
}
.full-auto-modal-list{
    margin:0 0 18px;
    padding:0 0 0 18px;
    color:rgba(203,213,225,.75);
    font-size:13px;
    line-height:1.7;
}
.full-auto-modal-list strong{
    color:#5eead4;
    font-weight:700;
}
.full-auto-modal-section-title{
    margin:6px 0 10px;
    font-size:13px;
    font-weight:700;
    color:#e9d5ff;
    text-transform:uppercase;
    letter-spacing:.8px;
}
.full-auto-text-list{
    background:rgba(15,23,42,.5);
    border:1px solid rgba(94,234,212,.15);
    border-radius:10px;
    padding:8px;
    max-height:240px;
    overflow-y:auto;
}
.full-auto-text-empty{
    text-align:center;
    color:rgba(255,255,255,.4);
    font-size:12px;
    padding:20px;
}
.full-auto-text-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:8px;
    cursor:pointer;
    transition:background .15s ease;
    user-select:none;
}
.full-auto-text-item:hover{
    background:rgba(94,234,212,.06);
}
.full-auto-text-item input[type="checkbox"]{
    flex-shrink:0;
    width:16px;
    height:16px;
    accent-color:#14b8a6;
    cursor:pointer;
}
.full-auto-text-item-text{
    flex:1;
    font-size:13px;
    color:#cbd5e1;
    word-break:break-word;
}
.full-auto-text-item.is-checked{
    background:rgba(94,234,212,.1);
}
.full-auto-text-item.is-checked .full-auto-text-item-text{
    color:#fff;
}
.full-auto-text-actions{
    display:flex;
    gap:8px;
    margin-top:10px;
}
.full-auto-text-action-btn{
    flex:1;
    padding:8px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.15);
    border-radius:8px;
    color:rgba(255,255,255,.7);
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.6px;
    cursor:pointer;
    transition:all .15s ease;
    font-family:inherit;
}
.full-auto-text-action-btn:hover{
    background:rgba(255,255,255,.1);
    border-color:rgba(255,255,255,.3);
    color:#fff;
}
.full-auto-modal-footer{
    display:flex;
    gap:10px;
    padding:14px 22px;
    background:rgba(15,23,42,.5);
    border-top:1px solid rgba(168,85,247,.15);
}
.full-auto-modal-cancel,
.full-auto-modal-save{
    flex:1;
    padding:12px;
    border-radius:10px;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:all .2s ease;
    text-transform:uppercase;
    letter-spacing:.8px;
    font-family:inherit;
    border:1px solid transparent;
}
.full-auto-modal-cancel{
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.15);
    color:rgba(255,255,255,.7);
}
.full-auto-modal-cancel:hover{
    background:rgba(255,255,255,.1);
    color:#fff;
}
.full-auto-modal-save{
    background:linear-gradient(135deg, #a855f7, #14b8a6);
    color:#fff;
    box-shadow:0 8px 22px rgba(168,85,247,.4);
}
.full-auto-modal-save:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 28px rgba(168,85,247,.55);
}
.full-auto-modal-save:disabled{
    opacity:.5;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

/* FULL AUTO - badge efekta uz tekst */
.full-auto-text-item-wrap{
    flex:1;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
.full-auto-text-item-text{
    flex:1;
    min-width:0;
    word-break:break-word;
}
.full-auto-text-item-effect{
    flex-shrink:0;
    padding:3px 8px;
    border-radius:10px;
    font-size:9px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
    background:rgba(94,234,212,.15);
    border:1px solid rgba(94,234,212,.35);
    color:#5eead4;
    font-family:'JetBrains Mono','SF Mono',monospace;
}
.full-auto-text-item-effect.effect-glitch{
    background:rgba(244,114,182,.15);
    border-color:rgba(244,114,182,.35);
    color:#f9a8d4;
}
.full-auto-text-item-effect.effect-neon{
    background:rgba(168,85,247,.15);
    border-color:rgba(168,85,247,.35);
    color:#e9d5ff;
}
.full-auto-text-item-effect.effect-fire{
    background:rgba(251,146,60,.15);
    border-color:rgba(251,146,60,.35);
    color:#fed7aa;
}
.full-auto-text-item-effect.effect-rainbow{
    background:linear-gradient(90deg, rgba(239,68,68,.15), rgba(168,85,247,.15));
    border-color:rgba(168,85,247,.35);
    color:#fff;
}
.full-auto-text-item-effect.effect-typewriter{
    background:rgba(34,197,94,.15);
    border-color:rgba(34,197,94,.35);
    color:#86efac;
}
.full-auto-text-item-effect.effect-shadow{
    background:rgba(148,163,184,.15);
    border-color:rgba(148,163,184,.35);
    color:#cbd5e1;
}

/* ============================================================
   FULL AUTO MOD - lock overlay preko VJ panela
   Kad je AUTO aktivan, sve ostalo je disable-ovano
   ============================================================ */
#section-vjpanel{
    position:relative;
}
.full-auto-lock-overlay{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100vw;
    height:100vh;
    height:100dvh;
    z-index:9500;
    display:none;
    align-items:flex-start;
    justify-content:center;
    padding:120px 20px 30px 20px;
    background:rgba(2,6,23,.94);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    animation:fullAutoLockFadeIn .3s ease-out;
    overflow-y:auto;
}
@keyframes fullAutoLockFadeIn{from{opacity:0}to{opacity:1}}

/* Kad je AUTO aktivan I korisnik je na VJ panel - JS dodaje obje klase */
body.full-auto-locked-body.is-on-vjpanel{
    overflow:hidden;
    height:100vh;
    height:100dvh;
}

#section-vjpanel.is-full-auto-locked{
    overflow:visible;
}
/* Sakrij sve osim overlay-a kad je locked */
#section-vjpanel.is-full-auto-locked > .vj-tabs,
#section-vjpanel.is-full-auto-locked > .vj-tab-content{
    display:none !important;
}
/* Overlay se prikazuje samo kad je VJ panel aktivan I full auto je ON */
#section-vjpanel.is-full-auto-locked.active .full-auto-lock-overlay{
    display:flex;
}

/* Meni iznad overlay-a - moze se kliknuti druga sekcija dok je AUTO aktivan */
body.full-auto-locked-body .nav-menu{
    position:relative;
    z-index:9600;
}
body.full-auto-locked-body .header{
    position:relative;
    z-index:9600;
}

.full-auto-lock-card{
    background:linear-gradient(135deg, #1e293b, #0f172a);
    border:2px solid rgba(168,85,247,.5);
    border-radius:18px;
    padding:32px 28px;
    width:min(420px, 92%);
    text-align:center;
    box-shadow:
        0 24px 60px rgba(0,0,0,.6),
        0 0 40px rgba(168,85,247,.3);
    position:relative;
    overflow:hidden;
    animation:fullAutoLockSlide .45s cubic-bezier(.16,1,.3,1);
}
@keyframes fullAutoLockSlide{
    from{opacity:0;transform:translateY(-15px) scale(.96)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
.full-auto-lock-card::before{
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:18px;
    padding:2px;
    background:linear-gradient(120deg,#a855f7,#14b8a6,#a855f7);
    background-size:200% 200%;
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    pointer-events:none;
    animation:fullAutoLockBorder 4s linear infinite;
}
@keyframes fullAutoLockBorder{
    0%{background-position:0% 50%}
    100%{background-position:200% 50%}
}
.full-auto-lock-icon{
    font-size:42px;
    color:#a855f7;
    margin-bottom:8px;
    animation:fullAutoLockSpin 6s linear infinite;
    display:inline-block;
    text-shadow:0 0 20px rgba(168,85,247,.5);
}
@keyframes fullAutoLockSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.full-auto-lock-title{
    font-size:18px;
    font-weight:800;
    color:#e9d5ff;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:12px;
    background:linear-gradient(90deg,#a855f7,#5eead4,#a855f7);
    background-size:200% auto;
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    animation:fullAutoLockTitleShine 4s linear infinite;
}
@keyframes fullAutoLockTitleShine{from{background-position:0% center}to{background-position:200% center}}
.full-auto-lock-desc{
    font-size:13px;
    color:rgba(203,213,225,.85);
    line-height:1.6;
    margin-bottom:16px;
}
.full-auto-lock-stats{
    font-size:11px;
    color:rgba(94,234,212,.85);
    font-family:'JetBrains Mono','SF Mono',monospace;
    padding:10px 14px;
    background:rgba(15,23,42,.6);
    border-radius:10px;
    border:1px solid rgba(94,234,212,.2);
    margin-bottom:18px;
    letter-spacing:.4px;
    min-height:24px;
}
.full-auto-lock-stats:empty::before{
    content:'\2026';
    opacity:.5;
}
.full-auto-lock-stop-btn{
    display:block;
    width:100%;
    padding:13px;
    background:linear-gradient(135deg,#ef4444,#dc2626);
    border:0;
    border-radius:10px;
    color:#fff;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    cursor:pointer;
    transition:all .2s ease;
    box-shadow:0 8px 22px rgba(239,68,68,.35);
    font-family:inherit;
}
.full-auto-lock-stop-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 30px rgba(239,68,68,.5);
}
.full-auto-lock-stop-btn:active{
    transform:translateY(0);
}

/* ============================================================
   OPERATOR badge i toggle (slično kao manager/superadmin)
   ============================================================ */
.user-op-badge{
    display:inline-block;
    padding:3px 10px;
    background:linear-gradient(135deg, rgba(251,146,60,.25), rgba(245,158,11,.25));
    border:1px solid rgba(251,146,60,.5);
    border-radius:10px;
    color:#fed7aa;
    font-size:10px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
}
.user-op-toggle{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    user-select:none;
}
.user-op-toggle input{
    position:absolute;
    opacity:0;
    width:0;height:0;
    pointer-events:none;
}
.user-op-toggle-slider{
    position:relative;
    width:38px;
    height:22px;
    background:rgba(255,255,255,.15);
    border-radius:20px;
    transition:background .2s ease;
    flex-shrink:0;
}
.user-op-toggle-slider::before{
    content:'';
    position:absolute;
    top:3px;
    left:3px;
    width:16px;
    height:16px;
    background:#fff;
    border-radius:50%;
    transition:transform .2s ease;
    box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.user-op-toggle input:checked + .user-op-toggle-slider{
    background:#fb923c;
}
.user-op-toggle input:checked + .user-op-toggle-slider::before{
    transform:translateX(16px);
}
.user-op-toggle-label{
    font-size:12px;
    color:rgba(255,255,255,.85);
    font-weight:600;
}
.user-form-op{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:8px;
    cursor:pointer;
    user-select:none;
}
.user-form-op input{
    position:absolute;
    opacity:0;
    width:0;height:0;
    pointer-events:none;
}
.user-form-op-slider{
    position:relative;
    width:42px;
    height:24px;
    background:rgba(255,255,255,.15);
    border-radius:20px;
    transition:background .2s ease;
    flex-shrink:0;
}
.user-form-op-slider::before{
    content:'';
    position:absolute;
    top:3px;
    left:3px;
    width:18px;
    height:18px;
    background:#fff;
    border-radius:50%;
    transition:transform .2s ease;
    box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.user-form-op input:checked + .user-form-op-slider{
    background:#fb923c;
}
.user-form-op input:checked + .user-form-op-slider::before{
    transform:translateX(18px);
}
.user-form-op-label{
    font-size:13px;
    color:rgba(255,255,255,.85);
    font-weight:500;
}

/* ============================
   App Version Update Modal i Admin Box
   ============================ */

/* Modal overlay i kartica */
.app-version-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10002;background:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .25s ease,background-color .25s ease;pointer-events:none}
.app-version-overlay[hidden]{display:none}
.app-version-overlay.active{opacity:1;background:rgba(0,0,0,.85);pointer-events:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.app-version-modal{position:relative;background:linear-gradient(180deg,#1e293b 0%,#0f172a 100%);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:32px 24px 24px;max-width:420px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;align-items:center;text-align:center;transform:translateY(20px) scale(.95);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.app-version-overlay.active .app-version-modal{transform:translateY(0) scale(1)}
.app-version-modal-icon{width:80px;height:80px;border-radius:24px;background:linear-gradient(135deg,#10b981,#059669);display:flex;align-items:center;justify-content:center;margin-bottom:20px;box-shadow:0 10px 30px rgba(16,185,129,.4);animation:app-version-spin 4s linear infinite}
.app-version-modal-icon svg{width:44px;height:44px;color:#fff}
@keyframes app-version-spin{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
.app-version-modal-title{font-size:22px;font-weight:800;color:#fff;margin-bottom:10px;line-height:1.2}
.app-version-modal-text{font-size:15px;color:rgba(255,255,255,.7);line-height:1.5;margin-bottom:24px}
.app-version-modal-btns{display:flex;gap:10px;width:100%}
.app-version-modal-btn{flex:1;padding:14px 16px;border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;font-family:'Inter',system-ui,sans-serif;min-height:52px;transition:transform .1s ease,opacity .2s ease}
.app-version-modal-btn:active{transform:scale(.97)}
.app-version-modal-btn:disabled{opacity:.5;cursor:not-allowed}
.app-version-modal-btn-primary{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 14px rgba(16,185,129,.4)}
.app-version-modal-btn-secondary{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.1)}
body.app-version-modal-open{overflow:hidden}

/* Admin box za objavljivanje nove verzije (samo superadmin) */
.app-version-box{background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(5,150,105,.04));border:1px solid rgba(16,185,129,.2);border-radius:16px;padding:20px;margin:24px 0 0;display:flex;flex-direction:column;gap:14px}
.app-version-info{display:flex;flex-direction:column;gap:6px}
.app-version-title{font-size:17px;font-weight:700;color:#fff}
.app-version-subtitle{font-size:13px;color:rgba(255,255,255,.65);line-height:1.5}
.app-version-current{font-size:13px;color:rgba(16,185,129,.9);font-weight:600;margin-top:4px}
.btn-publish-version{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;font-family:'Inter',system-ui,sans-serif;align-self:flex-start;box-shadow:0 4px 12px rgba(16,185,129,.3);transition:transform .1s ease,box-shadow .2s ease}
.btn-publish-version:hover{box-shadow:0 6px 16px rgba(16,185,129,.4)}
.btn-publish-version:active{transform:scale(.97)}
.btn-publish-version:disabled{opacity:.5;cursor:not-allowed}
.app-version-msg{font-size:13px;min-height:18px;font-weight:500}
.app-version-msg.ok{color:#10b981}
.app-version-msg.err{color:#ef4444}

@media (max-width:380px){
.app-version-modal{padding:24px 18px 18px;border-radius:20px}
.app-version-modal-icon{width:64px;height:64px;border-radius:18px;margin-bottom:14px}
.app-version-modal-icon svg{width:36px;height:36px}
.app-version-modal-title{font-size:19px}
.app-version-modal-text{font-size:14px;margin-bottom:20px}
.app-version-modal-btn{font-size:15px;min-height:48px;padding:12px 14px}
.app-version-box{padding:16px;border-radius:14px}
.app-version-title{font-size:16px}
.btn-publish-version{width:100%;align-self:stretch}
}

/* ============================
   Moje postavke - sekcija sa karticama
   ============================ */
#section-moje-postavke{max-width:680px;margin:0 auto;padding:0}

.mp-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;margin:0 0 20px;display:flex;flex-direction:column;gap:14px}
.mp-card-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.mp-card-icon{width:28px;height:28px;color:#3b82f6;flex-shrink:0}
.mp-card-title{font-size:18px;font-weight:700;color:#fff;margin:0}
.mp-card-desc{font-size:13px;color:rgba(255,255,255,.6);line-height:1.5;margin:0}

.mp-form-row{display:flex;flex-direction:column;gap:6px}
.mp-label{font-size:13px;color:rgba(255,255,255,.75);font-weight:500}
.mp-input{padding:12px 14px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#fff;font-size:15px;font-family:'Inter',system-ui,sans-serif;transition:border-color .15s ease}
.mp-input:focus{outline:none;border-color:#3b82f6;background:rgba(0,0,0,.4)}
.mp-input::placeholder{color:rgba(255,255,255,.3)}

.mp-status-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(0,0,0,.2);border-radius:10px}
.mp-status-label{font-size:13px;color:rgba(255,255,255,.6)}
.mp-status-value{font-size:14px;font-weight:600;color:#fff}
.mp-status-value.ok{color:#10b981}
.mp-status-value.err{color:#ef4444}

.mp-btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.mp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:'Inter',system-ui,sans-serif;transition:transform .1s ease,opacity .2s ease,box-shadow .2s ease;min-height:44px}
.mp-btn:active{transform:scale(.97)}
.mp-btn:disabled{opacity:.5;cursor:not-allowed}
.mp-btn-primary{background:linear-gradient(135deg,#3b82f6,#1e40af);color:#fff;box-shadow:0 4px 12px rgba(59,130,246,.3)}
.mp-btn-primary:hover{box-shadow:0 6px 16px rgba(59,130,246,.4)}
.mp-btn-secondary{background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.12)}
.mp-btn-secondary:hover{background:rgba(255,255,255,.12)}

.mp-msg{font-size:13px;min-height:18px;font-weight:500;margin-top:4px}
.mp-msg.ok{color:#10b981}
.mp-msg.err{color:#ef4444}

@media (max-width:480px){
#section-moje-postavke{padding:0 8px}
.mp-card{padding:18px;border-radius:12px}
.mp-card-title{font-size:16px}
.mp-input{padding:11px 12px;font-size:14px}
.mp-btn{padding:11px 16px;font-size:13px;width:100%}
.mp-btn-row{flex-direction:column}
}


/* ============================
   Postavke - sub-tab navigacija
   ============================ */
.postavke-tabs{display:flex;gap:4px;background:rgba(0,0,0,.25);padding:6px;border-radius:14px;margin-bottom:20px;border:1px solid rgba(255,255,255,.06);overflow-x:auto;-webkit-overflow-scrolling:touch}
.postavke-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:transparent;border:none;border-radius:10px;color:rgba(255,255,255,.55);font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',system-ui,sans-serif;transition:background .15s ease,color .15s ease;white-space:nowrap;flex-shrink:0}
.postavke-tab:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.85)}
.postavke-tab.active{background:rgba(59,130,246,.15);color:#3b82f6;box-shadow:inset 0 0 0 1px rgba(59,130,246,.3)}
.postavke-tab-icon{width:18px;height:18px;flex-shrink:0}
.postavke-subpanel{display:block;animation:postavkeFade .2s ease-out}
.postavke-subpanel[hidden]{display:none}
@keyframes postavkeFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:600px){
.postavke-tabs{padding:4px;gap:2px}
.postavke-tab{padding:9px 12px;font-size:12px;gap:6px}
.postavke-tab-icon{width:16px;height:16px}
.postavke-tab span{display:none}
}
@media (max-width:380px){
/* Na vrlo malim ekranima ipak prikazi label jer ikone bez label-a su konfuzne */
.postavke-tab span{display:inline}
.postavke-tab{padding:8px 10px;font-size:11px}
}

/* ====================================================================
   EQUALIZER admin sekcija
   ==================================================================== */

/* Status box */
.eq-status-box{display:flex;align-items:center;gap:18px;padding:20px;border-radius:18px;background:linear-gradient(135deg,rgba(6,182,212,.08),rgba(8,145,178,.08));border:1px solid rgba(6,182,212,.2);margin-bottom:20px;transition:all .3s ease}
.eq-status-box.is-active{background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(22,163,74,.1));border-color:rgba(34,197,94,.4);box-shadow:0 0 24px rgba(34,197,94,.15)}
.eq-status-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(6,182,212,.15);color:#06b6d4;flex-shrink:0}
.eq-status-icon svg{width:32px;height:32px}
.eq-status-box.is-active .eq-status-icon{background:rgba(34,197,94,.18);color:#22c55e;animation:eqStatusPulse 1.5s ease-in-out infinite}
@keyframes eqStatusPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}50%{box-shadow:0 0 0 12px rgba(34,197,94,0)}}
.eq-status-text{flex:1;min-width:0}
.eq-status-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px}
.eq-status-desc{font-size:13px;color:rgba(255,255,255,.6);line-height:1.4}
.eq-toggle-btn{padding:14px 28px;background:linear-gradient(135deg,#06b6d4,#3b82f6);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;letter-spacing:.5px;box-shadow:0 4px 16px rgba(6,182,212,.3);transition:all .25s ease;flex-shrink:0}
.eq-toggle-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(6,182,212,.45)}
.eq-toggle-btn:disabled{opacity:.6;cursor:wait}
.eq-toggle-btn[data-enabled="1"]{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 16px rgba(239,68,68,.3)}
.eq-toggle-btn[data-enabled="1"]:hover:not(:disabled){box-shadow:0 6px 20px rgba(239,68,68,.45)}

/* Design grid */
.eq-design-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.eq-design-card{background:rgba(15,23,42,.6);border:2px solid rgba(255,255,255,.08);border-radius:14px;padding:0;cursor:pointer;font-family:inherit;color:inherit;text-align:left;overflow:hidden;transition:all .2s ease;display:flex;flex-direction:column}
.eq-design-card:hover{border-color:rgba(6,182,212,.3);background:rgba(15,23,42,.8);transform:translateY(-2px)}
.eq-design-card.active{border-color:#06b6d4;box-shadow:0 0 0 1px #06b6d4,0 4px 20px rgba(6,182,212,.25)}
.eq-design-preview{height:96px;background:#000;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:8px;border-bottom:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden}
.eq-design-name{padding:10px 12px 2px;font-size:13px;font-weight:700;color:#fff}
.eq-design-desc{padding:0 12px 10px;font-size:11px;color:rgba(255,255,255,.5);line-height:1.3}

/* Preview: classic bars */
.eq-preview-bars-classic .eq-bar{display:block;width:6px;background:linear-gradient(to top,#22c55e 0%,#eab308 50%,#ef4444 100%);border-radius:1px;animation:eqPrevBar 1.6s ease-in-out infinite alternate}
.eq-preview-bars-classic .eq-bar:nth-child(1){animation-delay:0s}
.eq-preview-bars-classic .eq-bar:nth-child(2){animation-delay:.15s}
.eq-preview-bars-classic .eq-bar:nth-child(3){animation-delay:.3s}
.eq-preview-bars-classic .eq-bar:nth-child(4){animation-delay:.45s}
.eq-preview-bars-classic .eq-bar:nth-child(5){animation-delay:.6s}
.eq-preview-bars-classic .eq-bar:nth-child(6){animation-delay:.2s}
.eq-preview-bars-classic .eq-bar:nth-child(7){animation-delay:.35s}
.eq-preview-bars-classic .eq-bar:nth-child(8){animation-delay:.5s}
.eq-preview-bars-classic .eq-bar:nth-child(9){animation-delay:.7s}
@keyframes eqPrevBar{0%{transform:scaleY(.4);transform-origin:bottom}100%{transform:scaleY(1);transform-origin:bottom}}

/* Preview: mirror bars */
.eq-preview-bars-mirror{align-items:center;background:#000}
.eq-preview-bars-mirror .eq-bar-mirror{display:block;width:8px;height:var(--h);background:linear-gradient(to bottom,transparent,#3b82f6 40%,#3b82f6 60%,transparent),linear-gradient(to top,#3b82f6,#8b5cf6);background-blend-mode:normal;animation:eqPrevMirror 1.8s ease-in-out infinite alternate}
.eq-preview-bars-mirror .eq-bar-mirror:nth-child(odd){animation-delay:.2s}
.eq-preview-bars-mirror .eq-bar-mirror:nth-child(3n){animation-delay:.5s}
@keyframes eqPrevMirror{0%{transform:scaleY(.5)}100%{transform:scaleY(1)}}

/* Preview: circular */
.eq-preview-circular{position:relative;background:radial-gradient(circle at center,rgba(6,182,212,.1),#000 70%)}
.eq-circ-center{position:absolute;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle,#06b6d4,#3b82f6);box-shadow:0 0 20px rgba(6,182,212,.6);animation:eqPrevCircCenter 1.4s ease-in-out infinite}
.eq-circ-ray{position:absolute;width:2px;height:var(--l,50%);background:linear-gradient(to top,#06b6d4,#8b5cf6);border-radius:1px;left:50%;top:50%;transform-origin:0 0;transform:translate(-50%,-50%) rotate(var(--r,0deg)) translateY(-12px);animation:eqPrevCircRay 1.4s ease-in-out infinite alternate}
@keyframes eqPrevCircCenter{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
@keyframes eqPrevCircRay{0%{height:30%}100%{height:var(--l,50%)}}

/* Preview: wave */
.eq-preview-wave{background:#000;color:#06b6d4;padding:0;align-items:center}
.eq-preview-wave svg{filter:drop-shadow(0 0 4px rgba(6,182,212,.6))}

/* Preview: particles */
.eq-preview-particles{position:relative;background:radial-gradient(circle at center,rgba(236,72,153,.12),#000 70%);overflow:hidden}
.eq-particle-center{position:absolute;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#ec4899,#a855f7);box-shadow:0 0 14px rgba(236,72,153,.7);left:50%;top:50%;transform:translate(-50%,-50%);animation:eqPrevPartCenter 1s ease-in-out infinite}
.eq-particle{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:#ec4899;box-shadow:0 0 6px #ec4899;animation:eqPrevPart 2s ease-in-out infinite}
.eq-particle:nth-child(odd){background:#06b6d4;box-shadow:0 0 6px #06b6d4;animation-delay:.3s}
.eq-particle:nth-child(3n){background:#a855f7;box-shadow:0 0 6px #a855f7;animation-delay:.6s}
@keyframes eqPrevPartCenter{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.3)}}
@keyframes eqPrevPart{0%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}100%{opacity:.3;transform:scale(.7)}}

/* Scheme grid */
.eq-scheme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.eq-scheme-card{background:rgba(15,23,42,.6);border:2px solid rgba(255,255,255,.08);border-radius:12px;padding:0;cursor:pointer;font-family:inherit;color:inherit;text-align:center;overflow:hidden;transition:all .2s ease;display:flex;flex-direction:column}
.eq-scheme-card:hover{border-color:rgba(236,72,153,.3);transform:translateY(-1px)}
.eq-scheme-card.active{border-color:#ec4899;box-shadow:0 0 0 1px #ec4899,0 4px 16px rgba(236,72,153,.25)}
.eq-scheme-preview{height:64px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.05)}
.eq-scheme-name{padding:10px 8px;font-size:12px;font-weight:600;color:rgba(255,255,255,.85)}

/* Param row */
.eq-param-row{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.eq-param-label{font-size:14px;color:rgba(255,255,255,.7);min-width:200px;font-weight:500}
.eq-param-slider{flex:1;min-width:200px;height:6px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.08);border-radius:3px;cursor:pointer;outline:none}
.eq-param-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#06b6d4,#3b82f6);cursor:pointer;border:2px solid #fff;box-shadow:0 2px 8px rgba(6,182,212,.4)}
.eq-param-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#06b6d4,#3b82f6);cursor:pointer;border:2px solid #fff;box-shadow:0 2px 8px rgba(6,182,212,.4)}
.eq-param-value{min-width:50px;text-align:right;font-size:14px;font-weight:700;color:#06b6d4;font-family:monospace}
.eq-param-help{font-size:12px;color:rgba(255,255,255,.45);margin-bottom:18px;margin-left:0;line-height:1.4}
.eq-param-checkbox-row .eq-param-label{flex:1}

/* Status msg */
.eq-status-msg{margin-top:12px;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:600;min-height:0;transition:all .2s ease}
.eq-status-msg.eq-msg-success{background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
.eq-status-msg.eq-msg-error{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}

/* Mobile responsive */
@media (max-width:600px){
    .eq-status-box{flex-direction:column;text-align:center}
    .eq-status-icon{margin:0 auto}
    .eq-toggle-btn{width:100%}
    .eq-design-grid{grid-template-columns:repeat(2,1fr)}
    .eq-scheme-grid{grid-template-columns:repeat(2,1fr)}
    .eq-param-row{flex-direction:column;align-items:stretch;gap:6px}
    .eq-param-label{min-width:0}
    .eq-param-value{text-align:left}
    .eq-param-checkbox-row{flex-direction:row;align-items:center;justify-content:space-between}
}


/* ============================
   EQUALIZER - CODE Logo dizajn kartica preview
   ============================ */
.eq-card-featured{border-color:rgba(236,72,153,.3) !important;position:relative;overflow:hidden}
.eq-card-featured::before{content:'';position:absolute;inset:-1px;background:linear-gradient(135deg,rgba(236,72,153,.15),rgba(168,85,247,.15),rgba(6,182,212,.15));z-index:0;pointer-events:none;border-radius:14px;animation:eqFeaturedShimmer 3s ease-in-out infinite alternate}
.eq-card-featured>*{position:relative;z-index:1}
@keyframes eqFeaturedShimmer{0%{opacity:.4}100%{opacity:.8}}
.eq-card-featured.active{border-color:#ec4899 !important;box-shadow:0 0 0 1px #ec4899,0 4px 20px rgba(236,72,153,.35) !important}

.eq-design-badge{display:inline-block;font-size:9px;font-weight:800;padding:2px 6px;border-radius:6px;background:linear-gradient(135deg,#ec4899,#a855f7,#06b6d4);background-size:200% 100%;color:#fff;letter-spacing:.5px;margin-left:6px;vertical-align:1px;animation:eqBadgeShine 2s linear infinite;text-shadow:0 0 4px rgba(255,255,255,.3)}
@keyframes eqBadgeShine{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* Preview za code_logo - gornji barovi + logo "code" + donji barovi */
.eq-preview-code-logo{display:grid;grid-template-rows:1fr auto 1fr;grid-template-columns:8px 1fr 8px;gap:3px;align-items:stretch;padding:6px;background:radial-gradient(ellipse at center,rgba(236,72,153,.12),#000 70%)}
.eq-cl-bar,.eq-cl-bar-bot{grid-row:1;align-self:end;justify-self:center;width:6px;background:linear-gradient(to top,#06b6d4,#a855f7,#ec4899);border-radius:2px;height:var(--h);animation:eqClBar 1.4s ease-in-out infinite alternate}
.eq-cl-bar:nth-of-type(1){grid-column:2;justify-self:start}
.eq-cl-bar:nth-of-type(2){grid-column:2;justify-self:center;animation-delay:.2s}
.eq-cl-bar:nth-of-type(3){grid-column:2;justify-self:end;animation-delay:.4s}
.eq-cl-bar-bot{grid-row:3;align-self:start;background:linear-gradient(to bottom,#06b6d4,#a855f7,#ec4899)}
.eq-cl-bar-bot:nth-of-type(4){grid-column:2;justify-self:start;animation-delay:.1s}
.eq-cl-bar-bot:nth-of-type(5){grid-column:2;justify-self:center;animation-delay:.3s}
.eq-cl-bar-bot:nth-of-type(6){grid-column:2;justify-self:end;animation-delay:.5s}
@keyframes eqClBar{0%{transform:scaleY(.5);transform-origin:bottom}100%{transform:scaleY(1);transform-origin:bottom}}
.eq-cl-bar-bot{animation-name:eqClBarBot}
@keyframes eqClBarBot{0%{transform:scaleY(.5);transform-origin:top}100%{transform:scaleY(1);transform-origin:top}}

.eq-cl-logo-text{grid-row:2;grid-column:2;font-family:'Inter',system-ui,sans-serif;font-weight:800;color:#fff;text-align:center;font-size:24px;letter-spacing:-2px;text-shadow:0 0 12px rgba(236,72,153,.7),0 0 24px rgba(168,85,247,.5);animation:eqClLogoPulse 1.4s ease-in-out infinite;font-variation-settings:'wght' 900}
@keyframes eqClLogoPulse{0%,100%{transform:scale(1);text-shadow:0 0 12px rgba(236,72,153,.5),0 0 24px rgba(168,85,247,.3)}50%{transform:scale(1.06);text-shadow:0 0 20px rgba(236,72,153,.9),0 0 40px rgba(168,85,247,.6)}}

.eq-cl-meter{grid-row:1/4;align-self:center;width:6px;height:60%;background:linear-gradient(to top,rgba(6,182,212,.2),rgba(236,72,153,.6),rgba(236,72,153,1));border-radius:3px;animation:eqClMeter 1.2s ease-in-out infinite alternate}
.eq-cl-meter-left{grid-column:1}
.eq-cl-meter-right{grid-column:3;animation-delay:.3s}
@keyframes eqClMeter{0%{transform:scaleY(.4);transform-origin:bottom}100%{transform:scaleY(1);transform-origin:bottom}}


/* ====================================================================
   CAMSHARE admin sekcija
   ==================================================================== */
.cs-admin-status{display:flex;align-items:center;gap:18px;padding:20px;border-radius:18px;background:linear-gradient(135deg,rgba(236,72,153,.08),rgba(168,85,247,.08));border:1px solid rgba(236,72,153,.2);margin-bottom:20px;transition:all .3s ease}
.cs-admin-status.is-active{background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(22,163,74,.1));border-color:rgba(34,197,94,.4);box-shadow:0 0 24px rgba(34,197,94,.15)}
.cs-admin-status-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(236,72,153,.15);color:#ec4899;flex-shrink:0}
.cs-admin-status-icon svg{width:32px;height:32px}
.cs-admin-status.is-active .cs-admin-status-icon{background:rgba(34,197,94,.18);color:#22c55e;animation:eqStatusPulse 1.5s ease-in-out infinite}
.cs-admin-status-text{flex:1;min-width:0}
.cs-admin-status-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px}
.cs-admin-status-desc{font-size:13px;color:rgba(255,255,255,.6);line-height:1.4}
.cs-admin-toggle-btn{padding:14px 28px;background:linear-gradient(135deg,#ec4899,#a855f7);color:#fff;border:none;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;letter-spacing:.5px;box-shadow:0 4px 16px rgba(236,72,153,.3);transition:all .25s ease;flex-shrink:0;font-family:inherit}
.cs-admin-toggle-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(236,72,153,.45)}
.cs-admin-toggle-btn:disabled{opacity:.6;cursor:wait}
.cs-admin-toggle-btn[data-active="1"]{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 4px 16px rgba(239,68,68,.3)}
.cs-admin-toggle-btn[data-active="1"]:hover:not(:disabled){box-shadow:0 6px 20px rgba(239,68,68,.45)}

/* Param row (slicno equalizer-u) */
.cs-param-row{display:flex;align-items:center;gap:14px;margin-bottom:8px;flex-wrap:wrap}
.cs-param-label{font-size:14px;color:rgba(255,255,255,.7);min-width:200px;font-weight:500}
.cs-param-slider{flex:1;min-width:200px;height:6px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.08);border-radius:3px;cursor:pointer;outline:none}
.cs-param-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#ec4899,#a855f7);cursor:pointer;border:2px solid #fff;box-shadow:0 2px 8px rgba(236,72,153,.4)}
.cs-param-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#ec4899,#a855f7);cursor:pointer;border:2px solid #fff;box-shadow:0 2px 8px rgba(236,72,153,.4)}
.cs-param-value{min-width:50px;text-align:right;font-size:14px;font-weight:700;color:#ec4899;font-family:monospace}
.cs-param-help{font-size:12px;color:rgba(255,255,255,.45);margin-bottom:18px;line-height:1.4}

.cs-admin-msg{margin-top:12px;padding:10px 14px;border-radius:10px;font-size:13px;font-weight:600;min-height:0;transition:all .2s ease}
.cs-admin-msg.cs-msg-success{background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
.cs-admin-msg.cs-msg-error{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.3)}

@media (max-width:600px){
    .cs-admin-status{flex-direction:column;text-align:center}
    .cs-admin-status-icon{margin:0 auto}
    .cs-admin-toggle-btn{width:100%}
    .cs-param-row{flex-direction:column;align-items:stretch;gap:6px}
    .cs-param-label{min-width:0}
    .cs-param-value{text-align:left}
}

/* ============================================================
   GALERIJA - admin sekcija (samo superadmin)
   ============================================================ */
.galerija-current{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.galerija-current-label{font-size:11px;font-weight:800;letter-spacing:1px;color:rgba(255,255,255,.5)}
.galerija-current-name{font-size:15px;font-weight:700;color:rgba(255,255,255,.6)}
.galerija-current-name.is-active{color:#f59e0b}
.galerija-stop-btn{width:100%;padding:14px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:800;letter-spacing:.5px;cursor:pointer;margin-bottom:20px;box-shadow:0 4px 16px rgba(239,68,68,.3);transition:all .25s ease;font-family:inherit}
.galerija-stop-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(239,68,68,.45)}
.galerija-stop-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.galerija-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.galerija-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 12px;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.1);border-radius:16px;cursor:pointer;transition:all .2s ease;font-family:inherit;color:#fff}
.galerija-card:hover{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.35);transform:translateY(-2px)}
.galerija-card.active{background:rgba(245,158,11,.12);border-color:#f59e0b;box-shadow:0 0 20px rgba(245,158,11,.25)}
.galerija-card-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:rgba(245,158,11,.12);border-radius:12px;color:#f59e0b}
.galerija-card-icon svg{width:24px;height:24px}
.galerija-card-name{font-size:14px;font-weight:700;color:#fff;text-align:center;word-break:break-word}
.galerija-card-count{font-size:12px;color:rgba(255,255,255,.5);font-family:monospace}
.galerija-card-state{font-size:10px;font-weight:800;letter-spacing:.8px;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:6px;text-transform:uppercase}
.galerija-card.active .galerija-card-state{color:#f59e0b}
.galerija-card-state-dot{width:8px;height:8px;background:#f59e0b;border-radius:50%;box-shadow:0 0 10px #f59e0b;animation:galerijaDotPulse 1.2s ease infinite}
@keyframes galerijaDotPulse{0%,100%{opacity:1}50%{opacity:.35}}
.galerija-empty{grid-column:1/-1;text-align:center;padding:30px;color:rgba(255,255,255,.45);font-size:14px}
.galerija-msg{min-height:20px;font-size:13px;font-weight:600;padding:0;border-radius:10px;transition:all .2s ease;margin-bottom:12px}
.galerija-msg.galerija-msg-success{background:rgba(34,197,94,.12);color:#22c55e;border:1px solid rgba(34,197,94,.3);padding:10px 14px}
.galerija-msg.galerija-msg-error{background:rgba(239,68,68,.12);color:#ef4444;border:1px solid rgba(239,68,68,.3);padding:10px 14px}
.galerija-playall-btn{width:100%;padding:14px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#0f172a;border:none;border-radius:12px;font-size:14px;font-weight:800;letter-spacing:.5px;cursor:pointer;margin-bottom:12px;box-shadow:0 4px 16px rgba(245,158,11,.3);transition:all .25s ease;font-family:inherit}
.galerija-playall-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(245,158,11,.45)}
.galerija-playall-btn.active{background:rgba(245,158,11,.15);color:#f59e0b;border:2px solid #f59e0b;box-shadow:0 0 20px rgba(245,158,11,.25);cursor:default}