/* ============================================================
   AVANO — Base styles
   Theme colors, page layout, top bar, bottom tab bar, cards, buttons and form fields.
   ============================================================ */

/* Dark theme is the default: deep navy with baby blue (the Avano scheme in js/features/settings.js),
   lettering white on dark and black on light.
   Light mode (and switching back) is set by setTheme() there, so keep these in step with its dark values. */
:root{
  --bg: #0e0a18;
  --bg-elev: #191523;
  --bg-elev-2: #24202f;
  --bg-elev-3: #302b3c;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.18);
  --text: #ffffff;
  --text-dim: #d9d7de;
  --text-faint: #8d8997;
  --accent: #72b6f3;
  --accent-dim: #5096d5;
  --on-accent: #111111;   /* text on an accent-colored button: black on a light accent, white on a dark one (applyColorScheme) */
  --accent-text: #ffffff;   /* lettering that would be accent-colored: white for Avano, the accent for other schemes (applyColorScheme) */
  --accent-soft: rgba(255,255,255,0.12);
  /* Theme-aware overlays (flip in light mode) */
  --overlay-subtle: rgba(255,255,255,0.05);
  --overlay-soft:   rgba(255,255,255,0.09);
  --overlay-med:    rgba(255,255,255,0.14);
  --scrim:          rgba(0,0,0,0.7);
  --chart-grid:     rgba(255,255,255,0.05);
  --track-empty:    #3a3546;
  /* Train / Fuel / Recover rings and progress trends (deeper on light, brighter on dark) */
  --ring-train:     #c9a84c;
  --ring-fuel:      #3ddc97;
  --ring-recover:   #6fb4f0;
  /* Protein, carbs and fat, everywhere they show (rings, bars, recipes, the food screen) */
  --macro-protein:  #f25c5c;
  --macro-carbs:    #f5c542;
  --macro-fat:      #3ddc97;
  --trend-up:       #3ddc97;
  --trend-down:     #f06f6f;
  --sec-skill:      #e05c8a;
  --sec-cond:       #6fb4f0;

  /* sport accent colors */
  --sport-football: #d97a3d;
  --sport-basketball: #e8623d;
  --sport-soccer: #4dd0e1;
  --sport-swimming: #4dd0e1;
  --sport-tennis: #c4e04d;
  --sport-volleyball: #f5a623;
  --sport-wrestling: #9b6ef0;
  --sport-track: #c9a8f0;
  --sport-baseball: #c9a84c;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ background: var(--bg); }
/* No background of its own: the page color comes from html and body::before, which sit under the
   graph paper (css/lab.css). A body background paints over that layer and hid the grid. */
body{
  background: transparent;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height: calc(100vh / var(--zoom, 1));
  padding-bottom: 6.25rem;
}

/* Guaranteed black backdrop behind every layer */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: -1;
  pointer-events: none;
}

.display{
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.app{ max-width: 720px; margin: 0 auto; padding: 0 1rem; background: transparent; }

header.topbar{ display:flex; align-items:center; justify-content:center; padding: 2rem 0 1.5rem; }
header.topbar h1{
  font-family:'Oswald', sans-serif; font-weight:700; font-size: 36px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
}
header.topbar h1 span{ color: var(--text); }
header.topbar .tagline{
  display:block; text-align:center; font-size: 12px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.18em; margin-top: 4px;
}

/* ---- Brand logo: assets/avano-logo.png used as a mask and painted with --text, so it follows the theme.
   Inlined as a data URI because CSS masks can't load files when app.html is opened from disk. ---- */
.avano-logo{
  --logo-shape: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAEgCAYAAABsPKAhAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAADEWSURBVHhe7d0JuH31vMfxK6kMjUgpkYZrKColtyiU0KAoKUOmIkWEChFxM5ShkpsGMkVClCJFhJRCGSJ1FQoVlSjFrff3Ph++597j65z/2cPae6+99+f1POfh6X/OWmvvvfb6rfX7fYd/+zczMzMzMzMzMzMzMzObdBGxeP1vZmZmNmDA5sB3gM8BHwYOA/YHdge2AzYAVgHuXv/WzMzMegQsA1wc8wBuBa4GLo2IbwBHAfsCOwPrRMS96jbNzMysA8CGwF/r4LsQ4E8amIGvAu8F9oiILSPiQZ7aNjMz6wDwnjrA9gq4FrgI+BSwV0Q8PiJWq/s0MzObejkVfXkdTJsC/A74Zq4zvwjYKCKWr8dhZmY2dYCt68A5SMBlwKnAQcATgAfUYzIzM5sKwPF1oBwW4AbgLOB9wDOAtSJiqXqMZmZmEwdYEbimDo6jANwOXAgcl2lR6wL3rMdsZmY2EYDn18GwDYC/AT/JdeS9gYc7P9nMzCZGRNwFOLsOgG0D3JYDsnKTX5xT1kvU12NmZjY2gPWBW+qg12aZl/xDpVQBz8585LvU12ZmZtZqwJvqIDdOMqhLa8iHANtrfbu+RjMzs9ZRmUngkjqwjSvgN8CXgVdGxKMiYrH6ms3MzFoB2AK4sw5m4w74S05XK+VpR2D1+trNzMxGCjiiDmCTBrgO+BbwZtWzBlao74OZmdlQAfcGrqyD1iRTWU7g09lgYj03lzAzs5HIqOKppE5RGcz1QeDpiq6u74+ZmdnAqExkHZymUU5XnwG8Sk/HwJL1vTIzM2sM8Ihxyw0eBuACrZMDWwGr1vfNzMysb8Ab6gBk/w+4HjgFeDnwUFfmMjOzRmi6Ffh+HXjsXwH/A5wHvFvpXBGxbH0/zczMOpZpOhOXGzxowH8DRwM7uyqXmZn1BPhEHWCsczlV/TlV5VLd7Yi4W32PzczM/kVELA9cVQcW6152dVJVrkMjYoeIWK6+32ZmNuW0jgmskxG/59XBxPqXNatVBEQtFtesn4GZmU2oiFhKF/5c690NOBD4KHAR8Cvg5jpo2GBkR6dzgH2AdetnZWZmYwa4e0Q8JAfZXZVeBHwc+A7wc+APdTBoI+DXwNeBz2pdGjghf06MiJOBr+T07vX1b8eNbnyyXvWrgf9wr2Mzs5ZS/eKIWE0Xa3X8iYjX5ZPsN4GfAjfWi3zbAX8CPg+8CNgAuH993RWwtMpHZrCTbjj0NPkh4EzgMqUL1f20XaY4XZIpTk8B7ltft5mZDVA+yWpw2UR1ioH9MtXlLODiXE+kXsDHTbYPPFzFLep70I8MJlsfeLI6IQGn5xPzWA3KwC9yBmB7YJX6Os3MrAeqpqQnWTWRB7bO1JVjgbPzKejaekGeJCr8ATymvi+DkmvgGyoiGXhHvs+X1eNqq5yW/yTwDA/GZmYLmDVNqnrLmlLcN59kT8vgp4keZBfhGxFxn/p+DVt+Po8FnpNdkfSZtH5dGbgm840dUW1m0ytTeFbX05Xa+wEHR8RHgC/ntOcN9QI6zfJJrrXNDSLiwTntryhxTflf2eap61w/PzNjAR4eEYvV12RmNpYUlapBNqeL1aZu54h4S0blKuBHgU9/rhdGmxuwe32P2ywi7gVsmk+b+sx/1NbPG7hDswvAm5TepIC9+nrMzFonn2RXATbKFJ6DM6r2qxlVe+skBD6NEnBpRNyjvvfjRE+YuaTwwkzx+mUbz4uMqFZkvJ7k13EHJzMbGdXlVTnAfJJ9vC6g+ST7gXySVVF9DbJ6irDBeEv9XMadbigyDUo5118Cfl9f9KgBf8tc8LcBj1ZAWn0dZmZ9iYi75pTh2hn0tGemoehJ5Xzgd5o+bOMTy6TTjQ3wuPqZTZpMgXpSTgNrQL6pvhejNJNrHBHvVPS9vi/1NZiZzSmnAJdW7mjWLt4jB9mPZZ9WRYi2co1umqlASCcFNiYNcL+Mslb0u6qRtarlo5pvAEcqZ9rT1Gb2d5raA9bKJ9k9crpYg6xSRVSI4k/1YmLtldHEy9TPeZpknIFiDDQVrHKat9T3aZQyoPBdwBM1m1SP38wmiNZkFa2ZhSjUIEDraKr8o0FWwS1jV1bR5qb0I03P1nNgmmX62u7ZJekX9T0bFS3RZArdWxUv4dQmszEELJl5lUrjUG7ly4GjMuhJ6RwaZP0kOwWy6cAD6zli/6DCJMAT8gn0XOD2+h6OQg7G+q7quLS2ffd67GY2Ilm3eGaQ3Ql4vQpRZD7iT4DrHFls0xKE1QTlngMPA/bOQK7W3KTmNPURwOZeMzYbAmCFvCBsDjwrq+58GPga8GMNsvWLalYBB9RzyxaWAYcajM9o03cta5a/Hdi4HrOZdUHrc+olqwL5EfHMTOA/MfuyKnqzNXfhNp70NFfPO+tOzjY9N2tBX1nf41HIaWplIBygIiX1mM2mnqaKs9LTOrnW9NLsO3pSVnv6mQdZG6QsdPKwem5ab9QvGHha1h5vy2D816yhrfRAr/nb9MiWaxpkNV28bXbfUZeXU2al73g91kYGOKSet9Y/4N7ZN1hZBL+p7/soqLNURnjvqGWsesxmYycrPa2szifANsBrM7JYU1IXZtBTq5L9zWZkNyRfjAcoIlbKtD7deLdizVjLWFl965H1eM1aJSs9rZzN2ndWZHHWLP5iBj7oztKDrI0llWms57wNhqqPRcQLIuLkNrTGzLrUSkNUMwvfiNnwZWMAtbh7UDYGUDL+QcCx2UdWd4t/9HSxTSLgDypCUb8XNljqw5yxH2cDt9XPZdiAq4H/ymIfTmmy5qgXZz7JrpE1i/fKkP1PAhfkyXeLn2RtSp1cvzM2PNlS8Y3A9+sHM2wZRa3ls1fqoaQeq9mc9CSbkYiPjIgdMlfvrbPKKaoxgCOLx0xeEO7M4hHqHqNpM0V33p6RvPpMNUNxQy4H/Bb4lcoJZu/gS7N6kMr5/SAivpfnw3fz5kut4fSj1I1vA99S9aMsXnJO5lfP/Hw9/7t6u+p39Xfq7KTtaHv60cVLPxflvn6Q+9Zx6HjUalFVx3TTd20etypT/SVfl370GvV69bqH0i1K6TT1O2XDlYGbWwDH6Vyun9GwZflZRXVvVY/VppCKkmsdRfmxKkIB7JOVYDRVrKowuqDdWk8k600Ofhr0NDugDjpqIajB43IV/cgBRgORBietJZ0GfFYzC/nFPT4jvxWYpjSrQ7I13P752alF4YuyQ83OeeOktmzq6bpZVvTaGNhAN1aZtvXvmsnIJYPVcipP54SC4e6XZQRXyNrWy2jmI4Pl7plNJVQtbKm82Kk85xL5o6UI/SyeP2qnqJ/FZv3M/Df9u353CW1j5mdmu7O2r31pn/fMGZhl8rhUTEWRsitmkI7WBvVaVI9Yr0054KrLvSGwSaaqqRGGImt13j8/37tXZUyCbjRVnvBwTSPm8slHM63t1Gw2oJsKfV5Kcbu6LqvkDepD63fORiMzKPQZKy1x5MtfeWOqnGeXv5xkuljmBeiJGfT06gx60lqJniI0yLaiNusoaL1IfU1nDYZ6qtITlp669GSm90lVehR1qSl2XYh1QT48Ix8PzsIeith+ReYIPi9LV6oRgy72usFZP6O719Jgp4FOg4UGuOyzqgFFA4wGIheIb7m8aVDDet0ArKi80KzqpOlPfda62Zm6FoVtl6Uw1bVJN1iX1evBsGW1vVfoPKrHamMin1L0xVdB8WfPatSupylN0Y1t552cStS0oqYYr1AN5llPiprS1JOinkr0pKjB8agcGPVkqJsNBWZoQFS+ngZETUnp4qiLpJ6K1s4BUXfIupDqaUpPeXrqctsyswmVN76aLdKMxv/Ua88wZW35F/uJuKVyPVYDhp5klQf3n8Bncr1MjadH2qg9p1c1tfr7nH7TYKm1wpknSVWQ0VOk6iy/PwdJRUfryXHvTCdQmcjt8jX+/akxn941lahpRT0tKsJag6OfEs2sEbk8oSWHkRb6yOvlLr75H7IMetJTmNbmtoiIlwCHAZ/P4BQ1/R5Yk+sMwFGhCz0xawpWATAaOPWEqYFe6486HvW1VdSzbgJmplk1YGpa56FZz3WVHCw1/X23+lrNzNoIeEA+FGimbWQyDsTBWk3KwBVNd2r6UwOXpkiPyTVGrcd2NVWcT50aODVFq1KMGqRnr2Fqof/0bDxwNPCODNiZmZbVAKqKUwrQ0cC/ek5nay3yLvX4zcymQQYaajlPM3cjmZ7O6/unFCtSj8/moOlRBdnkdIaCb1QRRRGVGgDViFrpHH8tb7LSJGambhUEpKhKPfGempGvR2a0q548FaWpdQIFUz1Va5kRsZ7WMfPOTdPUWr/0U6eZWQNyOUwPSr+ffe0elkzXW6oe19TJyEct3CtNQ0FPeoLUU+yhWtfMKFlNHSg4SIFBypnVB/fejJbV7+6Za52atlU6yJo59azgHz15em3TzKxlsvCQZhGvrYPkELylHs/UyTxFPWlqulZrno/LH90hKcVEA7OeQD2ImplNoBwDlGmi/O+hyEI5j6vHYmZmNnXygettw3oizmpwy9fjMDMzm0qZ+aEUpoGX5lVMUN2/mZnZVMulSZWNHZisaf70um8zM7Opp9ROVeurg2dTVKtB6aJ1v2ZmZlMvG4aoJeIf6gDaBNXzr/s0MzOzlHUavlIH0H5lVPSmdX9mZmaWsu3ra9R1rQ6k/VBDGqXG1v2ZmZnZLNmL+4d1IO2HygrX/ZiZmVkB3FsVEutA2qvsPLdy3Y+ZmZkVqpQIvL0Opr1yQJaZmVkXsq3rPzXn6UU29HlM3b6ZmZnNA9gR+HMdVLsFnO0WsmbWscyV1JqYittvogo/EfEC4GXAPsC++fNK4BX5xPD87Cb2lOyrrU5iq7gFp40rYNsmyli6QpaZ/QtgSeCBwNOyp7Xq5p4JXAxclb2wu256DvxFFy7goxrM635tNPQkps+8/nebX0TsANxWz/FuAJeopW3dtplNET2NZr/sFwPHAxcA19cLRhPUrFxdaeox2OjkAKw2rf+ZMxrremBYGLBHPb978JK6XTObcLrARsSWwFuB84Fb65WhabnutVw9Fhu9nPV4KfBT/kH/e1IuJ2wbEQ9y3/R/1W90NHB5RNyrbtfMJkymU2yqi4YKDOgqWy8IgwKcA6xQj8naBbgfcNQcn9/1wLnAB7WurydmNxj4v+/UafX96oZiKOp2zWxCZNu1/VUKD/hbvQAMGnCqgrfqcVl7AVsBP6if5QzFAABXqm4y8F5FB6uO8jQG1wGrAr+q71GngMscE2E2YYAnA59rIm2iVyo64Pq34ykils0lio6WJ4BbgAszyE7Be08E1qzbnUQZsNjzjJKfgs0mRAbRfKp+yYcJuBHYrR6bjZ8M0Ppa/Yw7ofZ+OXV9TAb5bTSpsyEKYKyvv1PAjyJiqbpNMxsTEbEScDBwc/2CD1MGljy2Hp+NL81iAAf0m/+q1J1sUH+yoq6B7YGHA8vUfY6bzHG/ur7mTmkav27TzFoOWDqn/K6qX+phAz7tYvOTC/gPBdTVz70fumHMqOtPAm8CnppR12O3dKG0ovr6OpVZAo40NxsXwLMXFSwzLFlk4yBfQCZfpizt13S/3NmAazMf/cisqKbWgPdve/nG7CXc63T9na4RbTYGgM2A0+uXeBSAi4DN6zHaZMvSol+u58MgKHof+HUWcnlXFgxZR4Fi9bhGLdfMu64UJwpgq9szs5bQU4DyNPXEWb+8w5YXxcMiYvl6nDYdsoraaxRsVc+PQVN0P3ApcArwRmAXYK02FLbQMdXj7UROx69et2dmIxQR9wD2BH5Rv7SjkGt2W9XjtOkEPBQ4o54nw5bR96qxrPVkVfHaOiJWG3aEca6V99S6UPEcdXtmNiLAzhHxvfpFHYUsU3i0Iq7rcdp0y6pQ6oJ1Qz1vRgm4LvOTVVrz1cB2ajYy6PXkPp6CL4iIxev2zGyIlMoDfKl+QUcly1c+uR6n2WzZ2OOL9fxpkwzyUmW4A+rxNyXjNLpeCwbucDCW2YhoDUhPmb1OYQ0C8D7gvvVYzeaT0cvX1nOpLXIQflI97qbkjIBSi7oGvLtuz8wGSMUIMqDlmvqFHJV86t2mHqtZJ7Q2rKIb9bwatextvXY93qYBz6n77gTwszYEk5lNPBUcyLSKi+sXcVSyru87HOFsTQB2zQpYIwecp6pV9RgHQe03szJc13zjazZgWlONiG/UL98oZa7lpvVYzfqRXYOOrefbMAFnDnspJSLeUo+jE8DH67bMrAEZqPJxBVzUL96oqKUasIcjMG2QMl/3inr+DVqmJg297V+2A+06b19LUZPauMJsJLJg+7v6LWrfNOAEpWbU4zUbBNULBz44rBvQTJ27az2OYdGTdz2mTiiPuW7LzLqUvVWVg9hz4+5ByEpCz67HazYMwLbZim9ggEPqfoet1yYNwHvqtsysQ5mK8PxBX2S6lSXv1GzdU1w2Ugr0y3Pxlnqe9kM5uCoMUvc3CsADgOvrMS4E+H7dlpl1IJuPj7w8X6UC+lqDrsdrNkrZ8aiRVofZnWvXuo9RAj5Tj3MhWe96nbotM5uHepkC723hOq+6yeylAvr1mM3aALh7Nla4uZ6/ncrSk62r2KalnnqsndAMWt2WmRWazgX2B35Tv0SjBPwO+MCkBFnllKVa4W0D7B4Rr9NaWUaVn6oyiHrayCCfgxXZnfV/V63bsnYC1u2llrKalQCPrttrgww8u64e80KA84dRNMRsLGWDcl3kL6tfnlEBfhkRHwF20vpTPeZxoZSo7LTzLOAI4Czg592W6cw170fW7Vu7ZYGajlKWcqBas26jTYAT63F3IstmvmHYXZ3MWg3YPruXjFQWcFdE84eApw+72ECTMmL8yaqHC3yzieAcYLe6HxsPmbqnHtjUz3UG8JVxOOd7nYaekdeaLet2zaZKRKzXS1BFk4Db8q5f06yba/2sHuc4yR6qWjv/aX2t/dCTc92XjR8NPIoKnuPz/azqqNffb6OsBtZXu8a82T4cWLFu32yiaYoLOHJUAVaKilTpylxr3mjcA6r01AK8KEsE/q2+3n4Bn1et7bpfG0/ACsChwO35+R4xbt8B4Av1PO2FGjYotqFu32zi5Bdf0ZlDb6+W0csKMFIE80NGWdGnKWqGDuzTa6H6TmTRfec5TyDgCVofrv99HOi8r+dqP4DjJiXA0uyf5EChTi4/rCf+IGWg0bHAzuOwttUNRXQ29RQwH01VOurZ2ij7ff+unrP9yDruL6r7MhtbEfFYFa2oJ/sgAHdm793DgCdOahtA4IXAb+vrb1K+j34isNbKIj2X1HO3X8Bp2nbdn9nY0DRvRl12lerSraxycy7wZuUuTnID7izF97H6HjQto0RXq/s3a5vMZ/9UPYf7BdyaGQT3q/s0a60cJN4B3FhP6qZkPp+iNmfWcxerxzFpIuKZmZc8UJmK4shQGxu5xKU62HfW87lfwJVaJ5+Ga4yNsYi4B/DKQVWwyuo8H9VasspU1v1PqsznHUoD9gxEGXqvV7MmZJyJMhwaB5ze1upgNuUiYgfgwnrS9kvdjzJd6SmTFkTVCeAxwMX1fWlarp2/tu7fbNwo9mOADwG3aHZPN8V1v2ZDl0EQXdeanY9an0XE93IKezM9Vdd9Tgv1Pu232EAngJva1vHGrB9ZdvXceq43BfiJp6VtZIC1gPcrUKGenN0Cfp8FJJTPuqnqFtf9TZMsqvHx+j4NQgavubazTRwFYwLH13O+SVlT/Ul132YDkeuRb+i3kIaCiYBPAM9RPl/dz7TSDUjeXQ9URni+ftzLbpotBNh3EMFZM1RbG/iw8+VtoIAde825yzXGK4CjM5rXlZUK4HmDjByfoWbtDiaxaZIxKgNdzlG0dLb19LS0NSciHt9LIQ3VJFZgFvA2YAs/bc1NBfDVc7e+f00DrgL2dk1nm0YZr/Lj+r1oGvBV3+Ba37KZt6aJ521fVpUmByqKMVYF3octOxedX9/HJmXkpiqDrVz3bzZNImIl4KT6HWladlhTIKmLeFh3spCGLtg31xNrLgr510kN7BkRD56EJgfDALx0UDmLAlwHnACsX/dtNs00K1e/L4OQtehfWPdv9i9UgAF4jboG1ROpyhPrg8AurprUnYzO/HB9T5sAXJYBISpWslLd9zTL/NBV6n+36QTs1HQzh/kAp6r3eT0Gs7/Tyaj823rizAZcmn1Dt5zUJgeDBqyhNaL63vZKgSXAGcCBms725zI34GDgXcCS9d9semlQHEahG8mlIGWQ+By0fwA2zmbr/yLD67+b09GbR8Ry9e+tc8DWwDX1fe6G7tgzZ1qfybbTVJKzFxFxH53fwNddYtPmkj3KP1m/a4OSBUL8NDzNspemCmncVk6Om/MJ7XUR8ShHzPZPa+LAfvW9XoiqgintS51essa2ipS4Q1GHVEkN+CnwBweg2aJkM4f/rN/BAfqjvtP1OGzCKSoPOGh2gFU2odZTwp4q4Vb/xnqXrdI+88/fvbll0NS3gP8CdgY2mOZSnP3IMp5/yff1KfXfzeaShYFuqt/NQcnmMvevx2ETRtPHwAF6GsgPXu38TswLvU+AAQAepin8+qWTXA/S0+2ngVcoT1oR5HUb1p0MJDxq1vv8+vo7Zoui9EngZ//8jR0cYLd6DDYhcuDdJxscqJ3f8cA2jlwenJxyfv6sJzDlBF6eCfrqWbqd6i87XatZwMM1gzDrwvalaa8rbr1RtHxGLg8UcJ5jEyaQLjxZ+eXt+bOV1jnq71nzgKdm5bB35gzDhq4CNljZB/b/UkryhsfrvtazvJEe2LpwxnhsWvdrEyAillKErHJO67/ZYHmwHZ6ccn5PubCpBOpW9XfNeqEpYgVNzT7HmgC8r+7LzGws5JTzeXNc2N5Uf9esH5mueXk913qlgjnqLFf3Y2bWesCzVAJ1jgub1tld6MAal0V01D+749r4c1FsiFLk6vbNzFpNaVmqaFUvaqIiJ8AD69+YNSXXhfuqnKWWhXW7ZmatBqylTlv1gibAHeozXf/GrCmKq1G8gVII6/nXKXVIqts1M2u1bKj+q3pBmwG8u/6NWVOANYGz6nnXDeDjdbtmZq0FLJ3pXPOuuwHnOJfSBgXYca54g25khbul67bNzFopo5y/XS9ms2X7xQfUvzXrF3Dv7P7WF+AnwKp1+2ZmrQQ8d6Zs6nyAv6pLV/1bs35l7+hL6jnXrWwGsnrdvplZ66iIidZz64VsLsAb69+b9SNL96py4N/q+dat7J++Rt2H2USKiMUi4m5qoeg6y+MH+Pf5opwr9ffVZ123YdYr4BnAj+q51gvgIqfE2UQBllG7RE07Zru5Q4FPAF/IAgwKdDgfuCCLnH8tm9fvXbdl7QLs0mmgS+b7+snCGhER63XaMrQTec25b92P2VjJ6aDHqLSgviDAj1XAvJ7wi6KLOvCIum1rB81WdDrlPAPYqW7HrFtq1qG8XODP9RzrFXCMe3jb2IqIlbKD0LH99uTM9osPrfuwdtBn0+mU8yzvrNsx64bSgYDXLiqvvBfAgXVfZq2XU8sadD8GXF9P7F7kdOaj6r6sHYCtgV/Xz21RlJLkTlPWq7zOvFRpQfXc6gdwk6L26/7MWk1N6dVvE7iintT9AH6rqeu6Pxs99aQGDq6f2UJy3Xetuj2zTigPt8luRjMy1mTDuj+z1gK2B04Bbq8ndL+Aq/yFaCf1pwZOr5/ZQjLf9yl1e2adUspaPa/6paYgnpGxsZERzF1fgDuVVZHWqfu10QO2AP67fmad8Nqa9SObKPywnle9An4JbFf3Y9ZKys8FXgHcUE/mpmTenVNTWgh4vZ5i62fWCeBsnT91m2ad0s1fPa96BXw2Ih5c92HWSsC6wBn1RG6SvhSq21r3baOVaR4951cCv1Nxjrpds26oC1E9t7ql4FBgr7pts1bS2khEvA64uZ7MTVIQ17g8ISkAKSJWy9zmbZTPquhv9bHNjivbAptp0AFWrH8/TrQO32+0KfD8ul2zbqgaVb8zb8BpagxSt23WSjnAfLOeyE0Cfg88u+67LZSMrzSoLG/3NuBLwMUZob3IOrO6aQE+ryIVdbvjIG8mFtlIYSHA4XW7Zt0C9qvnVqeAK30TaGMj8+wOAv5ST+YmqSJWG3N88+l2V+Ak1ZTtJ8obeGrdftsBS6qqFXBnfT3dyHKiji61vuT52HXwVUbd6zy+X92mWSvlU08jhcwXBfhom6ZngRUiYgfgRD3d1uPthW5i6n7aDlgb+Ep9Ld3K4hwPqds365aKvdTzqxMKGqzbMmslPfVFxEfqSdw01WtVJHXd/6gA/6Fm3cDP67H2Q1PV49blJ6ta9X3zoSfncXzyt3bqJfhTqYyu5WxjAXhh0/VU55LTuY+u+x+FiNgSOAugHme/cmr9PnWfbZVVrfYHbquvpRcKqKv7MOtFdjjqegmozXElZn+niEC1AKwn7yDklPPK9RiGLXOZVTazp3zWhWjqFXhY3W9bqd1aRJxcX0evMmhvrJ78rb2A99ZzbCFqYzqugY82BSJicUUVKgK5nrxN05N1WwqcZ1S3GsAPBHCtprTrftsKeEK/KUazZWT42Nx8WLspeKqXJRGXO7XWyovuQFOLZgCfAlavxzBsOcWqtmV/qsfYlBx8Nqn7bisVIwBuqa+jV8AdLutnTVLHo3qeLUS5vnU7ZiOXqUUqOt5XakknssbqbvUYRgFYs5cgjm4AVwMb1X23kc6DAQXbub+vNSaXis6vJ9miaK0Y2KBuy2ykIuLxwA/qCTsIKjzRhqde0RPZoIPLsnHEI+u+2yibaHyrvoZ+Aed43deaBDyx24cF4Pi6HbORiYiVgKM1PVhP1qblU+/L6jGMQnZNeccgIpxnA85Uf9K6/zYCnqWazPU19Evr3s73taZ1Gxyq5SU3cbHWAJ7Xa9u4TuW6n1J5XtyWtJusv3xWPdamAe8fh6e+XHr4QD3+JgD/43Vfa1oGSy6yzGvl1DdrBU2Hdnv32C3gu1mqslVTr2qIAFxXj7dJ2U3lxXXfbRQRD8rp4YEA3lz32QYRcVfdEAJrARsDTwaeDjwH2BN4ZQblKfdZ//sqzd6oXnBWgtsul202UMs6YOm6DxscVaOr59qiANe05QHAplRE3CubBTQW2Tqb0lVUWD8iHtu2HDvVGwYOHcKU89eAder+2yg7Mg1s/Rv4nKLL636HIZcY1tC5mAPma4D36ZiAc4FLgKvUSKLbJ6nZVAs9b7guB85TS0bgEGCX7HY1FssP4yRnsLq6hgH71u2YDQ3wuG4jBjsB/Ab4sMoKaiqz7rcNFPA1hCnnPwJvbNuNx1w0La4auIMqNCIZ9T3wwQdYJTtR6YlULTGPy3X3H2pgrMc1bPk+fDO/I6omt5H7WfcHOKy+z4uiErKeobCR0JddJ2zDXYs02JwN7KH60HWfbZLTipp+GhjglLZNtc9HA5byIOtraFKu+zZa6CCDBR+RzTDerMbritbOqmIDDyBsimZg8mlZ58wBunnQ03p9vTa3vJ51FSjYliI/NmWyCXwjDQTyonpBVsdqfcPqzBE8UMddX0tTgO9rQKj7bquccr6yvo6mKbq87rtTwD1zxkIzNq8AjskgPkXQD+yzHLHvAe8BtlDZz/qe2P/TUkJ98xYF+LauBXU7ZgMzk1pUT8ZeZHOEt45TBaeIWA74dH0tTQEuzaCce9Z9t1HejGjKuee1zk5pDbzTJ7r8nBQE9bQ8xz6pXHTgxrrdaaGsBOWqZrDg/et7Ns3y5kwdjDqm4Lq6HbOBUMBLRLwA+EU9EbuhKdt88nhypxfTtsgLuu56G5PtES9RJSd1SBqnFmY55XxqfU2DoICm+fJ91Us5g2cUnHSwmjsAP2uqu9Ik0lRrNijZ0RG8fz+Hdq/v0aLovK/bMBuIDO74cj0JOwXckHWZdx3XIJGMdlWT975kuTpFyJ4A7J1rj4vX/bVdtlP8WX19g5A3KXr/lwQeqDXgnCXQ1KqmkK9sOA5hquRa9wdUp32cbgCbEhHLAlfU92U+ipIG1q3bMWuUTsyIeIsugPUkXAhwa5aFVG7jA+q2x0lGIPcki4UoWlWBPfuqH/G4R00Oa8p5RqbznAT8FLi5/rs1J1OoNGW/0bSsbwKvru/Doijdsm7DrFFZPKCr+s26KGcE837zTReOkyym0NV6bwaUKajnROANmbe8fN32OBrmlLONVn6XldP8chVUqefCpMjveMf56rkEt1zdjlkjMsjqiHriLUCRlm+LiPVGVRyhaSq00ElucxZLUGUuBbfsA2w4rtPsi6I+wwqaq6/f/pkK+KsamqLYgdNz5uPYLNShyPm9MpZi14h4ZmYTqE72blkN6436/gEfyhmkb+cN3dBmHCotIamDFbDNuMVtLCRjL7rxkroNs75lNOvuna6FZBeeo7JryN3r9sZZrm/OmVKT67d6Cnwn8AwF/0zaRanKSk8OaJollxY0Ja5BVjdfSmt6qm5CgZWb+k5kYZP7Kj0vy1PqO/r+zPVVEYiBVl+rsgiJcqXXr8c6bvJm+db6GucDXDQO9ddtzGSQ1Zn1hKsyjUHVgFQZaCKmVWfLIJ/9Z71kFQVRfrKmk/V0ssk05VLmbEhXU/CTKJ9qVQr1VBXdVwGWnO1Ztr5nw6TvYNZeV4Dau4GvDmuNPAORVBp1b50n9djaLgOvlH3QkSxysm3djlnPMn1DARfzRpBmAMxnNU026ekKWUziC/nEtxWwtgbl+nvTIJ/kLq7nwzTIdfwLdbOp6eKsKDXSwbZTwJqZbfAxPaHX1zYIGWR4ZMY7tH4JSlkHWUu8Y8AX63bMepapHPMGWWUpvpdPU4/LSZ9K7lRGrmvdb2rkdLJmOl46KSUcsxiJbiR1k33+oJcRcqZAgVvq9rRWPZ420A211rPrsS+K6pprlrBuy6xrGfV3pL4sc5xouggdpbUmtVSrf2uTLTtavbueF5MIuCkHJU0pP2nSI1szxmP9nN05p5fUwm7kzNmnsxLZCvV4RiFrPXfdKlVr7nVbZl0DnleDrDKY6j0ZeNTKjkM2eGpz2HSVr7bJghNq6aen3LFPk+uHgrqyH/F36/vUtAwWU9GUx9TjGJZcUpl3xm8+ec6sXLdn1rH8sv1f/maWofuvLNA+1kUhrH/Zyu73/3zpmQzK8VS7vkz58YW0yCjrJ2TqU8f5sL3IyPGvZ8T4UD4LrUnrhqvX81t/W7dp1hENrplXqDUMrc+ol6lOxoH3UrX2U6oMcHi96Iy7vNhqnU+D7or1ddvcMt1JOcmqOjbQGIBZ5S+fNKiHAD1xA2fUfXdB9Q2mMgjT+pDpNPoiaa3nOzkIt77Nnw0P8NAJm3JWyphycvdUy8H6eq07GU2t9WKl4Q001zi7oqlQyTb9FrHJrkaqTaBGEz0HnWUk/GZ1+2aLpDv+jGI9xCeQzSXzRq+uF51xkzM7itZXH+l/r6/T+pdT1FqqOnq+4jRNykI3Ct5SJLXK4a6q4MC5gkL133KWT13K1GJR68wqFNL3DYMqkdX9mS0oUw+mpliEdS6nnBVwN9YycFA3mBvPdWG2wcgMimcrh3bQUdQzgOuzR7bWjlWaU13V9KP/r/+mjlx/rH/Xj8xrHsoatZlNgZxyPrdebMZFBvCo9eBuk54yNA4ysFNLW11HFo+BZ9bXa2bWk5yeG2iE66BkFLNqH29SX5eNnvoHR8QOOW18ff38xg1wTH2NZmZdy1rOx9SLzDjI4MG9PRU4PtS2UB3BIuIbWp+vn2nbZTDYQCKyzWyKAJsCP64XmTZT1GrW4t4+Ipaor8nGQ1bdUqchlcC8tH7ObZTrvo+sr8XMrCvAq9Stpl5k2ipzQtXNZ8P6Wmy8ZdchpUSetqimL6OUqVbr1GM3M+tYFlI4oV5g2kplUYE3AKvU12KTB9gg+2hfXs+FUVExEKU51WM1M+uYWsFpDateYNpIjc3VaWvS21va3LIpgtKZVJe7pxKR/QKuU6vJemxmZl3JikVDycvsRzaM33kSWv1ZM7KIxuuHmc6UbSfXrsdiZtYxRQjrYlIvMG2S1apUuGFrF82w+WSRmG1Uw3tQ6UwKSgR2qvs2M+tKlulrzVpaBdwKfMz5u9YtYI3smKRKV3fUc6tbmuZWRLaXPMysL9loQ03kb68XmjZQ9HXmHj+qHrtZN7LWs9KZTqnnWSey7aqi610n3Mz6k+3VvlMvNG0A/CF7TDuX0hoDPBA4v55vi5JTzQdGxIPr9szMugbsBdxULzajlk8Zb3dQizUti8n8sp5zc8klDzVo2AlYpm7LzKxrmbJxfL3gjBpwI3CE+sbWYzbrF/C8hW44M8Dv28olj4j16jbMzHoWEVsOMz2jE9keTs3TH16P16wJwKvreTcjb/wUnHVgtqNcvP69mVnPsgn6wcDf6gVoVPQ0AhwZEQ+px2vWhIi4C3BoOe/+DFyocw/YRUsdTmczs4EAVlfd3NkXoVEC/gQcDaxbj9WsKdlJ6ZQccH8AHJvT0Ou4cIuZDRywY1v69qpwvupKA+vX4zRrGvDoiHiJYgrUY7j+u5nZQGTHGDWdv7MOhMOm/OIs1bdxPU4zM7OJATwO+G4dCIdN683ASa5cZWZmEy2r/KiJwkj79mag18nqplSP0czMbKIAD1DRgDoYDhvwRWCzenxmZmYTJyJ2AK6sg+EwAWer80w9NjMzs4mTgVbKZRxZoBVwLrC98yjNzGwqKLAJuKgOiMOSxen3cD6lmZlNDWBPFbOog+IwAFcAr4qI5etxmZmZTSRgLeAzdVAcBuC3wEHA/epxmZmZTSxgN+DqOjAOGnBttgZcvR6TmZnZxIqIlYCP1oFx0LJ+7lHuyWtmZlMH2Br4SR0cBymrV30c2Kgej5mZ2URT4XjgbcAddYAcJOD0iHh8PR4zM7OJp1ZpwDl1cBwk4NvqmlSPxczMbOJl4/B9gBvqADkowHkR8cyIWKIej5mZ2cTLOs5DSy/KIhq7u4iGmZlNLeAZwFV1kBwEpTEB+0fEcvU4zMzMpgKwAnBEHSQH5I/AYXrSrsdhZmY2NSJiS00D11GyacBtwAeAh9VjMDMzmxoRcTfgTcDtdbBsEv9wErBhPQYzM7OpEhGPAr5ZB8umAWcAW9T9m5mZTR3glcBNdbBskgZ39eWt+zYzM5s6wBrA5+tg2aQsorFrRNy17t/MzGzqaFAEflUHzKYAP1WHJK0r132bmZlNHWAZ4PA6YDYl+/K+UWlMdd9mZmZTCXgccEEdNJsA3Ai8KyJWq/s1MzObShGxLHAo8Nc6cPZLKUvAh9yX18zMbBb1zQUurANnE4DPAY+u+zQzM5taEbEY8Brg5jpw9gv4GvDUuk8zM7OplulFX6gDZ7+A72R7QKcUmZmZzQY8F7imDp79AK6IiJcAS9b9mZmZTbWIuA9wTB08+6H2gBHxOuDedX9mZmZTD9ga+FkdQPug9oDvAlat+zIzM5t6EbFU9tGljqC9yPaAxwEPr/syMzOzfzz1bqI6y3UQ7QVwB/AJYIO6HzMzM/vHU+9dgP2Av9SBtBfAqRHx2LofMzMzSxHxYOC0Ooj2QilFwLZ1H2ZmZjYLsEtGJfcFuBx4WUQsUfdhZmZmCbg/8OE6kHYL+CVwoFOKzMzMFgBsB/x3HUy7AVwbEW+JiJXq9s3MzGyW7Nn7PkUn1wG1U8CfgfcCD6zbNzMzswJ4TD89e2elFK1bt21mZmZFRCye3Yv+XAfVTgFfBp5Qt21mZmZzAB4JnF0H1E4B3wK2r9s1MzOzeQB7ATfWQbUT6lIE7B4Rd6vbNTMzszkAq0TEyXVQ7YQim4E3RMTydbtmZmY2DzW1zx67XZmJbI6IB9VtmpmZ2TyyZ+/RdWBdiOo+A8c6stnMzKxLEfF44Id1cF0IcAqwYd2emZmZLUJE3AM4pNuiGsB5wDZ1e2ZmZrYAPblqIK2D66IAl0bEC9wswczMrEtKCwIO6KZnL/Bz4NURsWzdnpmZmS0gIh4CnFUH2PkAVwH7AivUbZmZmVkHIuIlwA11kJ0LcDPwbncpMjMz65EGUeC4OsjOBbgTOAF4WN2OmZmZdSiLavyyDrRzyWYJm9VtmJmZWYciYjngmDrIzgX4KrBd3YaZmZl1Adgq04UWCfgx8NyIuEvdhpmZmXUIWBJ4+0JFNYBfA68FlqnbMDMzsy4AGy9UVENtBYF3OLLZzMysT5o+BvYD/lQH3BnZpej9wFr1783MzKxL6j4EnFkH3OIj7lJkZmbWEODFwB/qaDsD+BqwRf07MzMz6wGwNvDpOuDOAC4Cdo2IxerfmpmZWQ/yqfe6OugK8Atgb+Du9e/MzMysB8C9tZZbB10BfgscBKxY/87MzMx6BDwJ+NEcA+/twAci4kH1b8zMzKxHwNLAIRpo5xh8P6+83/o3ZmZm1gc1RAC+O8fAe7aeiOvvm5mZWR8UQAW8Gbi1DLwXO7LZzMxsAICNgO+UgffnwMsi4l71983MzKxPwO6q0zxr4L0BODgi7lN/18zMzPoErK6AqlkD7y1Zs3mN+rtmZmbWAOB5wDWzBt/PRMR69ffMzMysAcCqwEmzBt6zI2LL+ntmZmbWEGAn4Hc58J4LPE3tBOvvmZmZWQMiYiXghHzo/Z4GYqcUmZmZDVBE7AD8GrhezRQiYvH6O2ZmZtYQYAXgOOAm4CinFJmZmQ0YsDVwAfAp4BH1383MzKxBinCOiHcCJwKb1383MzOzBkXEEsATgcOAZ9V/NzMzs4ZFxF2BddWlKCKWrf9uZmZmAxARdwOWrP/dzMzMzMzMzMzMzMzMzGxI/heXrlhKyuXkBwAAAABJRU5ErkJggg==");
  display:block; flex-shrink:0; aspect-ratio: 5 / 3; background-color: var(--text);
  -webkit-mask: var(--logo-shape) center / contain no-repeat;
          mask: var(--logo-shape) center / contain no-repeat;
}

/* ---- Floating tab pill: one rounded bar (nav.tabs::before) with the tabs in two wings and the
   Analyze circle (css/analyze.css) raised in the middle. One shape, so there are no seams where
   pieces meet. The nav itself is see-through; only the bar's contents take taps. ---- */
nav.tabs{
  display:flex; align-items:center;
  position: fixed; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left: 10px; right: 10px;
  z-index: 10; max-width: 520px; margin: 0 auto; pointer-events: none;
}
nav.tabs{ --wing-h: 52px; }
nav.tabs::before{
  content:""; position:absolute; left:0; right:0; top:50%; height: var(--wing-h); transform: translateY(-50%);
  border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--border-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.tab-wing{ flex: 1; min-width: 0; height: var(--wing-h); display:flex; pointer-events: auto; position: relative; }
.tab-wing-left{ padding: 0 14px 0 8px; }
.tab-wing-right{ padding: 0 8px 0 14px; }
/* Small phones: tighter labels so long translations stay inside the rounded ends */
@media (max-width: 380px){
  nav.tabs{ left: 6px; right: 6px; }
  .tab-wing-left{ padding-left: 6px; }
  .tab-wing-right{ padding-right: 6px; }
  nav.tabs .tab-wing button{ font-size: 8px; letter-spacing: 0; }
}
/* Tabs share each wing by label length, so long translations borrow room from short ones */
nav.tabs button{
  flex: 1 1 auto; background: transparent; border: none; z-index: 1;
  color: var(--text-faint); font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 9px;
  letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; padding: 0; cursor: pointer;
  transition: color 0.18s;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 2px;
  position: relative;
}
nav.tabs button svg{ width: 19px; height: 19px; transition: transform 0.18s; }
nav.tabs button:hover{ color: var(--text-dim); }
nav.tabs button.active{ color: var(--text); }
nav.tabs button.active svg{ transform: translateY(-1px); }
/* Small gold bar under the open tab */
.tab-wing button.active::after{
  content:""; position:absolute; bottom: 4px; left: 50%; width: 12px; height: 2px; margin-left: -6px;
  border-radius: 2px; background: var(--accent);
}
/* Bigger phones get a larger pill; the circle grows with it in css/analyze.css.
   iPhone 15 / 16 and 16 Pro (393-402 wide), then larger again on 16 Plus and Pro Max (430-440) */
@media (min-width: 391px){
  nav.tabs{ --wing-h: 58px; }
  nav.tabs button{ font-size: 10px; gap: 3px; }
  nav.tabs button svg{ width: 21px; height: 21px; }
}
@media (min-width: 420px){
  nav.tabs{ --wing-h: 64px; }
  nav.tabs button{ font-size: 11px; }
  nav.tabs button svg{ width: 23px; height: 23px; }
}

.view{ display:none; animation: viewIn 0.25s ease; background: transparent; }
.view.active{ display:block; }
@keyframes fadeIn{ from{opacity:0; transform: translateY(4px);} to{opacity:1; transform: translateY(0);} }
/* A tab slides in without fading, so nothing behind its cards shows through while it switches */
@keyframes viewIn{ from{ transform: translateY(4px); } to{ transform: translateY(0); } }

.card{
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.25rem; margin-bottom: 1rem;
}
.card h2{
  font-family:'Oswald', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 1rem;
}
.card p.hint{ font-size: 12px; color: var(--text-faint); line-height: 1.5; margin-top: 0.5rem; }

button.btn{
  font-family:'Oswald', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; background: var(--bg-elev-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 0.5rem 0.85rem; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
button.btn:hover{ background: var(--bg-elev-3); border-color: var(--accent-dim); }
button.btn.primary{ background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
button.btn.primary:hover{ background: color-mix(in srgb, var(--accent) 85%, #ffffff); }
button.btn.danger{ background: #f06f6f; color: #ffffff; border-color: #f06f6f; }
button.btn.danger:hover{ background: #e05252; border-color: #e05252; }
button.btn.small{ padding: 0.32rem 0.6rem; font-size: 10.5px; }
button.btn.ghost{ background: transparent; border-color: var(--border); color: var(--text-dim); }
button.btn:disabled{ opacity: 0.4; cursor: not-allowed; }
button.btn.full{ width:100%; }

input, select, textarea{
  font-family: 'Inter', sans-serif; background: var(--bg-elev-2); border: 1px solid var(--border-strong);
  border-radius: 8px; color: var(--text); padding: 0.6rem 0.7rem; font-size: 14px; width: 100%;
}
input:focus, select:focus, textarea:focus{ outline: none; border-color: var(--accent); }
input:disabled{ opacity: 0.6; cursor: not-allowed; }
label{
  font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 500; display:block; margin-bottom: 0.35rem;
}
.field{ margin-bottom: 0.85rem; }
.field-row{ display:flex; gap: 0.75rem; }
.field-row .field{ flex:1; }

/* ---- App-wide select: replaces the native boxy dropdown ---- */
select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-color:var(--bg-elev-2);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat:no-repeat;
  border:1px solid var(--border-strong); border-radius:10px;
  padding:0.6rem 2.1rem 0.6rem 0.85rem;
  color:var(--text); font-family:'Inter',sans-serif; font-size:14px;
  outline:none; cursor:pointer; transition:border-color 0.15s;
}
select:focus{ border-color:var(--accent); }
select option{ background:var(--bg-elev); color:var(--text); }

/* ---- Remove number-input spinner arrows ---- */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }

/* ---- Hide scrollbars everywhere; scrolling still works ---- */
*{ scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar{ width:0; height:0; display:none; }

#inbox-btn:hover{ background: var(--bg-elev-3) !important; }
#topbar-settings-btn:hover{ background: var(--bg-elev-3) !important; }
#topbar-profile-btn:hover #topbar-avatar{ border-color: var(--accent) !important; }
/* Top bar: inbox, messages, profile and settings, sized so the date still fits beside them on a phone */
.topbar-round{ width:38px; height:38px; flex-shrink:0; }
/* The logo in the top bar: a little bigger on Home, small on the other tabs */
.topbar-logo{ width:40px; flex-shrink:0; transition:width 0.25s ease; }
#main-app.on-home .topbar-logo{ width:64px; }
#messages-btn{ position:relative; background:var(--bg-elev-2); border:1px solid var(--border-strong); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text); transition:background 0.15s; }
#messages-btn:hover{ background:var(--bg-elev-3); }
#messages-btn .messages-badge{ top:-4px; right:-4px; }
@media (max-width:370px){
  .topbar-round{ width:34px; height:34px; }
  #header-date{ font-size:13px !important; }
}

/* Full-screen pages: the back arrow in a circle at top left, the page's title centered
   (EDIT PROFILE, INBOX, …). The side columns match so the title stays in the middle. */
.page-head{
  display:grid; grid-template-columns:minmax(44px, 1fr) minmax(0, auto) minmax(44px, 1fr); align-items:center; gap:0.5rem;
  padding:1rem 1rem 0.85rem; border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:2; background:var(--bg);
}
.page-head > :first-child{ justify-self:start; }
.page-head > :last-child{ justify-self:end; }
.page-title{
  min-width:0; text-align:center; overflow-wrap:anywhere;
  font-family:'Oswald',sans-serif; font-weight:700; font-size:18px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text);
}
.page-head-right{ display:flex; align-items:center; gap:0.5rem; }
.page-back{
  width:38px; height:38px; flex-shrink:0; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-elev-2); border:1px solid var(--border-strong); color:var(--text); cursor:pointer;
  transition:background 0.15s, transform 0.1s;
}
.page-back:hover{ background:var(--bg-elev-3); }
.page-back:active{ transform:scale(0.92); }
.page-back svg{ margin-left:-1px; }