/* ============================================================
   SUPER SEXY BOYS — Frutiger Aero theme
   Glossy glass, aqua/eco gradients, photographic sky, bubbles.
   ============================================================ */
:root {
  --sky-deep: #0064B4;
  --sky-mid: #38ABE4;
  --sky-hi: #9CEFF2;
  --eco-deep: #4f7d12;
  --eco: #9FE11D;
  --eco-hi: #CCFF7C;

  --ink: #0b2f55;
  --ink-dim: #2e5c86;
  --ink-faint: #41698f;
  --bg: #eaf7ff;

  --good: #3a9e1f;
  --bad: #e0512f;

  --glass: linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(232,244,251,0.34) 50%, rgba(105,207,255,0.16) 100%);
  --glass-border: rgba(255,255,255,0.7);
  --glass-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 14px 26px rgba(255,255,255,0.30),
    inset 0 -10px 16px rgba(0,70,140,0.10),
    0 10px 26px rgba(0,70,140,0.22);
  --radius: 20px;

  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Myriad Pro", "Open Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
/* The [hidden] attribute must beat component display rules (.form{display:grid},
   .pending{display:flex}), which otherwise keep "hidden" elements on screen. */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  min-height: 100dvh;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(180deg, #bff0f7 0%, #7fd6ef 32%, #36a6e2 64%, #0a72c0 100%) fixed;
  overflow-x: hidden;
}

/* ---------- Background scenery ---------- */
.aero-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aero-photo {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(191,240,247,0.35) 0%, rgba(56,166,226,0.10) 42%, rgba(10,114,192,0.05) 66%, rgba(120,200,120,0.20) 100%),
    url("https://commons.wikimedia.org/wiki/Special:FilePath/Green_Field_Blue_Sky_Clouds.jpg?width=1920");
  background-size: cover;
  background-position: center 28%;
  filter: saturate(118%);
  transform: scale(1.06);
  transition: transform 0.18s ease-out;
  will-change: transform;
}
.aero-sun {
  position: absolute; top: -8%; right: 8%; width: 60vw; height: 60vw; max-width: 620px; max-height: 620px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.92) 0%, rgba(251,232,150,0.55) 11%, rgba(251,200,80,0.18) 30%, rgba(251,200,80,0) 60%);
  mix-blend-mode: screen;
}
.aero-grass {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background: linear-gradient(180deg, rgba(110,200,90,0) 0%, rgba(96,180,70,0.28) 55%, rgba(60,130,40,0.5) 100%);
}

/* Floating bubbles */
.bubbles { position: absolute; inset: 0; }
.bub {
  position: absolute; bottom: -16vh; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,0.95) 0%, rgba(205,247,255,0.7) 16%, rgba(53,188,222,0.42) 55%, rgba(0,100,180,0.18) 100%);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.8), inset 0 -6px 10px rgba(0,80,150,0.25), 0 4px 10px rgba(0,70,140,0.18);
  opacity: 0.55;
  animation: rise linear infinite;
}
@keyframes rise {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10%  { opacity: 0.6; }
  50%  { transform: translateY(-55vh) translateX(18px) scale(1.05); }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-118vh) translateX(-12px) scale(1.1); opacity: 0; }
}
.b1 { left: 6%;  width: 46px; height: 46px; animation-duration: 19s; animation-delay: -2s; }
.b2 { left: 18%; width: 26px; height: 26px; animation-duration: 15s; animation-delay: -7s; }
.b3 { left: 31%; width: 64px; height: 64px; animation-duration: 24s; animation-delay: -11s; }
.b4 { left: 44%; width: 20px; height: 20px; animation-duration: 13s; animation-delay: -4s; }
.b5 { left: 57%; width: 52px; height: 52px; animation-duration: 21s; animation-delay: -15s; }
.b6 { left: 68%; width: 32px; height: 32px; animation-duration: 17s; animation-delay: -9s; }
.b7 { left: 79%; width: 72px; height: 72px; animation-duration: 27s; animation-delay: -3s; }
.b8 { left: 88%; width: 28px; height: 28px; animation-duration: 16s; animation-delay: -13s; }
.b9 { left: 96%; width: 40px; height: 40px; animation-duration: 22s; animation-delay: -6s; }
@media (prefers-reduced-motion: reduce) { .bub { animation: none; opacity: 0.4; } .aero-photo { transition: none; } }

/* ---------- Layout ---------- */
.wrap { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 16px 70px; }

/* Shared glass surface */
.card, .panel, .pending, .toast {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-top-color: rgba(255,255,255,0.92);
  border-bottom-color: rgba(0,70,140,0.18);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-radius: var(--radius);
  position: relative;
}
/* top specular sheen on glass */
.card::after, .panel::after {
  content: ""; position: absolute; left: 8px; right: 8px; top: 4px; height: 42%;
  border-radius: calc(var(--radius) - 6px) calc(var(--radius) - 6px) 60% 60%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  pointer-events: none;
}

/* ---------- Header ---------- */
.top { padding: 16px 6px 20px; text-align: center; }
.brand h1 {
  margin: 0; font-size: clamp(26px, 7vw, 46px); font-weight: 800; letter-spacing: 0.02em;
  color: #fff;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.6),
    0 2px 10px rgba(0,90,170,0.55),
    0 0 28px rgba(160,240,255,0.55);
}
.brand h1 .glo { color: #eaffd0; }
/* ---------- Scorecards ---------- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.card { padding: 16px 16px 15px; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow), 0 16px 34px rgba(0,70,140,0.28); }
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; z-index: 2; background: linear-gradient(90deg, var(--accent), rgba(255,255,255,0.6)); border-radius: var(--radius) var(--radius) 0 0; }
.card .who { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: 0.01em; position: relative; z-index: 1; color: var(--ink); }
.card .who .pip { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, var(--accent) 78%); box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 1px 3px rgba(0,60,120,0.3); }
.card .who .src { margin-left: auto; font-size: 11px; color: var(--ink-faint); font-weight: 600; }
.card .bf { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 2px; position: relative; z-index: 1; }
.card .bf .num {
  font-size: clamp(38px, 12vw, 58px); font-weight: 800; line-height: 1;
  background: linear-gradient(180deg, #2aa3e6 0%, #0a6fc0 46%, #064a87 54%, #06335f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 0.5px rgba(255,255,255,0.25);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.7)) drop-shadow(0 2px 4px rgba(0,70,140,0.3));
}
.card .bf .unit { color: var(--ink-dim); font-size: 13px; font-weight: 700; }
.delta { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; margin-top: 6px; position: relative; z-index: 1;
  padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.6); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
.delta.good { color: #1f6b0e; background: linear-gradient(180deg, rgba(204,255,124,0.8), rgba(159,225,29,0.45)); }
.delta.bad  { color: #8a2a13; background: linear-gradient(180deg, rgba(255,200,170,0.85), rgba(244,128,26,0.4)); }
.delta.flat { color: var(--ink-dim); background: rgba(255,255,255,0.5); }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 14px; position: relative; z-index: 1; }
.mini div { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-dim); border-top: 1px solid rgba(255,255,255,0.6); padding-top: 5px; }
.mini div b { color: var(--ink); font-weight: 700; }
.goalbar { margin-top: 13px; position: relative; z-index: 1; }
.goalbar .track { height: 10px; border-radius: 999px; background: rgba(0,60,120,0.16); border: 1px solid rgba(255,255,255,0.5); box-shadow: inset 0 2px 4px rgba(0,60,120,0.25); overflow: hidden; }
.goalbar .fill { height: 100%; border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, #fff), var(--accent)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85); transition: width 0.9s cubic-bezier(.2,.8,.2,1); }
.goalbar .glabel { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-dim); margin-top: 6px; }
.goalbar .glabel a { color: var(--sky-deep); cursor: pointer; font-weight: 700; }
.goalbar .glabel a:hover { text-decoration: underline; }

/* ---------- Panels ---------- */
.panel { margin-top: 16px; padding: 15px 16px 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; position: relative; z-index: 1; }
.panel-head h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: 0.01em; color: var(--ink); }
.panel-head .sub { font-size: 12px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.panel > * { position: relative; z-index: 1; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.grid-2 .panel { margin-top: 0; }

/* ---------- Chart ---------- */
.chart { width: 100%; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: rgba(10,70,130,0.14); stroke-width: 1; stroke-dasharray: 2 5; }
.chart .tick { fill: var(--ink-dim); font-size: 12px; font-weight: 700; }
.chart .goal { stroke-dasharray: 5 4; stroke-width: 1.6; opacity: 0.7; }
.chart .series { fill: none; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 2px 3px rgba(0,60,120,0.22)); }
.chart .pt { stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 1px 2px rgba(0,60,120,0.3)); cursor: pointer; transition: r 0.12s ease; }
.chart .pt:hover { r: 6.5; }
.chart .empty { fill: var(--ink-faint); font-size: 12px; font-weight: 600; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--ink-dim); font-weight: 700; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 4px; border-radius: 3px; display: inline-block; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); }
.legend i.goal { background: none !important; border-top: 2px dashed currentColor; height: 0; box-shadow: none; }

/* chart tooltip */
.tip {
  position: fixed; z-index: 60; pointer-events: none; transform: translate(-50%, -120%);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(225,242,252,0.9));
  border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 6px 16px rgba(0,60,120,0.3);
  border-radius: 10px; padding: 6px 9px; font-size: 12px; color: var(--ink); font-weight: 700; white-space: nowrap;
}
.tip small { display: block; color: var(--ink-faint); font-weight: 600; }

/* ---------- Glossy gel buttons ---------- */
.primary, .ghost, .upload-btn, .chip {
  position: relative; border-radius: 999px; cursor: pointer; font-weight: 800;
  border: 1px solid rgba(255,255,255,0.7); border-bottom-color: rgba(0,60,120,0.3);
  overflow: hidden; transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
  text-shadow: 0 1px 1px rgba(255,255,255,0.4);
}
.primary::before, .ghost::before, .upload-btn::before, .chip::before {
  content: ""; position: absolute; left: 3px; right: 3px; top: 2px; height: 46%;
  border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0)); pointer-events: none;
}
.primary:hover, .ghost:hover, .upload-btn:hover, .chip:hover { transform: translateY(-1.5px); filter: brightness(1.06); }
.primary:active, .ghost:active, .upload-btn:active, .chip:active { transform: translateY(1px); filter: brightness(0.97); }

.primary {
  background: linear-gradient(180deg, #CCFF7C 0%, #9FE11D 40%, #7FB81F 62%, #4f7d12 100%);
  color: #1f3700; padding: 12px 22px; font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 6px 14px rgba(60,120,20,0.4);
}
.ghost, .upload-btn {
  background: linear-gradient(180deg, #b8e6fa 0%, #38ABE4 48%, #0a78c2 52%, #005a9e 100%);
  color: #fff; text-shadow: 0 1px 2px rgba(0,50,100,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 6px 14px rgba(0,80,150,0.4);
}
.ghost { padding: 8px 15px; font-size: 13px; }
.upload-btn { padding: 11px 16px; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  padding: 7px 13px; font-size: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(210,235,250,0.6) 50%, rgba(150,205,240,0.55) 52%, rgba(120,185,225,0.6));
  color: var(--ink-dim);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 6px rgba(0,80,150,0.18);
}
.chip[aria-selected="true"] {
  background: linear-gradient(180deg, #b8e6fa, #38ABE4 48%, #0a78c2 52%, #005a9e);
  color: #fff; text-shadow: 0 1px 2px rgba(0,50,100,0.4);
}

/* ---------- Composition ---------- */
.composition { display: grid; gap: 16px; }
.comp-row .comp-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.comp-row .comp-name { font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.comp-row .comp-name .pip { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff, var(--p) 80%); }
.comp-row .comp-tot { font-size: 12px; color: var(--ink-dim); font-weight: 700; }
.comp-bar { display: flex; height: 30px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.6); background: rgba(0,60,120,0.12); box-shadow: inset 0 2px 5px rgba(0,60,120,0.22); }
.comp-bar .seg { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; white-space: nowrap; min-width: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6); transition: flex-grow 0.8s cubic-bezier(.2,.8,.2,1); }
.comp-bar .seg.lean { color: #14310a; text-shadow: 0 1px 0 rgba(255,255,255,0.45); background-image: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 50%, rgba(0,60,30,0.18)); }
.comp-bar .seg.fat { background: linear-gradient(180deg, #ff9d7e, #f06a4a 50%, #d8482c); color: #fff; text-shadow: 0 1px 1px rgba(120,30,10,0.5); }
.comp-note { font-size: 13px; color: var(--ink-dim); margin-top: 4px; font-weight: 700; }

/* ---------- Goal gauges ---------- */
.gauges { display: grid; gap: 18px; }
.gauge .g-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13px; }
.gauge .g-top b { font-weight: 800; color: var(--ink); }
.gauge .g-now { font-size: 12px; color: var(--ink-dim); font-weight: 700; }
.gauge .g-track { position: relative; height: 14px; border-radius: 999px; background: rgba(0,60,120,0.16); border: 1px solid rgba(255,255,255,0.5); box-shadow: inset 0 2px 5px rgba(0,60,120,0.28); }
.gauge .g-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent) 70%, color-mix(in srgb, var(--accent) 70%, #000)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85); transition: width 0.9s cubic-bezier(.2,.8,.2,1); }
.gauge .g-goal { position: absolute; top: -5px; bottom: -5px; width: 3px; background: #fff; border-radius: 3px; box-shadow: 0 0 5px rgba(0,60,120,0.5); }
.gauge .g-goal::after { content: "🎯"; position: absolute; top: -17px; left: -6px; font-size: 12px; }
.gauge .g-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-dim); margin-top: 6px; font-weight: 600; }
.gauge .g-scale a { color: var(--sky-deep); cursor: pointer; }
.gauge .g-empty { font-size: 12px; color: var(--ink-faint); }
.gauge .g-empty a { color: var(--sky-deep); cursor: pointer; font-weight: 700; }

/* ---------- Pending ---------- */
.pending { margin-top: 16px; padding: 13px 15px; font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pending b { color: var(--bad); }

/* ---------- Form ---------- */
.form { display: grid; gap: 12px; }
.row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.row.metrics { grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); }
.field { display: grid; gap: 5px; font-size: 13px; color: var(--ink-dim); font-weight: 600; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field input, .field select {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(235,246,252,0.7)); color: var(--ink);
  border: 1px solid rgba(255,255,255,0.8); border-top-color: rgba(0,60,120,0.18);
  border-radius: 11px; padding: 10px 11px; font-size: 16px; width: 100%; min-width: 0; font-family: inherit;
  box-shadow: inset 0 2px 4px rgba(0,60,120,0.12);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--sky-mid); box-shadow: inset 0 2px 4px rgba(0,60,120,0.12), 0 0 0 3px rgba(56,171,228,0.3); }
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.or { color: var(--ink-faint); font-size: 12px; font-weight: 700; }
.hint { margin: 0; font-size: 12px; color: var(--ink-faint); font-weight: 600; }

/* ---------- History ---------- */
.table-scroll { overflow-x: auto; }
.history { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 540px; }
.history th { text-align: left; color: var(--ink-faint); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,0.6); }
.history td { padding: 9px 8px; border-bottom: 1px solid rgba(0,60,120,0.08); color: var(--ink-dim); white-space: nowrap; }
.history tbody tr { transition: background 0.12s ease; }
.history tbody tr:hover { background: rgba(255,255,255,0.4); }
.history td b { color: var(--ink); font-weight: 800; }
.history .who-pip { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; box-shadow: inset 0 1px 1px rgba(255,255,255,0.8); }
.history .row-actions { display: inline-flex; align-items: center; gap: 6px; }
.history .edit, .history .del {
  cursor: pointer; border: none; font-family: inherit; font-weight: 800;
  background: rgba(255,255,255,0.42); color: var(--ink-faint);
  border-radius: 999px; min-height: 26px;
}
.history .edit { padding: 4px 9px; font-size: 11px; }
.history .del { width: 26px; padding: 0; font-size: 14px; }
.history .edit:hover { color: var(--sky-deep); background: rgba(255,255,255,0.65); }
.history .del:hover { color: var(--bad); }

.foot { margin-top: 24px; text-align: center; color: #eaf7ff; font-size: 11px; line-height: 1.6; text-shadow: 0 1px 3px rgba(0,50,100,0.5); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  padding: 12px 18px; font-size: 13px; font-weight: 700; color: var(--ink); z-index: 70; border-radius: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .row { grid-template-columns: 1fr 1fr; }
  .row.metrics { grid-template-columns: 1fr 1fr; }
  .field.full, .row .field:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 380px) { .cards { grid-template-columns: 1fr; } }