/* =========================
   THEME + BRIGHTNESS + PHOTO BG
   ========================= */
:root{
  /* Default theme: NAVY (because you asked for it first) */
  --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);

  /* Theme-driven background glows (so it actually changes globally) */
  --glow1: rgba(60,130,255,0.18);
  --glow2: rgba(120,80,255,0.12);
  --glow3: rgba(30,200,255,0.14);

  /* Theme-driven panels */
  --sidebar-bg: rgba(6, 10, 20, 0.92);
  --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:18px;
  --r2:14px;

  --ui-brightness: 1;
  --bg-photo: none; /* set by JS: url("backgrounds/bg1.jpg") etc */
}

/* =========================
   THEMES (distinct, high-contrast)
   ========================= */
html[data-theme="navy"]{ /* default values in :root */ }

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.92);
  --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.92);
  --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.92);
  --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.92);
  --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.92);
  --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.92);
  --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.92);
  --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.92);
  --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.92);
  --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.92);
  --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.92);
  --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
   ========================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  padding:22px 18px 40px;
  color:var(--text);

  font-family: var(--ui-font);

  font-weight:600;
  letter-spacing:0.2px;

  /* Photo (optional) + simple gradient (no neon fog machine) */
  background-image:
    var(--bg-photo),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  background-attachment: fixed, fixed;
  background-position: center center, center;
  background-size: cover, auto;
  background-repeat: no-repeat, no-repeat;

  filter: brightness(var(--ui-brightness));
}

#home,#form{
  max-width:520px;
  margin:0 auto;
  padding:56px 0 0;
  text-align:center;
}

h2{
  margin:12px 0 14px;
  font-size:22px;
  font-weight:900;
  letter-spacing:1.6px;
  text-transform:uppercase;
}

/* Top actions under title */
.top-actions{
  display:flex;
  gap:12px;
  margin: 0 0 18px;
}
.top-actions button{
  width:50%;
  margin:0;
  padding:12px 10px;
  font-size:13px;
  font-weight:900;
  letter-spacing:1px;
}

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

/* Field grouping (form) */
.field-group{
  margin: 12px 0;
  padding: 12px 12px 6px;
  border-radius: var(--r);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,0.12);
}
.field-group-title{
  text-align: left;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 2px 8px;
}

/* =========================
   INPUTS
   ========================= */
input{
  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{ border-color:var(--stroke-strong); background:var(--glass-strong); }

/* =========================
   BUTTONS (glass)
   ========================= */
button{
  position:relative;
  overflow:hidden;

  width:100%;
  margin-top:10px;
  padding:13px 14px;

  border-radius:var(--r2);
  border:1px solid var(--stroke);
  cursor:pointer;

  font-size:14px;
  font-weight:900;
  letter-spacing:1px;
  text-transform:uppercase;
  text-align:center;
  color:var(--text);

  background: var(--glass);

  box-shadow:
    var(--shadow-soft),
    0 1px 0 rgba(255,255,255,0.20) inset,
    0 -1px 0 rgba(0,0,0,0.45) inset;

  /* keep it crisp */
}
button:hover{ filter:brightness(1.06); border-color:var(--stroke-strong); }
button:active{ transform:translateY(1px); filter:brightness(0.96); }

/* =========================
   LIST UI
   ========================= */
.day-group{ margin:18px 0 24px; }

.day-header{
  margin:18px 0 10px;
  font-size:13px;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
}

.folder{
  padding:14px;
  margin:10px 0;
  border-radius:var(--r);
  border:1px solid var(--stroke);
  background:var(--glass);
  box-shadow:var(--shadow-soft);
  transition: transform .10s ease, border-color .12s ease, filter .12s ease, background .12s ease;
  will-change: transform;
  text-align:center;
}

.folder:active{
  transform: translateY(1px);
  border-color: var(--stroke-strong);
  background: var(--glass-strong);
  filter: brightness(1.02);
}

(hover:hover){
  .folder:hover{
    border-color: var(--stroke-strong);
    filter: brightness(1.04);
  }
}

.folder-name{
  font-size:16px;
  font-weight:900;
  letter-spacing:0.8px;
  text-transform:uppercase;
}

.folder-meta{
  margin:6px 0 10px;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}

.folder button{
  width:49%;
  display:inline-block;
  margin:8px 1% 0 0;
  font-size:12px;
  font-weight:900;
  box-shadow:none;
}
.folder button:last-child{ margin-right:0; }

/* =========================
   TOP CONTROLS
   ========================= */
#menuToggle{
  position:fixed;
  top:14px;
  left:14px;
  width:42px;
  height:42px;
  padding:0;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-soft);
  /* no blur */
  z-index:100;
  cursor:pointer;
  transition: transform .08s ease, border-color .12s ease, filter .12s ease;
}
#menuToggle:active{ transform:translateY(1px) scale(0.98); }
#menuToggle img{ width:22px; height:22px; opacity:.92; pointer-events:none; }

#realtimeClock{
  position:fixed;
  top:14px;
  right:14px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:var(--glass);
  box-shadow:var(--shadow-soft);
  /* no blur */
  font-size:12px;
  font-weight:900;
  letter-spacing:1.2px;
  z-index:100;
  cursor:pointer;
}

/* Help prevent double-tap zoom on supporting browsers */
html, body { touch-action: manipulation; }

/* =========================
   SIDEBAR + EDIT PANEL
   ========================= */
#sidebar{
  position:fixed;
  top:0;
  left:-340px;
  width:320px;
  height:100%;
  /* Increase top padding so content is below the menu toggle */
  padding:80px 12px 12px;

  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);
  box-shadow:var(--sidebar-shadow);

  /* no blur */
  transition:left .22s ease;

  z-index:99;

  display:flex;
  flex-direction:column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#sidebar.active{ left:0; }
.sidebar-spacer{ flex:1; }

/* Prevent background scrolling when sidebar is open */
.no-scroll{ overflow:hidden; }

/* Prevent scroll chaining/overscroll when sidebar is scrolled */
#sidebar{ overscroll-behavior: contain; }

.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:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-size:12px;
  margin-bottom:10px;
}

.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:850;
}

/* Sidebar section grouping for clarity */
.sidebar-section{ margin-bottom:12px; }
.sidebar-section .section-title{
  font-weight:900;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}

.quick-actions button{ display:block; width:100%; margin:6px 0; }

/* Small gap between goal section and backup/edit/trash when reordered */
.sidebar-backup-section{ margin-top:8px; }

#sidebar select,
#sidebar input[type="range"]{
  width:100%;
}

/* Make inputs and buttons inside the sidebar more compact */
#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.18);
  color:var(--text);
  font-weight:900;
  outline:none;
}
#sidebar select:focus{ border-color:var(--stroke-strong); }

/* =========================
   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;
#sidebar.active{ left:0; }
.sidebar-spacer{ flex:1; }
.sidebar-spacer{ flex:0.28; }
  border:1px solid var(--panel-border);
  background:var(--panel-bg);
  /* no blur */
  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);
#sidebar.active{ left:0; }

  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);
}

/* Mobile */
@media(max-width:420px){
  body{ padding:18px 14px 34px; }

  /* Make sidebar take the full screen width on small devices for easier interaction */
  #sidebar{
    left:-100%;
    width:100%;
    /* Match desktop: more top padding so content clears the flag */
    padding:72px 12px 18px;
  }
  #sidebar.active{ left:0; }

  .top-actions{ flex-direction:column; }
  .top-actions button{ width:100%; }

  .folder button{ width:100%; margin-right:0; }

  /* Make folder rows taller and buttons more touch-friendly */
  .folder{
    padding:16px;
    min-height:72px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:8px;
  }

  .folder .folder-name{ font-size:16px; }
  .folder .folder-meta{ font-size:13px; }

  .folder button{
    width:100%;
    margin:0;
    padding:12px 14px;
    min-height:48px;
    font-size:15px;
  }

  /* Larger touch targets for mobile */
  button{ min-height:48px; padding:12px 14px; }
  .panel-header{ padding:12px 10px; }

  /* Bigger goal number on phones */
  .goal-fraction{ font-size:28px; }
  .goal-fraction .current{ font-size:34px; }

  /* Make delete buttons easier to tap */
  .goal-delete{ padding:10px 12px; }
}

/* Mobile bottom action bar */
.mobile-bottom-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  padding: 8px 12px;
  display: none;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  background: var(--panel-bg);
  border-top: 1px solid var(--stroke);
  z-index: 1200;
}
.mobile-bottom-bar.active{ display:flex; }
.mobile-bottom-bar button{ flex:1; margin:0 6px; min-height:44px; }

@media(max-width:420px){
  /* Keep original top actions visible on small screens.
     Disable the mobile bottom bar so layout matches previous behavior. */
  .mobile-bottom-bar{ display:none; }
  body{ padding-bottom:0; }
}

/* =========================
   UX POLISH (mobile + hierarchy)
   ========================= */

/* Mobiilissa selaimet tykkäävät sekoilla selectien kanssa.
   Tämä pakottaa tumman värimaailman ja parantaa kontrastia. */
#sidebar{ color-scheme: dark; }
#sidebar select{
  background: rgba(0, 0, 0, 0.26);
  color: var(--text);
  border-color: var(--stroke-strong);
  -webkit-text-fill-color: var(--text);
}
#sidebar select option{
  background: rgba(0,0,0,0.92);
  color: var(--text);
}

/* Selkeä korostus kun painat kenttää puhelimella */
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);
}

/* Make keyboard focus visible for panel headers and goal items */
.panel-header:focus-visible, .goal-item:focus-visible, .goal-header:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input:active,
select:active{
  border-color: var(--accent);
  background: var(--glass-strong);
}

#sidebar select:focus,
#sidebar select:active{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Yhteenveto: kaksi selkeää korttia, ei kiiltoa */
.stats{
  margin: 10px 0 18px;
}
.summary-wrap{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.summary-card{
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,0.12);
  box-shadow: var(--shadow-soft);
  text-align: left;
}
.summary-title{
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
}
.summary-sub{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  opacity: 0.9;
}
.summary-grid{
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  align-items: baseline;
}
.summary-label{
  font-size: 12px;
  font-weight: 750;
  color: var(--muted);
}
.summary-value{
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.4px;
}

/* Mikroanimaatiot: vain hyödylliset */
button,
.folder{
  transition: transform .10s ease, filter .12s ease, border-color .12s ease, background .12s ease;
}
button:active{ transform: translateY(1px) scale(0.98); }

/* Pieni siistiminen: sidebar vähemmän "märkä lasi", enemmän luettava */
#sidebar{ background:var(--sidebar-bg); }


#fontSelect,#fontSizeRange{ width:100%; }


:root{ --ui-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,system-ui,sans-serif; }

html,body,input,button,select,textarea{ font-family: var(--ui-font); }


#brand{
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  opacity: 0.6;
  text-align: center;
  pointer-events: none;
  z-index: 9999;
}


/* ===== MODERNI YHTEENVETO (Päivä + Kuukausi) ===== */
.stats{
  max-width: 520px;
  margin: 16px auto 14px;
}
.stats-card{
  border-radius: 18px;
  padding: 18px 18px 14px;
  border: 1px solid var(--stroke-strong);
  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: 900;
  margin-bottom: 14px;
  color: var(--muted);
  text-transform: uppercase;
}
.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-sep{
  height: 12px;
}

/* ===== 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.72);
  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; }
.toast-actions{ display:flex; gap: 8px; }
.toast-btn{
  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;
}
/* Sidebar secondary button */
.sidebar-secondary{
  width: 100%;
  margin-top: 10px;
  padding: 12px 10px;
}


/* ===== Compact Goal Box ===== */

.goal-box.compact{
  margin: 10px 0 18px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--stroke);
  font-size: 13px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}

.goal-line{
  display:flex;
  justify-content:space-between;
  margin-bottom:6px;
}

.goal-bar{
  height:6px;
  background:rgba(255,255,255,0.08);
  border-radius:6px;
  overflow:hidden;
}

.goal-fraction{
  font-weight:900;
  font-size:20px;
  display:flex;
  align-items:baseline;
  gap:6px;
}
.goal-fraction .current{
  font-size:24px;
}
.goal-fraction .total{
  font-size:16px;
  color:var(--muted);
}
.goal-meta{
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:10px;
  align-items:center;
}
.goal-percent{ font-weight:900; }

/* Goal box expanded list */
.goal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  cursor:pointer;
}
.goal-badge{
  background: rgba(255,255,255,0.06);
  padding:6px 10px;
  border-radius:12px;
  font-weight:800;
  font-size:12px;
}
.goal-list{
  margin-top:10px;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.goal-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 10px;
  border-radius:10px;
  background: rgba(0,0,0,0.06);
  border:1px solid rgba(255,255,255,0.04);
}
.goal-item-title{ font-weight:900; font-size:13px; }
.goal-item-meta{ font-size:12px; color:var(--muted); }
.goal-delete{ padding:6px 8px; font-size:12px; }
.goal-box.expanded{ box-shadow: 0 8px 30px rgba(0,0,0,0.45); }

/* Collapsible panel header */
.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:900;
  font-size:13px;
}
.panel-header .chev{
  transition: transform 0.18s ease;
  font-weight:900;
  color:var(--muted);
}
.panel.collapsed .panel-content{ display:none; }
.panel.collapsed .chev{ transform: rotate(0deg); }
.panel:not(.collapsed) .chev{ transform: rotate(90deg); }

/* Make edit-panel and sidebar-goal-section behave like panel container */
.edit-panel.panel, .sidebar-goal-section.panel{ padding:0; }
.edit-panel.panel .panel-content, .sidebar-goal-section.panel .panel-content{ padding:12px; }

.goal-fill{
  height:100%;
  background:var(--accent);
  transition:width 0.3s ease;
}

.goal-done{
  box-shadow:0 0 12px var(--accent-glow);
}

/* ===== Sidebar Goal Section ===== */
.sidebar-goal-section{
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  border-radius:10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--stroke);
}
.sidebar-goal-section .edit-title{
  font-size:12px;
  font-weight:900;
  letter-spacing:1px;
}
.sidebar-goal-section select,
.sidebar-goal-section .goal-input,
.sidebar-goal-section button{
  width:100%;
  box-sizing:border-box;
}
.sidebar-goal-section .goal-input{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--stroke);
  background:var(--bg);
}
.sidebar-goal-section #saveGoalBtn{
  padding:10px 12px;
  border-radius:8px;
  background:var(--accent);
  color:var(--accent-contrast, #fff);
  border: none;
  font-weight:700;
}

/* Make goal and edit panels match other sidebar boxes in size and appearance */
.sidebar-goal-section, .edit-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;
}

.sidebar-goal-section .edit-title, .edit-panel .edit-title{ font-size:12px; font-weight:900; }

/* =========================
   LICENSE GATE (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:360px;
  background: var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius: var(--r);
  box-shadow: var(--shadow-main);
  padding: 30px 24px 22px;
  text-align:center;
}

.lg-brand{ font-weight:800; letter-spacing:.08em; font-size:.82rem; color:var(--accent); margin-bottom:18px; }
.lg-title{ font-size:1.15rem; font-weight:700; color:var(--text); margin-bottom:6px; }
.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:12px; 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:12px; cursor:pointer;
  background:var(--accent); color:#04081a; font-weight:700; font-size:.95rem;
  box-shadow: var(--shadow-soft);
}
.lg-btn:disabled{ opacity:.6; cursor:default; }
.lg-btn:active{ transform: scale(0.98); }

.lg-error{ min-height:1.2em; color:#ff6b6b; font-size:.82rem; margin-top:10px; }

.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:10px; padding:12px 14px; margin-bottom:14px;
}

.lg-link{
  background:none; border:none; color:var(--muted); font-size:.8rem; text-decoration:underline;
  margin-top:14px; cursor:pointer;
}

.lg-foot{ margin-top:20px; font-size:.68rem; letter-spacing:.08em; color:var(--muted); opacity:.6; }