/* Shared form surfaces: layout stays the same when the app theme changes. */
.ui-mobile-actions, .ui-sheet-handle { display: none; }
:root {
  --form-surface: #fff8ee; --form-field: #fffdf9; --form-soft: #f3e6d5;
  --form-header: linear-gradient(180deg, #593b2c, #422b22);
  --form-text: #30241c; --form-muted: #705e4e; --form-line: #d7c5b1;
  --form-primary: #bb4d12; --form-danger: #b42336; --form-focus: #c65a18;
  --form-shadow: 0 20px 56px rgba(40, 28, 22, .25);
}
body.dark {
  --form-surface: #303a4d; --form-field: #3b475d; --form-soft: #354157;
  --form-header: linear-gradient(180deg, #39435a, #2b3448);
  --form-text: #f0f3ff; --form-muted: #c0cbdf; --form-line: #596780;
  --form-primary: #6264de; --form-danger: #ffc0c7; --form-focus: #a9baff;
  --form-shadow: 0 20px 56px rgba(27, 34, 50, .38);
}
body.akatsuki {
  --form-surface: #f5f6f8; --form-field: #fff; --form-soft: #e9ecf1;
  --form-header: linear-gradient(180deg, #30242b, #231a20);
  --form-text: #252831; --form-muted: #606674; --form-line: #ccd1da;
  --form-primary: #b51f37; --form-danger: #a8172d; --form-focus: #b51f37;
  --form-shadow: 0 20px 56px rgba(34, 24, 30, .25);
}
body.western { --form-surface: #f3dfba; --form-field: #faebce; --form-soft: #e8cea0; --form-line: #bd9567; --form-primary: #8f3224; }

/* No separate framed header/body panels, including Akatsuki task forms. */
body :is(#modalBackdrop, #cropperBackdrop).modalBackdrop {
  top: var(--ui-viewport-top, 0px); bottom: auto; height: var(--ui-viewport-height, 100dvh);
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  box-sizing: border-box; background: rgba(32, 39, 54, .55); overscroll-behavior: contain;
}
body :is(#modalBackdrop, #cropperBackdrop) > .modal {
  display: flex; flex-direction: column; width: min(540px, 100%); max-width: 100%;
  height: auto; max-height: 100%; min-height: 0; overflow: hidden;
  color: var(--form-text); background: var(--form-surface); border: 0; border-radius: 18px;
  box-shadow: var(--form-shadow); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body :is(#modalBackdrop, #cropperBackdrop) > .modal::before,
body :is(#modalBackdrop, #cropperBackdrop) > .modal::after { content: none; }
body :is(#modalBackdrop, #cropperBackdrop) .modalHeader {
  display: flex; flex: 0 0 auto; align-items: center; gap: 16px;
  margin: 0; padding: 16px 20px; background: var(--form-header); color: #fff;
  border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body :is(#modalBackdrop, #cropperBackdrop) .modalHeader > div:first-child { min-width: 0; flex: 1; }
body :is(#modalBackdrop, #cropperBackdrop) .modalHeader .modalTitle {
  color: #fff; -webkit-text-fill-color: currentColor; font-size: 18px; line-height: 1.3;
  font-weight: 600; text-shadow: none; letter-spacing: normal;
}
body :is(#modalBackdrop, #cropperBackdrop) .modalHeader .modalHint {
  color: #e4e7ef; -webkit-text-fill-color: currentColor; font-size: 12px; line-height: 1.45; text-shadow: none;
}
body :is(#modalBackdrop, #cropperBackdrop) .modalHint:empty { display: none; }
body :is(#modalBackdrop, #cropperBackdrop) :is(.modalBody, .cropperBody) {
  flex: 1 1 auto; min-height: 0; min-width: 0; padding: 20px; margin: 0;
  overflow: auto; overscroll-behavior: contain; scroll-padding-block: 20px;
  color: var(--form-text); background: var(--form-surface); border: 0; border-radius: 0; box-shadow: none;
}
body :is(#modalBackdrop, #cropperBackdrop) .modalFooter {
  flex: 0 0 auto; padding: 14px 20px 18px; gap: 10px; margin: 0;
  color: var(--form-text); background: var(--form-surface); border: 0; border-top: 1px solid var(--form-line);
  border-radius: 0; box-shadow: none;
}
body :is(#modalBackdrop, #cropperBackdrop) .modalFooter:empty { display: none !important; }
body :is(#modalBackdrop, #cropperBackdrop) :is(.btn, .iconBtn, .selectOption) {
  min-height: 44px; border: 1px solid var(--form-line); border-radius: 12px;
  background: var(--form-soft); color: var(--form-text); -webkit-text-fill-color: currentColor;
  font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.3;
  box-shadow: none; text-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body :is(#modalBackdrop, #cropperBackdrop) :is(.btn.primary, .selectOption.isActive) {
  background: var(--form-primary); border-color: var(--form-primary); color: #fff;
}
body :is(#modalBackdrop, #cropperBackdrop) .btn.danger { color: var(--form-danger); background: var(--form-surface); }
body :is(#modalBackdrop, #cropperBackdrop) .modalHeader :is(.btn, .iconBtn) {
  flex: 0 0 auto; min-height: 44px; min-width: 44px; height: 44px; padding: 0 12px;
  background: rgba(255, 255, 255, .10); color: #fff; border: 1px solid rgba(255, 255, 255, .20);
}
body :is(#modalBackdrop, #cropperBackdrop) :is(input[type="text"], input[type="number"], input[type="password"], input[type="email"], input[type="date"], select, textarea) {
  width: 100%; min-width: 0; max-width: 100%; min-height: 46px; margin: 0; padding: 10px 12px;
  font-family: inherit; font-size: 16px; line-height: 1.4; border: 1px solid var(--form-line); border-radius: 12px;
  background: var(--form-field); color: var(--form-text); -webkit-text-fill-color: currentColor;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body :is(#modalBackdrop, #cropperBackdrop) :is(input, textarea)::placeholder { color: var(--form-muted); opacity: .8; -webkit-text-fill-color: currentColor; }
body :is(#modalBackdrop, #cropperBackdrop) :is(.field > span, .task-modal__label, .cardHint) { color: var(--form-muted); text-shadow: none; }
body :is(#modalBackdrop, #cropperBackdrop) :is(input, select, textarea):focus-visible,
body :is(#modalBackdrop, #cropperBackdrop) button:focus-visible { outline: 2px solid var(--form-focus); outline-offset: 2px; }
body :is(#modalBackdrop, #cropperBackdrop) :is(button, select):disabled { opacity: .5; cursor: default; box-shadow: none; }
body :is(#modalBackdrop, #cropperBackdrop) [hidden] { display: none !important; }
body #modalBackdrop[data-presentation="sheet"] > .modal { width: min(460px, 100%); }
body #modalBackdrop[data-presentation="compact"] > .modal { width: min(420px, 100%); }
body.ui-modal-open, body.ui-confirm-open { overflow: hidden; }
body #modalBackdrop input[aria-invalid="true"] { border-color: var(--form-danger); }
body :is(#modalBackdrop, #cropperBackdrop) .btn.primary::after { content: none; }

/* Presets share the form shell and controls; only their content layout is specific. */
.preset-week { display: grid; gap: 22px; min-width: 0; }
.preset-week__section { min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.preset-week__section + .preset-week__section { padding-top: 20px; border-top: 1px solid var(--form-line); }
.preset-week h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--form-text); }
.preset-week__period { margin: 6px 0 16px; color: var(--form-muted); font-size: 13px; }
.preset-week__capture { display: grid; gap: 6px; margin: 0; min-width: 0; }
.preset-week__captureRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.preset-week__captureRow .btn { height: 46px; padding: 0 16px; }
.preset-week__chooser { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px; margin-top: 14px; }
body #modalBackdrop .preset-week__chooser .iconBtn { width: 44px; height: 46px; padding: 0; font-size: 24px; }
body #modalBackdrop #weekPresetSelect { text-align: center; text-align-last: center; appearance: none; padding-inline: 8px; text-overflow: ellipsis; }
.preset-week__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0; font-size: 12px; color: var(--form-muted); }
.preset-week__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.preset-week__day { display: grid; gap: 5px; min-width: 0; padding: 8px 2px; text-align: center; border-radius: 10px; background: var(--form-soft); color: var(--form-muted); }
.preset-week__day > span { font-size: 11px; }
.preset-week__day > strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.preset-week__day.hasTasks { color: var(--form-text); }
.preset-week__note, .preset-week__feedback { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--form-muted); overflow-wrap: anywhere; }
.preset-week .isError { color: var(--form-danger); }
body #modalBackdrop .week-preset-snapshot-modal .modalFooter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.preset-week__destination { display: grid; gap: 4px; font-size: 12px; color: var(--form-muted); }
.preset-week__destination strong { color: var(--form-text); font-size: 14px; font-weight: 500; }
body #modalBackdrop #weekPresetInstall { width: 100%; min-height: 46px; height: auto; padding: 12px 16px; white-space: normal; }
.preset-week__footerNote { color: var(--form-muted); font-size: 11px; line-height: 1.4; }

/* Auth is a full-page entry surface, not another differently styled pop-up. */
body #authOverlay { top: var(--ui-viewport-top, 0px); bottom: auto; height: var(--ui-viewport-height, 100dvh); box-sizing: border-box; align-items: flex-start; background: var(--form-surface); overflow-y: auto; padding: 24px 16px; }
body #authOverlay .authCard { margin: auto; background: var(--form-surface); color: var(--form-text); border: 0; box-shadow: none; border-radius: 0; width: min(420px, 100%); padding: 16px; backdrop-filter: none; -webkit-backdrop-filter: none; }
body #authOverlay :is(.authTitle, .authHint, .field > span) { color: var(--form-text); }
body #authOverlay :is(input, .authTab, .btn) { color: var(--form-text); background: var(--form-field); border: 1px solid var(--form-line); box-shadow: none; border-radius: 12px; min-height: 46px; font-size: 16px; }
body #authOverlay :is(.authTab.isActive, .btn.primary) { background: var(--form-primary); color: #fff; border-color: var(--form-primary); }

/* Slate, not black: cover every field type, including passwords and browser autofill. */
body.dark {
  --bg: #273144; --card: #303a4d; --surface2: #354157; --surface3: #3d4960;
  --ios-glass-fill: #303a4d; --ios-glass-panel-fill: #354157; --ios-glass-btn-fill: #3b475d;
  --band: #2d374b; --map-core: #303b51; --map-node: #354157;
  --toast-bg: #414d66; --toast-text: #f0f3ff;
  --profile-field-surface: #3b475d; --profile-field-text: #f0f3ff;
  background: #273144; color-scheme: dark;
}
body.dark :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]), select, textarea, .search, .selectBtn, .pickerBtn),
body.dark #screen-settings :is(input[type="password"], input[type="text"], textarea),
body.dark .ninjaProfileForm :is(input[type="text"], input[type="number"], textarea) {
  background: var(--form-field); color: var(--form-text); -webkit-text-fill-color: var(--form-text);
  caret-color: var(--form-text); border-color: var(--form-line);
  box-shadow: inset 0 0 0 1000px var(--form-field); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.dark :is(input, textarea):is(:autofill, :-webkit-autofill) {
  -webkit-text-fill-color: var(--form-text); caret-color: var(--form-text);
  box-shadow: inset 0 0 0 1000px var(--form-field) !important;
}
body.dark :is(input, textarea)::placeholder { color: #c0cbdf; -webkit-text-fill-color: currentColor; opacity: .8; }
body.dark :is(input, select, textarea):focus-visible { outline: 2px solid var(--form-focus); outline-offset: 2px; }
body.dark .tabbar { background: linear-gradient(180deg, #354157, #2c374b); }
body.dark .skillPlanFact { background: linear-gradient(180deg, #3b475d, #354157); }
body.dark #libExpectedPoints { background: #354157; }
body.dark input:is([type="radio"], [type="checkbox"], [type="range"]) { background-color: #354157; accent-color: var(--form-primary); }
body.dark :is(.cropperViewport, .authCard, .ninjaAvatarHint--overlay) { background-color: #354157; }
body.dark .brand :is(.icon, .icon.hasImg) { background-color: #354157; }
body.dark :is(.topbar, .cardHeader, .modalHeader) { background-color: #303a4d; }
body.dark { --wallpaper-overlay: linear-gradient(180deg, rgba(39,49,68,.76), rgba(48,58,77,.60) 48%, rgba(39,49,68,.88)); --wallpaper-vignette: radial-gradient(1200px 700px at 50% 0%, rgba(93,113,153,.13), transparent 75%); }

/* All confirmations use the same small, keyboard-accessible dialog. */
body dialog.uiConfirm {
  width: min(420px, calc(100vw - 32px)); max-height: calc(var(--ui-viewport-height, 100dvh) - 32px);
  box-sizing: border-box; margin: auto; padding: 24px; overflow: auto;
  background: var(--form-surface); color: var(--form-text); border: 0; border-radius: 18px;
  box-shadow: var(--form-shadow); font-family: "Rubik", system-ui, sans-serif;
}
body dialog.uiConfirm::backdrop { background: rgba(32, 39, 54, .55); }
body dialog.uiConfirm[open] { position: fixed; inset: 0; z-index: 10010; }
body dialog.uiConfirm h2 { margin: 0 0 12px; color: var(--form-text); font-family: inherit; font-size: 18px; line-height: 1.4; font-weight: 600; }
body dialog.uiConfirm p { margin: 0; color: var(--form-muted); font-size: 14px; line-height: 1.6; }
body dialog.uiConfirm .eyebrow { display: none; }
body dialog.uiConfirm form { margin: 0; }
body dialog.uiConfirm :is(.uiConfirm__actions, .actions) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 0; }
body dialog.uiConfirm button { min-width: 0; min-height: 46px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--form-line); color: var(--form-text); background: var(--form-soft); box-shadow: none; font-size: 15px; font-weight: 500; line-height: 1.3; font-family: inherit; white-space: normal; }
body dialog.uiConfirm button:is(.uiConfirm__accept, .primaryBtn) { color: #fff; background: var(--form-primary); border-color: var(--form-primary); }
body dialog.uiConfirm.uiConfirm--danger .uiConfirm__accept { background: #b42336; border-color: #b42336; }
body dialog.uiConfirm button:focus-visible { outline: 2px solid var(--form-focus); outline-offset: 2px; }

@media (max-width: 640px) {
  body :is(#modalBackdrop, #cropperBackdrop) .ui-mobile-original { display: none !important; }
  body :is(#modalBackdrop, #cropperBackdrop) .ui-mobile-actions {
    display: flex; flex: 0 0 auto; gap: 10px; padding: 12px 16px max(16px, env(safe-area-inset-bottom));
    background: var(--form-surface); border-top: 1px solid var(--form-line);
  }
  body :is(#modalBackdrop, #cropperBackdrop) .ui-mobile-actions .btn {
    flex: 1; min-width: 0; min-height: 48px; height: auto; padding: 12px 10px; white-space: normal;
  }
  body #modalBackdrop .ui-sheet-handle {
    display: flex; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 80px; height: 24px; justify-content: center; align-items: center;
    background: transparent; touch-action: none;
  }
  body #modalBackdrop .ui-sheet-handle::before { content: ''; width: 30px; height: 3px; border-radius: 2px; background: #fff; opacity: .35; }
  body #modalBackdrop[data-presentation="sheet"] .modalHeader { position: relative; padding-top: 26px; }
  body :is(#modalBackdrop, #cropperBackdrop) .modalFooter:has(> .ui-mobile-original):not(:has(> :not(.ui-mobile-original))) { display: none !important; }
  body #modalBackdrop .task-modal__actions:has(> .ui-mobile-original):not(:has(> :not(.ui-mobile-original))) { display: none; }
  body :is(#modalBackdrop, #cropperBackdrop).modalBackdrop { padding: 0; align-items: stretch; }
  body :is(#modalBackdrop, #cropperBackdrop) > .modal { width: 100%; max-width: none; height: 100%; max-height: 100%; border-radius: 0; }
  body :is(#modalBackdrop, #cropperBackdrop) .modalHeader { padding: max(12px, env(safe-area-inset-top)) 16px 12px; }
  body :is(#modalBackdrop, #cropperBackdrop) :is(.modalBody, .cropperBody) { padding: 18px 16px; }
  body :is(#modalBackdrop, #cropperBackdrop) .modalFooter { padding: 12px 16px max(16px, env(safe-area-inset-bottom)); }
  body #modalBackdrop[data-presentation="sheet"] { align-items: flex-end; overflow: hidden; overscroll-behavior: none; }
  body #modalBackdrop[data-presentation="sheet"] > .modal {
    width: 100%; min-width: 100%; max-width: 100%; flex: 0 0 auto; box-sizing: border-box; margin: 0;
    height: auto; max-height: 85%; border-radius: 18px 18px 0 0;
    transition: none; animation: none; scale: none; rotate: none; translate: none;
  }
  body #modalBackdrop[data-presentation="sheet"] .modalBody {
    flex: 0 0 auto; overflow: hidden; overscroll-behavior: none; touch-action: pinch-zoom;
  }
  body #modalBackdrop[data-presentation="compact"] { align-items: center; padding: 16px; }
  body #modalBackdrop[data-presentation="compact"] > .modal { height: auto; border-radius: 18px; }
  body #modalBackdrop :is(.task-modal__actions, .autoFillInfoActions, .physics-modal > .row) { position: sticky; bottom: -18px; z-index: 2; padding: 12px 0 max(12px, env(safe-area-inset-bottom)); background: var(--form-surface); }
  body #modalBackdrop .task-modal__actions .btn { flex: 1; min-width: 0; }
}
@media (max-width: 420px) {
  .preset-week__captureRow { grid-template-columns: minmax(0, 1fr); }
  .preset-week__captureRow .btn { width: 100%; }
  .preset-week__chooser { gap: 6px; }
}