/* =========================
   THEME + BRIGHTNESS
   ========================= */
:root{
  --bg0:#030611;
  --bg1:#0a1430;

  --glass: rgba(90,130,220,0.10);
  --glass-strong: rgba(90,130,220,0.16);

  --accent:#4aa3ff;
  --accent-glow: rgba(74,163,255,0.38);

  --text:#eef4ff;
  --muted: rgba(238,244,255,0.72);

  --stroke: rgba(150,185,255,0.22);
  --stroke-strong: rgba(150,185,255,0.38);

  --shadow-main: 0 18px 54px rgba(10,25,55,0.62);
  --shadow-soft: 0 10px 28px rgba(10,25,55,0.48);

  --glow1: rgba(60,130,255,0.18);
  --glow2: rgba(120,80,255,0.12);
  --glow3: rgba(30,200,255,0.14);

  --sidebar-bg: rgba(6, 10, 20, 0.985);
  --sidebar-border: rgba(150,185,255,0.22);
  --sidebar-shadow: 12px 0 42px rgba(5, 12, 35, 0.68);
  --panel-bg: rgba(6, 10, 20, 0.88);
  --panel-border: rgba(150,185,255,0.18);
  --panel-shadow: 0 -20px 60px rgba(5, 12, 35, 0.72);

  --r:12px;
  --r2:8px;

  --ui-brightness: 1;

  --good:#5fe0a0;
  --bad:#ff5d6c;
  --gold:#d8b872;

  --ui-heading-font: Georgia, Cambria, "Times New Roman", serif;
}

html[data-theme="navy"]{ }

html[data-theme="army"]{
  --bg0:#050705; --bg1:#0b120c;
  --glass: rgba(120,160,90,0.10); --glass-strong: rgba(120,160,90,0.16);
  --accent:#8bc34a; --accent-glow: rgba(139,195,74,0.40);
  --text:#eef6eb; --muted: rgba(238,246,235,0.70);
  --stroke: rgba(150,190,130,0.22); --stroke-strong: rgba(150,190,130,0.36);
  --shadow-main: 0 16px 44px rgba(40,70,40,0.45); --shadow-soft: 0 8px 22px rgba(40,70,40,0.38);
  --glow1: rgba(140,190,110,0.18); --glow2: rgba(120,170,90,0.14); --glow3: rgba(100,140,80,0.22);
  --sidebar-bg: rgba(8, 14, 8, 0.985); --sidebar-border: rgba(150,190,130,0.22); --sidebar-shadow: 12px 0 40px rgba(30,60,30,0.60);
  --panel-bg: rgba(10,16,10,0.88); --panel-border: rgba(150,190,130,0.18); --panel-shadow: 0 -20px 60px rgba(20,50,20,0.70);
}

html[data-theme="cobalt"]{
  --bg0:#040614; --bg1:#0b1a46;
  --glass: rgba(80,120,255,0.10); --glass-strong: rgba(80,120,255,0.18);
  --accent:#6c7dff; --accent-glow: rgba(108,125,255,0.40);
  --text:#f0f2ff; --muted: rgba(240,242,255,0.72);
  --stroke: rgba(160,175,255,0.24); --stroke-strong: rgba(160,175,255,0.40);
  --shadow-main: 0 20px 60px rgba(8, 20, 70, 0.62); --shadow-soft: 0 10px 30px rgba(8, 20, 70, 0.50);
  --glow1: rgba(90,120,255,0.18); --glow2: rgba(120,80,255,0.14); --glow3: rgba(0,170,255,0.12);
  --sidebar-bg: rgba(6, 10, 24, 0.985); --sidebar-border: rgba(160,175,255,0.22); --sidebar-shadow: 12px 0 44px rgba(6, 12, 40, 0.70);
  --panel-bg: rgba(6, 10, 24, 0.88); --panel-border: rgba(160,175,255,0.18); --panel-shadow: 0 -20px 60px rgba(6, 12, 40, 0.74);
}

html[data-theme="teal"]{
  --bg0:#020a0b; --bg1:#053033;
  --glass: rgba(70,220,210,0.10); --glass-strong: rgba(70,220,210,0.18);
  --accent:#2fe7d7; --accent-glow: rgba(47,231,215,0.38);
  --text:#eafffe; --muted: rgba(234,255,254,0.72);
  --stroke: rgba(120,255,245,0.20); --stroke-strong: rgba(120,255,245,0.38);
  --shadow-main: 0 20px 60px rgba(0, 60, 70, 0.62); --shadow-soft: 0 10px 30px rgba(0, 60, 70, 0.50);
  --glow1: rgba(70,220,210,0.16); --glow2: rgba(0,255,180,0.10); --glow3: rgba(0,180,255,0.12);
  --sidebar-bg: rgba(4, 18, 18, 0.985); --sidebar-border: rgba(120,255,245,0.20); --sidebar-shadow: 12px 0 44px rgba(0, 30, 35, 0.70);
  --panel-bg: rgba(4, 18, 18, 0.88); --panel-border: rgba(120,255,245,0.18); --panel-shadow: 0 -20px 60px rgba(0, 30, 35, 0.74);
}

html[data-theme="amber"]{
  --bg0:#0b0702; --bg1:#332006;
  --glass: rgba(255,190,70,0.10); --glass-strong: rgba(255,190,70,0.18);
  --accent:#ffbf3f; --accent-glow: rgba(255,191,63,0.40);
  --text:#fff6e8; --muted: rgba(255,246,232,0.72);
  --stroke: rgba(255,210,150,0.22); --stroke-strong: rgba(255,210,150,0.40);
  --shadow-main: 0 20px 60px rgba(70, 35, 5, 0.62); --shadow-soft: 0 10px 30px rgba(70, 35, 5, 0.50);
  --glow1: rgba(255,190,70,0.18); --glow2: rgba(255,120,60,0.12); --glow3: rgba(255,230,140,0.14);
  --sidebar-bg: rgba(18, 12, 6, 0.985); --sidebar-border: rgba(255,210,150,0.22); --sidebar-shadow: 12px 0 44px rgba(55, 28, 6, 0.70);
  --panel-bg: rgba(18, 12, 6, 0.88); --panel-border: rgba(255,210,150,0.18); --panel-shadow: 0 -20px 60px rgba(55, 28, 6, 0.74);
}

html[data-theme="crimson"]{
  --bg0:#0b0204; --bg1:#360710;
  --glass: rgba(255,90,120,0.10); --glass-strong: rgba(255,90,120,0.18);
  --accent:#ff3d66; --accent-glow: rgba(255,61,102,0.40);
  --text:#fff0f2; --muted: rgba(255,240,242,0.72);
  --stroke: rgba(255,170,190,0.22); --stroke-strong: rgba(255,170,190,0.40);
  --shadow-main: 0 20px 60px rgba(70, 5, 20, 0.62); --shadow-soft: 0 10px 30px rgba(70, 5, 20, 0.50);
  --glow1: rgba(255,90,120,0.16); --glow2: rgba(255,60,90,0.12); --glow3: rgba(255,180,120,0.10);
  --sidebar-bg: rgba(18, 6, 10, 0.985); --sidebar-border: rgba(255,170,190,0.22); --sidebar-shadow: 12px 0 44px rgba(55, 6, 18, 0.70);
  --panel-bg: rgba(18, 6, 10, 0.88); --panel-border: rgba(255,170,190,0.18); --panel-shadow: 0 -20px 60px rgba(55, 6, 18, 0.74);
}

html[data-theme="violet"]{
  --bg0:#070214; --bg1:#1b0738;
  --glass: rgba(200,120,255,0.10); --glass-strong: rgba(200,120,255,0.18);
  --accent:#b36bff; --accent-glow: rgba(179,107,255,0.40);
  --text:#f7f0ff; --muted: rgba(247,240,255,0.72);
  --stroke: rgba(230,200,255,0.22); --stroke-strong: rgba(230,200,255,0.40);
  --shadow-main: 0 20px 60px rgba(35, 6, 70, 0.62); --shadow-soft: 0 10px 30px rgba(35, 6, 70, 0.50);
  --glow1: rgba(180,90,255,0.16); --glow2: rgba(90,140,255,0.10); --glow3: rgba(255,120,255,0.10);
  --sidebar-bg: rgba(12, 6, 20, 0.985); --sidebar-border: rgba(230,200,255,0.22); --sidebar-shadow: 12px 0 44px rgba(20, 6, 40, 0.72);
  --panel-bg: rgba(12, 6, 20, 0.88); --panel-border: rgba(230,200,255,0.18); --panel-shadow: 0 -20px 60px rgba(20, 6, 40, 0.74);
}

html[data-theme="magenta"]{
  --bg0:#0a0210; --bg1:#33061f;
  --glass: rgba(255,90,210,0.10); --glass-strong: rgba(255,90,210,0.18);
  --accent:#ff4bd6; --accent-glow: rgba(255,75,214,0.40);
  --text:#fff0fb; --muted: rgba(255,240,251,0.72);
  --stroke: rgba(255,175,235,0.22); --stroke-strong: rgba(255,175,235,0.40);
  --shadow-main: 0 20px 60px rgba(65, 6, 45, 0.62); --shadow-soft: 0 10px 30px rgba(65, 6, 45, 0.50);
  --glow1: rgba(255,90,210,0.16); --glow2: rgba(170,120,255,0.10); --glow3: rgba(255,140,140,0.10);
  --sidebar-bg: rgba(18, 6, 16, 0.985); --sidebar-border: rgba(255,175,235,0.22); --sidebar-shadow: 12px 0 44px rgba(40, 6, 28, 0.72);
  --panel-bg: rgba(18, 6, 16, 0.88); --panel-border: rgba(255,175,235,0.18); --panel-shadow: 0 -20px 60px rgba(40, 6, 28, 0.74);
}

html[data-theme="lime"]{
  --bg0:#050a02; --bg1:#172e06;
  --glass: rgba(190,255,80,0.10); --glass-strong: rgba(190,255,80,0.18);
  --accent:#b9ff3f; --accent-glow: rgba(185,255,63,0.38);
  --text:#f6ffe8; --muted: rgba(246,255,232,0.72);
  --stroke: rgba(225,255,170,0.22); --stroke-strong: rgba(225,255,170,0.40);
  --shadow-main: 0 20px 60px rgba(25, 60, 6, 0.62); --shadow-soft: 0 10px 30px rgba(25, 60, 6, 0.50);
  --glow1: rgba(190,255,80,0.14); --glow2: rgba(255,255,120,0.10); --glow3: rgba(120,255,120,0.12);
  --sidebar-bg: rgba(10, 18, 6, 0.985); --sidebar-border: rgba(225,255,170,0.22); --sidebar-shadow: 12px 0 44px rgba(12, 30, 6, 0.72);
  --panel-bg: rgba(10, 18, 6, 0.88); --panel-border: rgba(225,255,170,0.18); --panel-shadow: 0 -20px 60px rgba(12, 30, 6, 0.74);
}

html[data-theme="slate"]{
  --bg0:#06070a; --bg1:#11161f;
  --glass: rgba(170,190,220,0.08); --glass-strong: rgba(170,190,220,0.14);
  --accent:#9fb3c8; --accent-glow: rgba(159,179,200,0.36);
  --text:#f2f6fb; --muted: rgba(242,246,251,0.72);
  --stroke: rgba(200,220,255,0.18); --stroke-strong: rgba(200,220,255,0.34);
  --shadow-main: 0 20px 60px rgba(10, 20, 35, 0.62); --shadow-soft: 0 10px 30px rgba(10, 20, 35, 0.50);
  --glow1: rgba(170,190,220,0.14); --glow2: rgba(120,140,170,0.10); --glow3: rgba(200,210,255,0.10);
  --sidebar-bg: rgba(10, 12, 16, 0.985); --sidebar-border: rgba(200,220,255,0.18); --sidebar-shadow: 12px 0 44px rgba(8, 10, 18, 0.72);
  --panel-bg: rgba(10, 12, 16, 0.88); --panel-border: rgba(200,220,255,0.16); --panel-shadow: 0 -20px 60px rgba(8, 10, 18, 0.74);
}

html[data-theme="copper"]{
  --bg0:#0a0502; --bg1:#2b1207;
  --glass: rgba(255,140,90,0.10); --glass-strong: rgba(255,140,90,0.18);
  --accent:#ff8f4b; --accent-glow: rgba(255,143,75,0.40);
  --text:#fff3eb; --muted: rgba(255,243,235,0.72);
  --stroke: rgba(255,190,160,0.22); --stroke-strong: rgba(255,190,160,0.40);
  --shadow-main: 0 20px 60px rgba(60, 22, 8, 0.62); --shadow-soft: 0 10px 30px rgba(60, 22, 8, 0.50);
  --glow1: rgba(255,140,90,0.16); --glow2: rgba(255,200,120,0.10); --glow3: rgba(255,90,60,0.10);
  --sidebar-bg: rgba(18, 10, 6, 0.985); --sidebar-border: rgba(255,190,160,0.22); --sidebar-shadow: 12px 0 44px rgba(35, 14, 6, 0.72);
  --panel-bg: rgba(18, 10, 6, 0.88); --panel-border: rgba(255,190,160,0.18); --panel-shadow: 0 -20px 60px rgba(35, 14, 6, 0.74);
}

html[data-theme="ice"]{
  --bg0:#04080b; --bg1:#0a1820;
  --glass: rgba(160,240,255,0.10); --glass-strong: rgba(160,240,255,0.18);
  --accent:#7fe9ff; --accent-glow: rgba(127,233,255,0.38);
  --text:#f3fdff; --muted: rgba(243,253,255,0.74);
  --stroke: rgba(210,250,255,0.20); --stroke-strong: rgba(210,250,255,0.36);
  --shadow-main: 0 20px 60px rgba(6, 30, 40, 0.62); --shadow-soft: 0 10px 30px rgba(6, 30, 40, 0.50);
  --glow1: rgba(160,240,255,0.14); --glow2: rgba(120,180,255,0.12); --glow3: rgba(220,255,255,0.10);
  --sidebar-bg: rgba(6, 14, 18, 0.985); --sidebar-border: rgba(210,250,255,0.20); --sidebar-shadow: 12px 0 44px rgba(6, 12, 18, 0.72);
  --panel-bg: rgba(6, 14, 18, 0.88); --panel-border: rgba(210,250,255,0.18); --panel-shadow: 0 -20px 60px rgba(6, 12, 18, 0.74);
}

/* =========================
   BASE
   ========================= */
:root{ --ui-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,system-ui,sans-serif; }
*{ box-sizing:border-box; }
html,body{ height:100%; }
html, body { touch-action: manipulation; }

body{
  margin:0;
  padding:22px 18px 40px;
  color:var(--text);
  font-family: var(--ui-font);
  font-weight:600;
  letter-spacing:0.2px;
  background-image: linear-gradient(180deg, var(--bg0), var(--bg1));
  background-attachment: fixed;
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
  filter: brightness(var(--ui-brightness));
}
html,body,input,button,select,textarea{ font-family: var(--ui-font); }

.view{
  max-width:520px;
  margin:0 auto;
  padding:56px 0 0;
  text-align:center;
}

h2{
  margin:12px 0 14px;
  font-size:22px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  font-family: var(--ui-heading-font);
}

/* =========================
   LETTERHEAD (etusivun tunnus)
   ========================= */
.letterhead{ margin-bottom:6px; }
.letterhead-seal{
  width:46px; height:46px; margin:0 auto 10px;
  border-radius:50%;
  border:1.5px solid var(--stroke-strong);
  background: radial-gradient(circle at 35% 30%, var(--glass-strong), rgba(0,0,0,0.35));
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--ui-heading-font);
  font-size:20px; font-weight:700;
  box-shadow: var(--shadow-soft), 0 0 0 4px rgba(0,0,0,0.15) inset;
}
.letterhead h2{ margin:0 0 10px; }
.letterhead-rule{
  width:120px; height:1px; margin:0 auto;
  background: linear-gradient(90deg, transparent, var(--stroke-strong), transparent);
  position:relative;
}
.letterhead-rule::after{
  content:"◆";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:8px; color:var(--accent); background:var(--bg1); padding:0 6px;
}
#brand{
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display:flex; align-items:center; gap:6px;
  opacity: 0.68;
  pointer-events: none;
  z-index: 9999;
}
.brand-seal{
  width:16px; height:16px; border-radius:50%;
  border:1px solid var(--stroke-strong);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--ui-heading-font);
  font-size:9px; font-weight:700; color:var(--accent);
}
.brand-text{
  font-size: 11px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  font-family: var(--ui-heading-font);
}

/* Top actions */
.top-actions{ display:flex; gap:10px; margin: 0 0 18px; }
.top-actions button{ width:33.33%; margin:0; padding:12px 8px; font-size:12px; font-weight:900; letter-spacing:0.6px; }

.search-input{ margin: 6px 0 14px; padding: 12px 14px; font-size: 14px; font-weight: 800; text-align: left; }

.field-group{ margin: 12px 0; padding: 12px 12px 6px; border-radius: var(--r); border: 1px solid var(--stroke); border-left: 3px solid var(--accent); background: rgba(0,0,0,0.12); text-align:left; }
.field-group-title{ text-align: left; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin: 0 2px 8px; font-family: var(--ui-heading-font); }

/* =========================
   INPUTS / SELECTS
   ========================= */
input, select{
  width:100%;
  margin:10px 0;
  padding:14px;
  border-radius:var(--r2);
  border:1px solid var(--stroke);
  background:var(--glass);
  color:var(--text);
  text-align:center;
  font-size:16px;
  font-weight:700;
  outline:none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 -1px 0 rgba(0,0,0,0.45) inset;
}
input::placeholder{ color:var(--muted); font-weight:600; }
input:focus, select:focus{ border-color:var(--stroke-strong); background:var(--glass-strong); }
input[type="date"]{ color-scheme: dark; text-align:center; }

/* =========================
   BUTTONS (ledger-tyyli: matala, tasainen täyttö + tili-alleviivaus)
   ========================= */
button{
  position:relative;
  overflow:hidden;
  width:100%;
  margin-top:10px;
  padding:12px 14px 10px;
  border-radius:var(--r2);
  border:1px solid var(--stroke);
  border-bottom:2.5px solid var(--stroke-strong);
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  text-align:center;
  color:var(--text);
  background: rgba(0,0,0,0.22);
  box-shadow: var(--shadow-soft);
  transition: transform .10s ease, filter .12s ease, border-color .12s ease, background .12s ease;
}
button:hover{ filter:brightness(1.1); border-bottom-color:var(--accent); }
button:active{ transform:translateY(1px) scale(0.99); filter:brightness(0.94); }

.save-btn{ border-bottom-color: var(--accent); color:var(--accent); }
.back-btn{ background: rgba(0,0,0,0.12); border-bottom-color:var(--stroke); }
.create-btn{ border-bottom-color: var(--accent); }

/* =========================
   TOP CONTROLS
   ========================= */
#menuToggle{
  position:fixed; top:12px; left:14px; width:38px; height:38px; padding:0;
  border-radius:50%; border:1.5px solid var(--stroke-strong); background:rgba(0,0,0,0.28);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-soft), 0 0 0 3px rgba(0,0,0,0.14) inset; z-index:100; cursor:pointer;
}
#menuToggle:active{ transform:translateY(1px) scale(0.96); }
#menuToggle svg{ color:var(--accent); opacity:.95; pointer-events:none; }

#realtimeClock{
  position:fixed; top:12px; right:14px; padding:7px 11px; border-radius:var(--r2);
  border:1px solid var(--stroke); border-bottom:2px solid var(--stroke-strong); background:var(--glass); box-shadow:var(--shadow-soft);
  font-size:11.5px; font-weight:700; letter-spacing:1px; z-index:100; cursor:pointer;
  font-variant-numeric: tabular-nums;
}

/* =========================
   SIDEBAR + PANELS
   ========================= */
#sidebar{
  position:fixed; top:0; left:-340px; width:320px; height:100%;
  padding:80px 12px 12px;
  background:var(--sidebar-bg); border-right:1px solid var(--sidebar-border); box-shadow:var(--sidebar-shadow);
  transition:left .22s ease; z-index:99;
  display:flex; flex-direction:column; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  color-scheme: dark;
}
#sidebar.active{ left:0; }
.sidebar-spacer{ flex:1; }
.no-scroll{ overflow:hidden; }

.edit-panel{ padding:12px; border-radius:16px; border:1px solid var(--panel-border); background:var(--panel-bg); box-shadow:var(--panel-shadow); text-align:left; }
.edit-title{ font-weight:700; letter-spacing:1.2px; text-transform:uppercase; font-size:12px; margin-bottom:10px; font-family: var(--ui-heading-font); }
.edit-label{ display:block; margin:10px 0 6px; font-weight:900; font-size:12px; letter-spacing:0.6px; color:var(--muted); text-transform:uppercase; }
.edit-hint{ margin-top:6px; font-size:11px; color:var(--muted); font-weight:750; line-height:1.4; }


#sidebar input, #sidebar select, #sidebar button{ font-size:13px; }
#sidebar input{ padding:8px 10px; margin:6px 0; }
#sidebar button{ padding:8px 10px; margin-top:8px; }
#sidebar .edit-label{ margin:6px 0 4px; }

#sidebar select{
  padding:10px 12px; border-radius:14px; border:1px solid var(--stroke);
  background: rgba(0,0,0,0.26); color:var(--text); font-weight:900; outline:none;
  -webkit-text-fill-color: var(--text);
}
#sidebar select:focus{ border-color:var(--stroke-strong); }
#sidebar select option{ background: rgba(0,0,0,0.92); color:var(--text); }

.sidebar-secondary{ width: 100%; margin-top: 10px; padding: 12px 10px; }

/* Collapsible panels */
.panel-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:6px 8px; cursor:pointer; }
.panel-header .title{ font-weight:700; font-size:12px; letter-spacing:1px; text-transform:uppercase; font-family: var(--ui-heading-font); }
.panel-header .chev{ transition: transform 0.18s ease; font-weight:900; color:var(--muted); font-size:18px; }
.panel.collapsed .panel-content{ display:none; }
.panel:not(.collapsed) .chev{ transform: rotate(90deg); }
.panel{ width:100%; box-sizing:border-box; padding:10px; border-radius:12px; background:var(--panel-bg); border:1px solid var(--panel-border); margin:6px 0; }
.panel .panel-content{ padding:8px 4px 4px; }

.goal-input{ padding:8px 10px; border-radius:8px; }

/* =========================
   PHONE KEYPAD
   ========================= */
.keypad-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.62); display:none; align-items:flex-end; justify-content:center; z-index:1000; }
.keypad-overlay.active{ display:flex; }
.keypad{ width:min(520px,100%); border-radius:26px 26px 0 0; border:1px solid var(--panel-border); background:var(--panel-bg); box-shadow:var(--panel-shadow); padding:14px 14px 18px; text-align:center; }
.keypad-display{ height:48px; border-radius:18px; border:1px solid var(--stroke); background:var(--glass); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; letter-spacing:1px; margin-bottom:12px; color:var(--text); }
.keypad-grid.iphone{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.kp{ position:relative; overflow:hidden; height:56px; border-radius:22px; border:1px solid var(--stroke); background: rgba(255,255,255,0.06); color: var(--text); font-size:20px; font-weight:900; display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 22px rgba(0,0,0,0.45); margin:0; }
.kp:active{ transform:translateY(1px); filter:brightness(0.96); }
.kp-fn{ font-size:16px; font-weight:900; border-color: rgba(255,255,255,0.18); }
.keypad-callrow{ margin-top:10px; display:flex; justify-content:center; }
.kp-back{ width:100%; height:52px; border-radius:20px; font-size:16px; font-weight:900; }
.keypad-actions{ display:flex; gap:12px; margin-top:12px; }
.kp-action{ width:50%; height:52px; margin:0; border-radius:20px; font-size:14px; font-weight:900; }
.kp-primary{ border-color: var(--accent); }

/* =========================
   STATS
   ========================= */
.stats{ max-width: 520px; margin: 16px auto 14px; }
.stats-card{ border-radius: var(--r); padding: 18px 18px 14px; border: 1px solid var(--stroke-strong); border-left: 3px solid var(--gold); background: linear-gradient(145deg, rgba(0,0,0,0.46), rgba(0,0,0,0.72)); box-shadow: var(--shadow-soft); text-align: left; }
.stats-title{ font-size: 12px; letter-spacing: 1.6px; font-weight: 700; margin-bottom: 14px; color: var(--muted); text-transform: uppercase; font-family: var(--ui-heading-font); }
.stats-row{ display:flex; justify-content:space-between; gap: 14px; padding: 5px 0; font-weight: 800; }
.stats-row span:first-child{ color: var(--muted); font-weight: 900; letter-spacing: 0.2px; }
.stats-row span:last-child{ font-weight: 900; }
.stats-row.warn span:last-child{ color: var(--bad); }

/* =========================
   FILTER ROW
   ========================= */
.filter-row{ display:flex; justify-content:center; margin: 4px 0 14px; }
.toggle-row{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:0.6px; cursor:pointer; }
.toggle-row input[type="checkbox"]{ width:18px; height:18px; margin:0; accent-color:var(--accent); cursor:pointer; }

/* =========================
   LIST CARDS (debts / credits / log / trash)
   ========================= */
.day-header{ margin:18px 0 10px; font-size:13px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); text-align:center; font-family: var(--ui-heading-font); }

.folder{
  padding:14px 14px 14px 16px; margin:10px 0; border-radius:var(--r); border:1px solid var(--stroke);
  border-left: 3px solid var(--accent);
  background:var(--glass); box-shadow:var(--shadow-soft);
  transition: transform .10s ease, border-color .12s ease, filter .12s ease, background .12s ease;
  text-align:left;
}
.folder:active{ transform: translateY(1px); border-color: var(--stroke-strong); background: var(--glass-strong); }
.folder.is-paid{ opacity:0.72; border-left-color: var(--good); }
.folder.is-late{ border-left-color: var(--bad); }

.folder-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.folder-name{ font-size:16px; font-weight:700; letter-spacing:0.3px; font-family: var(--ui-heading-font); }
.folder-amount{ font-size:17px; font-weight:900; letter-spacing:0.4px; white-space:nowrap; }

.folder-meta{
  margin:8px 0 10px; padding-top:8px;
  border-top: 1px dashed var(--stroke);
  font-size:12px; font-weight:700; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 10px;
}

.badge{ display:inline-block; padding:3px 8px; border-radius:4px; font-size:9.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; border:1px solid var(--stroke); }
.badge.open{ background: rgba(255,255,255,0.06); color:var(--text); }
.badge.paid{ background: rgba(95,224,160,0.14); color:var(--good); border-color: rgba(95,224,160,0.4); }
.badge.late{ background: rgba(255,93,108,0.14); color:var(--bad); border-color: rgba(255,93,108,0.4); }
.badge.ontime{ background: rgba(95,224,160,0.14); color:var(--good); border-color: rgba(95,224,160,0.4); }

.folder .folder-actions{ display:flex; flex-wrap:wrap; gap:6px 1%; margin-top:8px; }
.folder button{ width:auto; flex:1 1 30%; margin:0; font-size:11.5px; font-weight:900; box-shadow:none; padding:10px 8px; }

/* Credits list */
.credit-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 10px; padding:12px 14px; margin:8px 0; border-radius:var(--r2); border:1px solid var(--stroke); background:var(--glass); }
.credit-name{ font-weight:900; font-size:14px; text-align:left; flex:1 1 120px; min-width:0; overflow-wrap:break-word; }
.credit-score-group{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; flex:0 0 auto; margin-left:auto; }
.credit-score{ font-weight:900; font-size:18px; min-width:34px; text-align:right; }
.credit-score.pos{ color:var(--good); }
.credit-score.neg{ color:var(--bad); }
.credit-score.zero{ color:var(--muted); }
.credit-edit-input{ width:64px; margin:0; padding:8px 4px; font-size:13px; }
.credit-save-btn{ width:auto; margin:0; padding:8px 10px; font-size:11px; }

/* Log list */
.log-row{ padding:12px 14px; margin:8px 0; border-radius:var(--r2); border:1px solid var(--stroke); background:var(--glass); text-align:left; }
.log-row-top{ display:flex; justify-content:space-between; gap:10px; font-weight:900; font-size:14px; }
.log-row-meta{ margin-top:4px; font-size:12px; color:var(--muted); font-weight:700; }
.log-change{ font-weight:900; }
.log-change.pos{ color:var(--good); }
.log-change.neg{ color:var(--bad); }

/* Links panel on home */
.goal-box.compact{ margin: 10px 0 18px 0; padding: 14px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--stroke); font-size: 13px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.links-title{ font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); font-family: var(--ui-heading-font); }
.links-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; width:100%; }
.link-chip{ padding:10px 14px; border-radius:var(--r2); border:1px solid var(--stroke-strong); border-bottom:2px solid var(--accent); background:rgba(255,255,255,0.06); color:var(--text); font-weight:800; font-size:12px; text-decoration:none; letter-spacing:0.4px; }
.qr-image{ max-width:180px; width:100%; border-radius:12px; border:1px solid var(--stroke); box-shadow:var(--shadow-soft); }

/* Sidebar link list */
.link-item{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; margin:4px 0; border-radius:8px; background: rgba(255,255,255,0.04); }
.link-item-label{ font-weight:800; font-size:12px; }
.link-item-del{ width:auto; margin:0; padding:6px 8px; font-size:11px; }

/* =========================
   TOAST
   ========================= */
.toast{ position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 9999; max-width: 520px; width: calc(100% - 24px); border: 1px solid var(--stroke-strong); background: rgba(0,0,0,0.78); backdrop-filter: blur(10px); border-radius: var(--r); padding: 12px 12px; box-shadow: var(--shadow-main); }
.toast-row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.toast-text{ font-weight: 900; font-size:13px; text-align:left; }
.toast-actions{ display:flex; gap: 8px; flex-shrink:0; }
.toast-btn{ width:auto; padding: 10px 12px; border-radius: var(--r2); border: 1px solid var(--stroke); background: rgba(255,255,255,0.10); color: var(--text); font-weight: 900; margin:0; font-size:11px; }

/* Focus visibility */
input:focus-visible, select:focus-visible, button:focus-visible{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow), 0 0 18px var(--accent-glow); }

/* Empty state */
.empty-state{ padding:30px 14px; text-align:center; color:var(--muted); font-weight:800; font-size:13px; }

/* =========================
   PODIUMI (Top 3 krediittiä)
   ========================= */
.podium-wrap{ max-width:520px; margin:4px auto 18px; }
.podium-title{
  font-size:11px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase;
  color:var(--muted); text-align:center; margin-bottom:10px; font-family: var(--ui-heading-font);
}
.podium-row{ display:flex; align-items:flex-end; justify-content:center; gap:8px; }
.podium-slot{
  flex:1 1 0; max-width:150px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 8px 0;
  border-radius: var(--r2) var(--r2) 0 0;
  border:1px solid var(--stroke);
  border-bottom:none;
  background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.30));
  text-align:center;
}
.podium-name{ font-size:12px; font-weight:700; letter-spacing:0.2px; overflow-wrap:break-word; min-height:2.4em; }
.podium-score{ font-size:10.5px; font-weight:700; color:var(--muted); padding-bottom:8px; }
.podium-column{
  width:100%; display:flex; align-items:flex-start; justify-content:center;
  border-radius:6px 6px 0 0;
}
.podium-rank{
  width:100%; display:flex; align-items:center; justify-content:center;
  font-family: var(--ui-heading-font); font-weight:700;
  border-radius:6px 6px 0 0;
}
.podium-slot.rank-1{ order:2; }
.podium-slot.rank-2{ order:1; }
.podium-slot.rank-3{ order:3; }
.podium-slot.rank-1 .podium-column{ height:64px; }
.podium-slot.rank-2 .podium-column{ height:46px; }
.podium-slot.rank-3 .podium-column{ height:32px; }
.podium-slot.gold{ border-color: rgba(216,184,114,0.55); }
.podium-slot.gold .podium-rank{ background: linear-gradient(180deg, rgba(216,184,114,0.35), rgba(216,184,114,0.12)); color:var(--gold); font-size:22px; }
.podium-slot.silver .podium-rank{ background: linear-gradient(180deg, rgba(200,210,225,0.28), rgba(200,210,225,0.08)); color:#c9d3e0; font-size:18px; }
.podium-slot.bronze .podium-rank{ background: linear-gradient(180deg, rgba(205,140,90,0.28), rgba(205,140,90,0.08)); color:#cd8c5a; font-size:16px; }
.podium-slot.gold .podium-name{ font-size:13.5px; color:var(--gold); }

/* =========================
   LISENSSIPORTTI (aktivointi + PIN)
   ========================= */
body.license-locked{ overflow:hidden; }

#licenseGate{
  display:none;
  position:fixed; inset:0; z-index:100000;
  align-items:center; justify-content:center;
  padding:24px;
  background: radial-gradient(120% 120% at 50% 0%, var(--glow1), transparent 60%), var(--bg0);
}

.lg-card{
  width:100%; max-width:340px;
  background: var(--panel-bg);
  border:1px solid var(--panel-border);
  border-top: 3px solid var(--gold);
  border-radius: var(--r);
  box-shadow: var(--shadow-main);
  padding: 30px 24px 22px;
  text-align:center;
}
.lg-brand{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; letter-spacing:.14em; font-size:.78rem; color:var(--accent);
  margin-bottom:20px; text-transform:uppercase; font-family: var(--ui-heading-font);
}
.lg-title{ font-size:1.1rem; font-weight:700; color:var(--text); margin-bottom:6px; font-family: var(--ui-heading-font); }
.lg-sub{ font-size:.85rem; color:var(--muted); margin:0 0 18px; line-height:1.4; }

.lg-input{
  width:100%; box-sizing:border-box; padding:13px 14px; margin-bottom:10px;
  border-radius:var(--r2); border:1px solid var(--stroke); background:rgba(255,255,255,0.04);
  color:var(--text); font-size:1rem; text-align:center; letter-spacing:.06em;
}
.lg-input.lg-pin{ font-size:1.4rem; letter-spacing:.4em; }
.lg-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }

.lg-btn{
  width:100%; padding:13px; border:none; border-radius:var(--r2); cursor:pointer;
  background:var(--accent); color:#04081a; font-weight:700; font-size:.95rem;
  box-shadow: var(--shadow-soft); text-transform:uppercase; letter-spacing:1px;
}
.lg-btn:active{ transform: scale(0.98); }

.lg-link{
  width:100%; margin-top:10px; padding:8px; border:none; background:none;
  color:var(--muted); font-size:.8rem; font-weight:600; text-decoration:underline;
  text-transform:none; letter-spacing:normal; box-shadow:none;
}
.lg-link:hover{ color:var(--text); filter:none; }

.lg-error{ min-height:1.2em; color:var(--bad); font-size:.82rem; margin-top:4px; }
.lg-foot{ margin-top:18px; font-size:.7rem; letter-spacing:.1em; color:var(--muted); opacity:.6; }

.lg-warning{
  text-align:left; font-size:.82rem; line-height:1.45; color:#ffcf7a;
  background:rgba(255,176,32,0.12); border:1px solid rgba(255,176,32,0.35);
  border-radius:var(--r2); padding:12px 14px; margin-bottom:14px;
}

/* Mobile */
@media(max-width:420px){
  body{ padding:18px 14px 34px; }
  #sidebar{ left:-100%; width:100%; padding:72px 12px 18px; }
  #sidebar.active{ left:0; }
  .top-actions{ flex-direction:column; }
  .top-actions button{ width:100%; }
  .folder .folder-actions button{ flex:1 1 100%; min-height:44px; }
  button{ min-height:46px; }
  .credit-edit-input{ width:52px; padding:8px 2px; }
  .credit-save-btn{ padding:8px 8px; font-size:10.5px; }
  .podium-name{ font-size:11px; }
  .podium-slot{ padding:8px 4px 0; }
}