@view-transition {
  navigation:auto;
}

:root {
  --app-safe-top:env(safe-area-inset-top, 0px);
  --app-safe-right:env(safe-area-inset-right, 0px);
  --app-safe-bottom:env(safe-area-inset-bottom, 0px);
  --app-safe-left:env(safe-area-inset-left, 0px);
}

html {
  min-height:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body {
  min-height:100vh;
  min-height:100dvh;
  overscroll-behavior-y:contain;
  -webkit-user-select:none;
  user-select:none;
}

button,
[role="button"],
input,
select,
textarea,
a {
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

button,
[role="button"] {
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea {
  -webkit-user-select:text;
  user-select:text;
}

.app-mode-launcher {
  position:fixed;
  z-index:850;
  right:max(16px, var(--app-safe-right));
  bottom:max(18px, calc(var(--app-safe-bottom) + 12px));
  min-height:44px;
  padding:0 16px;
  border:1px solid rgba(198,255,88,.38);
  border:1px solid color-mix(in srgb, var(--accent, #c6ff58) 38%, transparent);
  border-radius:999px;
  background:var(--surface, #14171d);
  background:color-mix(in srgb, var(--surface, #14171d) 90%, transparent);
  color:var(--text, #f5f6f8);
  box-shadow:0 14px 36px rgba(0,0,0,.3);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  font:700 13px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  cursor:pointer;
}

.app-mode-overlay {
  position:fixed;
  z-index:900;
  inset:0;
  display:grid;
  align-items:end;
  padding:max(18px, var(--app-safe-top)) max(16px, var(--app-safe-right))
    max(18px, var(--app-safe-bottom)) max(16px, var(--app-safe-left));
  background:rgba(5,7,10,.66);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

.app-mode-overlay[hidden] {
  display:none;
}

.app-mode-sheet {
  width:min(440px, 100%);
  margin:0 auto;
  padding:24px;
  border:1px solid var(--line, #272d38);
  border-radius:24px;
  background:var(--surface, #14171d);
  color:var(--text, #f5f6f8);
  box-shadow:0 28px 90px rgba(0,0,0,.48);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

.text-context-menu {
  position:fixed;
  z-index:1100;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  width:148px;
  padding:7px;
  border:1px solid var(--line, #272d38);
  border-radius:13px;
  background:var(--surface, #14171d);
  color:var(--text, #f5f6f8);
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}

.text-context-menu[hidden] {
  display:none;
}

.text-context-menu button {
  min-height:38px;
  border:0;
  border-radius:9px;
  background:var(--surface2, #1a1e26);
  color:var(--text, #f5f6f8);
  font:700 13px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  cursor:pointer;
}

.text-context-menu button:hover:not(:disabled) {
  background:var(--accent, #c6ff58);
  color:var(--accent-dark, #1e3010);
}

.text-context-menu button:disabled {
  opacity:.42;
  cursor:default;
}

.app-mode-sheet h2 {
  margin:0;
  font-size:22px;
  letter-spacing:-.035em;
}

.app-mode-sheet p {
  margin:10px 0 0;
  color:var(--muted, #8b93a2);
  font-size:14px;
  line-height:1.55;
}

.app-mode-actions {
  display:grid;
  gap:10px;
  margin-top:20px;
}

.app-mode-action {
  min-height:48px;
  padding:0 16px;
  border:1px solid var(--line, #272d38);
  border-radius:14px;
  background:transparent;
  color:var(--text, #f5f6f8);
  font:750 14px/1 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  cursor:pointer;
}

.app-mode-action.primary {
  border-color:var(--accent, #c6ff58);
  background:var(--accent, #c6ff58);
  color:#17200d;
}

.app-mode-action[hidden] {
  display:none;
}

@media (max-width:720px) {
  .app-mode-launcher {
    bottom:max(82px, calc(var(--app-safe-bottom) + 72px));
  }
}

@media (display-mode:standalone), (display-mode:fullscreen) {
  .app-mode-launcher {
    display:none;
  }
}

@media (min-width:721px) {
  .app-mode-overlay {
    align-items:center;
  }
}

::view-transition-old(root) {
  animation:the-five-page-out .16s ease both;
}

::view-transition-new(root) {
  animation:the-five-page-in .26s cubic-bezier(.2,.8,.2,1) both;
}

html.the-five-leaving body {
  opacity:0;
  transform:translateY(-5px) scale(.995);
}

body {
  transition:opacity .18s ease, transform .18s ease;
}

@keyframes the-five-page-out {
  to { opacity:0; transform:translateY(-5px) scale(.995); }
}

@keyframes the-five-page-in {
  from { opacity:0; transform:translateY(7px) scale(.995); }
}

@media (prefers-reduced-motion:reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation:none;
  }

  html.the-five-leaving body,
  body {
    transition:none;
    transform:none;
  }

  .app-mode-overlay,
  .app-mode-sheet {
    scroll-behavior:auto;
  }
}
/* Keep saved/sync status in the document flow, clear of the fixed phone dock. */
.offline-status {
  position: relative;
  z-index: 5;
  width: calc(100% - 32px);
  max-width: 448px;
  margin: calc(env(safe-area-inset-top, 0px) + 8px) auto 8px;
  padding: 10px 12px;
  border: 1px solid var(--line, #454b56);
  border-radius: 12px;
  background: var(--surface, #14171d);
  color: var(--text, #f5f6f8);
  font: 13px/1.5 system-ui, sans-serif;
}
.offline-status[hidden], .offline-status [hidden] { display: none; }
.offline-status button {
  min-height: 44px;
  margin: 4px 6px;
  padding: 8px 12px;
  border: 1px solid var(--line, #454b56);
  border-radius: 8px;
  background: var(--surface2, #1a1e26);
  color: inherit;
  cursor: pointer;
}
.offline-conflicts { max-height: 55dvh; overflow-y: auto; overflow-wrap: anywhere; }
.offline-conflicts section { border-top: 1px solid var(--line, #454b56); padding: 12px 0; }