body {
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     background: #0f0f0f;
     color: #fff;
     line-height: 1.6;
 }

 header {
     background: #222;
     color: #fff;
     padding: 16px 24px;
 }

 header a {
     color: #fff;
     text-decoration: none;
     font-weight: 600;
 }

 header span {
     color: #777;
     margin: 0 6px;
 }

 main {
     max-width: 900px;
     margin: 30px auto;
     padding: 0 16px;
 }

 h1 {
     margin: 0;
     font-size: 24px;
     font-weight: 600;
 }

 .desc {
     color: #bbb;
     font-size: 14px;
     line-height: 1.6;
     margin-bottom: 32px;
 }

 .timer-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 16px;
 }

 .timer-card {
     background: #1b1b1b;
     border-radius: 12px;
     padding: 20px;
     text-decoration: none;
     color: #fff;
     transition: transform .15s ease, background .15s ease;
 }

 .timer-card:hover {
     background: #262626;
     transform: translateY(-3px);
 }

 .timer-title {
     font-size: 18px;
     margin-bottom: 8px;
 }

 .timer-desc {
     font-size: 13px;
     color: #aaa;
     line-height: 1.5;
 }

 /* ===== input ===== */
 .time-input {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin-bottom: 24px;
 }

 .time-input input {
     width: 80px;
     background: #1b1b1b;
     border: none;
     color: #fff;
     font-size: 24px;
     text-align: center;
     padding: 10px;
     border-radius: 10px;
 }


 /* ===== timer ===== */
 .timer {
     font-size: 64px;
     font-weight: 700;
     margin: 20px 0;
     letter-spacing: 2px;
 }

 /* ===== controls ===== */
 .controls {
     display: flex;
     gap: 12px;
     justify-content: center;
 }

 /* ===== setup ===== */
 .setup {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin-bottom: 24px;
 }

 .setup input {
     width: 100px;
     background: #1b1b1b;
     border: none;
     color: #fff;
     font-size: 18px;
     text-align: center;
     padding: 10px;
     border-radius: 10px;
 }

 .setup div {
     background: #1b1b1b;
     border-radius: 10px;
     padding: 12px;
 }

 .setup label {
     font-size: 12px;
     color: #aaa;
 }


 /* ===== circle timer ===== */
 .circle-wrap {
     position: relative;
     width: 260px;
     height: 260px;
     margin: 0 auto 24px;
 }

 svg {
     transform: rotate(-90deg);
 }

 circle {
     fill: none;
     stroke-width: 14;
 }

 .bg {
     stroke: #222;
 }

 .progress {
     stroke: #4cc9f0;
     stroke-linecap: round;
     transition: stroke .3s ease;
 }

 .time-text {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 48px;
     font-weight: 700;
 }

 /* ===== preset ===== */
 .presets {
     display: flex;
     gap: 8px;
     justify-content: center;
     margin-bottom: 24px;
     flex-wrap: wrap;
 }

 .presets button {
     font-size: 13px;
     padding: 8px 14px;
 }

 /* ===== status ===== */
 .status {
     font-size: 16px;
     margin-bottom: 20px;
     color: #4cc9f0;
 }

 button {
     background: #1b1b1b;
     border: none;
     color: #fff;
     padding: 12px 20px;
     border-radius: 10px;
     font-size: 14px;
     cursor: pointer;
     transition: background .15s ease, transform .1s ease;
 }

 button:hover {
     background: #262626;
     transform: translateY(-2px);
 }

 footer {
     text-align: center;
     font-size: 13px;
     color: #666;
     margin: 40px 0 20px;
 }

 footer a {
     color: #666;
     text-decoration: none;
 }

 .adfit-slot {
     display: block;
     margin: 2rem auto;
     text-align: center;
 }