*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --font:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  --radius:12px;
  --radius-sm:8px;
  --transition:0.25s ease;
}

[data-theme="dark"]{
  --bg:#0f0f1a;
  --bg-card:#1a1a2e;
  --bg-card-hover:#22223a;
  --bg-input:#16162b;
  --text:#e8e8f0;
  --text-dim:#8888a0;
  --accent:#7c5cfc;
  --accent-hover:#6a4ae0;
  --accent-glow:rgba(124,92,252,0.25);
  --danger:#e74c6f;
  --border:#2a2a42;
  --ring-bg:#2a2a42;
  --shadow:0 8px 32px rgba(0,0,0,0.4);
}

[data-theme="light"]{
  --bg:#f4f4fb;
  --bg-card:#ffffff;
  --bg-card-hover:#f0f0f8;
  --bg-input:#eeeef6;
  --text:#1a1a2e;
  --text-dim:#6a6a80;
  --accent:#6c47f5;
  --accent-hover:#5a38d8;
  --accent-glow:rgba(108,71,245,0.18);
  --danger:#d63a5c;
  --border:#d8d8e8;
  --ring-bg:#d8d8e8;
  --shadow:0 4px 20px rgba(0,0,0,0.08);
}

html{font-size:16px}

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  transition:background var(--transition),color var(--transition);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.hidden{display:none!important}

/* ── Header ── */
header{
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.header-top{
  width:100%;max-width:600px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{
  font-size:1.15rem;font-weight:700;letter-spacing:0.5px;
  color:var(--text);
}
.logo span{color:var(--accent);font-weight:800}
.header-actions{display:flex;gap:8px}

.icon-btn{
  background:transparent;border:none;color:var(--text-dim);
  cursor:pointer;padding:8px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--transition),color var(--transition);
}
.icon-btn:hover,.icon-btn:focus-visible{
  background:var(--bg-card);color:var(--text);
}
.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.icon{display:block}

/* ── App Layout ── */
.app-layout{
  flex:1;display:flex;justify-content:center;gap:32px;
  padding:0 24px 32px;max-width:960px;width:100%;margin:0 auto;
}

/* ── Main ── */
main{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:0;gap:24px;max-width:600px;width:100%;min-width:0;
}

/* ── Task Input ── */
.task-input-wrapper{width:100%}
#task-input{
  width:100%;padding:12px 16px;font-size:0.95rem;
  background:var(--bg-input);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius);
  outline:none;transition:border-color var(--transition),background var(--transition);
}
#task-input::placeholder{color:var(--text-dim)}
#task-input:focus{border-color:var(--accent)}

/* ── Mode Buttons ── */
.timer-modes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.mode-btn{
  padding:10px 20px;border:none;border-radius:var(--radius);
  font-size:0.85rem;font-weight:600;cursor:pointer;
  background:transparent;color:var(--text-dim);
  transition:background var(--transition),color var(--transition);
}
.mode-btn:hover{background:var(--bg-card)}
.mode-btn.active{
  background:var(--accent);color:#fff;
  box-shadow:0 2px 12px var(--accent-glow);
}

/* ── Timer Display ── */
.timer-display{
  display:flex;align-items:center;justify-content:center;
  padding:8px 0;
}
.timer-circle{position:relative;width:240px;height:240px}
.progress-ring{width:100%;height:100%;transform:rotate(-90deg)}
.progress-ring-bg{fill:none;stroke:var(--ring-bg);stroke-width:8}
.progress-ring-fill{
  fill:none;stroke:var(--accent);stroke-width:8;
  stroke-linecap:round;
  stroke-dasharray:753.98;
  stroke-dashoffset:0;
  transition:stroke-dashoffset 0.5s ease;
}
.timer-text{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:3.2rem;font-weight:700;letter-spacing:2px;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}

.task-label{
  font-size:0.85rem;color:var(--text-dim);
  text-align:center;min-height:1.2em;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── Controls ── */
.controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center}
.btn-primary{
  padding:14px 40px;border:none;border-radius:var(--radius);
  font-size:1rem;font-weight:700;cursor:pointer;
  background:var(--accent);color:#fff;
  box-shadow:0 4px 16px var(--accent-glow);
  transition:background var(--transition),transform 0.15s ease,box-shadow var(--transition);
}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-full{width:100%;padding:14px}

.btn-secondary{
  width:44px;height:44px;border:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-card);color:var(--text-dim);cursor:pointer;
  transition:background var(--transition),color var(--transition);
}
.btn-secondary:hover{background:var(--bg-card-hover);color:var(--text)}
.btn-secondary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Stats ── */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  width:100%;
}
.stat-card{
  background:var(--bg-card);border-radius:var(--radius);
  padding:16px 8px;text-align:center;
  box-shadow:var(--shadow);
  transition:background var(--transition),transform 0.15s ease;
}
.stat-card:hover{transform:translateY(-2px)}
.stat-value{
  display:block;font-size:1.6rem;font-weight:800;
  color:var(--accent);margin-bottom:4px;
}
.stat-label{
  font-size:0.72rem;font-weight:500;
  color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;
}

/* ── Ads ── */
.ad-container{
  width:100%;display:flex;justify-content:center;align-items:center;
  min-height:0;overflow:hidden;
}
.ad-top{
  min-height:60px;
}
.ad-between{
  min-height:50px;
}
.ad-sidebar{
  width:300px;min-width:300px;flex-shrink:0;
  display:flex;justify-content:center;align-items:flex-start;
  padding-top:80px;
  min-height:250px;
}

/* ── Settings Overlay ── */
.settings-overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,0.55);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  animation:fadeIn 0.2s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.settings-panel{
  background:var(--bg-card);border-radius:var(--radius);
  width:100%;max-width:400px;
  box-shadow:var(--shadow);
  animation:slideUp 0.25s ease;
}
.settings-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px 0;
}
.settings-header h2{font-size:1.1rem;font-weight:700}
.settings-body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:16px}

.setting-group{display:flex;flex-direction:column;gap:6px}
.setting-group label{font-size:0.82rem;font-weight:600;color:var(--text-dim)}
.setting-group input[type="number"]{
  padding:10px 12px;font-size:0.9rem;
  background:var(--bg-input);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  outline:none;width:100%;
  transition:border-color var(--transition);
}
.setting-group input[type="number"]:focus{border-color:var(--accent)}

.setting-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--border);
}
.setting-toggle label{font-size:0.88rem;font-weight:500;color:var(--text);cursor:pointer}
.setting-toggle input[type="checkbox"]{
  width:44px;height:24px;appearance:none;-webkit-appearance:none;
  background:var(--border);border-radius:12px;position:relative;cursor:pointer;
  transition:background var(--transition);
  outline:none;
}
.setting-toggle input[type="checkbox"]::after{
  content:'';position:absolute;top:2px;left:2px;
  width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform var(--transition);
}
.setting-toggle input[type="checkbox"]:checked{background:var(--accent)}
.setting-toggle input[type="checkbox"]:checked::after{transform:translateX(20px)}
.setting-toggle input[type="checkbox"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── Toast ── */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;
  padding:12px 24px;border-radius:var(--radius);
  font-size:0.88rem;font-weight:600;
  box-shadow:0 4px 16px var(--accent-glow);
  z-index:2000;
  animation:slideUpToast 0.3s ease;
}
@keyframes slideUpToast{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}

/* ── Responsive ── */
@media(max-width:480px){
  header{padding:12px 16px}
  .app-layout{padding:0 12px 24px;gap:0}
  main{padding:0;gap:20px}
  .timer-circle{width:200px;height:200px}
  .timer-text{font-size:2.6rem}
  .btn-primary{padding:12px 32px;font-size:0.9rem}
  .stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .stat-card{padding:12px 4px}
  .stat-value{font-size:1.3rem}
  .stat-label{font-size:0.65rem}
  .mode-btn{padding:8px 14px;font-size:0.78rem}
  .settings-panel{max-width:100%}
  .settings-body{padding:16px 20px 20px}
  .ad-sidebar{display:none}
  .ad-top{transform:scale(0.72);transform-origin:center;min-height:44px}
  .ad-between{transform:scale(0.85);transform-origin:center;min-height:42px}
}

@media(max-width:360px){
  .timer-circle{width:170px;height:170px}
  .timer-text{font-size:2.2rem}
  .controls{gap:8px}
  .btn-primary{padding:12px 28px}
  .btn-secondary{width:40px;height:40px}
  .ad-top{transform:scale(0.6);min-height:36px}
  .ad-between{transform:scale(0.75);min-height:38px}
}

@media(min-width:768px){
  .timer-circle{width:280px;height:280px}
  .timer-text{font-size:3.8rem}
}

@media(max-width:767px){
  .ad-sidebar{display:none}
}

@media(min-width:768px) and (max-width:959px){
  .app-layout{max-width:800px}
  .ad-sidebar{width:260px;min-width:260px}
}

/* ── Focus Visible ── */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
:focus:not(:focus-visible){outline:none}