/* Clipper design system — topla bijela, crna tipografija, kobalt-plavi akcent. */
:root{
  /* design tokeni (v3): svijetla pozadina, bijeli paneli, tamni tekst, plavi akcent */
  --bg:#F7F8FA;--surface:#FFFFFF;--surface-2:#F2F4F7;--surface-3:#E7EAF0;
  --line:#E5E7EB;--line-2:#D4D8DF;
  --ink:#0F172A;--ink-2:#334155;--muted:#64748B;--faint:#8A94A6;
  --blue:#155DFC;--blue-600:#0F4FE0;--blue-700:#1447C4;--blue-50:#EEF3FF;--blue-100:#DCE6FF;
  --green:#15803D;--green-50:#EAF7EF;--red:#C81E1E;--red-50:#FDEEEE;--amber:#B45309;--amber-50:#FFF4E5;
  --violet:#6D28D9;--violet-50:#F3EEFF;
  --r-sm:8px;--r:12px;--r-lg:12px;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;
  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 1px 2px rgba(15,23,42,.04),0 6px 16px -10px rgba(15,23,42,.18);
  --sh-3:0 18px 40px -16px rgba(15,23,42,.28);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --side:220px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);color:var(--ink);letter-spacing:-.015em}
h1{font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.02em}
h2{font-size:20px;font-weight:650;line-height:1.25}
h3{font-size:16px;font-weight:700}
p{margin:0}
.eyebrow{font:600 11px/1 var(--font);text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}
.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:12.5px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.ic{width:20px;height:20px;flex:none;display:inline-block;vertical-align:-4px}.ic.sm{width:16px;height:16px;vertical-align:-3px}.ic.xs{width:14px;height:14px;vertical-align:-2px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
::selection{background:var(--blue-100)}
.logo{display:inline-flex;align-items:center;gap:9px;font:800 25px/1 var(--display);letter-spacing:-.045em;color:var(--ink)}
.logo svg{width:30px;height:30px}

/* dugmad */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;transition:background .15s var(--ease),border-color .15s,box-shadow .15s,transform .08s}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}.btn.dark:hover{background:#26262A}
.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 18px -8px rgba(31,94,255,.6)}.btn.blue:hover{background:var(--blue-600)}
.btn.ghost{background:transparent;border-color:transparent}.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{color:var(--red);border-color:#F3C9C5}.btn.danger:hover{background:var(--red-50)}
.btn.sm{height:32px;padding:0 11px;font-size:13px;border-radius:9px}
.btn.lg{height:50px;padding:0 24px;font-size:15.5px;border-radius:12px}
.btn.icon{width:36px;padding:0}.btn.icon.sm{width:32px}
.btn.block{width:100%}
.link{color:var(--blue);font-weight:600}.link:hover{text-decoration:underline}

/* forme */
.field{display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:13px;color:var(--ink-2)}
.field .hint{font-weight:400;color:var(--muted);font-size:12px}
.input,select.input,textarea.input{height:44px;width:100%;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 13px;background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s;font-weight:500}
textarea.input{height:auto;min-height:90px;padding:11px 13px;resize:vertical;line-height:1.5}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-50)}
.input::placeholder{color:var(--faint);font-weight:400}
.input.sm{height:34px;font-size:13px;padding:0 10px;border-radius:8px}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B71' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px}
input[type=color].swatch{appearance:none;-webkit-appearance:none;width:30px;height:30px;padding:0;border:1px solid var(--line-2);border-radius:8px;background:none;cursor:pointer;flex:none}
input[type=color].swatch::-webkit-color-swatch-wrapper{padding:2px}input[type=color].swatch::-webkit-color-swatch{border:0;border-radius:6px}
input[type=range]{width:100%;accent-color:var(--blue);height:20px}
.check{display:flex;align-items:center;gap:10px;font-weight:500;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--blue)}
.switch{position:relative;width:42px;height:24px;flex:none;display:inline-block}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.switch i{position:absolute;inset:0;border-radius:99px;background:var(--line-2);transition:background .2s}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform .2s var(--ease)}
.switch input:checked+i{background:var(--blue)}.switch input:checked+i::after{transform:translateX(18px)}
.toggle-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0}
.toggle-row .ti{width:34px;height:34px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;flex:none}
.toggle-row .tx{flex:1}.toggle-row b{display:block;font-size:14px}.toggle-row small{color:var(--muted);font-size:12.5px}
.seg{display:inline-flex;background:var(--surface-2);border-radius:11px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:7px 12px;border-radius:8px;font-weight:600;font-size:13px;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}
.opt{border:1px solid var(--line-2);background:var(--surface);border-radius:12px;padding:10px 14px;font-weight:600;font-size:13.5px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;color:var(--ink-2)}
.opt:hover{border-color:var(--faint)}
.opt.on{border-color:var(--blue);background:var(--blue-50);color:var(--blue-700);box-shadow:0 0 0 1px var(--blue)}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--surface);border-radius:99px;padding:8px 14px;font-weight:600;font-size:13px;cursor:pointer;color:var(--ink-2);transition:all .15s}
.chip:hover{border-color:var(--faint)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* kartice */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.card.pad{padding:22px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:12px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid-2>*,.grid-3>*{min-width:0}
.divider{height:1px;background:var(--line);margin:4px 0}
.sep{width:1px;align-self:stretch;background:var(--line)}

/* status */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:99px;font-size:12px;font-weight:650;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.badge.ok{background:var(--green-50);color:var(--green)}
.badge.err{background:var(--red-50);color:var(--red)}
.badge.warn{background:var(--amber-50);color:var(--amber)}
.badge.live{background:var(--blue-50);color:var(--blue-700)}
.spin{width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;flex:none;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--ink);border-radius:99px;transition:width .5s var(--ease)}
.bar.blue>i{background:var(--blue)}
.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--surface-2);color:var(--ink-2);font-size:13.5px}
.notice.blue{background:var(--blue-50);color:var(--blue-700)}
.notice.warn{background:var(--amber-50);color:var(--amber)}
.notice.err{background:var(--red-50);color:var(--red)}
.notice.ok{background:var(--green-50);color:var(--green)}
.skel{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;animation:sk 1.3s infinite linear;border-radius:12px}
@keyframes sk{to{background-position:-200% 0}}

/* app shell */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:22px 16px 18px;gap:6px;z-index:30}
.side .logo{padding:0 8px 18px}
.ws{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-weight:650;margin-bottom:16px}
.ws .ic{color:var(--muted)}
.ws span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{display:flex;flex-direction:column;gap:2px}
.nav .eyebrow{padding:12px 12px 6px}
.nav a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;font-weight:550;color:var(--ink-2);transition:background .15s}
.nav a .ic{color:var(--muted)}
.nav a:hover{background:var(--surface-2)}
.nav a.on{background:var(--blue-50);color:var(--blue-700);font-weight:650}
.nav a.on .ic{color:var(--blue)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:16px;padding-top:12px}
.usage-mini{padding:0 8px;display:flex;flex-direction:column;gap:7px}
.usage-mini b{font:700 15px var(--display)}
.me{display:flex;align-items:center;gap:10px;padding:12px 8px 0;border-top:1px solid var(--line);position:relative}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.me .who{flex:1;min-width:0}.me .who b{display:block;font-size:13.5px}.me .who small{color:var(--muted);font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:12px 36px;border-bottom:1px solid var(--line);min-height:64px;background:rgba(247,247,244,.88);backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}
.crumbs{flex:1;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px;min-width:0;white-space:nowrap;overflow:hidden}
.crumbs b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.crumbs .s{color:var(--faint)}
.gsearch{display:flex;align-items:center;gap:9px;width:330px;max-width:36vw;height:40px;border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:0 12px;color:var(--faint)}
.gsearch input{flex:1;border:0;outline:none;background:none;min-width:0;color:var(--ink)}
.kbd{font:600 11px var(--font);color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:1px 5px;white-space:nowrap}
.icon-btn{position:relative;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;border:0;background:none;cursor:pointer;color:var(--ink-2)}
.icon-btn:hover{background:var(--surface-2)}
.dot-badge{position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg)}
.content{padding:30px 36px 64px;display:flex;flex-direction:column;gap:26px;min-width:0;max-width:1500px;width:100%}
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.page-h h1{font-size:46px}
.page-h p{font-size:18px;color:var(--ink-2);margin-top:6px}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sec-h h2{font-size:24px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button,.tabs a{border:0;background:none;padding:11px 12px;font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;margin-bottom:-1px}
.tabs .on{color:var(--blue-700);border-bottom-color:var(--blue)}
.burger{display:none}
.pop{position:absolute;right:0;top:calc(100% + 8px);width:360px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-3);z-index:60;overflow:hidden}
.pop-h{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line)}
.pop-list{max-height:400px;overflow:auto}
.pop-item{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid var(--surface-2)}
.pop-item:hover{background:var(--surface-2)}
.pop-item.unread{background:#FAFBFF}
.pop-item .d{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:var(--faint)}
.pop-item .d.done{background:var(--green)}.pop-item .d.error{background:var(--red)}.pop-item .d.info{background:var(--blue)}
.menu{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--sh-3);padding:6px;z-index:60;animation:pop .14s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.menu button,.menu a{display:flex;width:100%;align-items:center;gap:10px;padding:9px 10px;border:0;background:none;border-radius:8px;cursor:pointer;text-align:left;font-weight:500}
.menu button:hover,.menu a:hover{background:var(--surface-2)}
.menu .danger{color:var(--red)}
.menu.up{top:auto;bottom:calc(100% + 6px)}

/* dashboard */
.quick{display:grid;grid-template-columns:minmax(0,1.6fr) auto minmax(0,1fr) auto;gap:22px;align-items:center;padding:16px 18px}
.urlbox{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);overflow:hidden;height:52px}
.urlbox .ib{width:50px;height:100%;display:grid;place-items:center;border-right:1px solid var(--line);color:var(--ink-2);background:var(--surface-2);flex:none}
.urlbox input{flex:1;border:0;outline:none;padding:0 14px;height:100%;min-width:0;font-size:15px;background:none}
.urlbox .btn{height:44px;margin:4px;border-radius:9px}
.or{font:600 11px var(--font);color:var(--faint);letter-spacing:.08em}
.dropzone{display:flex;align-items:center;gap:14px;border:1.5px dashed var(--line-2);border-radius:12px;padding:10px 16px;cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.over{border-color:var(--blue);background:var(--blue-50)}
.dropzone b{display:block;font-size:14px;font-weight:600}.dropzone small{color:var(--muted)}
.platforms .list{display:flex;gap:14px;align-items:center;font-weight:650;font-size:13px;margin-top:8px}
.pl{display:inline-flex;align-items:center;gap:6px}.pl svg{width:18px;height:18px;flex:none}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.stats>div{display:flex;align-items:center;gap:12px;padding:0 20px;color:var(--ink-2)}
.stats>div+div{border-left:1px solid var(--line)}
.stats b{font:800 17px var(--display);color:var(--ink)}
.clips-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.clipc{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.clipc:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.clipc .media{position:relative;aspect-ratio:9/12;background:#111 center/cover no-repeat;overflow:hidden;display:block}
.clipc .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s}
.clipc .media video.on{opacity:1}
.clipc .num,.clipc .dur{position:absolute;top:12px;font:700 12px var(--font);padding:4px 9px;border-radius:99px;z-index:2}
.clipc .num{left:12px;background:#fff;color:var(--ink)}
.clipc .dur{right:12px;color:#fff;background:rgba(0,0,0,.4);backdrop-filter:blur(6px)}
.clipc .play{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--sh-2);z-index:2}
.clipc .state{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,11,.5);color:#fff;font-weight:650;text-align:center;padding:16px;z-index:2}
.clipc .body{display:flex;align-items:center;gap:10px;padding:13px 14px}
.clipc .body .t{flex:1;min-width:0}
.clipc .body .t b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clipc .body .t small{color:var(--muted);font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:13px;color:var(--ink)}
.score .ic{color:var(--blue);width:15px;height:15px}
.resume{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.resume-item{display:flex;align-items:center;gap:16px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);transition:box-shadow .2s}
.resume-item:hover{box-shadow:var(--sh-2)}
.resume-item .th{width:118px;aspect-ratio:16/9;border-radius:9px;background:#222 center/cover;flex:none}
.resume-item .info{flex:1;min-width:0}
.resume-item .info b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.resume-item .info small{color:var(--muted)}
.resume-item .prog{width:100px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.empty{padding:52px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;border:1.5px dashed var(--line-2);border-radius:var(--r-lg);background:var(--surface)}
.empty .big{width:58px;height:58px;border-radius:16px;background:var(--blue-50);color:var(--blue);display:grid;place-items:center}

/* projekti */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:9px;height:40px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface);padding:0 12px;color:var(--faint);min-width:230px}
.search input{flex:1;border:0;outline:none;background:none;min-width:0;color:var(--ink)}
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.proj{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);transition:box-shadow .2s,transform .2s}
.proj:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.proj .th{aspect-ratio:16/9;background:#1a1a1c center/cover;position:relative}
.proj .th .dur{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.6);color:#fff;font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:6px}
.proj .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:9px}
.proj .nm{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj .more{position:absolute;top:10px;right:10px}
.proj .more .btn{background:rgba(255,255,255,.94);border-color:transparent}
.list-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.list-table th{text-align:left;font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:650}
.list-table td{padding:12px 16px;border-bottom:1px solid var(--surface-2);vertical-align:middle}
.list-table tr:last-child td{border-bottom:0}
.list-table tr.click{cursor:pointer}.list-table tr.click:hover td{background:#FBFBF9}
.th-sm{width:84px;aspect-ratio:16/9;border-radius:7px;background:#222 center/cover}

/* novi projekat */
.steps{display:flex;align-items:center;gap:14px}
.steps .st{display:flex;align-items:center;gap:10px;font-weight:650;color:var(--muted);white-space:nowrap}
.steps .st i{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:700}
.steps .st.on{color:var(--ink)}.steps .st.on i{background:var(--blue);border-color:var(--blue);color:#fff}
.steps .st.done i{background:var(--ink);border-color:var(--ink);color:#fff}
.steps .ln{flex:1;height:1px;background:var(--line-2);min-width:24px}
.newp{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr) minmax(250px,.8fr);gap:22px;align-items:start}
.src-player{position:relative;border-radius:var(--r-lg);overflow:hidden;background:#111;aspect-ratio:16/9}
.src-player video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.src-player .facebox{position:absolute;border:1.5px solid #fff;border-radius:10px;pointer-events:none;transition:all .35s var(--ease)}
.src-player .facebox span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);background:#fff;color:#111;font-size:10.5px;font-weight:650;padding:2px 7px;border-radius:6px;white-space:nowrap}
.file-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.file-row .fi{width:38px;height:38px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;flex:none}
.big-drop{display:flex;align-items:center;gap:14px;justify-content:center;border:1.5px dashed var(--line-2);border-radius:var(--r-lg);padding:22px;cursor:pointer;background:var(--surface);transition:all .15s}
.big-drop:hover,.big-drop.over{border-color:var(--blue);background:var(--blue-50)}
.fmt-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fmt{border:1px solid var(--line-2);border-radius:12px;padding:12px 4px 10px;text-align:center;cursor:pointer;background:var(--surface);transition:all .15s}
.fmt:hover{border-color:var(--faint)}
.fmt.on{border-color:var(--blue);background:var(--blue-50);box-shadow:0 0 0 1px var(--blue)}
.fmt .shape{margin:0 auto 8px;border:1.8px solid var(--ink-2);border-radius:4px}
.fmt.on .shape{border-color:var(--blue)}
.fmt b{display:block;font-size:13.5px}.fmt small{display:block;font-size:10.5px;color:var(--muted);line-height:1.25}
.fmt.on b,.fmt.on small{color:var(--blue-700)}
.preview-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:14px}
.phone{position:relative;border-radius:22px;overflow:hidden;background:#111;box-shadow:var(--sh-2);aspect-ratio:9/16}
.phone canvas{display:block;width:100%;height:100%}
.style-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sty{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;border:0;background:none;padding:0}
.sty .sw{width:100%;aspect-ratio:1/1;border-radius:12px;display:grid;place-items:center;font:800 22px var(--display);letter-spacing:-.03em;border:1px solid var(--line-2);transition:all .15s;overflow:hidden}
.sty.on .sw{box-shadow:0 0 0 2px var(--blue);border-color:var(--blue)}
.sty b{font-size:12.5px}.sty small{font-size:10.5px;color:var(--muted);margin-top:-4px;text-align:center}
.sticky-foot{position:sticky;bottom:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 36px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);margin:0 -36px -64px}

/* projekat */
.sugg{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.sg{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.sg.rejected{opacity:.5}
.sg .media{position:relative;aspect-ratio:9/16;max-height:440px;background:#111}
.sg .media.f-1-1{aspect-ratio:1/1}.sg .media.f-16-9{aspect-ratio:16/9}.sg .media.f-4-5{aspect-ratio:4/5}
.sg .media video,.sg .media img{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.sg .media .state{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(10,10,11,.55);text-align:center;padding:18px;font-weight:600}
.sg .bd{padding:16px;display:flex;flex-direction:column;gap:10px}
.sg .tt{font:700 16px/1.3 var(--display);letter-spacing:-.015em}
.meta-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--muted)}
.cat{font-size:11.5px;font-weight:700;border-radius:99px;padding:3px 9px;background:var(--surface-2);color:var(--ink-2)}
.why{font-size:13px;color:var(--ink-2);background:var(--surface-2);border-radius:11px;padding:10px 12px}
.pot{display:grid;grid-template-columns:76px 1fr 28px;gap:6px 10px;align-items:center;font-size:12.5px}
.pot .bar{height:5px}
.tags{display:flex;gap:6px;flex-wrap:wrap}.tag{font-size:12px;color:var(--blue-700);background:var(--blue-50);border-radius:7px;padding:2px 8px}
.transcript{max-height:520px;overflow:auto;line-height:2;padding:2px;user-select:text;font-size:14.5px}
.transcript .w{cursor:pointer;border-radius:4px}
.transcript .w:hover{background:var(--surface-2)}
.transcript .w.hit{background:#FFF0B8}
.transcript .w.cur{background:var(--blue);color:#fff}
.transcript .ts{font:600 11px ui-monospace,Menlo,monospace;color:var(--faint);margin:0 6px 0 2px}

/* toast + modal */
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:100;max-width:calc(100vw - 40px)}
.toast{background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--sh-3);font-weight:550;max-width:420px;animation:tin .25s var(--ease)}
.toast.err{background:var(--red)}.toast.ok{background:#0F5132}
@keyframes tin{from{opacity:0;transform:translateY(10px)}}
.modal-bg{position:fixed;inset:0;background:rgba(10,10,11,.4);display:grid;place-items:center;z-index:90;padding:16px;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.modal{background:var(--surface);border-radius:20px;box-shadow:var(--sh-3);width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:24px;display:flex;flex-direction:column;gap:14px;animation:pop .18s var(--ease)}
.modal.wide{width:min(1000px,100%)}
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;padding:10px 12px;border-bottom:1px solid var(--line);font-weight:650}
.table td{padding:11px 12px;border-bottom:1px solid var(--surface-2);vertical-align:top}
.table-wrap{overflow:auto}

@media (max-width:1280px){.newp{grid-template-columns:minmax(0,1fr) minmax(260px,.8fr)}.preview-side{grid-column:1/-1;position:static;flex-direction:row;align-items:flex-start;flex-wrap:wrap}.preview-side .phone{width:240px;flex:none}.clips-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:280px;transform:translateX(-102%);transition:transform .25s var(--ease);box-shadow:var(--sh-3)}
  body.nav-open .side{transform:none}
  body.nav-open .scrim{display:block}
  .burger{display:grid}
  .topbar{padding:10px 16px}.content{padding:20px 16px 48px;gap:20px}.gsearch{display:none}
  .page-h h1{font-size:34px}.page-h p{font-size:15.5px}
  .quick{grid-template-columns:1fr;gap:12px}.quick .or,.quick .sep{display:none}
  .stats{grid-template-columns:1fr;gap:10px}.stats>div+div{border-left:0}
  .resume{grid-template-columns:1fr}
  .newp{grid-template-columns:1fr}.preview-side{flex-direction:column}.preview-side .phone{width:100%;max-width:300px}
  .sticky-foot{margin:0 -16px -48px;padding:12px 16px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .list-table thead{display:none}.list-table tr{display:block;border-bottom:1px solid var(--line);padding:6px 0}.list-table td{display:block;border:0;padding:4px 14px}
}
@media (max-width:640px){.clips-row{grid-template-columns:1fr 1fr;gap:12px}.fmt-opts{grid-template-columns:repeat(2,1fr)}h1{font-size:32px}.steps .st span{display:none}}
.scrim{display:none;position:fixed;inset:0;background:rgba(10,10,11,.35);z-index:25}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── javni sajt ── */
.pub{background:var(--bg)}
.pub-h{position:sticky;top:0;z-index:40;background:rgba(247,247,244,.85);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.pub-h.sc{border-bottom-color:var(--line)}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.pub-h .wrap{display:flex;align-items:center;gap:28px;height:72px}
.pub-nav{display:flex;gap:26px;flex:1;font-weight:550;color:var(--ink-2)}
.pub-nav a:hover{color:var(--ink)}
.hero{padding:76px 0 40px;text-align:center}
.hero h1{font-size:76px;line-height:.98;letter-spacing:-.05em;max-width:980px;margin:0 auto}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p.lead{font-size:20px;color:var(--ink-2);max-width:640px;margin:22px auto 0;line-height:1.5}
.hero .cta{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.hero .note{margin-top:14px;font-size:13px;color:var(--muted)}
.showcase{margin:46px auto 0;max-width:1120px;position:relative}
.sc-frame{border-radius:22px;border:1px solid var(--line);background:var(--surface);box-shadow:0 40px 100px -40px rgba(10,10,11,.35);overflow:hidden}
.sc-top{height:40px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 16px}
.sc-top i{width:10px;height:10px;border-radius:50%;background:var(--surface-3)}
.sc-body{display:grid;grid-template-columns:200px 1fr 250px;min-height:470px}
.sc-col{padding:16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px;text-align:left}
.sc-col:last-child{border-right:0;border-left:1px solid var(--line)}
.sc-thumb{border-radius:10px;aspect-ratio:16/10;position:relative;overflow:hidden}
.sc-thumb.on{box-shadow:0 0 0 2px var(--blue)}
.sc-stage{background:#EFEFEA;display:grid;place-items:center;padding:20px}
.sc-phone{width:230px;aspect-ratio:9/16;border-radius:16px;overflow:hidden;box-shadow:var(--sh-3);position:relative}
.sc-line{height:9px;border-radius:5px;background:var(--surface-2)}
.sc-line.b{background:var(--blue-100)}
.flow{display:grid;grid-template-columns:1.6fr auto 1fr 1fr 1fr;gap:18px;align-items:center;margin:28px auto 0;max-width:1000px}
.flow .wide{aspect-ratio:16/9;border-radius:14px;overflow:hidden;position:relative}
.flow .tall{aspect-ratio:9/16;border-radius:14px;overflow:hidden;position:relative;box-shadow:var(--sh-2)}
.flow .arrow{color:var(--faint)}
.scene{position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 20%,#3a3a44,#121216)}
.scene.s2{background:radial-gradient(120% 90% at 70% 30%,#2e3b55,#0e1220)}
.scene.s3{background:radial-gradient(120% 90% at 40% 60%,#4a3a2c,#16110c)}
.scene .person{position:absolute;bottom:0;width:46%;aspect-ratio:3/4;left:27%;border-radius:50% 50% 8px 8px/38% 38% 8px 8px;background:linear-gradient(180deg,#d9b49a 0 28%,#1b1b20 28%)}
.scene .person::before{content:"";position:absolute;left:30%;top:-26%;width:40%;aspect-ratio:1/1;border-radius:50%;background:#e2bea3;box-shadow:0 -10px 0 -2px #2a1d16 inset}
.scene .cap{position:absolute;left:8%;right:8%;bottom:16%;text-align:center;font:800 15px/1.1 var(--display);color:#fff;text-transform:uppercase;letter-spacing:-.01em;text-shadow:0 2px 0 #000,0 0 6px rgba(0,0,0,.6)}
.scene .cap b{background:var(--blue);padding:0 4px;border-radius:3px}
.section{padding:96px 0}
.section .head{max-width:720px;margin-bottom:44px}
.section .head h2{font-size:48px;letter-spacing:-.04em;line-height:1.02}
.section .head p{font-size:18px;color:var(--ink-2);margin-top:14px}
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.how .card{padding:22px;display:flex;flex-direction:column;gap:12px;min-height:220px}
.how .n{font:800 13px var(--display);color:var(--blue);background:var(--blue-50);width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.how h3{font-size:19px}
.feat{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.feat+.feat{margin-top:90px}
.feat.rev{grid-template-columns:1fr 1.1fr}.feat.rev .visual{order:2}
.feat h3{font:800 34px/1.05 var(--display);letter-spacing:-.035em}
.feat p{font-size:16.5px;color:var(--ink-2);margin-top:12px}
.feat ul{padding:0;margin:20px 0 0;list-style:none;display:flex;flex-direction:column;gap:10px}
.feat li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2)}
.feat li .ic{color:var(--blue);margin-top:2px}
.visual{border-radius:22px;background:var(--surface);border:1px solid var(--line);padding:22px;box-shadow:var(--sh-2)}
.styles-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.styles-strip canvas{width:100%;aspect-ratio:9/16;border-radius:14px;display:block;background:#111}
.conn{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.conn .card{padding:22px;display:flex;flex-direction:column;gap:10px}
.conn svg{width:34px;height:34px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{padding:26px;display:flex;flex-direction:column;gap:14px}
.plan.hl{background:var(--ink);color:#fff;border-color:var(--ink)}.plan.hl h3,.plan.hl .price{color:#fff}.plan.hl .muted{color:#B9B9C0}
.plan .price{font:800 34px var(--display);letter-spacing:-.04em}
.plan ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:14px}
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font:700 18px var(--display);letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::after{content:"+";font-weight:500;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px;color:var(--ink-2);font-size:15.5px}
.cta-band{background:var(--ink);color:#fff;border-radius:28px;padding:64px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:44px;letter-spacing:-.04em;max-width:620px}
.pub-f{border-top:1px solid var(--line);padding:46px 0 36px;margin-top:80px}
.pub-f .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
.pub-f h4{font:650 13px var(--font);color:var(--ink);margin-bottom:12px;letter-spacing:0}
.pub-f a{display:block;color:var(--muted);padding:3px 0;font-size:14px}.pub-f a:hover{color:var(--ink)}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ── auth ── */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:100vh}
.auth-form{display:flex;flex-direction:column;padding:34px 56px}
.auth-form .inner{width:100%;max-width:400px;margin:auto;display:flex;flex-direction:column;gap:18px;padding:40px 0}
.auth-form h1{font-size:38px}
.auth-form .sub{color:var(--muted);font-size:15.5px;margin-top:-8px}
.oauth{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;border:1px solid var(--line-2);border-radius:12px;font-weight:600;background:var(--surface)}
.oauth:hover{background:var(--surface-2)}
.or-line{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line)}
.pw{position:relative}.pw button{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--muted);cursor:pointer;font-size:12.5px;font-weight:600}
.strength{display:flex;gap:4px}.strength i{flex:1;height:4px;border-radius:9px;background:var(--surface-3)}
.strength i.on{background:var(--green)}
.auth-art{background:#0E0E10;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:56px;color:#fff}
.auth-art .glow{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(31,94,255,.45),transparent 65%);top:-200px;right:-200px}
.auth-art .phones{position:absolute;inset:60px 40px auto;display:flex;gap:16px;justify-content:center;transform:rotate(-6deg)}
.auth-art .phones .tall{width:170px;aspect-ratio:9/16;border-radius:18px;overflow:hidden;position:relative;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.auth-art .phones .tall:nth-child(2){margin-top:60px}
.auth-art blockquote{margin:0;position:relative;font:700 26px/1.2 var(--display);letter-spacing:-.025em;max-width:480px}
.auth-art small{position:relative;color:#A1A1A8;margin-top:12px;display:block}
.ob-steps{display:flex;gap:6px}.ob-steps i{flex:1;height:4px;border-radius:9px;background:var(--surface-3)}.ob-steps i.on{background:var(--blue)}
.pick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (max-width:980px){
  .hero{padding:48px 0 20px}.hero h1{font-size:46px}.hero p.lead{font-size:17px}
  .pub-nav{display:none}.sc-body{grid-template-columns:1fr}.sc-col{display:none}
  .flow{grid-template-columns:1fr 1fr 1fr;}.flow .wide{grid-column:1/-1}.flow .arrow{display:none}
  .section{padding:64px 0}.section .head h2{font-size:34px}
  .how,.conn,.plans{grid-template-columns:1fr}.feat,.feat.rev{grid-template-columns:1fr;gap:28px}.feat.rev .visual{order:0}
  .styles-strip{grid-template-columns:repeat(2,1fr)}
  .cta-band{padding:36px 26px}.cta-band h2{font-size:32px}
  .pub-f .cols{grid-template-columns:1fr 1fr}
  .auth{grid-template-columns:1fr}.auth-art{display:none}.auth-form{padding:22px 20px}
}

/* ── editor ── */
body.editor-page .content{display:none}
.ed{display:grid;grid-template-columns:250px minmax(0,1fr) 384px;grid-template-rows:minmax(0,1fr) auto;height:calc(100vh - 64px);min-height:620px}
.ed-list{grid-row:1;border-right:1px solid var(--line);background:var(--bg);padding:16px 14px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.ed-list h3{font-size:18px}
.mom{border-radius:14px;padding:7px;border:1px solid transparent;cursor:pointer;transition:all .15s;background:none;text-align:left;width:100%;display:block}
.mom:hover{background:var(--surface)}
.mom.on{border-color:var(--blue);background:var(--surface);box-shadow:0 0 0 1px var(--blue)}
.mom .th{display:block;position:relative;aspect-ratio:16/10;border-radius:10px;background:#222 center/cover;overflow:hidden}
.mom .th .sc{position:absolute;top:7px;right:7px;background:#fff;font:700 12px var(--font);border-radius:7px;padding:2px 7px}
.mom .th .d{position:absolute;left:8px;bottom:7px;color:#fff;font:700 12px var(--font);text-shadow:0 1px 4px rgba(0,0,0,.7)}
.mom b{display:block;margin-top:7px;font-size:13.5px;line-height:1.3}
.potcard{padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.potcard .big{font:800 32px/1 var(--display);letter-spacing:-.04em}
.potcard .big small{font-size:15px;color:var(--muted);font-weight:600}
.ed-stage{grid-row:1;display:flex;flex-direction:column;align-items:center;padding:12px 18px 10px;gap:10px;min-width:0;overflow:hidden;background:#EFEFEA;position:relative}
.ed-bar{width:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ed-bar .ttl{flex:1;min-width:120px;border:0;background:none;font:700 16px var(--display);padding:6px 8px;border-radius:8px}
.ed-bar .ttl:hover,.ed-bar .ttl:focus{background:#fff;outline:none}
.stage-wrap{flex:1;min-height:0;width:100%;display:grid;place-items:center;position:relative}
.stage{position:relative;background:#000;border-radius:12px;overflow:hidden;box-shadow:var(--sh-3);touch-action:none;user-select:none}
.stage canvas{display:block}
.stage .safe{position:absolute;inset:0;pointer-events:none}
.stage .safe i{position:absolute;background:rgba(217,45,32,.13);border:1px dashed rgba(217,45,32,.6)}
.stage .guide{position:absolute;background:#FF2BD6;pointer-events:none;z-index:5}
.stage .guide.v{width:1px;top:0;bottom:0}.stage .guide.h{height:1px;left:0;right:0}
.stage .hbox{position:absolute;border:1.5px solid var(--blue);border-radius:6px;cursor:move;z-index:4}
.stage .hbox.cap{border-style:solid}
.stage .hbox.hover{border-style:dashed;border-color:rgba(255,255,255,.8)}
.stage .hbox .rs{position:absolute;width:12px;height:12px;background:#fff;border:1.5px solid var(--blue);border-radius:3px;right:-7px;bottom:-7px;cursor:nwse-resize}
.stage .hbox .tag{position:absolute;left:-1px;top:-24px;background:var(--blue);color:#fff;font:600 11px var(--font);padding:2px 7px;border-radius:6px;white-space:nowrap}
.stage .mbox{position:absolute;border:1.5px dashed #FFD332;background:rgba(255,211,50,.08);cursor:move;z-index:4}
.stage .mbox.sel{border-style:solid}
.stage .mbox .rs{position:absolute;width:12px;height:12px;background:#FFD332;right:-7px;bottom:-7px;cursor:nwse-resize;border-radius:3px}
.stage .inline-edit{position:absolute;z-index:8;background:rgba(10,10,11,.86);color:#fff;border:2px solid var(--blue);border-radius:10px;padding:8px 10px;font:600 15px var(--font);min-width:180px;outline:none;white-space:pre-wrap}
.stage .badge-l{position:absolute;left:10px;top:10px;z-index:6;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.transport{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.transport .play{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;border:0;display:grid;place-items:center;cursor:pointer}
.ed-panel{grid-row:1/3;grid-column:3;border-left:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-height:0}
.ed-panel .tabs{padding:0 10px;flex:none;gap:0}
.ed-panel .tabs button{padding:12px 9px;font-size:13px}
.ed-panel .body{flex:1;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.ed-panel .foot{flex:none;padding:10px 14px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sec{display:flex;flex-direction:column;gap:10px}
.sec>h4{font:700 12px var(--font);text-transform:uppercase;letter-spacing:.07em;color:var(--faint);margin-top:4px}
details.adv{border-top:1px solid var(--line);padding-top:10px}
details.adv summary{cursor:pointer;font-weight:650;font-size:13px;color:var(--ink-2);list-style:none}
details.adv summary::before{content:"▸ ";color:var(--faint)}details.adv[open] summary::before{content:"▾ "}
details.adv>div{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.prow{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;align-items:center;font-size:13px;color:var(--ink-2)}
.prow .rr{display:flex;gap:8px;align-items:center;min-width:0}
.prow output,.prow .num{min-width:46px;width:56px;text-align:right;font-weight:650;font-size:12.5px;color:var(--muted);border:1px solid transparent;border-radius:6px;padding:2px 4px;background:none}
.prow .num:focus{border-color:var(--line-2);outline:none;background:#fff}
.swatches{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.swatches button{width:26px;height:26px;border-radius:7px;border:1px solid var(--line-2);cursor:pointer;padding:0}
.swatches button.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blue)}
.layout-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lg{border:1px solid var(--line-2);border-radius:12px;padding:6px;cursor:pointer;background:var(--surface);text-align:center;transition:all .15s}
.lg canvas{width:100%;border-radius:7px;display:block;background:#111}
.lg b{display:block;font-size:12px;margin-top:5px}
.lg.on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue);background:var(--blue-50)}
.stgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stc{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);cursor:pointer;transition:box-shadow .2s}
.stc:hover{box-shadow:var(--sh-2)}
.stc.on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.stc .cv{position:relative;aspect-ratio:9/16;background:#111}
.stc canvas{width:100%;height:100%;display:block}
.stc .pp{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;border:0;background:#fff;cursor:pointer;font-size:11px}
.stc.playing .pp{background:var(--blue);color:#fff}
.stc .fav{position:absolute;right:8px;top:8px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.35);color:#fff;cursor:pointer}
.stc .fav.on{background:#fff;color:#E11D48}
.stc .meta{padding:9px 10px 11px;display:flex;flex-direction:column;gap:2px}
.stc .meta b{font-size:13.5px}.stc .meta small{color:var(--muted);font-size:11.5px;line-height:1.35}
.stc .meta .badge{height:18px;font-size:10.5px;margin-left:6px;vertical-align:1px}
.wlist{display:flex;flex-direction:column;gap:2px;max-height:360px;overflow:auto}
.gline{border-radius:10px;padding:8px 10px;cursor:pointer;border:1px solid transparent}
.gline:hover{background:var(--surface-2)}
.gline.cur{background:var(--blue-50);border-color:var(--blue-100)}
.gline .tm{font:600 11.5px ui-monospace,Menlo,monospace;color:var(--muted);margin-right:8px}
.gline .wd{border-radius:5px;padding:1px 3px;cursor:text;outline:none}
.gline .wd:hover{background:#fff;box-shadow:0 0 0 1px var(--line-2)}
.gline .wd:focus{background:#fff;box-shadow:0 0 0 2px var(--blue-100)}
.gline .wd.kw{color:var(--blue-700);font-weight:700}
.gline .wd.cen{text-decoration:line-through;color:var(--red)}
.gline .wd.sel{background:var(--blue-100)}
.ed-tl{grid-row:2;grid-column:1/3;border-top:1px solid var(--line);background:var(--surface);user-select:none;display:flex;flex-direction:column;min-width:0}
.tl-tools{display:flex;align-items:center;gap:6px;padding:8px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tl-tools .sep{height:22px}
.tl-body{display:grid;grid-template-columns:104px minmax(0,1fr);max-height:236px;overflow-y:auto}
.tl-heads{display:flex;flex-direction:column}
.tl-head{height:38px;display:flex;align-items:center;gap:4px;padding:0 6px 0 12px;font-size:12px;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--surface-2)}
.tl-head span{flex:1}
.tl-head button{border:0;background:none;color:var(--faint);cursor:pointer;padding:2px;border-radius:5px;font-size:12px}
.tl-head button.on{color:var(--red)}
.tl-head.ruler{height:24px}
.tl-scroll{overflow-x:auto;overflow-y:hidden;position:relative}
.tl-inner{position:relative}
.tl-ruler{position:relative;height:24px;border-bottom:1px solid var(--line);cursor:pointer}
.tl-ruler span{position:absolute;top:5px;font:600 10.5px var(--font);color:var(--faint);transform:translateX(-50%)}
.tl-ruler i{position:absolute;bottom:0;width:1px;height:6px;background:var(--line-2)}
.tl-lane{position:relative;height:38px;border-bottom:1px solid var(--surface-2)}
.tl-lane.dim{opacity:.4}
.blk{position:absolute;top:4px;bottom:4px;border-radius:7px;font-size:11.5px;font-weight:600;color:#fff;padding:0 8px;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:grab;border:1.5px solid transparent}
.blk.sel{border-color:var(--ink);box-shadow:0 0 0 2px #fff inset}
.blk.vid{background:#2B2B30 repeat-x;background-size:auto 100%;color:#fff;text-shadow:0 1px 3px #000}
.blk.cap{background:var(--blue)}
.blk.cap.cur{background:var(--blue-700)}
.blk.txt{background:#7C3AED}.blk.img{background:#0E9F6E}.blk.shp{background:#C2410C}
.blk.msk{background:repeating-linear-gradient(45deg,#B45309 0 6px,#92400E 6px 12px)}
.blk.msk.review{outline:2px dashed #F59E0B;outline-offset:1px}
.blk .eh{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize}
.blk .eh.l{left:0}.blk .eh.r{right:0}
.blk .spd{background:rgba(0,0,0,.45);border-radius:4px;padding:0 4px;margin-left:6px;font-size:10px}
.tl-lane canvas{position:absolute;inset:3px 0;height:32px;width:100%}
.tl-mute{position:absolute;top:3px;bottom:3px;background:rgba(217,45,32,.25);border-left:2px solid var(--red);border-right:2px solid var(--red)}
.tl-ph{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);z-index:6;pointer-events:none}
.tl-ph::before{content:"";position:absolute;top:0;left:-5px;width:12px;height:12px;border-radius:50%;background:var(--ink)}
.tl-mk{position:absolute;top:0;bottom:0;width:2px;background:#F59E0B;z-index:5;cursor:pointer}
.tl-mk::after{content:attr(data-l);position:absolute;top:2px;left:4px;font:700 10px var(--font);color:#B45309;white-space:nowrap}
.autosave{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12.5px;white-space:nowrap}
.autosave .d{width:7px;height:7px;border-radius:50%;background:var(--green)}
.autosave.dirty .d{background:var(--amber)}
.autosave.err .d{background:var(--red)}
.ai-box{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;background:linear-gradient(180deg,#F5F8FF,#fff);border:1px solid var(--blue-100)}
.op{display:flex;gap:8px;align-items:flex-start;font-size:13px;padding:6px 0;border-bottom:1px solid var(--surface-2)}
.kbd-list{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
@media (max-width:1250px){.ed{grid-template-columns:210px minmax(0,1fr) 340px}}
@media (max-width:980px){
  .ed{display:flex;flex-direction:column;height:auto}
  .ed-list{order:3;flex-direction:row;overflow-x:auto;border:0;padding:10px 12px}.ed-list .mom{width:150px;flex:none}.ed-list .potcard,.ed-list h3{display:none}
  .ed-stage{order:1;min-height:auto}.stage-wrap{min-height:60vh}
  .ed-tl{order:2}.tl-body{grid-template-columns:44px minmax(0,1fr)}.tl-head span{display:none}
  .ed-panel{order:4;border-left:0;border-top:1px solid var(--line)}
}

.stc .meta .btn{height:28px;font-size:11.5px;padding:0 9px}
.stc .meta .row{flex-wrap:wrap}
.tl-head{height:34px}.tl-lane{height:34px}.blk{top:3px;bottom:3px}

/* objave */
.acc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card.acc{padding:18px;display:flex;flex-direction:column;gap:12px}
.card.acc .ph{display:flex;gap:12px;align-items:center}.card.acc .pi svg{width:30px;height:30px}
.card.acc h3{margin:0;font-size:16px}
.acc-item{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.acc-item .avatar{width:34px;height:34px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;overflow:hidden;flex:none;font-weight:700}
.acc-item .avatar img{width:100%;height:100%;object-fit:cover}
.acc-item .t{flex:1;min-width:0;display:flex;flex-direction:column}.acc-item .t small{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.post-prev{position:relative;aspect-ratio:9/16;background:#000;border-radius:16px;overflow:hidden}
.post-prev video{width:100%;height:100%;object-fit:contain}
.post-prev .ov{position:absolute;left:10px;right:10px;bottom:12px;color:#fff;font-size:12px;text-shadow:0 1px 3px #000;pointer-events:none}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.cal .dh{padding:8px 10px;font-size:11.5px;color:var(--faint);text-transform:uppercase;border-bottom:1px solid var(--line)}
.cal .dc{min-height:104px;padding:6px;border-right:1px solid var(--surface-2);border-bottom:1px solid var(--surface-2);display:flex;flex-direction:column;gap:3px;min-width:0}
.cal .dc.other{background:#FAFAF8;color:var(--faint)}.cal .dc.today .n{background:var(--blue);color:#fff;border-radius:99px;padding:0 6px}
.cal .n{font-size:12px;font-weight:650;align-self:flex-start}
.cal .ev{font-size:11px;padding:2px 6px;border-radius:6px;background:var(--surface-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cal .ev.published{background:#E5F5EC}.cal .ev.failed{background:#FDE8E8}.cal .ev.scheduled{background:#E6EDFF}.cal .ev.review{background:#FFF4D6}
@media (max-width:720px){.cal .dc{min-height:64px}.cal .ev{font-size:0;padding:4px}.cal .ev::before{content:"•";font-size:12px}}

/* „Kamera + sadržaj” */
.stage-wrap.camsrc{display:flex;align-items:center;justify-content:center;gap:16px;padding:0 8px}
.cam-src{display:none}
.stage-wrap.camsrc .cam-src{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;height:100%;justify-content:center}
.cam-src .cs-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cam-src .cs-head .sp{flex:1}
.cam-src .btn.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.cs-box{position:relative;align-self:center;background:#000;border-radius:10px;overflow:hidden;touch-action:none;user-select:none}
.cs-box canvas{display:block}
.cs-r{position:absolute;border:2px solid #1F5EFF;cursor:move;box-sizing:border-box}
.cs-r.con{border-color:#FF8A00;border-style:dashed}.cs-r.cam{background:rgba(31,94,255,.08)}
.cs-r.sugg{border:2px dashed #2EE57A;background:rgba(46,229,122,.12);pointer-events:none}
.cs-r .tag{position:absolute;left:-2px;top:-22px;background:#1F5EFF;color:#fff;font-size:11px;padding:2px 6px;border-radius:5px;white-space:nowrap;pointer-events:none}
.cs-r.con .tag{background:#FF8A00;top:auto;bottom:-22px}.cs-r.sugg .tag{background:#13A15A}
.cs-r i{position:absolute;width:12px;height:12px;background:#fff;border:2px solid #1F5EFF;border-radius:3px;box-sizing:border-box}
.cs-r.con i{border-color:#FF8A00}
.cs-r i.nw{left:-7px;top:-7px;cursor:nwse-resize}.cs-r i.n{left:calc(50% - 6px);top:-7px;cursor:ns-resize}.cs-r i.ne{right:-7px;top:-7px;cursor:nesw-resize}
.cs-r i.e{right:-7px;top:calc(50% - 6px);cursor:ew-resize}.cs-r i.se{right:-7px;bottom:-7px;cursor:nwse-resize}.cs-r i.s{left:calc(50% - 6px);bottom:-7px;cursor:ns-resize}
.cs-r i.sw{left:-7px;bottom:-7px;cursor:nesw-resize}.cs-r i.w{left:-7px;top:calc(50% - 6px);cursor:ew-resize}
.cs-foot{min-height:30px}
.stage .cpan{position:absolute;border:1.5px dashed rgba(255,255,255,.55);cursor:grab;z-index:3}
.stage .cpan:hover{border-color:#fff}
.stage .cpan .tag{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.6);color:#fff;font-size:10.5px;padding:2px 6px;border-radius:5px;opacity:0;transition:opacity .15s;pointer-events:none}
.stage .cpan:hover .tag{opacity:1}
.stage .cpan .rs{position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;background:#fff;border:2px solid var(--blue);border-radius:4px;cursor:nwse-resize}
.stage .cdiv{position:absolute;left:0;right:0;height:14px;cursor:ns-resize;z-index:4;display:flex;justify-content:center;align-items:center}
.stage .cdiv::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--blue);opacity:.8}
.stage .cdiv button{position:relative;width:26px;height:26px;border-radius:50%;border:2px solid var(--blue);background:#fff;color:var(--blue);font-weight:800;cursor:pointer;line-height:1}
.cam-card{border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.ratio-chips{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:900px){.stage-wrap.camsrc{flex-direction:column}.stage-wrap.camsrc .cam-src{height:auto;width:100%}}

/* ═════════════ v3 redizajn: zajedničke komponente ═════════════ */
.btn{height:38px;border-radius:var(--r-sm);font-weight:600;font-size:13.5px;border-color:var(--line-2);box-shadow:none}
.btn:hover{background:var(--surface-2)}
.btn.dark,.btn.blue,.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:none}
.btn.dark:hover,.btn.blue:hover,.btn.primary:hover{background:var(--blue-600);border-color:var(--blue-600)}
.btn.sm{height:32px;border-radius:7px}.btn.lg{height:44px;border-radius:10px;font-size:14.5px}
.btn.icon{width:38px}.btn.icon.sm{width:32px}
.btn.danger{color:var(--red);border-color:#F1C4C4;background:var(--surface)}
.input,select.input,textarea.input{height:40px;border-radius:var(--r-sm);border-color:var(--line-2)}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100)}
.input.sm{height:32px;border-radius:7px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.card{border-radius:var(--r);border-color:var(--line);box-shadow:none}
.card.pad{padding:var(--s3)}
.chip{padding:6px 12px;font-size:13px;border-color:var(--line-2)}
.seg{border-radius:10px;background:var(--surface);border:1px solid var(--line);padding:3px}
.seg button{padding:6px 12px;border-radius:7px;display:inline-flex;align-items:center;gap:6px;min-height:30px}
.seg button.on{background:var(--blue);color:#fff;box-shadow:none}
.seg button .n{font-size:11.5px;font-weight:700;background:var(--surface-2);color:var(--muted);border-radius:99px;padding:0 7px;line-height:18px}
.seg button.on .n{background:rgba(255,255,255,.22);color:#fff}
.tabs{gap:2px}.tabs button,.tabs a{padding:10px 12px;font-size:13.5px}
.tabs .on{color:var(--blue);border-bottom-color:var(--blue)}
.badge{height:24px;border-radius:99px;font-weight:600;font-size:12px}
/* statusne oznake: tekst + ikona/tačka, nikad samo boja */
.st{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:99px;font-size:12.5px;font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--ink-2)}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.st.ok{background:var(--green-50);color:var(--green)}
.st.warn{background:var(--amber-50);color:var(--amber)}
.st.err{background:var(--red-50);color:var(--red)}.st.err::before{content:"!";width:auto;height:auto;background:none;font-weight:800}
.st.live{background:var(--blue-50);color:var(--blue-700)}
.st.live::before{width:10px;height:10px;background:none;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
.st.violet{background:var(--violet-50);color:var(--violet)}
.st.muted{background:var(--surface-2);color:var(--muted)}
.st.plain::before{display:none}
.notice{border-radius:10px}
.empty{border-radius:var(--r);border:1px dashed var(--line-2);padding:40px 24px;gap:10px}
.empty h3{font-size:16px}
.empty .big{width:48px;height:48px;border-radius:12px}

/* shell */
.shell{grid-template-columns:var(--side) minmax(0,1fr)}
.side{padding:20px 12px 14px;gap:4px;border-right-color:var(--line)}
.side .logo{padding:0 10px 18px;font:800 22px/1 var(--display);letter-spacing:-.03em}
.side .logo svg{width:26px;height:26px}
.nav{gap:2px}
.nav a{padding:9px 12px;border-radius:9px;font-weight:550;font-size:14px;gap:12px;min-height:40px}
.nav a.on{background:var(--blue-50);color:var(--blue);font-weight:650}
.side-foot{gap:10px}
.side-foot .nav{margin-bottom:2px}
.usage-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--muted)}
.usage-card b{color:var(--ink);font-weight:700}
.usage-card .bar{height:5px}.usage-card .bar>i{background:var(--blue)}
.me{border:1px solid var(--line);border-radius:10px;padding:8px 10px;border-top:1px solid var(--line);cursor:pointer;background:var(--surface)}
.me:hover{background:var(--surface-2)}
.me .avatar{width:34px;height:34px;background:var(--blue);font-size:14px}
.me .who b{font-size:13.5px;font-weight:600}.me .who small{font-size:12px}
.topbar{padding:10px var(--s4);min-height:60px;background:rgba(247,248,250,.9);border-bottom-color:var(--line)}
.crumbs{font-size:13.5px}
.gsearch{border-radius:10px;height:38px;width:300px}
.content{padding:var(--s3) var(--s4) 56px;gap:var(--s3);max-width:1440px}
.page-h{align-items:flex-end;gap:var(--s2)}
.page-h h1{font-size:30px}
.page-h p{font-size:15px;color:var(--muted);margin-top:4px}
.sec-h h2{font-size:18px}
.subnav{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-top:-8px;overflow-x:auto;scrollbar-width:none}
.subnav a{padding:10px 12px;font-weight:600;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.subnav a:hover{color:var(--ink)}
.subnav a.on{color:var(--blue);border-bottom-color:var(--blue)}
.toolbar{gap:var(--s1)}
.toolbar .sp{flex:1}
.search{height:40px;border-radius:var(--r-sm);border-color:var(--line-2);min-width:240px;flex:1;max-width:460px}
.search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100)}

/* paginacija */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:4px}
.pager .info{font-size:13px;color:var(--muted)}
.pager .pg{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pager .pg button{min-width:34px;height:34px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);font-weight:600;font-size:13px;cursor:pointer;color:var(--ink-2)}
.pager .pg button:hover:not(:disabled){background:var(--surface-2)}
.pager .pg button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.pager .pg button:disabled{opacity:.45;cursor:default}
.pager .pg .gap{padding:0 4px;color:var(--faint)}
.pager .size{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.pager .size select{width:auto}

/* kartica statistike */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.kpi{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);transition:box-shadow .15s}
.kpi:hover{box-shadow:var(--sh-2)}
.kpi .ki{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--blue-50);color:var(--blue);flex:none}
.kpi .ki.green{background:var(--green-50);color:var(--green)}
.kpi b{display:block;font-size:20px;font-weight:700;line-height:1.1}
.kpi span{color:var(--muted);font-size:13.5px}
.kpi .go{margin-left:auto;color:var(--faint)}

/* unos videa (Pregled) */
.create{padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.create-row{display:flex;gap:12px;align-items:center}
.create-row .urlin{flex:1;display:flex;align-items:center;gap:10px;height:48px;border:1px solid var(--line-2);border-radius:10px;padding:0 14px;background:var(--surface);color:var(--faint);min-width:0}
.create-row .urlin:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-100)}
.create-row .urlin input{flex:1;border:0;outline:none;background:none;font-size:15px;color:var(--ink);min-width:0}
.create-row .btn{height:48px;padding:0 20px;font-size:14.5px}
.create-row .or{font-size:12.5px;color:var(--faint);padding:0 4px;letter-spacing:0;font-weight:500;text-transform:none}
.create .hint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.create .hint .pl svg{width:18px;height:18px}
.create.over{border-color:var(--blue);background:var(--blue-50)}

/* projekti: horizontalne kartice (Nastavi raditi) */
.hcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.hcard{position:relative;display:flex;gap:16px;padding:8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);align-items:center;transition:box-shadow .15s;min-width:0}
.hcard:hover{box-shadow:var(--sh-2)}
.hcard .th{width:200px;aspect-ratio:16/9;border-radius:8px;background:#1b1f27 center/cover;flex:none;position:relative}
.hcard .th .dur,.vcard .dur,.pcard .dur{position:absolute;right:8px;bottom:8px;background:rgba(15,23,42,.78);color:#fff;font:600 11.5px var(--font);padding:2px 7px;border-radius:6px}
.hcard .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding-right:36px}
.hcard .info b{font-size:15px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hcard .info small{color:var(--muted);font-size:13px}
.kebab{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:8px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.kebab:hover{background:var(--surface-2);color:var(--ink)}

/* grid kartice projekata */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s2)}
.pcard{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:box-shadow .15s}
.pcard:hover{box-shadow:var(--sh-2)}
.pcard .th{aspect-ratio:16/9;background:#1b1f27 center/cover;position:relative;display:block}
.pcard .bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px}
.pcard .nm{font-weight:650;font-size:14.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;padding-right:28px}
.pcard .meta{font-size:12.5px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap}
.pcard .kebab{top:auto;bottom:10px;right:8px}
.pcard .kebab.top{top:8px;bottom:auto;background:rgba(255,255,255,.92)}

/* vertikalne kartice klipova */
.vgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.vcard{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;transition:box-shadow .15s}
.vcard:hover{box-shadow:var(--sh-2)}
.vcard .media{position:relative;display:block;aspect-ratio:9/16;background:#141821 center/cover no-repeat}
.vcard .media.wide{aspect-ratio:16/10}
.vcard .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcard .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s}
.vcard .media video.on{opacity:1}
.vcard .dur{top:10px;bottom:auto;right:10px}
.vcard .media .state{position:absolute;inset:0;display:grid;place-items:center;background:rgba(15,23,42,.55);color:#fff;font-weight:600;font-size:13px;text-align:center;padding:12px}
.vcard .bd{padding:12px 14px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.vcard .tt{font-weight:650;font-size:14.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.vcard .pj{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcard .pj b{font-weight:600;color:var(--ink-2)}
.vcard .ft{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;flex-wrap:wrap}
.vcard .ft .acts{margin-left:auto;display:flex;gap:2px}
.vcard .ft .acts .btn{width:32px;height:32px;padding:0;border-color:transparent;background:transparent}
.vcard .ft .acts .btn:hover{background:var(--surface-2)}
.menu.fixed{position:fixed;right:auto;top:auto}
.menu button,.menu a{font-size:13.5px;min-height:36px}

/* stilovi (biblioteka) */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s2)}
.scard{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;cursor:pointer;text-align:left;padding:0;transition:box-shadow .15s,border-color .15s}
.scard:hover{box-shadow:var(--sh-2)}
.scard.on{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.scard .cv{display:block;aspect-ratio:9/16;background:#141821;position:relative}
.scard canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scard .nm{padding:8px 10px 10px;display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px}
.scard .nm span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scard .fav{position:absolute;right:6px;top:6px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(15,23,42,.45);color:#fff;cursor:pointer;display:grid;place-items:center}
.scard .fav.on{background:#fff;color:#E11D48}

/* brend */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s2)}
.bcard{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;display:flex;flex-direction:column;position:relative;cursor:pointer;text-align:left;padding:0}
.bcard:hover{box-shadow:var(--sh-2)}
.bcard .cv{aspect-ratio:16/10;background:#141821;position:relative}
.bcard canvas{position:absolute;inset:0;width:100%;height:100%}
.bcard .bd{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px}
.bcard .bd b{font-size:14px}.bcard .bd small{color:var(--muted)}
.brand-ed{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s3);align-items:start}
.brand-ed .pv{position:sticky;top:84px;display:flex;flex-direction:column;gap:10px}
.brand-ed .pv canvas{width:100%;aspect-ratio:9/16;border-radius:var(--r);background:#141821;display:block}
.fgroup{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.fgroup h3{font-size:14.5px;font-weight:650}
.frow{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;align-items:center;font-size:13.5px;color:var(--ink-2)}
.frow .rr{display:flex;gap:8px;align-items:center;min-width:0}

/* tabele */
.list-table{border-radius:var(--r)}
.list-table th{font-size:11.5px;color:var(--muted);font-weight:600;background:#FAFBFC}
.list-table tr.click:hover td{background:#F8FAFC}
.kv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}

/* skeleton */
.skel-card{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.skel-card .s1{aspect-ratio:9/16}.skel-card .s1.w{aspect-ratio:16/9}
.skel-card .s2{height:14px;margin:12px 14px 6px;width:70%}.skel-card .s3{height:12px;margin:0 14px 14px;width:40%}
.skel-card .skel{border-radius:6px}.skel-card .s1.skel{border-radius:0}

@media (max-width:1200px){.vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.kv-grid{grid-template-columns:1fr 1fr}}
@media (max-width:980px){
  .content{padding:var(--s2) var(--s2) 48px}
  .topbar{padding:8px var(--s2)}
  .hcards{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .vgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .create-row{flex-wrap:wrap}.create-row .urlin{flex-basis:100%}.create-row .btn{flex:1}.create-row .or{display:none}
  .brand-ed{grid-template-columns:1fr}.brand-ed .pv{position:static;max-width:280px}
  .page-h h1{font-size:26px}
  .search{max-width:none;min-width:0;flex-basis:100%}
  .kv-grid{grid-template-columns:1fr}
  .frow{grid-template-columns:110px minmax(0,1fr)}
}
@media (max-width:560px){.hcard .th{width:120px}.vgrid{gap:10px}.vcard .bd{padding:10px}.vcard .tt{font-size:13.5px}.pager{justify-content:center}.pager .info{width:100%;text-align:center}}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--blue);color:#fff;padding:8px 12px;border-radius:8px}
.skip:focus{left:8px}
.me{display:flex;align-items:center;gap:10px;font:inherit;color:inherit}
.me>.ic{color:var(--faint)}
.usage-card:hover{border-color:var(--line-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kpi b{color:var(--ink)}
.hcard .info>a{min-width:0;display:block}
.hcard .info b{display:block}

/* ═════════════ v3 editor ═════════════ */
body.editor-page .side,body.editor-page .topbar,body.editor-page .scrim{display:none}
body.editor-page .shell{grid-template-columns:minmax(0,1fr)}
body.editor-page{background:var(--bg)}
.ed{display:grid;grid-template-columns:260px minmax(0,1fr) 380px;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:12px;height:100vh;min-height:640px}
.ed-top{grid-column:1/-1;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;min-height:56px;min-width:0}
.ed-top .sp{flex:1}
.ed-name{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}
.ed-name .pn{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.ed-name .ttl{border:1px solid transparent;background:none;font:500 13.5px var(--font);color:var(--muted);padding:5px 8px;border-radius:7px;min-width:80px;width:260px;max-width:30vw}
.ed-name .ttl:hover{border-color:var(--line)}.ed-name .ttl:focus{border-color:var(--blue);outline:none;color:var(--ink);background:#fff}
.ed-list{grid-row:2;grid-column:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 12px;overflow:auto;display:flex;flex-direction:column;gap:10px;min-height:0}
.ed-list h3{font-size:16px;font-weight:700}
.mlist{display:flex;flex-direction:column;gap:4px}
.mrow{display:flex;align-items:center;gap:10px;padding:6px;border-radius:10px;border:1px solid transparent;min-width:0}
.mrow:hover{background:var(--surface-2)}
.mrow.on{background:var(--blue-50);border-color:var(--blue-100)}
.mrow img{width:72px;aspect-ratio:16/10;object-fit:cover;border-radius:7px;background:#1b1f27;flex:none}
.mrow .t{min-width:0;display:flex;flex-direction:column;gap:2px}
.mrow b{font-size:13.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mrow small{color:var(--muted);font-size:12px}
.potcard{border-radius:10px}
.ed-stage{grid-row:2;grid-column:2;background:#EEF1F5;border:1px solid var(--line);border-radius:var(--r);padding:10px 14px 12px;gap:10px}
.ed-bar{justify-content:center}
.ed-bar select.input{background-color:#fff;font-weight:600}
.stage{box-shadow:var(--sh-2);border-radius:10px}
.transport{width:100%;max-width:640px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 10px;flex-wrap:nowrap;gap:8px}
.transport .play{width:38px;height:38px;background:var(--blue)}
.transport #scrub{flex:1;min-width:60px}
.transport .vol input{width:80px}
.transport .mono{white-space:nowrap}
.ed-panel{grid-row:2;grid-column:3;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ed-panel .tabs{padding:0 8px;border-bottom:1px solid var(--line)}
.ed-panel .tabs button{padding:12px 10px;font-size:13.5px}
.ed-panel .tabs [data-more]{margin-left:auto}
.ed-panel .body{padding:14px 16px}
.ed-tl{grid-row:3;grid-column:1/-1;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative}
.tl-grip{position:absolute;left:0;right:0;top:0;height:7px;cursor:ns-resize;z-index:3}
.tl-grip::after{content:"";position:absolute;left:50%;top:2px;width:40px;height:3px;border-radius:3px;background:var(--line-2);transform:translateX(-50%)}
.tl-grip:hover::after,.tl-grip:focus::after{background:var(--blue)}
.tl-tools{padding:8px 12px;gap:4px}
.tl-body{max-height:200px;height:auto}
.tl-ph,.tl-ph::before{background:var(--blue)}
.blk.cap{background:var(--blue)}
.autosave{font-size:12.5px}
.ed-mob{display:none}
body.ed-preview #handles,body.ed-preview .stage .safe,body.ed-preview #stageBadges{display:none}
@media (max-width:1280px){.ed{grid-template-columns:220px minmax(0,1fr) 340px}.ed-name .ttl{width:180px}}
@media (max-width:1100px){
  .ed{display:grid;height:100vh;grid-template-columns:minmax(0,1fr) 340px}
  .ed-list,.ed-stage,.ed-panel,.ed-tl{order:0}
  .ed-list{display:none}.ed-stage{grid-column:1}.ed-panel{grid-column:2}
  body.mob-list .ed-list{display:flex;position:fixed;left:12px;top:80px;bottom:80px;width:280px;z-index:40;box-shadow:var(--sh-3)}
  .ed-mob{display:flex;grid-column:1/-1;gap:8px;justify-content:center}
  .ed-mob [data-mob=panel],.ed-mob [data-mob=tl]{display:none}
}
@media (max-width:820px){
  .ed{display:flex;flex-direction:column;height:auto;min-height:100vh;padding:8px;gap:8px}
  .ed-top{flex-wrap:wrap;position:sticky;top:0;z-index:30}.ed-name{order:5;flex-basis:100%}.ed-name .pn{max-width:40vw}.ed-name .ttl{flex:1;max-width:none}
  .hide-sm{display:none!important}
  .ed-stage{min-height:62vh}.stage-wrap{min-height:52vh}
  .ed-mob{display:flex;position:sticky;bottom:8px;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--sh-2)}
  .ed-mob [data-mob]{display:inline-flex!important;flex:1}
  .ed-panel,.ed-tl{display:none}
  body.mob-panel .ed-panel,body.mob-tl .ed-tl,body.mob-list .ed-list{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:62vh;z-index:45;border-radius:16px 16px 0 0;box-shadow:var(--sh-3)}
  body.mob-tl .ed-tl{height:auto;max-height:55vh}
  body.mob-panel .ed-mob,body.mob-tl .ed-mob,body.mob-list .ed-mob{position:fixed;left:8px;right:8px;bottom:calc(62vh + 6px);z-index:46}
  body.mob-tl .ed-mob{bottom:auto;top:auto}
  .transport{flex-wrap:wrap;justify-content:center}.transport #scrub{flex-basis:100%;order:9}
}
.stc.compact .meta{padding:6px 8px 8px;text-align:center}
.stc.compact .meta b{font-size:12.5px}
.stc.compact .cv{aspect-ratio:auto}
.stc.compact canvas{height:auto;aspect-ratio:1/.62}
.stc.compact .pp{width:26px;height:26px;right:6px;bottom:6px}
.stc.compact .fav{width:24px;height:24px;font-size:11px;right:6px;top:6px}
.stc.compact.on{box-shadow:0 0 0 2px var(--blue)}
.stc.compact .meta .badge:not(.warn){display:none}.stc.compact .meta .badge{margin:2px auto 0}
@media (max-width:980px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{width:260px}
}
@media (max-width:560px){
  .hcard{flex-direction:column;align-items:stretch}
  .hcard .th{width:100%}
  .hcard .info{padding:4px 6px 6px}
  .vcard .ft .st{font-size:11.5px;padding:0 8px;height:24px}
  .create-row .btn{flex-basis:100%}
}
@media (max-width:560px){
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .kpi{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px}
  .kpi .ki,.kpi .go{display:none}
  .kpi b{font-size:18px}.kpi span{font-size:12px;line-height:1.3}
}
.anim-box{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;background:#FAFBFC}

/* ═════════════ Generator ═════════════ */
.gen-head{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap}
.gen-head>div:first-child{flex:1;min-width:260px}
.gen-head h1{font-size:30px}.gen-head p{color:var(--muted);font-size:15px;margin-top:4px}
.gsteps{display:flex;align-items:center;gap:0;list-style:none;margin:6px 0 0;padding:0}
.gsteps li{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--muted);font-weight:500;min-width:84px}
.gsteps li i{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12px;background:var(--surface)}
.gsteps li.on{color:var(--ink);font-weight:650}.gsteps li.on i{border-color:var(--blue);color:var(--blue)}
.gsteps li.done i{background:var(--blue);border-color:var(--blue);color:#fff;font-size:0}
.gsteps li.done i::after{content:"✓";font-size:13px}
.gsteps li.ln{min-width:44px;height:2px;background:var(--line-2);margin-bottom:22px;flex:none}
.gdrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;min-height:300px;border:2px dashed var(--line-2);border-radius:16px;background:var(--surface);cursor:pointer;padding:32px;transition:border-color .15s,background .15s}
.gdrop:hover,.gdrop.over,.gdrop:focus-visible{border-color:var(--blue);background:var(--blue-50)}
.gdrop b{font-size:20px}
.gdrop-ic{width:64px;height:64px;border-radius:16px;background:var(--blue-50);color:var(--blue);display:grid;place-items:center}
.gdrop-ic .ic{width:28px;height:28px}
.gen-cust{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.gen-pv{position:sticky;top:80px;display:flex;flex-direction:column;gap:12px}
.gen-pv .phone{border-radius:20px;max-width:300px;width:100%;margin:0 auto}
.up-status{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);display:flex;flex-direction:column;gap:6px}
.up-status.err{border-color:#F1C4C4;background:var(--red-50)}
.src-card{display:flex;align-items:center;gap:16px;padding:10px 14px 10px 10px;min-width:0}
.src-card .sp{flex:1}
.sthumb{width:150px;aspect-ratio:16/9;border-radius:8px;background:#1b1f27 center/cover;position:relative;flex:none}
.sthumb .dur{position:absolute;right:6px;bottom:6px;background:rgba(15,23,42,.78);color:#fff;font:600 11.5px var(--font);padding:2px 6px;border-radius:5px}
.sinfo{display:flex;flex-direction:column;gap:4px;min-width:0}
.sinfo b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sinfo small{color:var(--muted);font-size:13px}
.pick-styles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pstyle{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:0;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;text-align:center;transition:box-shadow .15s,border-color .15s}
.pstyle canvas{width:100%;display:block;background:#141821;aspect-ratio:1/.62}
.pstyle span{padding:6px 4px 8px;font-weight:600;font-size:12.5px}
.pstyle:hover{box-shadow:var(--sh-2)}
.pstyle.on{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue)}
.pick-layouts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.playout{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:10px 12px;cursor:pointer;transition:box-shadow .15s,border-color .15s}
.playout:hover{box-shadow:var(--sh-2)}
.playout:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.playout.on{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue);background:var(--blue-50)}
.playout svg{width:34px;height:54px;flex:none}
.playout svg .a{fill:#C7D2E3}.playout svg .b{fill:#8EA2C2}.playout svg .c{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round}
.playout.on svg .a{fill:#A9C1FF}.playout.on svg .b{fill:var(--blue)}
.playout span{display:flex;flex-direction:column;gap:2px;min-width:0}
.playout b{font-size:14px}.playout em{font-style:normal;font-size:11px;font-weight:700;color:var(--green);background:var(--green-50);border-radius:99px;padding:1px 7px;margin-left:4px}
.playout small{color:var(--muted);font-size:12.5px;line-height:1.35}
.adv-g summary{cursor:pointer;list-style:none}.adv-g summary::-webkit-details-marker{display:none}
.adv-g[open]{gap:10px}
.ptrack{list-style:none;padding:0;margin:0;display:flex;gap:18px;flex-wrap:wrap;color:var(--muted)}
.ptrack li.done{color:var(--green)}.ptrack li.on{color:var(--ink);font-weight:600}
.gcard .media{cursor:default}
.gcard .pick{position:absolute;left:10px;top:10px;z-index:3;width:28px;height:28px;cursor:pointer}
.gcard .pick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.gcard .pick i{position:absolute;inset:0;border-radius:7px;border:2px solid #fff;background:rgba(15,23,42,.35);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.gcard .pick input:checked+i{background:var(--blue);border-color:var(--blue)}
.gcard .pick input:checked+i::after{content:"";position:absolute;left:8px;top:3px;width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.gcard .pick input:focus-visible+i{outline:2px solid var(--blue);outline-offset:2px}
.gcard.picked{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.gacts{display:flex;gap:6px;margin-top:auto;padding-top:6px}.gacts .btn:first-child{flex:1}
.selbar{position:sticky;bottom:12px;z-index:20;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;box-shadow:var(--sh-3)}
.selbar .sp{flex:1}.selbar b{font-size:16px}
@media (max-width:1100px){.gen-cust{grid-template-columns:1fr}.gen-pv{position:static;max-width:380px}.pick-styles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.pick-styles{grid-template-columns:repeat(2,minmax(0,1fr))}.gsteps li{min-width:64px}.gsteps li.ln{min-width:20px}.sthumb{width:110px}.src-card{flex-wrap:wrap}.selbar{flex-wrap:wrap}.selbar .sp{display:none}.gen-head h1{font-size:24px}}
.gcard .media{aspect-ratio:4/5}
.st.blue{background:var(--blue-50);color:var(--blue-700)}
.sfx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.sfx{display:flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:9px;padding:4px 6px;font-size:12.5px;font-weight:600}
.sfx span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfx .btn.sm{height:28px;padding:0 8px;font-size:12px}
.sticker-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.stk{border:1px solid var(--line);border-radius:9px;background:repeating-conic-gradient(#F2F4F7 0 25%,#fff 0 50%) 50%/12px 12px;padding:6px;cursor:pointer;aspect-ratio:1;display:grid;place-items:center}
.stk:hover{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.stk img{max-width:100%;max-height:100%;object-fit:contain}
.tl-sfx{position:absolute;top:4px;height:18px;min-width:18px;padding:0 3px;border-radius:5px;background:#F59E0B;color:#fff;font-size:11px;line-height:18px;text-align:center;z-index:2;pointer-events:auto}.tl-sfx.zm{background:rgba(21,93,252,.25);color:var(--blue-700);top:22px}
.st.live{background:#FEE2E2;color:#DC2626}
.st.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#DC2626;margin-right:6px;animation:livepulse 1.4s ease-in-out infinite}
@keyframes livepulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.st.live::before{animation:none}}

/* ── Landing: live demo (long video → AI → short s titlovima) ── */
.hero-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font:600 13px var(--display);color:var(--ink-2);margin-bottom:22px}
.hero-pill i{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.demo{position:relative;margin:48px auto 0;max-width:1120px;display:grid;grid-template-columns:minmax(0,1.75fr) auto minmax(0,.62fr);gap:22px;align-items:center;text-align:left}
.demo-long{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:14px;box-shadow:0 40px 100px -40px rgba(10,10,11,.35)}
.demo-head{display:flex;align-items:center;gap:10px;font-size:13px;padding:2px 4px 12px}
.demo-head .dot{width:9px;height:9px;border-radius:50%;background:#EF4444}
.demo-head b{font:700 13px var(--display)}.demo-head .faint{margin-left:auto}
.demo-player{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#111}
.demo-player video{width:100%;height:100%;object-fit:cover;display:block}
.demo-crop{position:absolute;top:0;bottom:0;border:3px solid #fff;border-radius:10px;box-shadow:0 0 0 999px rgba(8,10,20,.55);opacity:0;transition:opacity .45s}
.demo-crop span{position:absolute;top:8px;left:8px;background:#fff;color:#111;font:800 11px var(--display);padding:3px 7px;border-radius:6px}
.demo.s-crop .demo-crop,.demo.s-fly .demo-crop{opacity:1}
.demo-scan{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(21,93,252,.0) 40%,rgba(21,93,252,.35) 50%,transparent 51%);opacity:0;transform:translateX(-60%)}
.demo.s-scan .demo-scan{opacity:1;animation:dscan 2.4s linear}
@keyframes dscan{to{transform:translateX(60%)}}
.demo-tl{position:relative;height:46px;margin-top:12px;border-radius:10px;background:var(--surface-2);overflow:hidden}
.demo-wave{position:absolute;inset:7px 8px;display:flex;align-items:center;gap:2px}
.demo-wave i{flex:1;border-radius:2px;background:#C9CED8;min-height:3px;transition:background .3s}
.demo-wave i.hot{background:var(--blue)}
.demo-mark{position:absolute;top:4px;transform:translate(-50%,-6px) scale(.6);opacity:0;font:800 10px var(--display);color:#fff;background:#111;padding:2px 6px;border-radius:999px;transition:all .35s cubic-bezier(.2,.9,.3,1.3);white-space:nowrap;z-index:2}
.demo-mark.on{opacity:1;transform:translate(-50%,0) scale(1)}
.demo-mark.best{background:var(--blue);box-shadow:0 4px 12px -2px rgba(21,93,252,.6)}
.demo-seg{position:absolute;top:0;bottom:0;background:rgba(21,93,252,.14);border:2px solid var(--blue);border-radius:8px;opacity:0;transition:opacity .4s}
.demo.s-pick .demo-seg,.demo.s-crop .demo-seg,.demo.s-fly .demo-seg,.demo.s-short .demo-seg{opacity:1}
.demo-head-line{position:absolute;top:0;bottom:0;width:2px;background:#EF4444;left:0}
.demo-status{display:flex;align-items:center;gap:8px;margin-top:10px;font:600 13px var(--display);color:var(--ink-2);padding:0 4px}
.demo-status .sp{flex:1}
.demo-count{font:700 12px var(--display);color:var(--blue);background:var(--blue-50);padding:3px 9px;border-radius:999px}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--blue-100);border-top-color:var(--blue);animation:dspin .8s linear infinite}
.demo.s-pick .spin,.demo.s-crop .spin,.demo.s-fly .spin,.demo.s-short .spin{animation:none;border-color:#22C55E;background:#22C55E}
@keyframes dspin{to{transform:rotate(1turn)}}
.demo-arrow{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--faint)}
.demo-arrow span{display:inline-flex;align-items:center;gap:5px;font:700 12px var(--display);color:var(--blue);background:var(--blue-50);padding:5px 10px;border-radius:999px;white-space:nowrap}
.demo-short{display:flex;flex-direction:column;align-items:center;gap:12px}
.demo-phone{position:relative;width:100%;max-width:290px;aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#0b0b0d;border:7px solid #111;box-shadow:0 40px 80px -30px rgba(10,10,11,.55);opacity:.15;transform:scale(.96);transition:opacity .5s,transform .5s}
.demo.s-short .demo-phone{opacity:1;transform:none}
.demo-phone canvas{width:100%;height:100%;display:block}
.demo-badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.95);color:#111;font:800 13px var(--display);padding:5px 10px;border-radius:999px;opacity:0;transform:translateY(-6px);transition:all .4s .3s}
.demo-badge small{font-weight:600;color:var(--muted);font-size:11px}
.demo.s-short .demo-badge{opacity:1;transform:none}
.demo-prog{position:absolute;left:12px;right:12px;bottom:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.25)}
.demo-prog i{display:block;height:100%;width:0;background:#fff;border-radius:2px}
.demo-ready{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.demo-ready span{display:inline-flex;align-items:center;gap:5px;font:600 12px var(--display);background:var(--surface);border:1px solid var(--line);padding:5px 9px;border-radius:999px;opacity:0;transform:translateY(6px);transition:all .35s}
.demo-ready svg{width:14px;height:14px}
.demo.s-short .demo-ready span{opacity:1;transform:none}
.demo.s-short .demo-ready span:nth-child(2){transition-delay:.12s}.demo.s-short .demo-ready span:nth-child(3){transition-delay:.24s}
.demo-style{font-size:12px;color:var(--muted)}
.demo-ghost{position:absolute;border:3px solid #fff;border-radius:10px;pointer-events:none;opacity:0;box-shadow:0 20px 50px -10px rgba(0,0,0,.5);background:rgba(255,255,255,.08)}
.demo-note{text-align:center;margin-top:14px}
.madefor{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.madefor div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px;text-align:left}
.madefor b{font:700 15px var(--display)}.madefor span{font-size:13px;color:var(--muted);line-height:1.4}
@media (max-width:900px){
  .demo{grid-template-columns:1fr;gap:14px}
  .demo-arrow{flex-direction:row}.demo-arrow svg{transform:rotate(90deg)}
  .demo-phone{max-width:230px}
  .madefor{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.hero h1{font-size:46px}.madefor{grid-template-columns:1fr}.demo-head .faint{display:none}}
@media (prefers-reduced-motion:reduce){.demo *{transition:none!important;animation:none!important}}
/* Editor: više osoba */
.arr-pick{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:10px}
.arr-pick button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;font-size:10.5px;line-height:1.15;text-align:center}
.arr-pick button.on{color:var(--blue)}
.people{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
.ppl-frame{border-radius:10px;overflow:hidden;background:#000}
.ppl-frame canvas{display:block;width:100%}
.ppl-list{display:flex;gap:8px;flex-wrap:wrap}
.ppl{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);font:600 11px var(--display);cursor:pointer}
.ppl canvas{width:56px;height:56px;border-radius:50%;object-fit:cover}
.ppl.on{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)}
.ppl b{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;display:grid;place-items:center}
/* Editor: Trim */
.trim-btn{border-color:var(--blue);color:var(--blue)}
.modal.trim{width:min(760px,calc(100vw - 32px));display:flex;flex-direction:column;gap:12px}
.trim-pv{position:relative;background:#000;border-radius:12px;overflow:hidden;aspect-ratio:16/9;max-height:300px;margin:0 auto;width:100%}
.trim-pv video{width:100%;height:100%;object-fit:contain;display:block}
.trim-t{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.65);color:#fff;font:600 12px var(--mono,monospace);padding:3px 7px;border-radius:6px}
.trim-strip{position:relative;height:64px;border-radius:10px;overflow:hidden;background:#111;touch-action:none;cursor:pointer;user-select:none}
.trim-strip canvas{width:100%;height:100%;display:block}
.trim-dim{position:absolute;top:0;bottom:0;background:rgba(10,12,20,.62)}.trim-dim.l{left:0}.trim-dim.r{right:0}
.trim-sel{position:absolute;top:0;bottom:0;border:3px solid #7C5CFF;border-radius:8px;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.trim-sel .h{position:absolute;top:50%;width:14px;height:40px;margin-top:-20px;background:#fff;border-radius:5px;box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:ew-resize}
.trim-sel .h::after{content:"";position:absolute;left:5px;top:12px;width:4px;height:16px;border-left:1.5px solid #7C5CFF;border-right:1.5px solid #7C5CFF}
.trim-sel .h.l{left:-9px}.trim-sel .h.r{right:-9px}
.trim-sel .h:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.trim-head{position:absolute;top:0;bottom:0;width:2px;background:#EF4444;pointer-events:none}
.trim-ticks{display:flex;justify-content:space-between;margin-top:-6px}
.trim-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.trim-in{display:flex;align-items:center;gap:6px;font-size:13px}.trim-in:last-child{justify-content:flex-end}
.trim-in span{font:600 13px var(--mono,monospace);min-width:52px;text-align:center}
@media (max-width:600px){.trim-row{grid-template-columns:1fr}.trim-in:last-child{justify-content:flex-start}}
/* Editor: vertikalna traka alata (kao Opus) */
.ed-panel{display:grid!important;grid-template-columns:minmax(0,1fr) 74px;grid-template-rows:minmax(0,1fr)}
.ed-panel .body{grid-column:1;grid-row:1;min-height:0}
.ed-panel .ed-rail{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:2px;padding:8px 6px!important;border-bottom:0!important;border-left:1px solid var(--line);overflow-y:auto;background:var(--surface-2,#F8FAFC)}
.ed-rail button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 2px!important;border-radius:10px;font:600 10.5px var(--display)!important;color:var(--ink-2);border:0;background:none;box-shadow:none!important}
.ed-rail button .ic{width:20px;height:20px}
.ed-rail button:hover{background:#fff;color:var(--ink)}
.ed-rail button.on{background:var(--blue-50);color:var(--blue)}
.ed-rail button.on::after{display:none}
.up-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 12px;border:1.5px dashed var(--line-2);border-radius:12px;cursor:pointer;text-align:center;transition:all .15s}
.up-drop:hover,.up-drop.over,.up-drop:focus-visible{border-color:var(--blue);background:var(--blue-50)}
.up-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.up-it{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#F1F3F7;padding:0;cursor:pointer}
.up-it img,.up-it video{width:100%;height:100%;object-fit:cover;display:block}
.up-it i{position:absolute;left:6px;bottom:6px;font-style:normal;font-size:11px;color:#fff;background:rgba(0,0,0,.55);border-radius:6px;padding:1px 5px}
.up-it:hover{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)}
@media (max-width:980px){
  .ed-panel{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .ed-panel .ed-rail{grid-column:1;grid-row:1;flex-direction:row;overflow-x:auto;border-left:0;border-bottom:1px solid var(--line)!important}
  .ed-panel .body{grid-row:2}
  .ed-rail button{min-width:64px}
}
.arr-pick button.on{background:var(--blue-50)!important;color:var(--blue)!important;box-shadow:inset 0 0 0 1.5px var(--blue)!important}
/* Billing */
.bill-now{display:flex;justify-content:space-between;gap:16px;align-items:center}
.plans4{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.plan4{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px}
.plan4 h3{font:800 20px var(--display)}
.plan4 .price{font:800 34px var(--display);letter-spacing:-.04em}.plan4 .price small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.plan4 ul{list-style:none;margin:4px 0 8px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px;flex:1}
.plan4 ul li::before{content:"✓ ";color:var(--blue);font-weight:800}
.plan4 .btn{justify-content:center}
.plan4.hot{border:2px solid var(--blue);box-shadow:0 14px 40px -24px rgba(21,93,252,.6)}
.plan4.cur{background:var(--blue-50)}
.plan-badge{position:absolute;top:-11px;left:20px;background:var(--blue);color:#fff;font:700 11px var(--display);padding:4px 10px;border-radius:999px}
.btn.disabled{opacity:.6;pointer-events:none}
.cmp{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.cmp th,.cmp td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:center}
.cmp th:first-child,.cmp td:first-child{text-align:left;color:var(--ink-2)}
.cmp th{font:700 14px var(--display)}.cmp th small{font-weight:600;color:var(--muted)}
.side-plan{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;margin-top:8px}
.side-plan a{color:var(--blue);font-weight:700}
@media (max-width:1100px){.plans4{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.plans4{grid-template-columns:1fr}.bill-now{flex-direction:column;align-items:flex-start}}