/* v2.1.x targeted fixes */
.settings-fields{
  max-width:760px;
  display:grid;
  grid-template-columns:minmax(260px,1.55fr) minmax(220px,1fr);
  gap:18px 22px;
  align-items:start;
}
.settings-field-group{min-width:0}
.settings-field-group .field{margin:0 0 6px}
.settings-field-group .field-hint{margin:0;line-height:1.55}
.settings-name{grid-column:1;grid-row:1}
.settings-discord{grid-column:2;grid-row:1}
.settings-static{grid-column:2;grid-row:2}
.settings-fields #settings-validation{grid-column:1/-1;grid-row:auto;margin:0}
@media(max-width:700px){
  .settings-fields{grid-template-columns:1fr;gap:16px}
  .settings-name,.settings-discord,.settings-static{grid-column:1;grid-row:auto}
}

.pwa-settings{display:grid;gap:10px;max-width:760px;margin:0 0 18px}
.pwa-status{margin:0!important;font-size:11px;line-height:1.55;color:var(--muted)}
.pwa-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pwa-actions .button{width:auto;min-width:0;margin:0}
.pwa-help{margin:0!important;font-size:10px;line-height:1.55;color:var(--muted);max-width:640px}
@media(max-width:600px){
  .pwa-actions{align-items:stretch}
  .pwa-actions .button{flex:1 1 180px;white-space:normal}
}

/* v2.1.5 stronger, still restrained micro-motion */
:root{
  --motion-fast:190ms;
  --motion-base:260ms;
  --motion-strong:320ms;
  --motion-ease:cubic-bezier(.18,.78,.2,1);
}
.button,.folder-tab,.rail-link,.result-select,.skill,input,select,textarea{
  transition:
    color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease),
    opacity var(--motion-fast) var(--motion-ease);
}
.button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 3px 9px #25324016}
.button:not(:disabled):active{transform:translateY(1px) scale(.985);box-shadow:none}
.folder-tab:not(:disabled):hover{transform:translateY(-2px)}
.folder-tab.active{transform:translateY(-2px)}
.rail-link:hover{transform:translateX(4px)}
.result-select.pass,.result-select.fail,.skill.selected{transition-duration:var(--motion-base)}
.entry-register tbody tr{
  transition:
    background-color var(--motion-base) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    opacity var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease);
}
.entry-register tbody tr.row-enter{animation:row-enter 280ms var(--motion-ease) both}
.entry-register tbody tr.row-leave{pointer-events:none;opacity:0;transform:translateY(-9px) scale(.988)}
@keyframes row-enter{
  from{opacity:0;transform:translateY(-10px) scale(.992)}
  to{opacity:1;transform:none}
}
#main-content.view-enter{animation:view-enter 280ms var(--motion-ease) both}
@keyframes view-enter{
  from{opacity:.48;transform:translateY(9px)}
  to{opacity:1;transform:none}
}
#preview-content.preview-refresh .generated-leaf,
#preview-content.preview-refresh .discord-clipping{
  animation:preview-refresh 270ms var(--motion-ease) both;
}
@keyframes preview-refresh{
  0%{opacity:.58;transform:translateY(5px) scale(.996)}
  100%{opacity:1;transform:none}
}
.toast{
  animation:toast-in 230ms var(--motion-ease) both;
  transition:opacity 200ms var(--motion-ease),transform 200ms var(--motion-ease);
}
.toast.toast-leave{opacity:0;transform:translateY(9px) scale(.985)}
[aria-invalid="true"]{
  transition:border-color var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) var(--motion-ease);
}
.validation details,.form-ready,.desk-readiness,.pwa-status{
  transition:color var(--motion-base) var(--motion-ease),background-color var(--motion-base) var(--motion-ease),opacity var(--motion-base) var(--motion-ease),transform var(--motion-base) var(--motion-ease);
}

/* Update banner: fixed and impossible to miss, but still in the document style. */
#pwa-notice{
  position:fixed;
  z-index:100;
  right:24px;
  bottom:24px;
  width:min(430px,calc(100vw - 48px));
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 15px;
  border:1px solid #9e8c6c;
  background:#efe5cf;
  color:#263640;
  box-shadow:0 12px 35px #1d27352b, inset 0 0 0 2px #fff8e66e;
}
#pwa-notice[hidden]{display:none!important}
#pwa-notice:not([hidden]){animation:update-notice-in 320ms var(--motion-ease) both}
#pwa-notice.pwa-notice-pulse{animation:update-notice-in 320ms var(--motion-ease) both,update-notice-pulse 520ms var(--motion-ease) 330ms 1}
#pwa-notice.is-updating{opacity:.78}
.pwa-notice-copy{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.pwa-notice-copy strong{font:600 15px Georgia,serif;letter-spacing:.1px}
.pwa-notice-copy span{font-size:10px;line-height:1.45;color:#6f6657}
#pwa-notice .button{flex:0 0 auto;min-height:36px;padding:8px 11px;font-size:11px}
@keyframes update-notice-in{
  from{opacity:0;transform:translateY(16px) scale(.975)}
  to{opacity:1;transform:none}
}
@keyframes update-notice-pulse{
  0%,100%{box-shadow:0 12px 35px #1d27352b,inset 0 0 0 2px #fff8e66e}
  50%{box-shadow:0 15px 42px #1d273542,0 0 0 3px #b59c6f2e,inset 0 0 0 2px #fff8e66e}
}
@media(max-width:600px){
  #pwa-notice{
    right:10px;
    left:10px;
    bottom:82px;
    width:auto;
    align-items:stretch;
    flex-direction:column;
    gap:10px;
  }
  #pwa-notice .button{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
  }
  .button:hover,.button:active,.folder-tab:hover,.folder-tab.active,.rail-link:hover{transform:none!important}
}

.bybalern{
  margin-top:2px;
  font:600 8px/1 'Segoe UI',sans-serif;
  letter-spacing:.7px;
  text-transform:lowercase;
  color:#d8ccb0;
  opacity:.58;
  user-select:none;
  transition:opacity var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease);
}
.rail-status:hover .bybalern{opacity:.9;transform:translateY(-1px)}
@media(max-width:600px){.bybalern{display:none}}