:root {
  --bg-dark: #f0f8ff; /* AliceBlue base */
  --primary: #0284c7; /* Ocean Blue */
  --primary-hover: #0369a1;
  --secondary: #0d9488; /* Teal */
  --text-main: #1e293b;
  --text-muted: #64748b;
  --card-bg: rgba(255, 255, 255, 0.95);
  --border-color: #cbd5e1;
  --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --circle-size: 200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: "Outfit", "Noto Sans JP", sans-serif; }

body { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); /* Deep ocean look */ color: var(--text-main); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; }

.app-container { width: 100%; max-width: 500px; background: var(--card-bg); border-radius: 24px; padding: 2.5rem 2rem; box-shadow: var(--shadow); backdrop-filter: blur(10px); position: relative; }

.back-link { position: absolute; top: 1.5rem; left: 1.5rem; font-size: 0.8rem; color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: 0.3rem; font-weight: 600; }
.back-link:hover { color: var(--primary); }

header { text-align: center; margin-bottom: 2rem; }
.header-icon { font-size: 2.5rem; color: var(--primary); margin-bottom: 0.5rem; }
header h1 { font-size: 2.2rem; line-height: 1.1; font-weight: 800; margin-bottom: 0.5rem; color: #0f172a; }
header h1 span { color: var(--primary); }
header p { color: var(--text-muted); font-size: 0.95rem; }

.pr-notice { text-align: center; font-size: 0.75rem; color: #94a3b8; margin-bottom: 1.5rem; padding: 0.5rem; background: rgba(248, 250, 252, 0.8); border-radius: 8px; }

.input-group { margin-bottom: 1.5rem; text-align: left; }
.input-group label { display: block; font-weight: 700; margin-bottom: 0.8rem; font-size: 0.95rem; color: #334155; }

/* Number Inputs */
.multi-input { display: flex; align-items: center; gap: 0.5rem; }
.input-wrapper { flex: 1; position: relative; display: flex; align-items: center; background: #f8fafc; border: 1px solid var(--border-color); border-radius: 12px; padding: 0.8rem; transition: border-color 0.2s; }
.input-wrapper:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1); }
.select-wrapper select { width: 100%; appearance: none; border: none; background: transparent; font-size: 1.1rem; font-family: "Outfit", sans-serif; font-weight: 600; color: var(--text-main); outline: none; cursor: pointer; text-align: center; }
.select-icon { position: absolute; right: 15px; color: var(--text-muted); pointer-events: none; font-size: 0.8rem; }

.timer-area { display: flex; justify-content: center; align-items: center; margin: 3rem 0; height: 280px; }

.breath-circle { width: var(--circle-size); height: var(--circle-size); border-radius: 50%; background: radial-gradient(circle, #38bdf8 0%, #0284c7 100%); display: flex; justify-content: center; align-items: center; box-shadow: 0 0 30px rgba(2, 132, 199, 0.4); transition: transform 0.1s linear, background 1s ease, box-shadow 1s ease; position: relative; }
/* Phases colors */
.breath-circle.prepare { background: radial-gradient(circle, #fcd34d 0%, #d97706 100%); box-shadow: 0 0 50px rgba(217, 119, 6, 0.5); }
.breath-circle.wipeout { background: radial-gradient(circle, #1e3a8a 0%, #0f172a 100%); border: 4px solid #3b82f6; box-shadow: 0 0 60px rgba(59, 130, 246, 0.7); }
.breath-circle.recover { background: radial-gradient(circle, #67e8f9 0%, #06b6d4 100%); box-shadow: 0 0 60px rgba(6, 182, 212, 0.8); }
.breath-circle.survive { background: radial-gradient(circle, #a7f3d0 0%, #10b981 100%); box-shadow: 0 0 40px rgba(16, 185, 129, 0.6); }

.circle-text { text-align: center; color: white; display:flex; flex-direction:column; align-items:center; z-index: 10; text-shadow: 0 2px 5px rgba(0,0,0,0.4);}
#instruction-text { font-size: 1.5rem; font-weight: 800; letter-spacing: 2px; }
.time-text { font-size: 4rem; font-weight: 800; line-height: 1; margin-top: 0.5rem; }

.cycle-info { text-align: center; font-weight: 800; color: var(--primary); margin-bottom: 1.5rem; font-size:1.1rem;}
.hidden { display: none !important; }

.controls { display: flex; justify-content: center; gap: 1rem; }
button { border: none; border-radius: 16px; padding: 1.2rem; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content:center; gap: 0.5rem; width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.btn-primary { background: var(--primary); color: white; box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3); }
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-2px); }
.btn-secondary { background: #fee2e2; color: #b91c1c; }
.btn-secondary:hover { background: #fca5a5; transform: translateY(-2px); }
.btn-share { background: #0f1419; color: white; box-shadow: 0 4px 12px rgba(15, 20, 25, 0.3); }
.btn-share:hover { background: #272c30; transform: translateY(-2px); }

/* Affiliate Area */
.affiliate-area { display: flex; flex-direction: column; gap: 1rem; }
.affiliate-card { background: #ffffff; border: 1px solid var(--border-color); border-radius: 12px; padding: 1rem; display: flex; gap: 1rem; align-items: center; text-decoration: none; color: var(--text-main); transition: all 0.2s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.affiliate-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-color: var(--primary); }
.affiliate-image { width: 50px; height: 50px; background: #f1f5f9; border-radius: 8px; display: flex; justify-content: center; align-items: center; color: var(--text-muted); font-size: 1.2rem; flex-shrink: 0; }
.affiliate-text { flex: 1; }
.affiliate-push { font-size: 0.75rem; color: var(--secondary); font-weight: 700; margin-bottom: 0.2rem; display: block; }
.affiliate-title { font-size: 0.9rem; font-weight: 700; line-height: 1.3; display: block; margin-bottom: 0.5rem; }
.affiliate-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.affiliate-buttons a { flex: 1; text-align: center; padding: 0.5rem; border-radius: 8px; font-size: 0.8rem; font-weight: 700; text-decoration: none; color: white; display:flex; align-items:center; justify-content:center; gap:0.3rem; transition: transform 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.affiliate-buttons a:hover { transform: translateY(-2px); }
.btn-amazon { background: #f59e0b; /* Amazon orange-ish */ text-shadow: 0 1px 1px rgba(0,0,0,0.2); }
.btn-rakuten { background: #bf0000; /* Rakuten red */ }

.a8-card { position: relative; }
.a8-card a { color: var(--text-main); text-decoration: none; }
.a8-card a:hover { text-decoration: underline; }
.a8-card a::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; }