:root{--nav:#040920ee;color-scheme:dark;--bg:#040920;--card:#0c1432;--tx:#eef2ff;--mut:#8a94b8;--ac:#2f6bff;--ac2:#7c3aed;--bd:#1b2552;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--tx);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;gap:14px;padding:10px 20px;background:var(--nav);backdrop-filter:blur(8px);border-bottom:1px solid var(--bd);flex-wrap:wrap}
nav[hidden]{display:none}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.5px;color:var(--tx);text-decoration:none}
.logo img{width:30px;height:30px;border-radius:7px}
.links{display:flex;gap:4px;flex:1}
.links a{color:var(--mut);text-decoration:none;padding:7px 12px;border-radius:8px;font-size:15px;white-space:nowrap}
.links a:hover{color:var(--tx)}.links a.on{color:var(--tx);background:var(--card)}
#q{background:var(--card);border:1px solid var(--bd);border-radius:999px;padding:8px 14px;width:200px}
.btn{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;border:0;border-radius:8px;padding:10px 18px;font-weight:600;cursor:pointer;transition:transform .15s,opacity .15s}
.btn:hover{transform:translateY(-1px);opacity:.92}.btn.g{background:#ffffff14;border:1px solid var(--bd)}.btn.d{background:transparent;border:1px solid var(--bd);color:#ff7b7b}.btn.big{font-size:17px;padding:12px 28px}
main{max-width:1280px;margin:0 auto;padding:20px}
.av{--s:40px;width:var(--s);height:var(--s);font-size:calc(var(--s)*.55);border-radius:50%;display:grid;place-items:center;overflow:hidden;flex:none}
.av svg,.av img{width:100%;height:100%;object-fit:cover}
#me{cursor:pointer;display:flex}
.pwrap{text-align:center;padding:10px 20px 40px}
.pwrap img{height:clamp(110px,20vw,190px);-webkit-mask-image:radial-gradient(ellipse at center,#000 50%,transparent 78%);mask-image:radial-gradient(ellipse at center,#000 50%,transparent 78%)}
.pwrap h1{font-weight:500;margin:6px 0 28px}
.prow{display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,34px);justify-content:center;margin-bottom:34px}
.pt{width:clamp(100px,17vw,150px);cursor:pointer;--s:clamp(100px,17vw,150px);position:relative}
.pt .av{transition:transform .2s,box-shadow .2s}
.pt:hover .av{transform:scale(1.08);box-shadow:0 0 0 3px var(--tx)}
.pt.pop .av{transform:scale(.92);transition:transform .15s}
.pt b{display:block;margin-top:10px;color:var(--mut);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt:hover b{color:var(--tx)}
.pt .ed{position:absolute;inset:0 0 auto 0;height:var(--s);border-radius:50%;background:#000a;display:grid;place-items:center;font-size:34px}
.plus{border:3px dashed var(--bd);background:transparent;color:var(--mut);font-size:70px;font-weight:200}
.note{color:var(--mut);font-size:13px;max-width:520px;margin:30px auto 0}
.ov{position:fixed;inset:0;background:#000b;display:grid;place-items:center;z-index:50;padding:16px}
.box{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:22px;width:min(560px,100%);max-height:92vh;overflow:auto}
.box h2{margin:0 0 14px}.box input[type=text],.box input[type=number],.box textarea,.box select{width:100%;background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:10px 12px;margin:4px 0 12px}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px;margin:6px 0 14px}
.agrid .av{--s:100%;aspect-ratio:1;cursor:pointer;border:3px solid transparent;transition:transform .15s}
.agrid .av:hover{transform:scale(1.07)}.agrid .av.sel{border-color:var(--tx)}
.sw{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
.sw i{width:30px;height:30px;border-radius:50%;cursor:pointer;border:3px solid transparent}.sw i.sel{border-color:var(--tx)}
.acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:8px}
.hero2{position:relative;border-radius:16px;overflow:hidden;height:clamp(260px,48vh,460px);margin-bottom:26px;background:var(--card)}
.hero2 video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero2:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#040920ee 10%,#04092040 70%),linear-gradient(0deg,#040920 0,transparent 40%)}
.hc{position:absolute;z-index:2;left:clamp(16px,4vw,44px);bottom:clamp(16px,4vw,40px);max-width:560px}
.hc h1{font-size:clamp(26px,5vw,46px);margin:0 0 8px}.hc p{color:#cdd5f0;margin:0 0 16px;line-height:1.5}
.btns{display:flex;gap:10px;flex-wrap:wrap}
h2.t{font-size:19px;margin:26px 0 12px}
.row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px}
.row .card{flex:0 0 clamp(160px,19vw,230px);scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(150px,22vw,230px),1fr));gap:16px}
.card{cursor:pointer;transition:transform .2s}.card:hover{transform:translateY(-4px)}
.ph{position:relative;border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--bd);aspect-ratio:16/9}
.ph video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ph i{position:absolute;left:0;bottom:0;height:4px;background:var(--ac)}
.ct{padding:8px 2px}.ct b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ct small,.mut{color:var(--mut)}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 16px}
.drop{border:2px dashed var(--bd);border-radius:12px;padding:22px;text-align:center;color:var(--mut);margin:12px 0 20px}.drop.on{border-color:var(--ac);color:var(--tx)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.chips button{border:1px solid var(--bd);background:transparent;border-radius:999px;padding:6px 14px;cursor:pointer}.chips .on{background:var(--ac);border-color:var(--ac)}
.empty{padding:40px;text-align:center;color:var(--mut)}
.fh{position:relative;border-radius:16px;overflow:hidden;min-height:clamp(240px,44vh,400px);margin-bottom:14px;background:var(--card)}
.fh video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6)}
.fh:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#040920 0,transparent 60%)}
.fh .hc{max-width:720px}
.top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.top h1{font-size:20px;margin:0;flex:1;min-width:120px}
.vid{width:100%;max-height:76vh;background:#000;border-radius:12px;display:block}
.wrap:fullscreen{background:#000;display:flex;flex-direction:column;padding:10px}.wrap:fullscreen .vid{max-height:none;flex:1}
.err{background:#3a0f18;border:1px solid #7a2030;border-radius:10px;padding:14px;margin-top:10px}
.pick{align-items:start;overflow:auto;padding:0;background:var(--bg)}
.pk{max-width:1100px;margin:0 auto;padding:20px}.pk .top{display:flex;align-items:center;gap:12px;margin-bottom:6px}.pk h2{margin:0;flex:1}
.pk h3{font-size:15px;color:var(--mut);font-weight:600;margin:22px 0 8px}
.prw{display:flex;gap:14px;overflow-x:auto;padding:8px 6px 12px;scroll-snap-type:x proximity}
.prw .av{--s:clamp(72px,11vw,104px);cursor:pointer;scroll-snap-align:start;border:3px solid transparent;transition:transform .15s,border-color .15s}
.prw .av:hover{transform:scale(1.08);border-color:var(--tx)}.prw .av.sel{border-color:var(--tx);box-shadow:0 0 0 3px var(--ac)}
.prw.wrap{flex-wrap:wrap;overflow-x:visible}
.prw .add{background:transparent;border:2px dashed var(--bd);color:var(--mut);font-size:40px}
@media(max-width:700px){nav{gap:8px;padding:8px 12px}.links{order:5;flex-basis:100%;overflow-x:auto}#q{width:130px;flex:1}main{padding:12px}#add{padding:8px 12px}}
[data-mode=day]{color-scheme:light;--bg:#f4f6fc;--card:#fff;--tx:#10162f;--mut:#566089;--bd:#d3daf0;--nav:#f4f6fcee}
[data-mode=day] .btn.g{background:#10162f0f}[data-mode=day] .pwrap img{filter:invert(.9) hue-rotate(180deg)}
a.btn{text-decoration:none;display:inline-block;text-align:center}.btn:disabled{opacity:.5;cursor:not-allowed}
.auth{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:22px;max-width:420px;margin:0 auto 18px;text-align:left}
.fl{display:block;margin:10px 0;font-weight:600;font-size:14px}.fl input,.fl select,.fl textarea,.auth>input{display:block;width:100%;margin-top:6px;background:var(--bg);border:1px solid var(--bd);border-radius:8px;padding:10px 12px;font-weight:400}.fl small{display:block;font-weight:400;margin-top:4px}
.pc{aspect-ratio:2/3}.pc img{width:100%;height:100%;object-fit:cover;display:block}.noimg{display:grid;place-items:center;width:100%;height:100%;font-size:54px;font-weight:800;color:var(--mut)}
.fiche{display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:22px;margin-bottom:20px}
@media(max-width:600px){.fiche{grid-template-columns:1fr}.fp{max-width:200px}}
.cm{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--bd);align-items:flex-start;flex-wrap:wrap}
.cf textarea{width:100%;background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.btn.g.sel{background:var(--ac);border-color:var(--ac);color:#fff}
.bar select{width:auto;background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:8px}
.box .bar{margin:4px 0}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--card);border:1px solid var(--bd);padding:12px 18px;border-radius:10px;opacity:0;pointer-events:none;transition:.2s;z-index:80;max-width:90vw}#toast.on{opacity:1;transform:translateX(-50%)}#toast.bad{border-color:#7a2030;background:#3a0f18;color:#fff}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}