*, *::before, *::after { box-sizing: border-box; }

.nk-icon { display: block; flex: 0 0 auto; overflow: visible; }

html {
  min-height: 100%;
  background: var(--ink-950);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 82% -5%, rgba(255, 255, 255, 0.1), transparent 26rem),
    radial-gradient(circle at 88% 22%, rgba(157, 98, 255, 0.09), transparent 28rem),
    radial-gradient(circle at -10% 70%, rgba(82, 216, 223, 0.055), transparent 28rem),
    linear-gradient(180deg, var(--ink-900), var(--ink-950));
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(82, 216, 223, 0.7);
  outline-offset: 3px;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--paper); font-weight: 600; }
strong { font-weight: 600; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.glass-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035)),
    var(--surface);
  box-shadow: inset 0 1px rgba(255,255,255,.045), var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text);
  background: rgba(255,255,255,.075);
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s var(--ease), border-color .2s ease, background .2s ease;
}

.button:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.button:active { transform: translateY(0) scale(.985); }
.button--gold { color: #111720; border-color: rgba(255,226,154,.45); background: linear-gradient(135deg, var(--gold-bright), #d6a944); }
.button--cyan { color: #071416; border-color: rgba(129,239,243,.5); background: linear-gradient(135deg, #96f0f2, #42c3ca); box-shadow: 0 12px 32px rgba(66,195,202,.16); }
.button--violet { border-color: rgba(157,98,255,.5); background: linear-gradient(135deg, rgba(112,53,220,.92), rgba(62,28,137,.96)); box-shadow: 0 12px 32px rgba(112,53,220,.22); }
.button--emerald { color: #07130d; border-color: rgba(98,217,154,.5); background: linear-gradient(135deg, #8be8b4, #42ba7e); }
.button--danger { color: #ffd8d9; border-color: rgba(255,127,130,.32); background: rgba(255,127,130,.1); }
.button--ghost { background: transparent; }
.button--small { min-height: 36px; padding: 7px 11px; font-size: .82rem; border-radius: 12px; }
.button[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

:where(.button, .icon-button, .app-dialog__close, .tool-button, .ai-action, .ai-pill, .quick-card, .module-card, .folder-card, .bottom-nav__item, .section-heading button).is-pressing {
  animation: control-press .44s cubic-bezier(.2,.82,.24,1) both;
}

.button,
.icon-button,
.app-dialog__close,
.ai-action,
.ai-pill,
.quick-card,
.task-row,
.folder-card,
.note-row,
.tool-button,
.setting-row,
.bottom-nav__item:not(.bottom-nav__item--orb) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.button::after,
.icon-button::after,
.app-dialog__close::after,
.ai-action::after,
.ai-pill::after,
.quick-card::after,
.task-row::after,
.folder-card::after,
.note-row::after,
.tool-button::after,
.setting-row::after,
.bottom-nav__item:not(.bottom-nav__item--orb)::after {
  content: "";
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  opacity: 0;
  transform: translate(-50%,-50%) scale(.25);
  pointer-events: none;
}

.button.is-pressing::after,
.icon-button.is-pressing::after,
.app-dialog__close.is-pressing::after,
.ai-action.is-pressing::after,
.ai-pill.is-pressing::after,
.quick-card.is-pressing::after,
.task-row.is-pressing::after,
.folder-card.is-pressing::after,
.note-row.is-pressing::after,
.tool-button.is-pressing::after,
.setting-row.is-pressing::after,
.bottom-nav__item.is-pressing::after {
  animation: control-bloom .56s ease-out both;
}

@keyframes control-press {
  0% { scale: 1; }
  34% { scale: .965; }
  68% { scale: 1.018; }
  100% { scale: 1; }
}

@keyframes control-bloom {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.25); }
  24% { opacity: .18; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(22); }
}

.field {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  color: var(--text);
  background: rgba(255,255,255,.055);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
  font-size: 16px;
}

.field::placeholder { color: #737e8e; }
.field:focus { border-color: rgba(82,216,223,.48); box-shadow: 0 0 0 4px rgba(82,216,223,.08); outline: 0; }
textarea.field { resize: vertical; }

/* Preferenze locali di accessibilità. Nessuna modalità altera i dati o i
   contenuti: cambiano soltanto resa, scala e movimento dell'interfaccia. */
html[data-ui-scale="compact"] { font-size: 94%; }
html[data-ui-scale="large"] { font-size: 112.5%; }

html[data-ui-readability="readable"] body {
  font-family: Verdana, "Segoe UI", Arial, sans-serif;
  font-weight: 430;
  line-height: 1.68;
  letter-spacing: .012em;
  word-spacing: .035em;
  text-rendering: geometricPrecision;
}
html[data-ui-readability="readable"] :where(p, li, small, label, input, textarea, select) { line-height: 1.68; }
html[data-ui-readability="readable"] :where(h1, h2, h3, strong) { letter-spacing: 0; }

html[data-ui-palette="contrast"] {
  --nk-canvas: #000;
  --nk-canvas-raised: #050505;
  --nk-surface: #101010;
  --nk-surface-raised: #171717;
  --nk-surface-hover: #242424;
  --nk-text: #fff;
  --nk-text-soft: #f1f1f1;
  --nk-text-muted: #c7c7c7;
  --nk-border: rgba(255,255,255,.28);
  --nk-border-strong: rgba(255,255,255,.52);
  --ink-950: #000;
  --ink-900: #020202;
  --ink-850: #0b0b0b;
  --ink-800: #141414;
  --surface: rgba(14,14,14,.97);
  --surface-strong: #050505;
  --line: rgba(255,255,255,.3);
  --line-strong: rgba(255,255,255,.55);
  --text: #fff;
  --text-soft: #f1f1f1;
  --text-muted: #c7c7c7;
}
html[data-ui-palette="contrast"] body { background: #000; }
html[data-ui-palette="contrast"] :where(button, a, input, textarea, select):focus-visible {
  outline-color: #fff;
  outline-width: 4px;
}

html[data-ui-palette="color-safe"] {
  --nk-gold: #e69f00;
  --nk-gold-bright: #ffd166;
  --nk-violet: #7b8fff;
  --nk-violet-bright: #aebaff;
  --nk-cyan: #56b4e9;
  --nk-emerald: #009e73;
  --nk-coral: #d55e00;
  --nk-warning: #f0e442;
  --gold: #e69f00;
  --gold-bright: #ffd166;
  --violet: #7b8fff;
  --violet-bright: #aebaff;
  --cyan: #56b4e9;
  --emerald: #009e73;
  --danger: #d55e00;
  --warning: #f0e442;
}

html[data-ui-motion="reduced"] { scroll-behavior: auto; }
html[data-ui-motion="reduced"] *,
html[data-ui-motion="reduced"] *::before,
html[data-ui-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

.chip {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft);
  background: rgba(255,255,255,.045);
  font-size: .78rem;
  font-weight: 600;
}

.chip--gold { color: var(--gold-bright); border-color: rgba(239,202,109,.34); background: rgba(239,202,109,.08); }
.chip--cyan { color: #a8f7fb; border-color: rgba(82,216,223,.34); background: rgba(82,216,223,.08); }
.chip--emerald { color: #aef2ca; border-color: rgba(98,217,154,.34); background: rgba(98,217,154,.08); }
.chip--violet { color: #e3d0ff; border-color: rgba(157,98,255,.38); background: rgba(157,98,255,.1); }

.app-dialog {
  width: min(92vw, 480px);
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  color: var(--text);
  background: transparent;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.app-dialog::backdrop { background: rgba(0,0,0,.68); backdrop-filter: blur(8px); }
body:has(.app-dialog[open]) { overflow: hidden; }
.app-dialog__surface { position: relative; padding: 26px; border: 1px solid var(--line-strong); border-radius: 28px; background: linear-gradient(160deg, #151e2e, #080d15 70%); box-shadow: var(--shadow); }
.app-dialog__close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft); background: rgba(255,255,255,.05); cursor: pointer; font-size: 1.45rem; }

.app-dialog.app-dialog--ai {
  width: min(96vw, 1800px);
  max-width: none;
  height: min(94dvh, 1040px);
  max-height: none;
  overflow: hidden;
}
.app-dialog.app-dialog--ai::backdrop {
  background: rgba(1,5,12,.38);
  backdrop-filter: blur(11px) saturate(.78);
}
.app-dialog--ai .app-dialog__surface {
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border-color: rgba(130,151,200,.28);
  border-radius: 28px;
  background: radial-gradient(circle at 70% 0,rgba(119,113,255,.1),transparent 38%),linear-gradient(145deg,#07101d,#020711 72%);
  box-shadow: 0 42px 110px rgba(0,0,0,.68),0 0 0 1px rgba(135,126,255,.1),inset 0 1px rgba(255,255,255,.04);
}
.app-dialog--ai .app-dialog__close { display: none; }
.app-dialog--ai #dialogContent,
.ai-studio-overlay-host { width: 100%; height: 100%; }

@media (max-width:699px) {
  .app-dialog.app-dialog--ai { width: calc(100vw - 10px); height: calc(100dvh - 10px); }
  .app-dialog--ai .app-dialog__surface { border-radius: 18px; }
}

.toast-region { position: fixed; left: 50%; bottom: calc(var(--nav-height) + env(safe-area-inset-bottom) + 18px); z-index: 200; width: min(calc(100% - 28px), 440px); transform: translateX(-50%); pointer-events: none; }
.toast { padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: 15px; color: var(--text); background: rgba(12,18,29,.96); box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); animation: toast-in .25s var(--ease) both; }
.toast + .toast { margin-top: 8px; }
.app-update-notice {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(111,223,232,.34);
  border-radius: 17px;
  color: var(--text);
  background: linear-gradient(135deg,rgba(12,20,34,.98),rgba(18,20,42,.98));
  box-shadow: 0 20px 54px rgba(0,0,0,.34),0 0 30px rgba(102,92,235,.1);
  backdrop-filter: blur(16px);
  pointer-events: auto;
  animation: toast-in .25s var(--ease) both;
}
.app-update-notice__copy { display: grid; gap: 3px; min-width: 0; }
.app-update-notice__copy strong { font-size: .78rem; }
.app-update-notice__copy span { color: var(--muted); font-size: .64rem; line-height: 1.4; }
.app-update-notice__actions { display: flex; gap: 6px; }
.app-update-notice__actions button {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  color: var(--text);
  background: rgba(255,255,255,.04);
  font: inherit;
  font-size: .62rem;
  font-weight: 700;
  cursor: pointer;
}
.app-update-notice__actions button:last-child { border-color: transparent; color: #071018; background: linear-gradient(135deg,#79e6e9,#66c9d7); }
.app-update-notice__actions button:disabled { opacity: .48; cursor: wait; }

@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 560px) {
  .app-update-notice { grid-template-columns: 1fr; }
  .app-update-notice__actions { justify-content: flex-end; }
}

@media (min-width: 1024px) {
  html { background: #070a10; }

  body {
    background:
      radial-gradient(circle at 78% -12%, rgba(126, 92, 255, .16), transparent 34rem),
      radial-gradient(circle at 35% 72%, rgba(78, 199, 213, .07), transparent 34rem),
      linear-gradient(145deg, #0b0f16, #070a10 58%, #11101b);
  }

  .app-shell {
    --surface: rgba(18,23,33,.92);
    --surface-strong: #0c1119;
    --surface-soft: rgba(255,255,255,.055);
    --line: rgba(255,255,255,.115);
    --line-strong: rgba(255,255,255,.2);
    --paper: #ffffff;
    --paper-soft: #e3e8ef;
    --text: #f6f8fb;
    --text-soft: #c7cfda;
    --text-muted: #8994a4;
    --shadow: 0 24px 60px rgba(0,0,0,.32);
    --shadow-soft: 0 12px 34px rgba(0,0,0,.2);
    color: var(--text);
  }

  .app-shell .glass-card {
    background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)), var(--surface);
    box-shadow: 0 14px 38px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.055);
    backdrop-filter: blur(22px);
  }

  .app-shell .field {
    background: rgba(255,255,255,.055);
  }
}
