/* Avatar: a compact casting gallery, scoped away from retired notebook styles. */
.avatars-view { background: #101613; }
.avatars-view #main { background: transparent; }
.avatars-studio { --av-muted:#91a398; --av-line:rgba(174,207,183,.14); --av-green:#b4ee86; max-width:1150px; margin:0 auto; padding:10px 5px 28px; color:#ecf1ed; }
.avatars-studio * { box-sizing:border-box; }
.avatars-studio button, .avatars-studio input { font:inherit; }
.avatars-studio button { cursor:pointer; }
.avatars-studio button[hidden] { display:none; }
.avatars-studio button:disabled { cursor:wait; opacity:.65; }
.avatars-studio :is(button,input):focus-visible { outline:2px solid var(--av-green); outline-offset:4px; }
.avatars-studio .av-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:36px; }
.avatars-studio .av-eyebrow { color:var(--av-muted); letter-spacing:.14em; font-size:10px; font-weight:600; }
.avatars-studio .av-heading h1 { margin:10px 0 8px; font-size:clamp(34px,4vw,48px); line-height:1.1; letter-spacing:-.04em; font-weight:600; color:#f1f5f0; }
.avatars-studio .av-heading p { margin:0; color:#a2b1a7; font-size:14px; line-height:1.6; }
.avatars-studio .av-button { min-height:36px; border:1px solid var(--av-line); border-radius:12px; color:#e5eee8; background:rgba(255,255,255,.035); display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 13px; font-size:12px; font-weight:500; transition:background .16s,border-color .16s; }
.avatars-studio .av-button:hover { background:rgba(212,236,220,.09); border-color:rgba(174,207,183,.3); }
.avatars-studio .av-button svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.avatars-studio .av-primary { color:#18341e; background:var(--av-green); border-color:var(--av-green); font-weight:600; }
.avatars-studio .av-primary:hover { background:#c5f49e; border-color:#c5f49e; }
.avatars-studio .av-heading .av-primary { min-height:42px; padding:11px 17px; white-space:nowrap; }
.avatars-studio .av-heading .av-primary > span { font-size:20px; font-weight:400; line-height:1; }
.avatars-studio .av-toolbar { border-bottom:1px solid var(--av-line); margin-bottom:30px; }
.avatars-studio .av-tabs { display:flex; gap:26px; align-items:center; }
.avatars-studio .av-tab { position:relative; padding:0 0 16px; min-height:38px; border:0; background:transparent; color:#94a69a; display:flex; align-items:center; gap:8px; font-size:13px; white-space:nowrap; }
.avatars-studio .av-tab span { font-size:10px; font-weight:600; padding:2px 6px; min-width:20px; border-radius:5px; color:#a9b7ae; background:rgba(190,216,197,.07); }
.avatars-studio .av-tab[aria-selected=true] { color:#eef5ec; }
.avatars-studio .av-tab[aria-selected=true]::after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--av-green); border-radius:2px; }
.avatars-studio .av-tab[aria-selected=true] span { color:var(--av-green); background:rgba(180,238,134,.09); }
.avatars-studio #avatar-gallery-panel { min-height:300px; outline-offset:8px; }
.avatars-studio .av-gallery { display:grid; grid-template-columns:repeat(auto-fill,160px); gap:28px 25px; align-items:start; }
.avatars-studio .av-card { width:160px; margin:0; border:0; background:none; padding:0; }
.avatars-studio .av-portrait-wrap { width:100%; aspect-ratio:10/13; position:relative; border:1px solid rgba(174,207,183,.22); border-radius:15px; background:rgba(200,222,204,.025); transition:border-color .18s,box-shadow .18s; }
.avatars-studio .av-card.is-chosen .av-portrait-wrap { border-color:#b4ee86; box-shadow:0 0 0 2px rgba(180,238,134,.13); }
.avatars-studio .av-portrait.av-button { width:100%; height:100%; min-height:0; border:0; padding:0; border-radius:14px; overflow:hidden; display:flex; background:transparent; }
.avatars-studio .av-portrait img { display:block; width:100%; height:100%; object-fit:cover; }
.avatars-studio .av-photo-empty { font-size:11px; line-height:1.6; color:#9eb5a5; max-width:85px; font-weight:400; }
.avatars-studio .av-portrait:hover .av-photo-empty { color:#d4e8d9; }
.avatars-studio .av-photo-replace { position:absolute; left:9px; right:9px; bottom:9px; padding:8px 4px; background:rgba(13,23,17,.82); backdrop-filter:blur(8px); border:1px solid rgba(230,249,235,.15); border-radius:7px; color:#f1f6f2; font-size:10px; opacity:0; transition:opacity .16s; }
.avatars-studio .av-portrait:hover .av-photo-replace, .avatars-studio .av-portrait:focus-visible .av-photo-replace { opacity:1; }
.avatars-studio .av-delete.av-button { position:absolute; right:8px; top:8px; min-height:29px; width:29px; padding:6px; border-radius:8px; background:rgba(13,23,17,.83); color:#d9e4dc; border-color:rgba(228,239,230,.18); opacity:.75; backdrop-filter:blur(8px); }
.avatars-studio .av-delete:hover { color:#ffd8d2; border-color:rgba(238,164,151,.55); background:#3e2723; opacity:1; }
.avatars-studio .av-delete:focus-visible, .avatars-studio .av-card:hover .av-delete { opacity:1; }
.avatars-studio .av-selected-mark { position:absolute; left:8px; top:8px; display:flex; align-items:center; justify-content:center; width:23px; height:23px; border-radius:50%; background:var(--av-green); color:#1a3b22; pointer-events:none; }
.avatars-studio .av-selected-mark svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.avatars-studio .av-card-caption { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:11px; }
.avatars-studio .av-card-caption h2 { min-width:0; overflow-wrap:anywhere; margin:0; font-size:12px; font-weight:500; line-height:1.5; color:#dce7df; }
.avatars-studio .av-choice.av-button { flex:none; padding:5px 8px; min-height:29px; border-radius:8px; font-size:10px; gap:3px; }
.avatars-studio .av-choice[aria-pressed=true] { color:var(--av-green); background:rgba(180,238,134,.07); border-color:rgba(180,238,134,.18); }
.avatars-studio .av-choice svg { width:12px; height:12px; }
.avatars-studio .av-photo-feedback { margin:7px 0 0; color:#9eb2a5; font-size:10px; line-height:1.5; }
.avatars-studio .av-photo-feedback:empty { display:none; }
.avatars-studio .av-photo-feedback[data-phase=error] { color:#efb4a8; }
.avatars-studio .av-footer { display:flex; flex-wrap:wrap; align-items:center; gap:10px; border-top:1px solid var(--av-line); padding-top:20px; margin-top:35px; }
.avatars-studio #avatar-save-status { display:flex; align-items:center; gap:7px; color:#81988a; font-size:11px; margin:0; line-height:1.5; }
.avatars-studio #avatar-save-status i { display:block; height:5px; width:5px; flex:none; border-radius:50%; background:#7baf87; }
.avatars-studio #avatar-save-status[data-phase=error] { color:#edb7a9; }
.avatars-studio #avatar-save-status[data-phase=error] i { background:#edb7a9; }
.avatars-studio .av-empty { min-height:300px; display:flex; align-items:flex-start; justify-content:center; flex-direction:column; padding:28px 0; }
.avatars-studio .av-empty-line { width:34px; height:2px; background:var(--av-green); margin-bottom:22px; }
.avatars-studio .av-empty h2 { color:#e0ebe2; margin:0 0 9px; font-size:22px; font-weight:500; line-height:1.35; letter-spacing:-.025em; }
.avatars-studio .av-empty p { color:var(--av-muted); margin:0 0 22px; font-size:13px; line-height:1.7; }
.avatars-studio .av-undo { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 24px; padding:12px 15px; border:1px solid var(--av-line); background:rgba(182,213,193,.035); border-radius:13px; }
.avatars-studio .av-undo p { margin:0; color:#9db0a3; font-size:12px; line-height:1.6; }
.avatars-studio .av-undo strong { color:#e3eae5; font-weight:500; }
.avatars-studio .av-trash-intro p { color:var(--av-muted); margin:0 0 22px; font-size:12px; line-height:1.7; }
.avatars-studio .av-trash-list { max-width:620px; }
.avatars-studio .av-trash-item { display:flex; gap:15px; align-items:center; padding:15px 0; border-bottom:1px solid var(--av-line); }
.avatars-studio .av-trash-item img, .avatars-studio .av-trash-no-photo { flex:none; width:48px; height:62px; object-fit:cover; border-radius:7px; border:1px solid var(--av-line); }
.avatars-studio .av-trash-item > div { flex:1; min-width:0; }
.avatars-studio .av-trash-item h2 { margin:0; font-size:13px; font-weight:500; color:#e1ebe4; overflow-wrap:anywhere; }
.avatars-studio .av-trash-item p { margin:6px 0 0; color:#8fa399; font-size:11px; }
.avatars-studio .av-composer { margin:0 0 28px; padding:23px; border:1px solid rgba(180,238,134,.22); background:#17211a; border-radius:16px; }
.avatars-studio .av-composer h2 { margin:0 0 6px; font-size:18px; font-weight:500; letter-spacing:-.02em; color:#e4eee5; }
.avatars-studio .av-composer p { color:var(--av-muted); margin:0; font-size:12px; line-height:1.7; }
.avatars-studio .av-composer-fields { display:grid; grid-template-columns:minmax(140px,1fr) minmax(200px,1.6fr); gap:24px; margin-top:22px; max-width:700px; }
.avatars-studio .av-composer label { display:flex; flex-direction:column; gap:9px; color:#bdcfc1; font-size:12px; }
.avatars-studio .av-composer input { width:100%; min-width:0; border:1px solid rgba(179,207,188,.23); background:#111b15; color:#e1ece4; border-radius:9px; padding:10px 12px; font-size:13px; }
.avatars-studio .av-composer input::placeholder { color:#708b7b; }
.avatars-studio .av-composer input[type=file] { padding:6px; font-size:11px; }
.avatars-studio .av-composer input::file-selector-button { border:0; background:#293a2f; color:#c7dacd; padding:7px 10px; border-radius:5px; margin-right:9px; cursor:pointer; font:inherit; }
.avatars-studio .av-composer small { color:#81998b; font-size:10px; }
.avatars-studio .av-composer .av-composer-feedback { margin-top:15px; color:#e5bcaa; }
.avatars-studio .av-composer-feedback:empty { display:none; }
.avatars-studio .av-composer-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:20px; }
@media (hover:none) { .avatars-studio .av-photo-replace { opacity:1; font-size:9px; padding:6px 3px; } .avatars-studio .av-delete.av-button { opacity:1; min-height:34px; width:34px; } }
@media (max-width:650px) {
  .avatars-studio { padding:4px 0 18px; }
  .avatars-studio .av-heading { align-items:flex-start; gap:18px; flex-direction:column; margin-bottom:26px; }
  .avatars-studio .av-heading h1 { font-size:36px; }
  .avatars-studio .av-heading p { font-size:13px; }
  .avatars-studio .av-tabs { gap:18px; width:100%; overflow-x:auto; padding:4px 2px 0; }
  .avatars-studio .av-tab { font-size:11px; gap:5px; }
  .avatars-studio .av-tab span { font-size:9px; min-width:18px; }
  .avatars-studio .av-gallery { grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); gap:26px 16px; }
  .avatars-studio .av-card { width:100%; max-width:180px; }
  .avatars-studio .av-composer { padding:18px; }
  .avatars-studio .av-composer-fields { grid-template-columns:1fr; gap:18px; }
  .avatars-studio .av-card-caption { gap:5px; }
  .avatars-studio .av-card-caption h2 { font-size:11px; }
  .avatars-studio .av-choice.av-button { min-height:34px; }
}
@media (prefers-reduced-motion:reduce) { .avatars-studio * { transition:none !important; } }