:root {
    --accent: #3b82f6;
    --primary-bg: #050b18;
    --card-bg: #0f172a;
    --text: #ffffff;
}

body { background: var(--primary-bg); color: var(--text); transition: 0.5s; font-family: sans-serif; margin: 0; padding: 20px; }
.main-wrapper { max-width: 950px; margin: auto; }
.box { background: var(--card-bg); border-radius: 20px; padding: 30px; margin-bottom: 25px; border: 1px solid rgba(255,255,255,0.05); text-align: center; }

#live-counter { font-size: clamp(50px, 10vw, 85px); font-weight: 900; color: var(--accent); text-shadow: 0 0 20px var(--accent); margin: 10px 0; font-family: monospace; }
.progress-track { background: rgba(255,255,255,0.1); height: 12px; border-radius: 10px; width: 85%; margin: 20px auto; overflow: hidden; }
#fill-bar { height: 100%; background: var(--accent); width: 0%; transition: 1s linear; }

.controls-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.control-btn { background: var(--accent); color: white; border: none; padding: 15px; border-radius: 12px; cursor: pointer; font-size: 22px; transition: 0.3s; }

.period-card, .labels-grid { display: grid; grid-template-columns: 0.5fr 1.8fr 1.8fr 2.2fr 0.6fr 1fr; gap: 15px; padding: 20px; align-items: center; }
.period-card { background: var(--card-bg); border-radius: 15px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,0.03); font-size: 15px; }
.labels-grid { font-weight: bold; opacity: 0.7; font-size: 13px; color: var(--accent); }

/* ألوان الأزرار */
.btn-default { --accent: #3b82f6; }
.btn-green { --accent: #10b981; }
.btn-red { --accent: #ef4444; }
.btn-gold { --accent: #f59e0b; }

/* ألوان الخلفيات */
.bg-default { --primary-bg: #050b18; --card-bg: #0f172a; }
.bg-dark-blue { --primary-bg: #0a192f; --card-bg: #112240; }
.bg-dark-green { --primary-bg: #020d0a; --card-bg: #052219; }
.bg-dark-red { --primary-bg: #110303; --card-bg: #220505; }

.light-mode { --primary-bg: #f3f4f6; --card-bg: #ffffff; --text: #1f2937; }

.my-link { color: var(--accent); text-decoration: none; font-weight: bold; border: 1px solid var(--accent); padding: 5px 15px; border-radius: 20px; }