/* Shared avatar framing preserves the original file, including animated GIFs. */
.avatar.image-avatar{display:inline-block;position:relative;overflow:hidden;padding:0!important;flex:none;isolation:isolate;vertical-align:middle}
.avatar.image-avatar>img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--avatar-x,50%) var(--avatar-y,50%);transform:scale(var(--avatar-zoom,1));transform-origin:var(--avatar-x,50%) var(--avatar-y,50%);border:0;border-radius:0;pointer-events:none}
.avatar-framing{display:grid;gap:16px;margin-top:20px;padding-top:16px;border-top:1px solid #aacdeb20}
.avatar-framing .f-help{margin:0}.avatar-framing label{display:block;margin:0 0 8px}.avatar-framing input[type=range]{width:100%;height:22px;cursor:pointer}
.avatar-framing .f-button{justify-self:start;font-size:12px}
.avatar-preview-orbit:has(.image-avatar){touch-action:none;cursor:grab;user-select:none}
.avatar-preview-orbit.is-dragging{cursor:grabbing;border-color:#8fb0ca}
.avatar-preview-orbit.is-dragging .image-avatar{box-shadow:0 0 0 1px #aacdeb45}
.article-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 9px;min-width:0}
.article-tag{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 8px;border:1px solid #ffffff16;border-radius:6px;background:var(--tag-color,#384b70);color:#fff!important;font-size:11px;font-weight:500;line-height:1.4;letter-spacing:.01em;vertical-align:middle}
.article-tag>span{overflow-wrap:anywhere}.article-tag svg{display:block;flex:none;width:15px;height:15px;color:#fff}
.article-page>header .article-tags{margin:14px 0}.article-page>header .article-tag{font-size:12px;padding:5px 10px}
.side-item .article-tags{gap:5px;margin-bottom:9px}.side-item .article-tag{font-size:10px;padding:3px 6px}.side-item .article-tag svg{width:13px;height:13px}
.editor-tags,.tag-icon-options,.tag-section-options{border:0;padding:0;min-width:0;margin:0}
.editor-tags{padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:#0d1520;margin-top:15px}
.editor-tags legend{float:left;width:100%;margin-bottom:12px;font-size:12px;color:var(--muted)}
.tag-choices{display:flex;flex-wrap:wrap;gap:9px;clear:both}
.tag-choice{display:flex;align-items:center;gap:6px;cursor:pointer;padding:4px;border:1px solid transparent;border-radius:9px;transition:background .18s,border-color .18s}
.tag-choice:has(input:checked){background:#a4c9eb12;border-color:#a4c9eb65}
.tag-choice input[type=checkbox]{width:15px;height:15px;margin:0;accent-color:#829db6}
.tag-choice:has(input:focus-visible){outline:2px solid #b6d9f5;outline-offset:2px}
.tag-icon-options legend,.tag-section-options legend{font-size:13px;color:var(--muted);margin-bottom:10px}
.tag-icon-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-block:10px}
.tag-icon-options label{display:flex!important;align-items:center;gap:9px;padding:12px;border:1px solid var(--line);border-radius:9px;font-size:12px;cursor:pointer}
.tag-icon-options label:has(input:checked){border-color:#8baaca;background:#809fc518}
.tag-icon-options input[type=radio]{width:14px;height:14px;margin:0;accent-color:#8baaca}
.tag-icon-options svg{width:22px;height:22px;flex:none;color:white}
.tag-preview{padding:20px;display:flex;justify-content:center;background:#080f19;border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.tag-section-options{max-height:240px;overflow:auto;padding:12px;border:1px solid var(--line);border-radius:8px}
.tag-section-options[hidden]{display:none}.tag-section-options .f-checkbox{overflow-wrap:anywhere}
.subsection-panel{margin-block:20px}.subsection-symbol{display:grid;place-items:center;width:40px;height:40px;border:1px solid #a7c3dc26;background:#94b9da09;border-radius:9px;color:#a3bcd3;flex:none;transition:background .2s,transform .2s}
.subsection-symbol svg{width:23px;height:23px}.section-card:hover .subsection-symbol{background:#94b9da18;transform:translateX(2px)}
.f-breadcrumb{flex-wrap:wrap}.f-breadcrumb a{overflow-wrap:anywhere}
@media(max-width:600px){.tag-icon-options{grid-template-columns:1fr}.editor-tags{padding:14px}.tag-choices{gap:5px}.subsection-symbol{width:32px;height:32px}.avatar-framing{gap:12px}}
@media(prefers-reduced-motion:reduce){.tag-choice,.subsection-symbol{transition:none}.section-card:hover .subsection-symbol{transform:none}}

/* Compact framing: the image and its controls remain together. */
.forum-dialog.avatar-dialog{width:min(660px,calc(100% - 24px));border-radius:17px}
.avatar-dialog .dialog-heading{padding:16px 20px 13px}.avatar-dialog .dialog-heading h2{font-size:21px}
.avatar-dialog .avatar-source-tabs{margin:14px 18px 0;padding:4px;gap:3px}
.avatar-dialog .avatar-source-tabs span{padding:9px 10px;font-size:12px}
.avatar-dialog .avatar-studio{grid-template-columns:220px minmax(0,1fr);min-height:0}
.avatar-dialog .avatar-preview-panel{padding:18px;gap:12px;border:0;background:none;justify-content:flex-start}
.avatar-dialog .avatar-preview-orbit{padding:6px;border-radius:23px;margin:0;box-shadow:0 8px 25px #0003}
.avatar-dialog .avatar-preview-orbit .avatar{width:112px;height:112px;border-radius:17px}
.avatar-dialog .avatar-framing{width:100%;gap:7px;margin:0;padding:0;border:0}
.avatar-dialog .avatar-framing[hidden]{display:none}
.avatar-dialog .avatar-framing>div{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:8px}
.avatar-dialog .avatar-framing label{font-size:10px;color:#9baec0;margin:0;line-height:1.3}
.avatar-dialog .avatar-framing input[type=range]{height:20px;margin:0;padding:0}
.avatar-dialog .avatar-framing .f-button{justify-self:center;padding:4px 9px;font-size:10px;min-height:26px;border-color:transparent}
.avatar-dialog .avatar-source-panel{padding:20px 20px 16px 4px}
.avatar-dialog .avatar-source-content h3{margin-bottom:5px}
.avatar-dialog .avatar-source-content .f-help{font-size:11px;line-height:1.6;margin-bottom:14px}
.avatar-dialog .avatar-source-content>div>label{font-size:10px;color:#8da0b5}
.avatar-dialog .avatar-source-content .f-upload{border:0;padding:0;background:none;gap:5px}
.avatar-dialog .f-upload .nebula-file-picker{margin:5px 0;border-radius:9px}
.avatar-dialog .nebula-file-face{padding:10px;gap:9px;min-height:45px}
.avatar-dialog .nebula-file-face>svg{width:19px;height:19px}
.avatar-dialog .nebula-file-face strong{font-size:12px}.avatar-dialog .nebula-file-face small{display:none!important}
.avatar-dialog .f-upload .upload-state{font-size:10px}.avatar-dialog .f-upload .clear-upload{padding:4px 8px;font-size:10px;min-height:26px}
.avatar-dialog .avatar-reset-row{padding:0 20px 10px 224px}.avatar-dialog .avatar-reset-row .f-button{font-size:10px;padding:4px 0}
.avatar-dialog .f-form-actions{padding:12px 20px}.avatar-dialog .f-form-actions .f-button{padding:8px 14px;min-width:86px;font-size:12px}
.avatar-dialog .avatar-character-grid{max-height:225px;grid-template-columns:1fr;margin:10px 0 0}

/* Quiet enamel badges, with a separate inset for the hand-drawn symbol. */
.article-tag{gap:7px;padding:3px 10px 3px 3px;border-radius:8px;border-color:#ffffff24;background:linear-gradient(115deg,#ffffff17,transparent 65%),var(--tag-color,#384b70);box-shadow:inset 0 1px #ffffff0b,0 2px 5px #0002;font-weight:500;letter-spacing:.015em;line-height:1.45}
.article-tag svg{box-sizing:border-box;width:23px;height:23px;padding:4px;border-radius:5px;background:#07121b25;box-shadow:inset 0 0 0 1px #ffffff0b}
.article-page>header .article-tag{font-size:11px;padding:3px 11px 3px 3px}
.side-item .article-tag{font-size:10px;padding:2px 7px 2px 2px;border-radius:6px;gap:5px;box-shadow:inset 0 1px #ffffff09}
.side-item .article-tag svg{width:20px;height:20px;padding:3px;border-radius:4px}
.tag-icon-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.tag-icon-options label{padding:9px!important;font-size:11px!important}
@media(max-width:600px){
 .avatar-dialog .avatar-studio{grid-template-columns:1fr}
 .avatar-dialog .avatar-preview-panel{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;padding:16px 20px 12px;gap:20px}
 .avatar-dialog .avatar-preview-orbit .avatar{width:88px;height:88px}
 .avatar-dialog .avatar-preview-panel:not(:has(.image-avatar)){grid-template-columns:1fr;justify-items:center}
 .avatar-dialog .avatar-framing>div{grid-template-columns:1fr;gap:0}.avatar-dialog .avatar-framing{gap:4px}
 .avatar-dialog .avatar-framing input[type=range]{height:17px}
 .avatar-dialog .avatar-source-panel{padding:4px 20px 10px}
 .avatar-dialog .avatar-drag-note{display:none}
 .avatar-dialog .avatar-source-content[data-avatar-panel=image]>h3{display:none}
 .avatar-dialog .avatar-reset-row{padding:0 20px 8px;text-align:right}
 .avatar-dialog .avatar-source-tabs{margin:10px 12px 0}.avatar-dialog .avatar-source-tabs span{font-size:10px;padding:8px 5px}
 .avatar-dialog .avatar-character-grid{max-height:155px}
}