/* ---------- studio: folders, filters, selection, trash; settings page; avatars; welcome tour ---------- */
.avatar{overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
img.av{width:18px;height:18px;border-radius:50%;object-fit:cover;display:inline-block;vertical-align:-4px;margin-inline-end:4px}
.fi-cap a.h img.av{width:22px;height:22px;vertical-align:-5px}
.st-head-b{display:flex;gap:8px;flex-wrap:wrap}
.st-folders{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0 10px}
.st-folders .chip i,.st-chips .chip i{font-style:normal;font-size:11px;color:var(--mut);font-weight:600;background:var(--soft2);padding:0 6px;border-radius:99px;line-height:18px}
.st-folders .chip.on i{color:var(--tx)}
.st-folders .chip.drop{outline:2px dashed var(--a1);outline-offset:2px;background:color-mix(in srgb,var(--a1) 12%,transparent)}
.st-folders .st-fname{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-folders .st-fmenu{padding:7px 8px;margin-inline-start:-4px}
.st-folders .st-new{border-style:dashed}
.st-folders .st-trash{margin-inline-start:auto}
.st-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.st-search{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:0 12px;flex:1 1 200px;max-width:340px;min-height:40px}
.st-chips{flex-basis:100%}
.st-search:focus-within{border-color:color-mix(in srgb,var(--a1) 70%,transparent)}
.st-search svg{width:16px;height:16px;color:var(--mut)}
.st-search input{flex:1;min-width:0;background:none;border:0;outline:0;padding:8px 0;font-size:14px}
.st-chips{flex:0 1 auto;flex-wrap:wrap;padding:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
.st-select.on{color:#fff;border-color:transparent;background:var(--grad)}
.st-bulk{position:sticky;top:62px;z-index:20;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;padding:8px 12px;margin-bottom:12px;box-shadow:var(--sh)}
.st-bulk .tog b{font-size:15px}
.st-bulk-a{display:flex;gap:6px;flex-wrap:wrap}
.st-trash-hint{margin:-4px 0 10px}
.st-empty{padding:30px 0}
.res{position:relative}
.st-check{position:absolute;top:8px;inset-inline-start:8px;z-index:3;display:none;padding:6px;border-radius:10px;background:rgba(0,0,0,.45);backdrop-filter:blur(4px)}
.st-check input{width:22px;height:22px;accent-color:var(--a1);cursor:pointer;display:block}
.is-selecting .st-check{display:block}
.res.is-sel{outline:2px solid var(--a1);outline-offset:2px}
.is-dragging .res{opacity:.55}
.res[draggable=true] .res-info{cursor:grab}
.st-title{display:flex;align-items:center;gap:6px;min-width:0;min-height:22px}
.st-title b{font-size:17px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-pencil{display:inline-flex;align-items:center;gap:5px;color:var(--mut);font-size:12.5px;font-weight:600;padding:3px 6px;border-radius:8px;flex:none}
.st-pencil:hover{color:var(--tx);background:var(--soft)}
.st-pencil svg{width:14px;height:14px}
.st-title-in{padding:7px 10px;font-size:15px;font-weight:600}
.st-stat{display:inline-flex;align-items:center;gap:4px}
.st-stat svg{width:12px;height:12px}
.st-trashed .res-media{opacity:.65}
.st-trashed .st-title b{color:var(--tx2)}
.st-trashed .rs-rate{display:none}
p.st-trashed{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--badt);background:rgba(239,68,68,.1);padding:8px 12px;border-radius:10px}
p.st-trashed svg{width:15px;height:15px}
.vp-detail{color:var(--tx2);font-size:14px;line-height:1.5;margin-top:-6px}
.st-pop{position:absolute;z-index:70;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:var(--sh);min-width:200px;max-width:min(320px,calc(100vw - 16px));animation:pop .2s ease}
.st-pop .kv{display:grid;grid-template-columns:1fr auto;gap:5px 16px;padding:8px 10px;font-size:13px}
.st-pop .kv b{text-align:end}
.st-pop>button{display:flex;width:100%;align-items:center;gap:8px;padding:9px 12px;border-radius:9px;color:var(--tx2);font-size:14px;text-align:start}
.st-pop>button:hover{background:var(--card2);color:var(--tx)}
.st-pop>button svg{width:15px;height:15px;color:var(--mut)}
.st-more{text-align:center;margin:18px 0 8px;min-height:1px}
.st-links{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;margin-top:12px;resize:vertical}
.st-links-b{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.st-notice{display:flex;gap:12px;align-items:center;flex-wrap:wrap;max-width:1240px;margin:14px auto 0;padding:10px 14px 10px 16px;border-radius:14px;background:color-mix(in srgb,var(--a3) 14%,var(--card));border:1px solid color-mix(in srgb,var(--a3) 50%,var(--line));font-size:14px;width:calc(100% - 40px)}
.st-notice span{flex:1 1 240px}
.st-notice .x{color:var(--mut);width:30px;height:30px;display:grid;place-items:center}.st-notice .x svg{width:16px;height:16px}
/* settings */
.st-settings .st-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;max-width:980px;align-items:start}
.st-settings .danger-zone{grid-column:1/-1;max-width:620px}
.st-av-row{display:flex;gap:16px;align-items:center}
.st-av-big{width:84px;height:84px;font-size:32px}
.st-av-b{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-width:0}
.st-av-b p{flex-basis:100%;margin-top:2px}
.st-togs{display:grid;gap:12px}
.st-togs .tog{align-items:flex-start;font-size:14px;color:var(--tx)}
.st-togs .tog input{margin-top:3px;flex:none}
.st-settings form button[disabled],.st-settings form input[disabled]{opacity:.5;cursor:not-allowed}
/* welcome tour */
.st-tip{position:absolute;z-index:120;width:min(300px,calc(100vw - 16px));background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--sh);font-size:14px;line-height:1.45;animation:pop .25s ease}
.st-tip:before{content:"";position:absolute;top:-7px;inset-inline-start:22px;width:12px;height:12px;background:var(--card);border-inline-start:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
[dir=rtl] .st-tip:before{transform:rotate(-45deg)}
.st-tip-b{display:flex;gap:10px;align-items:center;margin-top:10px}
.st-tip-skip{margin-inline-start:auto;color:var(--mut);font-size:13px;font-weight:600;padding:6px}
.st-hl{outline:2px solid var(--a1);outline-offset:4px;border-radius:12px}
@media (max-width:760px){
  .st-bulk{top:6px}
  .st-folders .st-trash{margin-inline-start:0}
  .st-search{max-width:none;flex-basis:100%}
  .st-av-row{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.st-tip,.st-pop,.res{animation:none}}