/* Four previews retain their own palette while dialog controls follow the active world. */
.epic-welcome,.epic-insignia {display:none}
/* Equal-height raid cards anchor artwork at the top, regardless of how much
   copy each card contains. Extra room belongs above the bottom action area. */
:root[data-appearance] #partyList[data-layout="cards"]>.party-panel {
  justify-content:flex-start!important;transform:none!important;opacity:1!important;
}
:root[data-appearance] #partyList[data-layout="cards"]>.party-panel>.party-actions {margin-top:auto!important}
:root[data-appearance] #partyList[data-layout="cards"] .panel-top .eyebrow {font-size:12px!important;line-height:1.65!important;letter-spacing:.02em!important}
:root[data-appearance] #partyList[data-layout="cards"] .panel-status {font-size:11px!important}
:root[data-appearance] .page-title p {font-size:13px!important;line-height:1.75!important}
/* Keep field labels readable and required hints on the same line. The badge
   must not become an extra grid row above every control. */
:root[data-appearance] .login-modal form label:has(>input:not([type="checkbox"]):not([type="radio"]),>select,>textarea) {
  position:relative;display:grid!important;grid-template-columns:minmax(0,1fr);gap:8px;
  min-width:0;font-size:13px!important;line-height:1.65;font-weight:600;color:var(--ui-ink)!important;
}
:root[data-appearance] .login-modal form label:has(>input[required],>select[required],>textarea[required])::before {
  position:absolute;inset-block-start:1px;inset-inline-end:0;margin:0!important;
  min-height:0;padding:1px 0!important;border:0!important;border-radius:0!important;
  background:transparent!important;color:var(--ui-muted)!important;font-size:11px!important;
  font-weight:500;line-height:1.65;letter-spacing:.02em;pointer-events:none;
}
:root[data-appearance] .login-modal form label> :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
  margin-block:0!important;font-weight:400;
}
:root[data-appearance] .login-modal :is(.field-help,.form-help) {font-size:12px!important;line-height:1.7}
:root[data-appearance] .login-modal section>p {font-size:13px;line-height:1.75}
:root[data-appearance] .login-modal :is(.form-section legend>small,.form-grid>label>small:not(.field-counter),.loot-party-derived-note,.loot-party-availability,.loot-auto-status small,.loot-calculation small) {font-size:12px!important;line-height:1.7}
:root[data-appearance] .login-modal :is(.full-field>span.field-label-text,.loot-image-field>span:first-child,.loot-member-field>span:first-child,.loot-calculation>span,.loot-auto-status>span) {font-size:13px!important;line-height:1.65}
:root[data-appearance] :is(#leaderModal,#roleHistoryModal,#confirmModal) {grid-template-columns:minmax(0,1fr);justify-items:center}
:root[data-appearance] :is(#leaderModal,#roleHistoryModal)>section {width:min(560px,100%)!important}
:root[data-appearance] #confirmModal>section {width:min(420px,100%)!important}
@media(max-width:849px) {
  :root[data-appearance] .loot-image-description :is(input,select) {font-size:16px!important}
}
:root[data-appearance] #loginModal .password-visibility-toggle input {background:var(--ui-inset)!important;border-color:var(--ui-control-line)!important;accent-color:var(--ui-accent)}
:root[data-appearance] #appearanceModal .appearance-dialog {width:min(780px,100%)!important;max-width:780px!important}
:root[data-appearance] #appearanceModal .appearance-choices {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0 16px}
:root[data-appearance] #appearanceModal .appearance-choice {
  display:block;min-width:0;width:100%;padding:8px 8px 15px;text-align:left;
  border:2px solid var(--ui-line)!important;border-radius:16px!important;
  background:var(--ui-panel)!important;color:var(--ui-ink)!important;box-shadow:none!important;
  transition:border-color .18s,background .18s;
}
:root[data-appearance] #appearanceModal .appearance-choice[aria-pressed="true"] {border-color:var(--ui-accent)!important;background:var(--ui-raised)!important;box-shadow:0 0 0 2px var(--ui-panel),0 0 0 3px var(--ui-accent)!important}
:root[data-appearance] #appearanceModal .appearance-preview {height:134px;box-sizing:border-box;padding:19px 14px 12px 52px;border:1px solid #ffffff24;border-radius:10px}
:root[data-appearance] #appearanceModal .appearance-preview b {font:800 27px/1.25 'Noto Sans TC',sans-serif;letter-spacing:.015em;color:inherit!important}
:root[data-appearance] #appearanceModal .appearance-preview em {font:600 16px/1.6 'Noto Sans TC',sans-serif;letter-spacing:0;color:inherit!important}
:root[data-appearance] #appearanceModal .appearance-preview small {font:600 11px/1.5 'Noto Sans TC',sans-serif;letter-spacing:.09em;color:inherit!important;margin-top:11px;opacity:.85}
:root[data-appearance] #appearanceModal .appearance-preview:after {display:none}
:root[data-appearance] #appearanceModal .preview-classic {background:linear-gradient(140deg,#102b23,#204237)!important;color:#e8d6a4!important;border-color:#416154}
:root[data-appearance] #appearanceModal .preview-cloud {background:#f3f0e4!important;color:#365747!important;border-color:#ced5c3}
:root[data-appearance] #appearanceModal .preview-maple {background:linear-gradient(140deg,#0d1423,#1c2d43)!important;color:#69e6d2!important;border-color:#3c6270}
:root[data-appearance] #appearanceModal .preview-epic {background:linear-gradient(125deg,#1c2534 0%,#0a0d14 55%,#302117)!important;color:#ffb074!important;border-color:#b36538;border-radius:6px;box-shadow:inset 0 2px #00ff6655}
:root[data-appearance] #appearanceModal .preview-epic i {border-radius:2px;background:#ff6b00;box-shadow:0 30px #00ff6699,0 56px #caa55e77}
:root[data-appearance] #appearanceModal .preview-maple i {border-radius:3px;background:#69e6d2;box-shadow:0 30px #69e6d266,0 56px #69e6d244}
:root[data-appearance] #appearanceModal .appearance-choice-title {display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;font:800 15px/1.5 'Noto Sans TC',sans-serif;margin:12px 5px 6px;color:var(--ui-ink)!important}
:root[data-appearance] #appearanceModal .appearance-selected {color:var(--ui-muted)!important;font-size:11px;align-self:center}
:root[data-appearance] #appearanceModal [aria-pressed="true"] .appearance-selected {color:var(--ui-accent)!important}
:root[data-appearance] #appearanceModal .appearance-description {display:block;font:400 12px/1.7 'Noto Sans TC',sans-serif;color:var(--ui-muted)!important;margin:0 5px;white-space:normal}
:root[data-appearance] #appearanceModal .appearance-state {font-size:12px!important;color:var(--ui-muted)!important;margin-block:16px;min-height:1.7em}
@media(max-width:599px) {
  :root[data-appearance] #appearanceModal .appearance-choices {grid-template-columns:1fr;gap:12px;margin-top:17px}
  :root[data-appearance] #appearanceModal .appearance-choice {display:grid;grid-template-columns:94px minmax(0,1fr);gap:6px 10px;align-items:center;padding:8px}
  :root[data-appearance] #appearanceModal .appearance-preview {grid-row:1/3;min-height:112px;height:100%;padding:14px 8px 10px 13px}
  :root[data-appearance] #appearanceModal .appearance-preview:before,:root[data-appearance] #appearanceModal .appearance-preview i {display:none}
  :root[data-appearance] #appearanceModal .appearance-preview b {font-size:19px}
  :root[data-appearance] #appearanceModal .appearance-preview em {font-size:11px}
  :root[data-appearance] #appearanceModal .appearance-preview small {font-size:11px;letter-spacing:0;overflow-wrap:anywhere}
  :root[data-appearance] #appearanceModal .appearance-choice-title {display:grid;justify-content:start;gap:3px;margin:2px 0 0;align-self:end;font-size:14px}
  :root[data-appearance] #appearanceModal .appearance-description {margin:0;font-size:11px;align-self:start}
}
@media(prefers-reduced-motion:reduce) {#appearanceModal .appearance-choice {transition:none!important}}

/* Keep the guild wordmark on one line without shrinking any tap target. */
@media(max-width:360px) {
  :root[data-appearance] .topbar {gap:8px!important;padding-left:max(8px,env(safe-area-inset-left))!important;padding-right:max(8px,env(safe-area-inset-right))!important}
  :root[data-appearance] .topbar .brand-lockup {gap:6px!important;min-width:0;flex:1}
  :root[data-appearance] .topbar .brand-lockup strong {font-size:18px!important;letter-spacing:.04em!important;white-space:nowrap}
  :root[data-appearance] .topbar .brand-lockup small {display:none}
  :root[data-appearance] .topbar .brand-mark {width:32px!important;height:32px!important;min-width:32px;flex:0 0 32px}
  :root[data-appearance] .topbar .brand-mark .guild-emblem {width:100%;height:100%}
  :root[data-appearance] .topbar .topbar-actions {gap:4px!important}
  :root[data-appearance] .topbar :is(.icon-button,.appearance-shortcut,.notification-center-button,.profile-button) {width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important}
}