/* Core layout and theme */
body.dark { background:#0b0f18 url('assets/forest.jpg') no-repeat center/cover; color:#f0f0f0; }
body:not(.dark) { background:#f0f5f0; color:#111; }
body.large-text { font-size:1.15em; }

.app-header { display:flex; align-items:center; justify-content:space-between; padding:0.5em 1em; }
.brand svg { margin-right:0.5em; }
.brand h1 { font-size:1.2em; margin:0; }
.tag { font-size:0.85em; opacity:0.8; margin:0; }

/* Glass panel effect */
.glass { background:rgba(255,255,255,0.1); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.2); border-radius:8px; padding:0.8em; margin-bottom:1em; }
body:not(.dark) .glass { background:rgba(0,0,0,0.05); border:1px solid rgba(0,0,0,0.2); }

/* Typography */
.explain { font-size:0.9em; opacity:0.85; margin-bottom:0.5em; }
.muted { opacity:0.7; font-size:0.9em; }
h2,h3,h4 { margin:0.5em 0 0.3em; }

/* Forms */
form label { display:block; margin:0.4em 0; }
form label input[type=checkbox], form label input[type=radio] { margin-right:0.4em; }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width:100%; padding:0.4em; margin-top:0.2em; box-sizing:border-box; font:inherit; color:inherit;
  background:#fff; border:1px solid #ccc; border-radius:4px;
}
body.dark input:not([type=checkbox]):not([type=radio]), body.dark select, body.dark textarea {
  background:#1b1f2a; border:1px solid #555; color:#eee;
}
input::placeholder, textarea::placeholder { opacity:0.7; }
fieldset { border:none; margin:0.5em 0; }
legend { font-size:0.95em; margin-bottom:0.2em; }

/* Buttons */
button { padding:0.5em 0.8em; font:inherit; color:inherit; background:#444; border:none; border-radius:4px; cursor:pointer; }
button.primary { background:#7ee787; color:#0b0f18; font-weight:600; }
button:active { transform:scale(0.98); }

/* Bottom nav */
#bottomNav { display:flex; flex-wrap:wrap; justify-content:space-around; position:fixed; bottom:0; width:100%; padding:0.3em; box-sizing:border-box; }
#bottomNav button { flex:1 1 25%; background:none; border:none; color:inherit; font-size:0.95em; padding:0.6em 0; }
#bottomNav button.active-tab { background:#7ee787; color:#0b0f18; border-radius:4px; }

/* KPIs */
.kpi-grid { display:flex; flex-wrap:wrap; gap:0.5em; margin-bottom:1em; }
.kpi-grid .kpi { flex:1 1 48%; background:rgba(0,0,0,0.2); border-radius:4px; text-align:center; padding:0.4em; font-weight:600; }
body:not(.dark) .kpi-grid .kpi { background:rgba(255,255,255,0.6); }

/* Charts */
.charts { display:grid; grid-template-columns:1fr 1fr; gap:0.5em; }
#chartFTT { grid-column:1 / -1; }
canvas { width:100% !important; background:rgba(255,255,255,0.05); border-radius:4px; }

/* FTT */
.ftt label, .ftt button { display:block; margin:0.5em 0; }
.ftt .tap-area { margin:0.5em 0; background:#222; padding:1em; text-align:center; border:2px dashed #555; border-radius:8px; user-select:none; }
body.dark .ftt .tap-area { background:#0b0f18; border-color:#888; }
.timer { font-size:1.2em; font-weight:600; margin:0.5em 0; }
.export-panel button { margin:0.2em 0; }
.history-list { list-style:none; padding-left:1em; margin:0.5em 0; }
.history-list li { margin:0.2em 0; opacity:0.9; }

/* Helpers */
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0.6em; }
.full { grid-column:1 / -1; }