/* ===== CAL brand, library, 3-tab bar ===== */
.brand{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 6px;border-radius:999px;background:var(--cream);text-decoration:none;
 box-shadow:0 6px 14px var(--sh-d),inset 0 2px 0 var(--sh-l),inset 0 -2px 0 rgba(214,160,140,.25)}
.brand img{width:32px;height:32px;display:block;animation:brandspin 24s linear infinite;will-change:transform}
.brand b{font-family:"Playfair Display","DM Serif Display",Georgia,serif;font-weight:700;font-size:22px;letter-spacing:2px;color:var(--rose);line-height:1}
.brand.lg{height:52px;padding:0 20px 0 8px;gap:12px}
.brand.lg img{width:38px;height:38px}
.brand.lg b{font-size:26px}
.hero:not(.small) h1{padding-top:24px}
@keyframes brandspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.brand img{animation:none!important}}
/* tab bar: three tabs, only the active one shows its label */
.tabbar a{min-width:56px;padding:0 16px}
.tabbar a span{display:none;white-space:nowrap}
.tabbar a.on{padding:0 24px}
.tabbar a.on span{display:inline}
/* library */
.chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0;padding:4px;border-radius:999px;background:#fdeee4;box-shadow:inset 3px 3px 8px rgba(205,140,120,.25),inset -3px -3px 8px rgba(255,255,255,.9)}
.chip{height:44px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-family:inherit;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.chip b{font-weight:600;font-size:13px;opacity:.85}
.chip.on{background:linear-gradient(180deg,#fff,var(--cream));color:var(--rose-d);box-shadow:0 4px 12px var(--sh-d),inset 0 2px 0 var(--sh-l)}
.storage{font-size:13px;line-height:20px;color:var(--muted);margin:0 0 16px}
.lib-empty{padding:24px 8px;text-align:center;color:var(--muted);font-size:15px;line-height:22px}
.lgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lthumb{position:relative;border-radius:20px;overflow:hidden;cursor:zoom-in;line-height:0;background:#2a1520;box-shadow:0 8px 16px var(--sh-d);border:3px solid #fff;outline-offset:3px}
.lthumb img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:transform .15s}
.lgrid.vids{grid-template-columns:1fr}
.lthumb.v img{aspect-ratio:16/9}
.lthumb:active img{transform:scale(.98)}
.lthumb .play{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(255,244,234,.92);color:var(--rose);display:grid;place-items:center;font-size:18px;line-height:1;padding-left:3px;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.lthumb .meta{position:absolute;left:8px;bottom:8px;max-width:60%;padding:0 8px;height:24px;line-height:24px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:12px;font-weight:600}
.lthumb .iconbtn{position:absolute;right:8px;background:rgba(255,244,234,.94);text-decoration:none;line-height:0}
.lthumb .libdel{top:8px;color:var(--rose-d)}
.lthumb .libdl{bottom:8px}
.lib-note{margin-top:16px}
.lib-clear{margin-top:16px;width:100%}
/* confirm sheet */
.cf{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center;padding:16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));background:rgba(58,22,40,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:rise .2s both}
.cf-card{width:min(100%,420px);background:linear-gradient(180deg,var(--cream),var(--cream2));border-radius:30px;padding:24px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.cf-card h2{margin:0 0 8px}
.cf-card p{margin:0 0 24px;color:var(--muted);font-size:15px;line-height:22px}
.cf-card .btn{margin:0}
.cf-card .ghost{display:flex;width:100%;margin-top:8px}
.btn.danger{background:linear-gradient(180deg,#d6577a,#a93457)}
/* ===== accounts / admin ===== */
.hero-right{display:flex;align-items:center;gap:8px}
.who{display:inline-flex;align-items:center;height:44px;max-width:140px;padding:0 16px;border-radius:999px;background:var(--cream);color:var(--rose-d);font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 box-shadow:0 6px 14px var(--sh-d),inset 0 2px 0 var(--sh-l)}
.who:empty{display:none}
.field{margin:0 0 16px}
.field input,.field select{margin:0}
.field select{width:100%}
input[type=password]{width:100%;font:inherit;font-size:16px}
.login-submit{margin-top:16px}
.card + .card{margin-top:24px}
.urow{padding:16px 0;border-top:2px solid var(--line)}
.urow:first-of-type{border-top:0}
.urow.off{opacity:.65}
.uhead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.urow .n{font-weight:600;font-size:16px;line-height:24px;color:var(--ink);word-break:break-word}
.urow .mut{font-weight:500;font-size:13px;color:var(--muted)}
.urow .d{font-size:13px;line-height:20px;color:var(--muted);margin:4px 0 8px}
.badges{display:flex;gap:4px;flex:none;flex-wrap:wrap;justify-content:flex-end}
.badge{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:999px;background:#fdeee4;color:var(--muted);font-size:12px;font-weight:600}
.badge.a{background:linear-gradient(180deg,var(--rose2),var(--rose));color:#fff}
.badge.d{background:#4a3340;color:#fff}
.uact{display:flex;flex-wrap:wrap;gap:8px}
.uact .ghost{flex:1 1 0;min-width:96px;padding:0 16px}
.secret{font-family:ui-monospace,Menlo,monospace;font-size:20px;font-weight:600;line-height:28px;text-align:center;word-break:break-all;padding:16px;margin:0 0 16px;border-radius:20px;color:var(--rose-d);background:#fdeee4;
 box-shadow:inset 3px 3px 8px rgba(205,140,120,.25),inset -3px -3px 8px rgba(255,255,255,.9);user-select:all;-webkit-user-select:all}
.cf-card p b{color:var(--ink)}
/* four tabs fit: icons only except the active one */
.tabbar{gap:4px}
.tabbar a{min-width:52px;padding:0 14px}
.tabbar a.on{padding:0 20px}
/* ===== invites ===== */
.fhint{font-size:13px;line-height:20px;color:var(--muted);margin:4px 8px 0;min-height:0}
.fhint:empty{display:none}
.fhint.ok,.fhint.s3{color:#1f7a3a}.fhint.bad,.fhint.s0{color:#a1244a}.fhint.s1{color:#b8661c}.fhint.s2{color:#7a7a1c}
.adm-top{display:grid;gap:8px;margin:16px 0 8px}
.adm-top .btn{margin:0}
.irow{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:12px 0;border-top:2px solid var(--line)}
.irow:first-of-type{border-top:0}
.irow .n{font-weight:600;font-size:15px;color:var(--ink);word-break:break-word}
.irow .d{font-size:13px;line-height:20px;color:var(--muted)}
.irow.off{opacity:.65}
.irow .ghost{flex:none}
.welcome{background:linear-gradient(180deg,#fff,var(--cream));border:2px solid var(--rose2)}
.welcome .btn{margin:0}
.welcome .ghost{display:flex;width:100%;margin-top:8px}