/* senci — file statis ber-versi (AppSupportAsset::url). Sumber dulu inline: partials/web-auth (style). JANGAN taruh variabel Blade di sini. */
    .auth-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; display:none;
        align-items:center; justify-content:center; }
    .auth-overlay.show{ display:flex; }
    .auth-card{ width:380px; max-width:calc(100vw - 32px); background:var(--card,#fff); color:var(--ink); border-radius:14px; padding:26px 26px 22px; position:relative; }
    .auth-card h3{ margin:0 0 4px; font-size:20px; }
    .auth-card .sub{ color:var(--muted); font-size:13px; margin-bottom:18px; }
    .auth-tabs{ display:flex; gap:20px; margin-bottom:16px; border-bottom:1px solid var(--line); }
    .auth-tabs button{ background:none; border:0; padding:8px 0; font:inherit; font-size:15px; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
    .auth-tabs button.on{ color:var(--red); border-bottom-color:var(--red); font-weight:600; }
    .auth-field{ display:block; width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 13px; font:inherit; font-size:14px; margin-bottom:10px; outline:none;
        background:var(--card,#fff); color:var(--ink); }
    .auth-field::placeholder{ color:var(--muted); }
    .auth-field:focus{ border-color:var(--red); }
    .auth-submit{ width:100%; background:var(--red); color:#fff; border:0; padding:12px; border-radius:22px; font-size:15px; cursor:pointer; margin-top:4px; }
    .auth-submit:disabled{ opacity:.6; }
    .auth-err{ color:#c0392b; font-size:13px; min-height:16px; margin:6px 0 2px; }
    .auth-forgot-row{ display:flex; justify-content:flex-end; margin:-4px 0 0; }
    .auth-link{ background:none; border:0; padding:2px 0; font:inherit; font-size:13px; color:var(--red); cursor:pointer; }
    .auth-link:hover{ text-decoration:underline; }
    .auth-ok{ color:#1c7a3a; }
    :root[data-theme="dark"] .auth-ok{ color:#6fd08c; }
    .auth-close{ position:absolute; top:8px; right:8px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; padding:0;
        font-size:24px; color:var(--muted); cursor:pointer; line-height:1; background:none; border:0; border-radius:50%; }
    .auth-close:hover{ background:var(--soft,#f2f3f5); }
    .auth-card:focus{ outline:0; }
    .auth-card button:focus-visible{ outline:2px solid var(--red); outline-offset:2px; } /* video.blade tak memuat senci-style */
    /* Judul: desktop "Masuk ke senci", HP "Mulai dengan senci" (gaya app Flutter) */
    .ah-m{ display:none; }
    /* HP: modal Masuk/Daftar = layar penuh (inset 0, tanpa radius), judul besar 34px */
    @media(max-width:760px){
        #authOverlay{ align-items:stretch; justify-content:stretch; }
        #authOverlay .auth-card{ position:fixed; inset:0; width:auto; max-width:none; border-radius:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
            overscroll-behavior:contain; padding:calc(72px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)); }
        #authOverlay .auth-close{ top:calc(10px + env(safe-area-inset-top)); left:10px; right:auto; width:44px; height:44px; font-size:30px; color:var(--ink); }
        #authOverlay h3{ font-size:34px; line-height:1.15; font-weight:800; letter-spacing:-.5px; margin:0 0 10px; }
        #authOverlay h3 .ah-d{ display:none; } #authOverlay h3 .ah-m{ display:inline; }
        #authOverlay .sub{ font-size:14.5px; margin-bottom:26px; }
        #authOverlay .auth-field{ padding:14px 15px; font-size:16px; border-radius:10px; }
        #authOverlay .auth-submit{ padding:15px; font-size:16px; font-weight:700; border-radius:26px; }
    }
    /* Interest picker (wizard 3 langkah) */
    .int-card{ width:580px; max-width:calc(100vw - 32px); max-height:88vh; display:flex; flex-direction:column; }
    .int-steps{ display:flex; gap:6px; margin:2px 0 14px; }
    .int-steps i{ flex:1; height:4px; border-radius:3px; background:var(--line); }
    .int-steps i.on{ background:var(--red); }
    .int-chips{ overflow-y:auto; margin:2px -4px 14px; padding:2px 4px; flex:1; }
    .int-grp{ font-size:12px; color:var(--muted); margin:14px 4px 10px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
    .int-grp:first-child{ margin-top:2px; }
    .int-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; }
    .int-chip{ display:flex; flex-direction:column; align-items:center; gap:7px; border:1px solid var(--line); width:100%; background:none; font:inherit; color:inherit;
        border-radius:12px; padding:12px 8px; cursor:pointer; user-select:none; text-align:center; position:relative; transition:border-color .12s, background .12s; }
    .int-chip:hover{ border-color:#d5d6da; }
    .int-chip.on{ background:var(--red-soft,rgba(232,68,59,.12)); border-color:var(--red); }
    .int-chip .lbl{ font-size:13px; color:var(--ink); line-height:1.2; }
    .int-chip.on .lbl{ color:var(--red); font-weight:600; }
    .int-ava{ position:relative; width:52px; height:52px; border-radius:50%; overflow:hidden; display:flex;
        align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18px; }
    .int-ava img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .int-chip .tick{ position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:50%;
        background:var(--red); color:#fff; font-size:11px; line-height:18px; text-align:center; display:none; }
    .int-chip.on .tick{ display:block; }
    .int-foot{ display:flex; align-items:center; gap:10px; }
    .int-foot .spacer{ flex:1; }
    .int-back{ background:none; border:0; color:var(--muted); font:inherit; font-size:14px; cursor:pointer; padding:8px 4px; }
    .int-skip{ background:none; border:0; color:var(--muted); font:inherit; font-size:13px; cursor:pointer; }
    .int-next{ background:var(--red); color:#fff; border:0; padding:11px 26px; border-radius:22px; font-size:15px; font-weight:600; cursor:pointer; }
    .int-next:disabled{ opacity:.5; cursor:default; }
    .int-count{ font-size:12.5px; color:var(--muted); }
    /* Google sign-in */
    .gsi-wrap{ display:flex; justify-content:center; margin:2px 0 14px; min-height:40px; }
    .auth-or{ display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12.5px; margin:0 0 14px; }
    .auth-or::before, .auth-or::after{ content:''; flex:1; height:1px; background:var(--line); }
    /* Avatar + menu user */
    .senci-avatar{ background:var(--red)!important; border:0!important; padding:0!important; width:36px!important; height:36px;
        min-width:0!important; border-radius:50%; overflow:hidden; position:relative; display:inline-flex!important;
        align-items:center; justify-content:center; line-height:0; vertical-align:middle; }
    .senci-avatar svg{ width:36px; height:36px; display:block; }
    .ava-ini{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; letter-spacing:0; }
    .senci-avatar .ava-ini{ font-size:15px; }
    .um-ava .ava-ini{ font-size:18px; }
    .senci-avatar img, .um-ava img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    #userMenu{ position:absolute; z-index:300; background:var(--card); border:1px solid var(--line); border-radius:12px;
        box-shadow:0 10px 34px rgba(0,0,0,.16); min-width:210px; padding:8px; display:none; }
    #userMenu.show{ display:block; }
    #userMenu .um-head{ display:flex; align-items:center; gap:10px; padding:8px 12px 12px; border-bottom:1px solid var(--line); margin-bottom:6px; text-decoration:none; }
    #userMenu .um-ava{ width:40px; height:40px; border-radius:50%; overflow:hidden; flex:none; background:var(--red);
        position:relative; display:inline-flex; align-items:center; justify-content:center; line-height:0; }
    #userMenu .um-ava img{ width:100%; height:100%; object-fit:cover; }
    #userMenu .um-ava svg{ width:40px; height:40px; display:block; }
    #userMenu .um-info{ min-width:0; }
    #userMenu .um-head b{ display:block; font-size:14px; color:var(--ink); }
    #userMenu .um-head span{ font-size:12px; color:var(--muted); word-break:break-all; }
    #userMenu .um-head:hover b{ color:var(--red); }
    #userMenu a,#userMenu button.um-item{ display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; background:none; border:0;
        padding:9px 12px; border-radius:8px; font:inherit; font-size:14px; color:var(--ink); cursor:pointer; text-decoration:none; text-align:left; }
    #userMenu a:hover,#userMenu button.um-item:hover{ background:var(--soft,var(--line)); }
    #userMenu a.logout{ color:#c0392b; }
    :root[data-theme="dark"] #userMenu{ box-shadow:0 10px 34px rgba(0,0,0,.5); }