@charset "utf-8";

body { font-family: sans-serif; padding: 20px; max-width: 500px; margin: auto; color: rgb(224, 224, 224); background-image: url("./Shizzle.jpg"); background-size: cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; }

body.light { color: rgb(26, 26, 26); background: rgb(244, 244, 244); }

body::before { content: ""; position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.65); z-index: -1; }

body.light::before { background: rgba(255, 255, 255, 0.8); }

h2 { color: rgb(139, 195, 74); margin-bottom: 5px; display: inline-block; }

.top-btns { float: right; margin-top: 5px; display: flex; gap: 6px; }

.music-btn, .theme-btn { padding: 8px 12px; background: rgb(139, 195, 74); color: rgb(26, 26, 26); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 20px; font-size: 13px; cursor: pointer; font-weight: bold; }

.music-btn.off { background: rgb(85, 85, 85); color: rgb(204, 204, 204); }

.theme-btn { background: rgb(21, 101, 192); color: white; }

.tabs { display: flex; margin-bottom: 15px; flex-wrap: wrap; clear: both; }

.tab { flex: 1 1 0%; padding: 8px 3px; text-align: center; background: rgba(51, 51, 51, 0.85); cursor: pointer; border-radius: 6px 6px 0px 0px; font-weight: bold; font-size: 10px; color: rgb(204, 204, 204); }

body.light .tab { background: rgb(221, 221, 221); color: rgb(51, 51, 51); }

.tab.active { background: rgb(139, 195, 74); color: rgb(26, 26, 26); }

.pane { display: none; }

.pane.active { display: block; }

label { display: block; margin-top: 10px; font-weight: bold; color: rgb(139, 195, 74); }

body.light label { color: rgb(46, 125, 50); }

input, select, textarea { width: 100%; padding: 8px; margin-top: 4px; box-sizing: border-box; border: 1px solid rgb(68, 68, 68); border-radius: 6px; background: rgba(42, 42, 42, 0.85); color: rgb(224, 224, 224); font-family: inherit; }

body.light input, body.light select, body.light textarea { background: white; color: rgb(26, 26, 26); border: 1px solid rgb(204, 204, 204); }

button { margin-top: 15px; padding: 10px 15px; background: rgb(139, 195, 74); color: rgb(26, 26, 26); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 6px; font-size: 16px; width: 100%; font-weight: bold; cursor: pointer; }

button.secondary { background: rgb(21, 101, 192); color: white; margin-top: 8px; font-size: 14px; }

button.danger { background: rgb(198, 40, 40); color: white; margin-top: 8px; font-size: 14px; }

.result { margin-top: 20px; padding: 15px; background: rgba(42, 42, 42, 0.85); border-radius: 6px; border-left: 5px solid rgb(139, 195, 74); }

body.light .result { background: white; border-left: 5px solid rgb(46, 125, 50); }

.warning { margin-top: 15px; padding: 10px; background: rgba(58, 42, 0, 0.85); border-left: 5px solid rgb(255, 193, 7); border-radius: 6px; font-size: 13px; color: rgb(255, 193, 7); }

.error { color: rgb(255, 82, 82); margin-top: 10px; }

.profile-row { display: flex; gap: 10px; }

.profile-row > div { flex: 1 1 0%; }

.info { margin-top: 10px; padding: 10px; background: rgba(26, 42, 58, 0.85); border-left: 5px solid rgb(21, 101, 192); border-radius: 6px; font-size: 13px; color: rgb(144, 202, 249); }

body.light .info { color: rgb(21, 101, 192); }

.bmi-box { margin-top: 10px; padding: 10px; background: rgba(42, 42, 42, 0.85); border-radius: 6px; font-size: 13px; }

body.light .bmi-box { background: white; }

.bmi-box span { color: rgb(139, 195, 74); font-weight: bold; }

.fun-note { margin-top: 8px; padding: 8px; background: rgba(42, 26, 42, 0.85); border-left: 4px solid rgb(233, 30, 99); border-radius: 6px; font-size: 12px; color: rgb(244, 143, 177); font-style: italic; }

.timer-display { font-size: 48px; font-weight: bold; text-align: center; color: rgb(139, 195, 74); margin: 20px 0px; font-family: monospace; }

.log-entry { padding: 10px; background: rgba(42, 42, 42, 0.85); border-left: 4px solid rgb(139, 195, 74); border-radius: 6px; margin-top: 8px; font-size: 13px; }

body.light .log-entry { background: white; }

.log-entry .date { color: rgb(139, 195, 74); font-weight: bold; font-size: 12px; }

.log-entry .del { float: right; color: rgb(255, 82, 82); cursor: pointer; font-weight: bold; }

.warning-box { margin-top: 15px; padding: 12px; background: rgba(80, 20, 20, 0.9); border-left: 5px solid rgb(255, 82, 82); border-radius: 6px; font-size: 13px; color: rgb(255, 138, 128); }

.warning-box strong { color: rgb(255, 82, 82); }

.chart-bar { height: 20px; background: rgb(139, 195, 74); border-radius: 3px; margin-top: 3px; }

.chart-row { margin-top: 8px; font-size: 12px; }

.checkbox-item { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; }

.checkbox-item input { width: auto; margin: 0px; }

.journal-entry { padding: 12px; background: rgba(42, 42, 42, 0.85); border-left: 4px solid rgb(139, 195, 74); border-radius: 6px; margin-top: 10px; font-size: 13px; }

body.light .journal-entry { background: white; }

.journal-entry .date { color: rgb(139, 195, 74); font-weight: bold; font-size: 12px; }

.journal-entry .del { float: right; color: rgb(255, 82, 82); cursor: pointer; font-weight: bold; }

.journal-entry .rating { color: rgb(255, 193, 7); }

.share-box { margin-top: 15px; padding: 12px; background: rgba(26, 42, 58, 0.85); border-left: 5px solid rgb(21, 101, 192); border-radius: 6px; font-size: 13px; word-break: break-all; color: rgb(144, 202, 249); }

.star-rating { display: flex; gap: 5px; margin-top: 5px; }

.star { font-size: 24px; cursor: pointer; color: rgb(85, 85, 85); }

.star.active { color: rgb(255, 193, 7); }

footer { margin-top: 30px; padding: 15px; text-align: center; font-size: 12px; color: rgb(136, 136, 136); border-top: 1px solid rgba(255, 255, 255, 0.1); }

body.light footer { color: rgb(102, 102, 102); border-top: 1px solid rgb(221, 221, 221); }

.disclaimer-text { font-size: 13px; line-height: 1.6; }

.disclaimer-text h3 { color: rgb(139, 195, 74); margin-top: 20px; margin-bottom: 5px; }

body.light .disclaimer-text h3 { color: rgb(46, 125, 50); }