:root{
  --bg:#F5F5F9; --bg-2:#ECECF3; --card:#FFFFFF;
  --ink:#17161F; --ink-soft:#9A98AD; --ink-mid:#57556C;
  --line:#EAEAF1; --line-2:#DEDEEA;
  --accent:#FF5D15; --accent-soft:#FFEBE1; --accent-dark:#D94E0E;
  --sub:#FF5D15; --verif:#1877F2;
  --btn:#E9E9F0; --btn-tx:#17161F; --btn-hover:#DDDDE8;
  --money:#0EA47B; --money-bg:#E2F5EF;
  --shadow:0 14px 34px -18px rgba(24,22,52,.24);
  --sans:-apple-system,system-ui,'SF Pro Display','SF Pro Text','Segoe UI',sans-serif;
  --side:240px; --top:60px; --r:16px;
}
body.dark{
  --bg:#141318; --bg-2:#211F2A; --card:#1C1B23;
  --ink:#F2F1F6; --ink-soft:#8B8998; --ink-mid:#BBB9C6;
  --line:#2A2933; --line-2:#35333F;
  --accent:#FF7A45; --accent-soft:#3A2416; --accent-dark:#FF6A2A;
  --sub:#FF6A2A; --verif:#4DA3FF;
  --btn:#2C2B36; --btn-tx:#F2F1F6; --btn-hover:#393744;
  --money:#2FCF9E; --money-bg:#132A21;
  --shadow:0 16px 38px -18px rgba(0,0,0,.65);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden;font-size:15px}
::selection{background:var(--ink);color:#fff}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
canvas{display:block}
h1,h2,h3{font-weight:600;letter-spacing:-.02em}

/* TOP */
.top{position:fixed;top:0;left:0;right:0;height:var(--top);z-index:50;display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--card);border-bottom:1px solid var(--line)}
.burger{width:38px;height:38px;border:none;background:none;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.burger:hover{background:var(--bg-2)}
.burger svg{width:19px;height:19px}

.brand{font-family:"Boldonse",var(--sans);font-size:17px;font-weight:400;letter-spacing:.01em;display:flex;align-items:center;gap:8px}
.brand .dot,.auth-brand .dot{
  width:1.18em;height:1.41em;border-radius:0;
  background:url('/icon-twalart.png') center/contain no-repeat;
}

.auth-brand{font-family:"Boldonse",var(--sans);font-weight:400}

/* ===== Barre de recherche — moderne + responsive ===== */
.search {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  min-width: 0;               /* ← autorise la barre à rétrécir (fix débordement) */
  max-width: 560px;
  height: 42px;
  padding: 0 15px;
  background: rgba(120, 120, 140, .09);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.search:focus-within {
  background: var(--card, #fff);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 75, 230, .12);
}
.search svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-soft);
  stroke-width: 2;
}
.search input {
  flex: 1;
  min-width: 0;               /* ← indispensable : sans ça l'input force le débordement */
  width: 100%;
  border: none;
  background: none;
  outline: none;
  font: inherit;
  color: inherit;
  padding: 0;
}
.search input::placeholder { color: var(--ink-soft); }

@media (max-width: 640px) {
  .search { height: 38px; padding: 0 13px; max-width: none; }
}

.top-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.publish{border:none;background:var(--btn);color:var(--btn-tx);font-weight:600;font-size:13.5px;padding:10px 18px;border-radius:999px;display:flex;align-items:center;gap:6px}
.publish:hover{background:var(--btn-hover)}
.ava{width:36px;height:36px;border-radius:50%;overflow:hidden;flex:none;border:1px solid var(--line-2);cursor:pointer}
.ava canvas,.ava img{width:100%;height:100%;object-fit:cover}
@media(max-width:720px){.live{display:none}.publish span{display:none}.brand{display:none}}

/* SIDEBAR */
.side{position:fixed;top:var(--top);left:0;bottom:0;width:var(--side);z-index:40;background:var(--bg);border-right:1px solid var(--line);padding:14px 10px;overflow-y:auto;transition:transform .22s}
.side.hide{transform:translateX(-100%)}
.nav-item{display:flex;align-items:center;gap:13px;padding:10px 13px;border-radius:9px;color:var(--ink-mid);font-size:14px;font-weight:500;cursor:pointer}
.nav-item:hover{background:var(--bg-2);color:var(--ink)}
.nav-item.on{background:var(--bg-2);color:var(--ink);font-weight:600}
.nav-item .ic{width:18px;text-align:center;font-size:15px}
.side-sep{height:1px;background:var(--line);margin:12px 8px}
.side-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;padding:6px 13px 6px}

/* MAIN */
.main{position:fixed;top:var(--top);left:var(--side);right:0;bottom:0;overflow-y:auto;transition:left .22s}
.main.wide{left:0}
@media(max-width:960px){.main{left:0}.side{box-shadow:var(--shadow)}}

.chips{position:sticky;top:0;z-index:20;background:var(--bg);display:flex;gap:8px;padding:13px 26px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;font-size:13px;font-weight:500;padding:8px 15px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--ink-mid)}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}

.feed{padding:22px 26px 80px}
.reason{font-size:14px;color:var(--ink-mid);margin-bottom:6px}
.reason b{color:var(--ink);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:30px 24px}
.vid{cursor:pointer}
.vid .thumb{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.vid .thumb canvas,.vid .thumb img{width:100%;height:100%;object-fit:cover}
.vid:hover .thumb{border-color:var(--line-2);box-shadow:var(--shadow)}
.vid .views{position:absolute;bottom:8px;right:8px;background:rgba(22,22,21,.82);color:#fff;font-size:11.5px;font-weight:500;padding:3px 8px;border-radius:6px}
.vid-row{display:flex;gap:11px;padding:12px 2px 0}
.vid-av{width:36px;height:36px;border-radius:50%;overflow:hidden;flex:none}
.vid-av canvas,.vid-av img{width:100%;height:100%;object-fit:cover}
.vid-info .t{font-size:15px;font-weight:600;line-height:1.25;color:var(--ink)}
.vid-info .m{font-size:12.5px;color:var(--ink-soft);margin-top:3px}
.empty{grid-column:1/-1;text-align:center;color:var(--ink-soft);padding:56px}

/* WATCH */
.watch{display:none;padding:22px 26px 80px}
.watch.on{display:block}
.back{border:1px solid var(--line-2);background:var(--card);border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:500;color:var(--ink);margin-bottom:16px;display:inline-flex;gap:7px;align-items:center}
.back:hover{border-color:var(--accent);color:var(--accent)}
.watch-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
@media(max-width:1040px){.watch-wrap{grid-template-columns:1fr}}
.stage{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--bg-2);display:flex;align-items:center;justify-content:center;max-height:calc(100vh - 320px);min-height:240px;cursor:zoom-in;position:relative}
.stage canvas,.stage img{max-width:100%;max-height:calc(100vh - 320px);width:auto;height:auto;display:block}
.w-title{font-size:23px;line-height:1.2;margin:18px 0 6px}
.w-meta{font-size:13.5px;color:var(--ink-soft)}
.w-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.w-chan{display:flex;align-items:center;gap:12px;min-width:0}
.w-chan .vid-av{width:46px;height:46px}
.w-chan .info{min-width:0}
.w-chan .info .n{font-size:16px;font-weight:600}
.w-chan .info .s{font-size:12.5px;color:var(--ink-soft)}
.sub-btn{border:none;background:var(--sub);color:#fff;font-weight:600;font-size:13px;padding:10px 20px;border-radius:999px;margin-left:6px}
.sub-btn.done{background:var(--bg-2);color:var(--ink-mid)}
.tip{border:1px solid var(--line-2);background:var(--card);color:var(--ink);font-weight:600;font-size:13px;padding:10px 16px;border-radius:999px}
.tip:hover{border-color:var(--accent);color:var(--accent)}
.w-desc{margin-top:14px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;font-size:14px;color:var(--ink-mid);line-height:1.55}
.w-desc b{color:var(--ink);font-weight:600}
.w-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.w-sep{width:1px;height:24px;background:var(--line-2);margin:0 4px}
.wbtn{border:1px solid var(--line-2);background:var(--card);color:var(--ink);font-weight:600;font-size:13px;padding:9px 16px;border-radius:999px;cursor:pointer}
.wbtn:hover{border-color:var(--accent);color:var(--accent)}
.wbtn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.wbtn.sec{padding:8px 13px;font-size:12.5px;color:var(--ink-mid);border-color:var(--line)}
.wbtn.sec:hover{border-color:var(--accent);color:var(--accent)}
.wbtn.sec.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.wbtn.ai.on{background:transparent;border-color:#d1483a;color:#d1483a}
.wbtn.ai.review{background:transparent;border-color:#c98a1e;color:#c98a1e}
.rail-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:13px}
.rail-item{display:flex;gap:10px;margin-bottom:13px;cursor:pointer}
.rail-item .rt{position:relative;width:120px;aspect-ratio:16/9;border-radius:9px;overflow:hidden;flex:none;border:1px solid var(--line)}
.rail-item .rt canvas,.rail-item .rt img{width:100%;height:100%;object-fit:cover}
.rail-item .rt .v{position:absolute;bottom:4px;right:4px;background:rgba(22,22,21,.82);color:#fff;font-size:10px;padding:1px 5px;border-radius:4px}
.rail-item:hover .ri .t{color:var(--money)}
.rail-item .ri .t{font-size:13.5px;line-height:1.25;font-weight:600}
.rail-item .ri .m{font-size:12px;color:var(--ink-soft);margin-top:2px}

/* CHANNEL */
.channel{display:none;padding-bottom:80px}
.channel.on{display:block}
.ch-empty{padding:70px 26px;text-align:center;max-width:460px;margin:0 auto}
.ch-empty h2{font-size:24px;margin-bottom:10px}
.ch-empty p{color:var(--ink-mid);margin-bottom:22px}
.banner{height:190px;position:relative;overflow:hidden;background:var(--bg-2)}
.banner canvas,.banner img{width:100%;height:100%;object-fit:cover;display:block}
.ch-head{padding:14px 26px 0;display:flex;gap:20px;align-items:flex-end;position:relative}
.ch-bigav{width:96px;height:96px;border-radius:50%;overflow:hidden;border:4px solid var(--card);flex:none;background:var(--card);margin-top:-56px}
.ch-bigav canvas,.ch-bigav img{width:100%;height:100%;object-fit:cover}
.ch-id{flex:1;min-width:0;padding-bottom:6px}
.ch-id h1{font-size:26px}
.ch-about{padding:12px 26px 0}
.ch-about .cat{font-size:13px;color:var(--money);font-weight:600}
.ch-about .bio{font-size:14px;color:var(--ink-mid);margin-top:6px;max-width:60ch;white-space:pre-line;overflow-wrap:break-word}
.ch-actions{display:flex;gap:10px;padding:8px 26px 4px}
.ch-actions button{border:1px solid var(--line-2);background:var(--card);font-weight:600;font-size:13.5px;padding:10px 18px;border-radius:999px;color:var(--ink)}
.ch-actions button.primary{background:var(--btn);color:var(--btn-tx);border-color:transparent}
.ch-actions button:hover{border-color:var(--accent);color:var(--accent)}
.ch-actions button.primary:hover{filter:brightness(1.08);color:#fff}
.sub-ch.done{background:var(--bg-2);color:var(--ink-mid);border-color:var(--line-2)}
.ch-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;padding:16px 26px 0;margin:0;border-bottom:none}
.ch-stats>div{display:flex;align-items:baseline;gap:5px}
.ch-stats>div:not(:first-child){margin-left:12px}
.ch-stats>div:not(:first-child)::before{content:"·";color:var(--line-2);margin-right:12px}
.ch-stats .k{font-size:14px;font-weight:600}
.ch-stats .k.money{color:var(--money)}
.ch-stats .l{font-size:14px;color:var(--ink-soft)}
.ch-posts{padding:22px 26px 0}
.ch-posts .grid{margin-top:4px}
.ch-posts-h{font-size:16px;font-weight:600;margin-bottom:14px;letter-spacing:-.01em}

/* STUDIO + SETTINGS */
.studio{display:none;padding:24px 26px 80px;max-width:1000px}
.studio.on{display:block}
.settings{display:none;padding:24px 26px 80px;max-width:720px}
.settings.on{display:block}
.studio-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.studio-top .st-title{font-size:24px;font-weight:600;letter-spacing:-.02em}
.studio-top .st-sub{font-size:13px;color:var(--ink-soft);margin-top:3px;max-width:52ch}
.studio-actions{display:flex;gap:10px;flex-wrap:wrap}
.studio .rev{margin:16px 0 0}
.studio .monet{margin:16px 0 0}
.studio-sec-h{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:28px 2px 14px}
.studio label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin:14px 0 5px}
.settings label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin:14px 0 5px}
.settings input[type=text]{width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:10px;background:var(--card);color:var(--ink);font-family:var(--sans);font-size:14px;outline:none}
.settings input[type=text]:focus{border-color:var(--ink)}
.prof-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.prof-av{width:72px;height:72px;border-radius:50%;overflow:hidden;flex:none;border:1px solid var(--line)}
.prof-av canvas,.prof-av img{width:100%;height:100%;object-fit:cover;display:block}
.prof-actions{display:flex;gap:8px;flex-wrap:wrap}
.prof-note{font-size:12px;color:var(--ink-soft);margin-top:8px;line-height:1.5}
.studio select{width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:10px;background:var(--card);color:var(--ink);font-family:var(--sans);font-size:14px;outline:none}
.studio select:focus{border-color:var(--ink)}
.promo-note{font-size:13px;color:var(--ink-soft);line-height:1.55;margin-bottom:6px}
.promo-est{font-size:13.5px;color:var(--ink-mid);margin:16px 0 4px}
.promo-est b{color:var(--money);font-weight:600}
#promoLaunch{margin-top:14px}
.priv{position:absolute;top:8px;left:8px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.04em;padding:3px 8px;border-radius:6px;text-transform:uppercase}
.scard-actions{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.scard-actions button{font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--ink)}
.scard-actions button:hover{border-color:var(--accent);color:var(--accent)}
.scard-actions button.danger:hover{border-color:#d1483a;color:#d1483a}
.scard-stats{display:flex;gap:14px;padding:2px 2px 4px;font-size:12px;color:var(--ink-soft)}
.scard-stats b{color:var(--ink);font-weight:600}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(22,22,21,.5);backdrop-filter:blur(4px);z-index:210;display:none;align-items:center;justify-content:center;padding:24px}
.modal-bg.open{display:flex}
.modal{background:var(--card);border-radius:16px;max-width:520px;width:100%;max-height:90vh;overflow:auto;box-shadow:var(--shadow);padding:28px}
.modal h3{font-size:21px;margin-bottom:4px}
.modal .sub{color:var(--ink-soft);font-size:13.5px;margin-bottom:20px}
.modal label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-mid);margin:16px 0 6px}
.modal input[type=text],.modal textarea,.modal select{width:100%;border:1px solid var(--line-2);border-radius:9px;padding:11px 13px;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--card);outline:none}
.modal input:focus,.modal textarea:focus,.modal select:focus{border-color:var(--ink)}
.modal textarea{resize:vertical;min-height:66px}
.modal input::placeholder,.modal textarea::placeholder{color:var(--ink-soft)}
.rowflex{display:flex;gap:14px;align-items:center;margin-top:8px}
.prev-av{width:64px;height:64px;border-radius:50%;overflow:hidden;border:1px solid var(--line-2);flex:none}
.prev-av canvas,.prev-av img{width:100%;height:100%;object-fit:cover}
.prev-ban{flex:1;height:64px;border-radius:9px;overflow:hidden;border:1px solid var(--line-2)}
.prev-ban canvas,.prev-ban img{width:100%;height:100%;object-fit:cover;display:block}
.mini{border:1px solid var(--line-2);background:var(--card);font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:999px;color:var(--ink)}
.mini:hover{border-color:var(--accent);color:var(--accent)}
.uploader{border:1.5px dashed var(--line-2);border-radius:10px;padding:18px;text-align:center;color:var(--ink-soft);font-size:13.5px;cursor:pointer}
.uploader:hover{border-color:var(--ink)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.modal-actions button{font-weight:600;font-size:14px;padding:11px 22px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--ink)}
.modal-actions button.primary{background:var(--btn);color:var(--btn-tx);border-color:transparent}
.modal-actions button:hover{opacity:.88}
.err{color:#c0392b;font-size:12.5px;margin-top:8px;display:none}

/* MONETIZATION / REVENUE */
.monet{margin:18px 26px 0;border:1px solid var(--line);border-radius:14px;padding:17px 20px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.monet.on{border-color:var(--money);background:var(--money-bg)}
.monet .mi{flex:1;min-width:230px}
.monet .mt{font-size:14.5px;font-weight:600}
.monet .mt.ok{color:var(--money)}
.monet .md{font-size:13px;color:var(--ink-mid);margin-top:3px;line-height:1.45}
.bar{height:8px;background:var(--bg-2);border-radius:100px;overflow:hidden;margin-top:11px;border:1px solid var(--line)}
.bar span{display:block;height:100%;background:var(--money);border-radius:100px;transition:width .5s}
.goal{margin-bottom:16px}
.goal:last-child{margin-bottom:0}
.goal-l{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-mid)}
.goal-l span:last-child{color:var(--ink-soft);font-weight:600}
.monet .badge{font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:8px;border:1px solid var(--line-2);color:var(--ink-mid);white-space:nowrap}
.monet.on .badge{background:var(--money);color:#fff;border-color:var(--money)}
.rev{margin:14px 26px 0;border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--card)}
.rev-h{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:14px}
.rev-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:640px){.rev-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rev-grid>div{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px}
.rev-grid .rk{font-size:20px;font-weight:600}
.rev-grid .rk.money{color:var(--money)}
.rev-grid .rl{font-size:12px;color:var(--ink-soft);margin-top:3px}

/* USER MENU + CATEGORY TOGGLE + SEG + PREMIUM */
.ava-wrap{position:relative}
.usermenu{position:absolute;top:48px;right:0;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;min-width:200px;display:none;flex-direction:column;z-index:60}
.usermenu.open{display:flex}
.usermenu button{text-align:left;background:none;border:none;padding:10px 13px;border-radius:9px;font-size:14px;color:var(--ink);font-weight:500;cursor:pointer}
.usermenu button:hover{background:var(--bg-2)}
.um-sep{height:1px;background:var(--line);margin:5px 6px}
.um-acct{padding:9px 13px 6px;font-size:12.5px;color:var(--ink-soft);word-break:break-all}
.um-acct b{display:block;color:var(--ink);font-size:13.5px;font-weight:600;margin-bottom:1px}
.side-toggle{width:100%;text-align:left;background:none;border:none;color:var(--ink-mid);font-weight:600;font-size:13px;padding:9px 14px;border-radius:9px;cursor:pointer}
.side-toggle:hover{background:var(--bg-2)}
.cat-extra{display:none}
.side.cats-open .cat-extra{display:flex}
.prem-card{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;margin-top:6px}
.prem-card.on{border-color:var(--accent);background:var(--accent-soft)}
.prem-t{font-weight:600;font-size:15px}
.prem-d{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.prem-btn{border:none;background:var(--btn);color:var(--btn-tx);font-weight:600;font-size:13px;padding:9px 16px;border-radius:999px;cursor:pointer;white-space:nowrap}
.prem-card.on .prem-btn{background:var(--card);color:var(--ink);border:1px solid var(--line-2)}

/* WATCH NAV / CAROUSEL / LIGHTBOX / CHART / ONBOARDING */
.ia-badge{position:absolute;top:12px;left:12px;background:rgba(209,72,58,.94);color:#fff;font-size:12px;font-weight:600;padding:5px 11px;border-radius:8px}
.caro{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:rgba(20,20,25,.55);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3}
.caro:hover{background:rgba(20,20,25,.8)}
.caro.prev{left:12px}.caro.next{right:12px}
.caro-count{position:absolute;top:12px;right:12px;background:rgba(20,20,25,.6);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;z-index:3}
.caro-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3}
.caro-dots .cdot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer}
.caro-dots .cdot.on{background:#fff;width:18px;border-radius:4px}
.pub-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pub-thumb{position:relative;width:66px;height:66px;border-radius:8px;overflow:hidden;border:1px solid var(--line-2)}
.pub-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pub-x{position:absolute;top:2px;right:2px;width:18px;height:18px;border:none;border-radius:50%;background:rgba(20,20,25,.7);color:#fff;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.thumb .ia-tag{position:absolute;top:8px;left:8px;background:rgba(209,72,58,.94);color:#fff;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:6px}
.chart-wrap{position:relative;width:100%;height:clamp(200px,32vh,300px);margin-top:4px}
.lightbox{position:fixed;inset:0;background:rgba(10,9,14,.92);z-index:100;display:none;align-items:center;justify-content:center;padding:40px}
.lightbox.open{display:flex}
.lb-inner{max-width:96vw;max-height:92vh;display:flex;align-items:center;justify-content:center}
.lb-inner img,.lb-inner canvas{max-width:96vw;max-height:92vh;width:auto;height:auto;border-radius:8px;box-shadow:0 20px 60px -20px rgba(0,0,0,.8)}
.lb-x{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;border:none;font-size:24px;cursor:pointer;line-height:1}
.lb-x:hover{background:rgba(255,255,255,.26)}

/* REPORT + TIP */
.report-link{border:none;background:none;color:var(--ink-soft);font-size:12.5px;font-weight:500;cursor:pointer;padding:9px 4px}
.report-link:hover{color:var(--ink);text-decoration:underline}
.rep-opt{display:flex;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px solid var(--line);font-size:14px;cursor:pointer}
.rep-opt input{accent-color:var(--accent)}
.tip-amts{display:flex;gap:10px;margin-top:6px}
.tip-amts button{flex:1;border:1px solid var(--line-2);background:var(--card);border-radius:12px;padding:16px;font-size:18px;font-weight:600;color:var(--ink);cursor:pointer}
.tip-amts button.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}

/* COMMENTS */
.comments{margin-top:26px}
.cm-h{font-size:15px;font-weight:600;margin-bottom:14px}
.cm-add{display:flex;gap:10px;align-items:center;margin-bottom:22px}
.cm-ava{width:36px;height:36px;border-radius:50%;overflow:hidden;flex:none}
.cm-ava canvas,.cm-ava img{width:100%;height:100%;object-fit:cover}
.cm-add input{flex:1;border:none;border-bottom:1px solid var(--line-2);background:none;padding:9px 2px;font-family:var(--sans);font-size:14px;color:var(--ink);outline:none}
.cm-add input:focus{border-color:var(--accent)}
.cm-add input::placeholder{color:var(--ink-soft)}
.cm-send{border:none;background:var(--btn);color:var(--btn-tx);font-weight:600;font-size:13px;padding:9px 16px;border-radius:999px;cursor:pointer}
.cm-item{display:flex;gap:11px;margin-bottom:16px}
.cm-iav{width:36px;height:36px;border-radius:50%;overflow:hidden;flex:none}
.cm-iav canvas,.cm-iav img{width:100%;height:100%;object-fit:cover}
.cm-name{font-weight:600;font-size:13.5px}
.cm-time{font-size:12px;color:var(--ink-soft);margin-left:6px}
.cm-text{font-size:14px;color:var(--ink-mid);margin-top:2px;line-height:1.45}
.cm-empty{color:var(--ink-soft);font-size:14px}
.cm-login{border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;font-size:13.5px;color:var(--ink-mid);cursor:pointer;margin-bottom:22px;background:var(--bg-2)}
.cm-login:hover{border-color:var(--accent);color:var(--accent)}
.cm-own{margin-top:5px;display:flex;gap:12px}
.cm-own button{background:none;border:none;padding:0;font-size:12px;color:var(--ink-soft);cursor:pointer;font-weight:500}
.cm-own button:hover{color:var(--accent);text-decoration:underline}
.cm-edit{display:flex;gap:8px;margin-top:6px}
.cm-edit input{flex:1;border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;font-family:var(--sans);font-size:13.5px;color:var(--ink);background:var(--card)}


/* NOTIFICATION BELL */
.bell-wrap{position:relative}
.bell{position:relative;width:40px;height:40px;border:1px solid var(--line-2);background:var(--card);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-mid)}
.bell:hover{border-color:var(--accent);color:var(--accent)}
.bell svg{width:19px;height:19px}
.bell-badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;padding:0 4px;background:#d1483a;color:#fff;border-radius:9px;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--card)}
.notif-menu{position:absolute;top:50px;right:0;width:320px;max-width:88vw;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:none;z-index:60;overflow:hidden}
.notif-menu.open{display:block}
.notif-h{font-size:13px;font-weight:600;padding:13px 15px;border-bottom:1px solid var(--line)}
.notif-list{max-height:380px;overflow-y:auto}
.notif-item{display:flex;gap:11px;padding:12px 15px;border-bottom:1px solid var(--line);font-size:13px;align-items:flex-start}
.notif-item:last-child{border-bottom:none}
.notif-item.unread{background:var(--accent-soft)}
.notif-ic{font-size:17px;flex:none;line-height:1.2}
.notif-tx{color:var(--ink);line-height:1.4}
.notif-tt{color:var(--ink-soft);font-size:11.5px;margin-top:3px}
.notif-empty{padding:26px 15px;text-align:center;color:var(--ink-soft);font-size:13px}

/* TOAST */
.toast{position:fixed;bottom:66px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:10px;font-size:13.5px;font-weight:500;opacity:0;pointer-events:none;transition:.3s;z-index:90;box-shadow:var(--shadow)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast b{color:#8fe3c4}

/* AUTH SCREEN */
.auth{position:fixed;inset:0;z-index:200;background:var(--bg);display:none;align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.auth.open{display:flex}
.auth-card{position:relative;width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px 28px 26px;box-shadow:var(--shadow)}
.auth-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:none;background:var(--bg-2);border-radius:50%;color:var(--ink-mid);font-size:14px;cursor:pointer}
.auth-close:hover{color:var(--ink)}
.auth-brand{font-size:22px;font-weight:600;letter-spacing:.02em;display:flex;align-items:center;gap:9px;margin-bottom:22px}
.auth-title{font-size:21px;font-weight:600;letter-spacing:-.01em}
.auth-sub{font-size:13.5px;color:var(--ink-soft);margin:6px 0 20px;line-height:1.45}
.auth input{width:100%;border:1px solid var(--line-2);border-radius:11px;padding:12px 14px;font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--card);outline:none;margin-bottom:11px}
.auth input:focus{border-color:var(--ink)}
.auth-err{color:#d1483a;font-size:12.5px;min-height:16px;margin-bottom:8px}
.auth-submit{width:100%;padding:13px;border:none;border-radius:11px;background:var(--btn);color:var(--btn-tx);font-size:14.5px;font-weight:600;cursor:pointer}
.auth-submit:hover{background:var(--btn-hover)}
.auth-switch{text-align:center;font-size:13px;color:var(--ink-soft);margin-top:16px;cursor:pointer}
.auth-switch b{color:var(--accent)}
.auth-note{font-size:11.5px;color:var(--ink-soft);line-height:1.5;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}

/* SCRIM + BOTBAR + RESPONSIVE */
.scrim{position:fixed;inset:0;background:rgba(10,9,14,.45);z-index:39;display:none}
.scrim.show{display:block}
@media(min-width:961px){.scrim{display:none!important}}
.botbar{display:none}
@media(max-width:640px){
  .top{padding:0 12px;gap:10px}
  .feed{padding:16px 15px 96px}
  .watch{padding:14px 15px 96px}
  .studio{padding:16px 15px 96px;max-width:none}
  .settings{padding:16px 15px 96px;max-width:none}

  /* Barre du bas façon YouTube */
  .botbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:70;background:var(--card);border-top:1px solid var(--line);height:56px;padding-bottom:env(safe-area-inset-bottom)}
  .botbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:none;color:var(--ink-mid);font-size:10px;font-weight:500;cursor:pointer}
.botbar button.on{color:var(--ink)}
  .botbar .bic{font-size:23px;line-height:1}
  .botbar .bpub{font-size:0}
  .botbar .bpub .bic{width:40px;height:40px;border-radius:50%;background:var(--bg-2);border:1px solid var(--line-2);color:var(--ink);font-size:27px;font-weight:300;margin-top:0;box-shadow:none;display:flex;align-items:center;justify-content:center}

  /* Fil : vignettes arrondies comme sur PC */
  .grid{gap:22px 16px}

  .notif-menu{position:fixed;top:var(--top);right:6px;left:6px;width:auto;max-width:none}
  .chips{padding:11px 15px}
  .search input,.cm-add input{font-size:16px}
  .modal input[type=text],.modal textarea,.modal select{font-size:16px}

  /* Page chaîne — mobile épuré */
  .banner{height:120px}
  .ch-head{flex-direction:row;flex-wrap:wrap;align-items:center;gap:13px;padding:14px 16px 0}
  .ch-bigav{width:78px;height:78px;margin-top:-22px}
  .ch-id{flex:1;min-width:0;padding-bottom:0}
  .ch-id h1{font-size:20px}
  .ch-about{padding:10px 16px 0}
  .ch-about .cat{font-size:12.5px}
 .ch-about .bio{font-size:14px;color:var(--ink-mid);margin-top:6px;max-width:60ch;white-space:pre-line;overflow-wrap:break-word}

  /* Compteurs minimalistes : une seule ligne */
  .ch-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;padding:12px 16px 0;margin:0;border-bottom:none}
  .ch-stats>div{display:flex;align-items:baseline;gap:4px}
  .ch-stats>div:not(:first-child){margin-left:10px}
  .ch-stats>div:not(:first-child)::before{content:"·";color:var(--line-2);margin-right:10px}
  .ch-stats .k{font-size:13px;font-weight:600}
  .ch-stats .l{font-size:13px;color:var(--ink-soft)}

  /* Bouton S'abonner (visiteur) : pleine largeur sous le nom */
  .ch-actions{width:100%;justify-content:flex-start;gap:8px;padding:12px 16px 0}
  .ch-actions button{flex:0 0 auto;padding:9px 20px;font-size:13.5px;border-radius:999px}
  .ch-posts{padding:18px 16px 0}


  .studio-top .st-title{font-size:20px}
  .studio .rev{margin:14px 0 0}
  .studio .monet{margin:14px 0 0;flex-direction:column;align-items:flex-start;gap:12px}
  .studio-actions{width:100%}
  .modal{padding:22px}
  .w-title{font-size:20px}
  .w-bar{padding:13px 0}
}
.letter-av{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;line-height:1;text-transform:uppercase}
.chbelow{padding:16px 26px 4px}
@media(max-width:640px){
  .chbelow{padding:12px 16px 4px}
  .chbelow button{padding:7px 15px;font-size:12.5px;background:transparent;color:var(--ink-mid);border-color:var(--line-2)}
    /* Menu du profil : panneau en bas, au-dessus de la barre */
  .usermenu{position:fixed;top:auto;bottom:calc(66px + env(safe-area-inset-bottom));right:8px;left:8px;width:auto;min-width:0;box-shadow:0 -8px 30px -12px rgba(24,22,52,.4)}
}

.ch-info-btn{width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);color:var(--ink-mid);font-size:12px;font-style:italic;font-weight:700;cursor:pointer;vertical-align:middle;margin-left:8px;line-height:1}
.ch-info-btn:hover{border-color:var(--accent);color:var(--accent)}
.link-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.link-pill{display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px;color:#fff;font-size:13px;font-weight:600;text-decoration:none}
.link-pill:hover{filter:brightness(1.08)}
.link-edit{display:flex;gap:8px;margin-bottom:8px}
.link-edit input{flex:1}
.link-x{width:40px;border:1px solid var(--line-2);background:var(--card);border-radius:9px;color:var(--ink-mid);cursor:pointer}
.link-x:hover{border-color:#d1483a;color:#d1483a}
/* @ (handle) de chaîne */
.ch-id .ch-handle{font-size:14px;color:var(--ink-soft);margin-top:2px;font-weight:500}
.handle-field{display:flex;align-items:center;gap:4px;border:1px solid var(--line-2);border-radius:9px;padding:0 12px;background:var(--card);margin-top:2px}
.handle-field span{color:var(--ink-soft);font-weight:700}
.modal .handle-field input[type=text]{border:none;border-radius:0;padding:11px 0;width:auto;flex:1}
.handle-hint{font-size:12px;color:var(--ink-soft);margin-top:6px;line-height:1.4}

/* Résultats de recherche — chaînes */
.chan-results{margin-bottom:22px}
.chan-results-h{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin:0 2px 10px}
.chan-results-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.chan-card{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 13px;cursor:pointer;transition:box-shadow .15s}
.chan-card:hover{box-shadow:var(--shadow)}
.chan-card .cc-av{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none}
.chan-card .cc-av canvas,.chan-card .cc-av img{width:100%;height:100%;object-fit:cover}
.chan-card .cc-name{font-weight:600;font-size:14.5px;line-height:1.2}
.chan-card .cc-meta{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
/* Le badge lui-même : la taille est gérée ici, la couleur suit l'accent */
.verif{
  width:20px;
  height:20px;
  flex:none;
  color:var(--verif); /* bleu #1877F2 en clair, #4DA3FF en sombre */
}


/* Alignement parfait du nom + badge sur la page chaîne */
.ch-id h1{display:inline-flex;align-items:center;gap:7px}

/* Alignement + badge plus petit dans les résultats de recherche */
.cc-name .verif{width:15px;height:15px;vertical-align:-2px;margin-left:4px}

/* Tirer pour rafraîchir (mobile) */
#ptr{position:fixed;top:calc(var(--top) + 8px);left:50%;transform:translateX(-50%) scale(.6);width:40px;height:40px;border-radius:50%;background:var(--card);border:1px solid var(--line);box-shadow:0 8px 22px -8px rgba(24,22,52,.4);display:flex;align-items:center;justify-content:center;opacity:0;z-index:65;pointer-events:none;transition:opacity .2s,border-color .2s}
#ptr .ptr-svg{width:22px;height:22px;display:block}
#ptr .ptr-track{fill:none;stroke:var(--line-2);stroke-width:2.5}
#ptr .ptr-arc{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:56.5;stroke-dashoffset:56.5;transform-origin:12px 12px;transform:rotate(-90deg);transition:stroke-dashoffset .05s linear}
#ptr.ready{border-color:var(--accent)}
#ptr.spin{opacity:1 !important}
#ptr.spin .ptr-svg{animation:ptrspin .8s linear infinite}
#ptr.spin .ptr-arc{stroke-dashoffset:14 !important;transition:none}
@keyframes ptrspin{to{transform:rotate(360deg)}}

/* ---- Multi-comptes (menu profil) ---- */
#umAccounts { display: flex; flex-direction: column; }
.um-swacct {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px; border: 0; background: none;
  cursor: pointer; text-align: left; border-radius: 10px;
  color: inherit; font-size: 14px;
}
.um-swacct:hover { background: var(--accent-soft); }
.um-swav { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none; }
.um-swav img { width: 100%; height: 100%; object-fit: cover; display: block; }
.um-swav .letter-av { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.um-swname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-add {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 12px; border: 0; background: none;
  cursor: pointer; text-align: left; color: var(--ink);
  font-size: 14px; font-weight: 600; border-radius: 10px;
}
.um-add:hover { background: var(--bg-2); }
.um-add-ic {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-2); color: var(--ink); font-size: 15px;
}


/* ===== STUDIO (design plat) ===== */
#studioView .su-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.su-h1{font-size:23px;font-weight:800;letter-spacing:-.02em}
.su-sub{color:var(--ink-soft);font-size:14px;margin-top:3px}
.su-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.su-kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.su-l{font-size:12.5px;color:var(--ink-soft);font-weight:600}
.su-v{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:6px}
.su-note{font-size:11.5px;color:var(--ink-soft);margin-top:4px}
.su-g21{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.su-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.su-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px 20px;min-width:0}
.su-card-h{margin-bottom:14px}
.su-card-h h3{font-size:15.5px}
.su-sub2{font-size:12.5px;color:var(--ink-soft);display:block;margin-top:2px}
.su-chart{position:relative;height:280px}
.su-chart.short{height:220px}
.su-health{display:flex;flex-direction:column}
.su-gauge{--val:0;position:relative;width:146px;height:146px;margin:2px auto 14px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--val)*1%),var(--accent-soft) 0)}
.su-gauge::after{content:"";position:absolute;inset:14px;background:#fff;border-radius:50%}
.su-gm{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.su-gm b{font-size:33px;font-weight:800;line-height:1}
.su-gm i{font-size:12px;color:var(--ink-soft);font-style:normal;margin-top:2px}
.su-checks{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:auto;padding:0}
.su-checks li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft)}
.su-checks li span{width:9px;height:9px;border-radius:50%;flex:none}
.su-checks li.ok span{background:#0CA30C}
.su-checks li.warn span{background:#E8A400}
/* ===== STUDIO Mes œuvres (liste pro) ===== */
.wl{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.wl-row{display:flex;align-items:center;gap:16px;padding:14px 18px}
.wl-row+.wl-row{border-top:1px solid var(--line)}
.wl-row:hover{background:rgba(91,75,230,.04)}
.wl-thumb{width:78px;height:54px;border-radius:9px;flex:none;overflow:hidden;display:block;cursor:pointer;background:var(--accent-soft)}
.wl-thumb img,.wl-thumb canvas{width:100%;height:100%;object-fit:cover;display:block}
.wl-work{flex:1;min-width:0;cursor:pointer}
.wl-title{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-sub{font-size:12.5px;color:var(--ink-soft);margin-top:4px;display:flex;align-items:center;gap:8px}
.wl-tag{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.wl-tag.priv{background:var(--line);color:var(--ink-soft)}
.wl-nums{display:flex;gap:10px;flex:none}
.wl-n{text-align:right;min-width:62px;padding:4px 0}
.wl-n b{font-size:16px;font-weight:700;display:block;font-variant-numeric:tabular-nums;line-height:1.1}
.wl-n i{font-size:11px;color:var(--ink-soft);font-style:normal}
.wl-act{display:flex;align-items:center;gap:8px;flex:none}
.wl-btn{border:1px solid var(--line);background:#fff;color:var(--ink,#1A1926);font-weight:600;font-size:13px;padding:8px 15px;border-radius:9px;cursor:pointer;font-family:inherit;white-space:nowrap}
.wl-btn:hover{border-color:var(--accent);color:var(--accent)}
.wl-del{width:37px;height:37px;flex:none;border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer;color:var(--ink-soft);display:grid;place-items:center}
.wl-del svg{width:17px;height:17px}
.wl-del:hover{border-color:#D03B3B;color:#D03B3B;background:#FBE9E9}
@media(max-width:760px){
  .wl-row{flex-wrap:wrap;gap:12px 14px;padding:14px}
  .wl-thumb{width:68px;height:50px}
  .wl-work{flex:1 1 120px}
  .wl-nums{order:3;flex:1 1 100%;gap:0;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px}
  .wl-n{text-align:left;min-width:0;padding:0}
  .wl-act{order:4;flex:1 1 100%;flex-wrap:wrap}
  .wl-btn{flex:1 1 42%}
  .wl-del{margin-left:auto}
}
.su-unlock{background:var(--accent-soft);border:1px solid #DED8FA;border-radius:16px;padding:22px 24px;margin-bottom:20px}
.su-unlock-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.su-unlock-title{display:flex;align-items:center;gap:14px}
.su-lock{width:48px;height:48px;border-radius:14px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:21px;flex:none}
.su-unlock-title h2{font-size:18px}
.su-unlock-title p{font-size:13.5px;color:var(--ink-mid,#5A5867);margin-top:3px;max-width:56ch}
.su-meter{display:flex;align-items:baseline;gap:7px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 18px}
.su-meter b{font-size:26px;font-weight:800;color:var(--accent)}
.su-meter i{font-size:12.5px;color:var(--ink-soft);font-style:normal}
.su-up{margin-bottom:18px}
.su-up-l{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft);margin-bottom:8px;font-weight:600}
.su-up-l b{color:var(--accent)}
.su-bar{height:9px;border-radius:999px;background:#fff;overflow:hidden;border:1px solid var(--line)}
.su-bar.big{height:12px}
.su-bar span{display:block;height:100%;background:var(--accent);border-radius:999px}
.su-objs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.su-obj{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px}
.su-obj-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.su-obj-ic{width:36px;height:36px;border-radius:11px;background:var(--accent-soft);display:grid;place-items:center;font-size:17px}
.su-obj-step{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.su-obj-name{font-size:14.5px;font-weight:700;margin-bottom:11px}
.su-obj .su-bar{height:8px}
.su-obj-foot{display:flex;align-items:center;justify-content:space-between;margin-top:11px}
.su-obj-val{font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.su-obj-left{font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:3px 9px;border-radius:999px}
.su-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:700;margin:22px 0 12px}
.su-rewards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px}
.su-rt{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px 18px}
.su-rt-k{font-size:25px;font-weight:800;display:block}
.su-rt-l{font-size:12.5px;color:var(--ink-soft);display:block;margin-top:5px}
.su-perks{list-style:none;display:flex;flex-direction:column;padding:0}
.su-perks li{display:flex;align-items:center;gap:12px;padding:12px 4px}
.su-perks li+li{border-top:1px solid var(--line)}
.su-p-ic{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;font-size:18px;flex:none}
.su-perks b{font-size:14px;display:block}
.su-perks i{font-size:12.5px;color:var(--ink-soft);font-style:normal}
.su-act{flex-wrap:wrap}
.ep-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;cursor:pointer}
.ep-switch span b{display:block;font-size:14px}
.ep-switch span i{display:block;font-size:12.5px;color:var(--ink-soft);font-style:normal;margin-top:2px}
.ep-switch input{width:18px;height:18px;accent-color:var(--accent);flex:none}

/* ===== STUDIO Communauté ===== */
.su-comments,.su-fans{list-style:none;display:flex;flex-direction:column;padding:0}
.su-comments li{display:flex;gap:12px;padding:14px 4px}
.su-comments li+li,.su-fans li+li{border-top:1px solid var(--line)}
.su-cav{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;display:block}
.su-cav img{width:100%;height:100%;object-fit:cover;display:block}
.su-cav .letter-av{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.su-cbody{flex:1;min-width:0}
.su-cbody p{font-size:13px;color:var(--ink-soft)}
.su-cbody p b{color:var(--ink)}
.su-cbody p i{font-style:normal;color:var(--accent);cursor:pointer}
.su-ctext{font-size:14px;display:block;margin-top:3px}
.su-comments time{margin-left:auto;font-size:12px;color:var(--ink-soft);white-space:nowrap}
.su-fans li{display:flex;align-items:center;gap:12px;padding:12px 4px}
.su-fans div{flex:1;min-width:0}
.su-fans b{font-size:14px;display:block}
.su-fans i{font-size:12px;color:var(--ink-soft);font-style:normal}
.su-rank{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}

/* ===== STUDIO Tableau de bord (résumé) ===== */
.su-link{border:0;background:none;color:var(--accent);font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;white-space:nowrap}
.su-link:hover{color:var(--accent-dark)}
.dash-top{list-style:none;display:flex;flex-direction:column;padding:0;margin:0}
.dash-top li{display:flex;align-items:center;gap:12px;padding:9px 2px;cursor:pointer}
.dash-top li+li{border-top:1px solid var(--line)}
.dash-top li:hover{background:rgba(91,75,230,.04)}
.dt-rank{width:20px;font-weight:800;color:var(--ink-soft);font-size:13px;text-align:center;flex:none}
.dt-thumb{width:54px;height:38px;border-radius:8px;flex:none;overflow:hidden;background:var(--accent-soft)}
.dt-thumb img,.dt-thumb canvas{width:100%;height:100%;object-fit:cover;display:block}
.dt-info{flex:1;min-width:0}
.dt-info b{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-info i{font-size:12px;color:var(--ink-soft);font-style:normal}
.dt-val{font-size:13px;font-weight:600;color:var(--ink-mid,#5A5867);font-variant-numeric:tabular-nums;white-space:nowrap}
.mini-goals{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.mg>span{font-size:13px;color:var(--ink-mid,#5A5867);display:block;margin-bottom:7px}
.dash-comments{list-style:none;display:flex;flex-direction:column;padding:0;margin:0}
.dash-comments li{display:flex;align-items:center;gap:11px;padding:11px 2px}
.dash-comments li+li{border-top:1px solid var(--line)}
.dash-comments p{font-size:13.5px;color:var(--ink,#1A1926);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-comments p .on-work{color:var(--accent);font-style:normal;cursor:pointer}
.dash-comments time{margin-left:auto;font-size:12px;color:var(--ink-soft);white-space:nowrap;flex:none}

.auth-forgot{text-align:center;font-size:12.5px;color:var(--ink-soft);margin-top:10px;cursor:pointer}
.auth-forgot:hover{color:var(--accent)}
.modal input[type=password]{width:100%;border:1px solid var(--line-2);border-radius:9px;padding:11px 13px;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--card);outline:none}
.modal input[type=password]:focus{border-color:var(--ink)}
.modal input[type=password]{width:100%;border:1px solid var(--line-2);border-radius:9px;padding:11px 13px;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--card);outline:none}
.modal input[type=password]:focus{border-color:var(--ink)}

.banner.banned{filter:grayscale(1) brightness(.65)}
.ch-banned{background:#FBE9E9;color:#B02A2A;border:1px solid #F1C9C9;border-radius:12px;padding:12px 16px;margin:14px 16px 0;font-size:13.5px;font-weight:600;text-align:center}
.ch-ban-badge{font-size:11px;font-weight:700;background:#FBE9E9;color:#B02A2A;padding:2px 9px;border-radius:999px;vertical-align:middle}

.verify-banner{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;background:#FFF6E0;color:#7A5A00;border-bottom:1px solid #F0D98A;padding:10px 18px;font-size:14px;font-weight:600}
.verify-banner button{background:var(--btn);color:var(--btn-tx);border:none;border-radius:8px;padding:6px 14px;font-weight:700;cursor:pointer;font-family:inherit}
.verify-banner button:disabled{opacity:.5;cursor:default}
body.dark .verify-banner{background:#2A2410;color:#E8C766;border-color:#4A3F1A}
.side-foot{margin-top:18px;padding:14px 4px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.side-foot a{font-size:12.5px;color:var(--ink-soft);text-decoration:none}
.side-foot a:hover{color:var(--accent)}
.side-foot-c{font-size:12px;color:var(--ink-soft);opacity:.7;margin-top:4px}
.brand{font-family:"Boldonse",var(--sans);font-size:17px;font-weight:400;letter-spacing:.01em;display:flex;align-items:center;gap:8px;cursor:pointer}

.mention{color:var(--accent);font-weight:600;text-decoration:none;cursor:pointer}
.mention:hover{text-decoration:underline}
.mention-pop{position:absolute;z-index:9999;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px -14px rgba(0,0,0,.3);max-height:280px;overflow-y:auto;min-width:220px}
body.dark .mention-pop{background:#1b1a24;border-color:#2c2b38}
.mention-it{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer}
.mention-it:hover{background:rgba(91,75,230,.08)}
.mention-it img,.mention-av .letter-av{width:28px;height:28px;border-radius:50%;object-fit:cover}
.mention-av{width:28px;height:28px;flex:none}
.mention-nm{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.mention-nm b{font-size:13px}
.mention-nm i{font-size:11px;color:var(--ink-soft);font-style:normal}

/* ===== Co-auteurs (publication) ===== */
.coauth-field { border: 1px solid var(--line); border-radius: 10px; padding: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.coauth-field input { border: none; outline: none; background: transparent; flex: 1; min-width: 140px; padding: 4px 6px; color: inherit; font: inherit; }
.coauth-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(91,75,230,.10); border-radius: 999px; padding: 3px 8px 3px 4px; font-size: 13px; }
.coauth-chip img, .coauth-chip .letter-av { width: 20px !important; height: 20px !important; border-radius: 50%; object-fit: cover; }
.coauth-chip b { font-weight: 600; }
.coauth-chip button { border: none; background: none; cursor: pointer; color: var(--ink-soft); font-size: 12px; padding: 0 2px; line-height: 1; }
.coauth-chip button:hover { color: #e33; }
body.dark .coauth-field { border-color: #2c2b38; }
/* ===== Co-auteurs (affichage) ===== */
.au-avs { display: inline-flex; align-items: center; }
.au-av { display: inline-block; border-radius: 50%; overflow: hidden; margin-left: -10px; box-shadow: 0 0 0 2px var(--card, #fff); flex: none; }
.au-av:first-child { margin-left: 0; }
.au-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.au-av .letter-av { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
body.dark .au-av { box-shadow: 0 0 0 2px #14131b; }
#wAv:has(.au-avs) { width: auto !important; height: auto !important; border-radius: 0 !important; overflow: visible !important; background: none !important; }
.vid-av:has(.au-avs) { width: auto !important; height: auto !important; border-radius: 0 !important; overflow: visible !important; }
.invite-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; background: rgba(91,75,230,.10); border: 1px solid rgba(91,75,230,.35); border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; }
.invite-acts { display: flex; gap: 8px; }
.invite-acts button { padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; border: 1px solid var(--line); background: var(--card, #fff); }
.invite-acts button.primary { background: var(--btn); color: var(--btn-tx); border-color: transparent; }
body.dark .invite-acts button { background: #1b1a24; border-color: #2c2b38; color: inherit; }

/* ===== Publication plein écran (assistant par étapes) ===== */
.pf { position: fixed; inset: 0; z-index: 200; background: var(--card, #fff); display: flex; flex-direction: column; }
.pf-top { display: flex; align-items: center; gap: 14px; padding: 0 20px; height: 60px; border-bottom: 1px solid var(--line); flex: none; }
.pf-logo { display: flex; align-items: center; gap: 3px; font-weight: 800; font-size: 20px; letter-spacing: -.03em; }
.pf-dot { width: 1.18em; height: 1.41em; border-radius: 0; background: url('/icon-twalart.png') center/contain no-repeat; margin-top: 0; }
.pf-ttl { font-weight: 700; font-size: 15px; color: var(--ink-soft); }
.pf-close { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-size: 16px; cursor: pointer; }
.pf-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; max-width: 920px; margin: 0 auto; padding: 20px 24px; }
.pf-prog { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex: none; }
.pf-st { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.pf-st .n { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 12px; }
.pf-st.on .n { border-color: var(--accent); background: var(--accent); color: #fff; }
.pf-st.done .n { border-color: var(--accent); background: rgba(91,75,230,.14); color: var(--accent); }
.pf-bar { flex: 1; height: 2px; background: var(--line); border-radius: 2px; }
.pf-body { flex: 1; min-height: 0; overflow: auto; }
.pf-step { display: none; }
.pf-step.active { display: block; animation: pfFade .2s ease; }
@keyframes pfFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pf-h { font-size: 21px; letter-spacing: -.02em; margin: 0 0 3px; }
.pf-sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 16px; }
.pf-imgs { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 16px; align-items: start; }
.pf-cover { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; max-height: 42vh; background: rgba(120,120,140,.08); display: grid; place-items: center; }
.pf-cover.empty { border: 2px dashed var(--line); color: var(--ink-soft); font-size: 14px; }
.pf-cover img { width: 100%; height: 100%; object-fit: cover; }
.pf-covtag { position: absolute; top: 12px; left: 12px; background: rgba(20,18,30,.8); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; }
.pf-rail { display: flex; flex-direction: column; gap: 9px; }
.pf-thumb { position: relative; width: 150px; height: 150px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; }
.pf-thumb.on { border-color: var(--accent); }
.pf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-thumb .x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(20,18,30,.8); color: #fff; font-size: 10px; cursor: pointer; opacity: 0; }
.pf-thumb:hover .x { opacity: 1; }
.pf-add { width: 150px; height: 150px; border-radius: 10px; border: 2px dashed #ccc5e6; background: rgba(91,75,230,.05); color: var(--accent); font-size: 26px; display: grid; place-items: center; cursor: pointer; }
.pf-add:hover { background: rgba(91,75,230,.1); }
.pf-hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 12px; }
.pf-hint b { color: var(--accent); }
.pf-fld { margin-bottom: 16px; }
.pf-fld label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.pf-lblrow { display: flex; justify-content: space-between; align-items: baseline; }
.pf-cnt { font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.pf-fld input[type=text], .pf-fld textarea, .pf-fld select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; font: inherit; color: inherit; background: rgba(120,120,140,.06); outline: none; }
.pf-fld input[type=text]:focus, .pf-fld textarea:focus, .pf-fld select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(91,75,230,.12); }
.pf-fld textarea { resize: none; min-height: 88px; line-height: 1.5; }
.pf-opt { font-weight: 500; color: var(--ink-soft); font-size: 13px; }
.pf-priv { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; margin-top: 16px; }
.pf-priv input { width: 17px; height: 17px; accent-color: var(--accent); }
.pf-final { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 22px; align-items: start; }
.pf-prevlbl { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.pf-prevcard { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pf-prevthumb { aspect-ratio: 16/10; background-color: rgba(120,120,140,.12); background-size: cover; background-position: center; position: relative; }
.pf-prevthumb .v { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 6px; }
.pf-prevrow { display: flex; gap: 9px; padding: 10px; }
.pf-prevt { font-weight: 700; font-size: 14px; line-height: 1.3; }
.pf-prevm { color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
.pf-err { color: #e33; font-size: 13px; text-align: right; padding: 4px 0; display: none; }
.pf-foot { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); flex: none; }
.pf-count { font-size: 13px; color: var(--ink-soft); }
.pf-sp { flex: 1; }
.pf-btn { border-radius: 10px; padding: 12px 22px; font-size: 14.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); background: transparent; color: inherit; }
.pf-btn:disabled { opacity: .4; cursor: default; }
.pf-btn.primary { background: var(--btn); color: var(--btn-tx); border-color: transparent; }
.pf-btn.primary:hover { background: var(--btn-hover); }

@media (max-width: 640px) {
  .pf-imgs { grid-template-columns: 1fr; }
  .pf-rail { flex-direction: row; flex-wrap: wrap; }
  .pf-thumb, .pf-add { width: 74px; height: 74px; }
  .pf-final { grid-template-columns: 1fr; }
}

/* ===== Icônes SVG ===== */
.ic-svg { display: inline-block; vertical-align: -4px; flex: none; }
.ic-svg .fill { fill: currentColor; stroke: none; }
/* état actif = icône remplie (cœur, marque-page) */
#likeBtn.on .ic-svg path, #saveBtn.on .ic-svg path { fill: currentColor; }
.notif-ic .ic-svg { color: var(--accent); }

/* Photo de profil dans "Ma chaîne" (barre latérale + barre du bas) */
.nav-ava { display: inline-block; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; vertical-align: middle; }
.nav-ava img, .nav-ava .letter-av { width: 100%; height: 100%; object-fit: cover; }

/* Mobile : on masque Publier + photo de profil en haut (on garde les notifs) */
@media (max-width: 960px) {
  #publishTop,
  #avaTop { display: none !important; }
}


/* PC : barre de recherche centrée au milieu de la page */
@media (min-width: 961px) {
  .top { position: relative; }
  .search {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, 42vw);
    margin: 0;
  }
}

/* Bouton s'abonner (page de chaîne) — aucun effet au survol */
.ch-actions button.sub-ch {
  background:var(--sub);
  color:#fff;
  border-color:var(--sub);
}
.ch-actions button.sub-ch:hover {
  background:var(--sub);
  color:#fff;
  border-color:var(--sub);
  filter:none;
}


/* état abonné : gris discret */
.ch-actions button.sub-ch.done {
  background: var(--bg-2);
  color: var(--ink-mid);
  border-color: var(--line-2);
}
.ch-actions button.sub-ch.done:hover {
  background: var(--bg-2);
  color: var(--ink-mid);
  border-color: var(--line-2);
  filter: none;
}

/* ===== Squelettes de chargement (feed) ===== */
.sk-thumb, .sk-av, .sk-line {
  background: linear-gradient(90deg, rgba(120,120,140,.10) 25%, rgba(120,120,140,.20) 37%, rgba(120,120,140,.10) 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease infinite;
  border-radius: 8px;
}
@keyframes sk-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
.sk-thumb { aspect-ratio: 16 / 10; width: 100%; border-radius: 12px; margin-bottom: 10px; }
.sk-row { display: flex; gap: 10px; }
.sk-av { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }
.sk-line { height: 11px; width: 100%; }
.sk-line.short { width: 55%; }

/* ===== Publicités dans le feed ===== */
.promo-card { position: relative; display: block; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: rgba(120,120,140,.06); }
.promo-card img { width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.promo-tag { position: absolute; top: 8px; left: 8px; background: rgba(20,18,30,.72); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }

#stage{position:relative}
.preroll{position:absolute;inset:0;z-index:5;border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
.preroll-img{position:absolute;inset:0;background-size:cover;background-position:center;display:block}
.preroll-tag{position:absolute;top:10px;left:10px;background:rgba(20,18,30,.72);color:#fff;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:6px}
.preroll-count{position:absolute;bottom:10px;right:10px;min-width:24px;height:24px;display:grid;place-items:center;background:rgba(20,18,30,.72);color:#fff;font-size:12px;font-weight:700;border-radius:50%;padding:0 6px}

.su-enable{border:none;background:var(--money);color:#fff;font-weight:700;font-size:14px;padding:11px 20px;border-radius:999px;cursor:pointer;white-space:nowrap}
.su-enable:hover{filter:brightness(1.05)}

.su-enable{border:none;background:var(--money);color:#fff;font-weight:700;font-size:14px;padding:11px 20px;border-radius:999px;cursor:pointer;white-space:nowrap}
.su-enable:hover{filter:brightness(1.05)}
.mon-list{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:6px}
.mon-row{display:flex;align-items:center;gap:13px;padding:11px 14px}
.mon-row+.mon-row{border-top:1px solid var(--line)}
.mon-th{width:54px;height:38px;border-radius:8px;flex:none;background:var(--bg-2) center/cover no-repeat}
.mon-info{flex:1;min-width:0}
.mon-t{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-m{font-size:12px;color:var(--ink-soft);margin-top:2px}
.mon-sw{position:relative;width:44px;height:24px;flex:none;display:inline-block}
.mon-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.mon-sw span{position:absolute;inset:0;background:var(--line-2);border-radius:999px;transition:.2s}
.mon-sw span::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.mon-sw.on span{background:var(--money)}
.mon-sw.on span::after{transform:translateX(20px)}
.mon-sw input:disabled{cursor:not-allowed;opacity:.6}
.mon-note{font-size:12.5px;color:var(--ink-soft);margin:8px 2px 0}

.wl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.wl-c{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.wl-k{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em}
.wl-l{display:block;font-size:12px;color:var(--ink-soft);margin-top:3px}
.wl-chart-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:6px}
.wl-chart-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.wl-chart-top b{font-size:15px}
.wl-range{display:flex;gap:4px;background:var(--bg-2);border-radius:999px;padding:3px}
.wl-range button{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-mid);padding:6px 12px;border-radius:999px;cursor:pointer}
.wl-range button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.wl-chart-wrap{position:relative;width:100%;height:clamp(200px,30vh,300px);min-width:0}
@media(max-width:640px){.wl-cards{grid-template-columns:1fr}}

.mon-earn{color:var(--money);font-weight:700}
.mon-open{cursor:pointer}
.mon-open:hover .mon-t{color:var(--accent)}
.pr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pr-head h3{font-size:16px}
.pr-x{border:none;background:var(--bg-2);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:14px;color:var(--ink)}
.ad-places{ display:flex; flex-wrap:wrap; gap:6px 16px; }
.pf-brand{ display:inline-flex; align-items:center; cursor:default; }