:root {
  --bg: #f6f6f9;
  --surface: #ffffff;
  --surface-2: #f0f0f5;
  --border: #e3e3ea;
  --text: #1c1c28;
  --muted: #6e6f80;
  --accent: #6d4aff;
  --accent-soft: #ece7ff;
  --danger: #d23c3c;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #111118;
    --surface: #1a1a24;
    --surface-2: #23232f;
    --border: #2e2e3c;
    --text: #ececf3;
    --muted: #8e8fa3;
    --accent: #8e74ff;
    --accent-soft: #2a2447;
    color-scheme: dark;
  }
}
/* the same, chosen in Settings (Appearance → Dark) */
:root[data-theme='dark'] {
  --bg: #111118;
  --surface: #1a1a24;
  --surface-2: #23232f;
  --border: #2e2e3c;
  --text: #ececf3;
  --muted: #8e8fa3;
  --accent: #8e74ff;
  --accent-soft: #2a2447;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
h2 { margin: 0; font-size: 1.1rem; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.small, .muted.small { display: block; }
.link { color: var(--accent); text-decoration: none; font-size: 0.9rem; }
.link:hover { text-decoration: underline; }
.error { color: var(--danger); font-size: 0.9rem; }
.notice { background: var(--accent-soft); color: var(--accent); padding: 10px 14px; border-radius: 10px; font-weight: 500; }
.pill { font-size: 0.72rem; padding: 1px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-weight: 600; vertical-align: 2px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--text); text-decoration: none; }
.brand img { border-radius: 8px; }

.center { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.card.highlight { border-color: var(--accent); }
.login, .device { width: min(380px, 100%); align-items: center; text-align: center; gap: 18px; padding: 32px 26px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-weight: 500; text-decoration: none; color: var(--text); white-space: nowrap; }
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-big { width: 100%; padding: 14px 18px; font-size: 1.05rem; border-radius: 14px; }
.btn-big svg { width: 20px; height: 20px; fill: currentColor; }
.btn-small { padding: 5px 11px; font-size: 0.85rem; }
.btn-ghost { background: transparent; }
.btn-danger { color: var(--danger); }

input { border: 1px solid var(--border); background: var(--surface); border-radius: 11px; padding: 9px 12px; outline: none; min-width: 0; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[name="code"] { text-transform: uppercase; letter-spacing: 0.12em; font-family: ui-monospace, monospace; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.inline input { flex: 1; min-width: 160px; }

.code { font-family: ui-monospace, monospace; font-size: 2.2rem; font-weight: 700; letter-spacing: 0.12em; }
.qr { width: 190px; background: #fff; border-radius: 12px; padding: 8px; }
.qr svg { display: block; width: 100%; height: auto; }

.topbar { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; max-width: 760px; margin: 0 auto; }
.topbar form { margin: 0; }
.topnav { display: flex; gap: 6px; align-items: center; }
.page-title { margin: 0; font-size: 1.6rem; letter-spacing: -0.02em; }
.page { max-width: 760px; margin: 0 auto; padding: 8px 16px 60px; display: flex; flex-direction: column; gap: 18px; }
.section-title { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.rows li:last-child { border-bottom: 0; }
.rows form { margin: 0; }

/* ---------- home: app tiles that fly in, and an app that opens like on a phone ---------- */

/* per-app colours (the gradients of their icons) */
.app-tasks { --c1: #6d4aff; --c2: #b04aff; }
.app-fitness360 { --c1: #22b8cf; --c2: #6d4aff; }
.app-sport { --c1: #2fb67c; --c2: #6d4aff; }
.app-food { --c1: #f29a38; --c2: #6d4aff; }

/* slow, soft colour blobs behind everything */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient span { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: 0.22; animation: drift 26s ease-in-out infinite alternate; }
.ambient span:nth-child(1) { background: #6d4aff; left: -20vmax; top: -25vmax; }
.ambient span:nth-child(2) { background: #f29a38; right: -25vmax; top: 10vmax; animation-duration: 32s; opacity: 0.14; }
.ambient span:nth-child(3) { background: #2fb67c; left: 10vmax; bottom: -35vmax; animation-duration: 38s; opacity: 0.14; }
@keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.08); } }

.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); transition: color 0.15s, border-color 0.15s, transform 0.3s; }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { color: var(--accent); border-color: var(--accent); transform: rotate(45deg); }

.home { gap: 22px; padding-top: 18px; }
.greet { font-size: clamp(1.7rem, 5vw, 2.3rem); font-weight: 700; letter-spacing: -0.03em; animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

.apps { position: relative; /* tile offsets (drag & drop) are measured from here */ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.app-tile {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 22px; overflow: hidden;
  background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent;
  animation: tile-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s, box-shadow 0.25s;
}
/* a glow in the app's own colours, brighter on hover */
.app-tile::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--c1) 30%, transparent), transparent 60%); opacity: 0.55; transition: opacity 0.25s; pointer-events: none; }
.app-tile:active { transform: scale(0.97); }
.app-tile:nth-child(1) { animation-delay: 0.08s; }
.app-tile:nth-child(2) { animation-delay: 0.16s; }
.app-tile:nth-child(3) { animation-delay: 0.24s; }
.app-tile:nth-child(4) { animation-delay: 0.32s; }
.app-tile:nth-child(5) { animation-delay: 0.4s; }
.app-tile:nth-child(6) { animation-delay: 0.48s; }
.app-icon { position: relative; flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 1.8rem; box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--c1) 80%, transparent); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1.4); }
.app-icon img { width: 60px; height: 60px; display: block; border-radius: 16px; }
.app-text { position: relative; flex: 1; min-width: 0; }
.app-text strong { display: block; font-size: 1.12rem; letter-spacing: -0.01em; }
.app-go { position: relative; width: 20px; height: 20px; color: var(--muted); transition: transform 0.25s, color 0.25s; }

@keyframes tile-in { from { opacity: 0; transform: translateY(26px) scale(0.94); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

.signout { margin: 10px 0 0; }
.btn-wide { width: 100%; padding: 12px; }

@media (prefers-reduced-motion: reduce) {
  .ambient span, .greet, .app-tile { animation: none; }
  .app-tile, .app-icon, 
}

/* reordering: hold (touch) or drag (mouse) a tile */
.app-tile { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; cursor: pointer; }
/* the icon must not catch the long press (iOS would offer "save image") */
.app-tile img, .app-tile svg { pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.app-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.apps.ready .app-tile { animation: none; }
.app-tile.dragging { z-index: 20; animation: none; transition: none; cursor: grabbing; box-shadow: 0 24px 60px -12px color-mix(in srgb, var(--c1) 70%, transparent); border-color: color-mix(in srgb, var(--c1) 60%, var(--border)); }
.app-tile.dragging::before { opacity: 1; }
.apps.reordering .app-tile:not(.dragging) { opacity: 0.8; }
.hint { text-align: center; margin-top: -6px; opacity: 0.7; }

/* Hover effects only where there is a real mouse: iOS keeps a touched element in :hover
   ("sticky hover"), so a moved or tapped tile would otherwise stay highlighted. */
@media (hover: hover) and (pointer: fine) {
  .app-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c1) 55%, var(--border)); box-shadow: 0 14px 40px -12px color-mix(in srgb, var(--c1) 55%, transparent); }
  .app-tile:hover::before { opacity: 1; }
  .app-tile:hover .app-icon { transform: scale(1.08) rotate(-4deg); }
  .app-tile:hover .app-go { transform: translateX(4px); color: var(--c1); }
}

/* settings: language per app */
.lang-form { display: flex; flex-direction: column; gap: 12px; }
.lang-form select { font: inherit; color: var(--text, inherit); background: var(--surface-2, transparent); border: 1px solid var(--border, #ccc); border-radius: 10px; padding: 8px 10px; }
.pill-on { background: color-mix(in srgb, #1baf7a 18%, transparent); color: #14925f; }
.inline > form { display: contents; }

/* segmented choice (Settings → Appearance) */
.seg { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; width: fit-content; max-width: 100%; }
.seg button { border: 0; background: none; padding: 7px 16px; border-radius: 9px; font-size: 0.9rem; font-weight: 500; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }