/* ============================================================
   Affirmnosis Frontend — Unified Styles (dashboard + voice/mixer)
   Palette: Dark surface (#23272f / #181c22), Accent (#00bcd4), Alt Accent (#6a5acd), Success (#00ff00)
   ============================================================ */

:root{
  --bg: #23272f;
  --bg-2: #181c22;
  --card: #1e2228;
  --text: #f3f3f3;
  --muted: #b3e5fc;
  --muted-2:#ccc;
  --stroke:#444;
  --accent:#00bcd4;
  --accent-2:#6a5acd;
  --success:#00ff00;
  --danger:#e74c3c;
}

/* Base */
body{ background: var(--bg-2) !important; }
img,video{max-width:100%;height:auto;display:block}
audio{width:100%}

/* Shell containers (dashboard + generator + mixer) */
.affirmnosis-container,
.affirmnosis-dashboard,
.affirmnosis-mixer-container{
  max-width:1200px !important;
  width:100% !important;
  margin:30px auto !important;
  background:var(--bg) !important;
  border-radius:12px !important;
  box-shadow:0 2px 12px rgba(0,0,0,.18) !important;
  padding:24px 40px !important;
  font-family:'Segoe UI', Arial, sans-serif !important;
  color:var(--text) !important;
}

@media (max-width:1200px){
  .affirmnosis-container,
  .affirmnosis-dashboard,
  .affirmnosis-mixer-container{
    max-width:98vw !important;
    padding:12px 2vw !important;
  }
}

/* Headers */
.affirmnosis-header h1,
.affirmnosis-header h2{
  margin:0 0 .35em 0 !important;
  color: #aee7ff !important;
}

/* Top menu */
.affirmnosis-dashboard-menu{
  display:flex !important; flex-wrap:wrap !important; gap:8px !important;
  margin:0 0 24px 0 !important; padding:12px 0 !important; border-bottom:1px solid #333 !important;
}
.affirmnosis-dashboard-menu a{
  background:#333 !important; color:var(--text) !important; text-decoration:none !important;
  padding:8px 16px !important; border-radius:6px !important; font-size:.95em !important;
  transition:all .2s !important;
}
.affirmnosis-dashboard-menu a:hover{ background:#444 !important; transform:translateY(-1px) !important; }
.affirmnosis-dashboard-menu a.active{ background:var(--accent) !important; color:#fff !important; transform:translateY(-2px) !important; }

/* Buttons */
.affirmnosis-btn-primary,
.btn-primary{
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%) !important;
  color:#fff !important; border:none !important; border-radius:8px !important;
  padding:12px 24px !important; font-size:1.05em !important; font-weight:700 !important;
  cursor:pointer !important; transition:all .25s !important;
}
.affirmnosis-btn-primary:hover,
.btn-primary:hover{ transform:translateY(-2px) !important; box-shadow:0 4px 12px rgba(0,188,212,.3) !important; }
.affirmnosis-btn-primary:disabled,
.btn-primary:disabled{ opacity:.6 !important; cursor:not-allowed !important; }
.btn-secondary{
  background:#444 !important; color:#fff !important; border:none !important; border-radius:6px !important;
  padding:8px 14px !important; font-size:.95em !important; cursor:pointer !important;
}

/* Status messages (used by #voice-status / #playlist-status / mixer) */
.status,
.session-status,
#mixer-status{
  display:none; margin:.5rem 0; padding:.6rem .8rem; border-radius:6px; border:1px solid transparent;
}
.status.success, .session-status.success, #mixer-status.success{
  display:block; background:#e8f7ed; color:#0c6b36; border-color:#bfe5c9;
}
.status.error, .session-status.error, #mixer-status.error{
  display:block; background:#fdecea; color:#b71c1c; border-color:#f5c6cb;
}

/* Forms */
.affirmnosis-form .form-group{ margin-bottom:18px !important; }
.affirmnosis-form label{ color:#aee7ff !important; font-size:1.05em !important; }
.affirmnosis-form input[type="text"],
.affirmnosis-form input[type="email"],
.affirmnosis-form input[type="password"],
.affirmnosis-form select,
.affirmnosis-form textarea,
#affirmation_text, #audio-category, #playlist_name, #voice_select{
  width:100% !important; padding:10px 12px !important; border:1px solid var(--stroke) !important;
  border-radius:8px !important; background:var(--bg-2) !important; color:var(--text) !important; font-size:1em !important;
}
.affirmnosis-form textarea{ min-height:80px !important; resize:vertical !important; }
.affirmnosis-form :is(input,select,textarea):focus{
  outline:2px solid var(--accent) !important; border-color:var(--accent) !important; background:#2a3039 !important;
}
select:disabled{ background:#2a2a2a !important; color:#666 !important; cursor:not-allowed !important; }

/* Voice picker (enhanced select UI rendered by JS) */
#voice-picker{ margin-top:8px; }
#voice-search{ width:100%; padding:8px 10px; border:1px solid var(--stroke); border-radius:6px; background:var(--bg-2); color:var(--text); }
#voice-list{ max-height:260px; overflow:auto; border:1px solid #ccc; border-radius:6px; padding:6px; background:#1f242b; }
.voice-row{ padding:8px; border-bottom:1px solid #2e3440; cursor:pointer; }
.voice-row:hover{ background:#2a3039; }
.voice-row audio{ margin-top:6px; }

/* Affirmation list (checkbox bank used by playlist form) */
#affirmation-list{
  max-height: 260px; overflow-y: auto; border:1px solid #ccc; border-radius:8px; padding:10px; background:#1b2026;
}
#affirmation-list label{ display:flex; align-items:center; gap:8px; color:var(--text); }
#affirmation-list input[type="checkbox"]{ accent-color: var(--accent); }

/* Audio library cards */
#audio-library{ margin-top:12px; }
.audio-item{
  background: var(--bg-2) !important; border-radius: 8px !important; padding: 16px !important; border:1px solid var(--stroke) !important;
  color:var(--text) !important; margin-bottom:12px !important;
}
.audio-item .audio-meta{ opacity:.75; margin-top:6px; font-size:.9em; }
.delete-audio-btn{
  margin-top:8px; background:#444; color:#fff; border:none; border-radius:6px; padding:6px 10px; cursor:pointer;
}
.delete-audio-btn:hover{ background:#666; }

/* Grid (shared) */
.affirmnosis-grid{
  display:grid !important; grid-template-columns: 1fr 1fr !important; gap:12px !important; margin-bottom:24px !important;
}
@media (min-width: 900px){ .affirmnosis-grid{ grid-template-columns: 1fr 1fr 1fr !important; } }

/* Grid item + images (remove duplicates & keep aspect ratio) */
.affirmnosis-item{
  background:#222 !important; border-radius:10px !important; padding:10px !important;
  display:flex !important; flex-direction:column !important; align-items:center !important; min-height:140px !important;
  border:2px solid transparent; transition:border .2s;
}
.affirmnosis-item label{ width:100% !important; display:flex !important; flex-direction:column !important; align-items:center !important; cursor:pointer !important; }
.affirmnosis-item img{
  width:100% !important; aspect-ratio:1 / 1 !important; object-fit:cover !important; border-radius:8px !important;
  margin-bottom:8px !important; background:#111 !important; height:auto !important; max-width:100% !important; min-height:80px !important; max-height:220px !important;
}
@supports not (aspect-ratio: 1/1){
  .affirmnosis-item img{ height:120px !important; }
}

/* Selection state via radio */
.affirmnosis-item input[type="radio"]{ display:none; }
.affirmnosis-item input[type="radio"]:checked + label{ border:2px solid var(--success) !important; background:#1a2a1a !important; }

/* Play buttons */
.play-button,
.playlist-play-btn{
  background: var(--success) !important; color:#111 !important; border:none !important; border-radius:50% !important;
  width:34px !important; height:34px !important; font-size:16px !important; display:flex !important;
  align-items:center !important; justify-content:center !important; cursor:pointer !important; transition:background .2s;
}
.play-button:hover, .playlist-play-btn:hover{ background:#66ff66 !important; }

/* Mixer sections */
.mixer-section{
  background: #181c20 !important; border:1px solid var(--stroke) !important; border-radius:8px !important;
  padding:16px !important; margin-bottom:18px !important;
}
.mixer-section h3, .mixer-section h4, .section-volume-control h4{
  color: var(--success) !important; border-bottom:2px solid var(--success) !important; padding-bottom:4px !important; margin-bottom:10px !important;
}
.section-volume-control{
  background:#2a2f36 !important; border:1px solid #555 !important; border-radius:6px !important; padding:12px !important; margin-bottom:12px !important;
}
.volume-control{ display:flex; align-items:center; gap:10px; }
.volume-control input[type="range"]{ flex:1; max-width:220px; accent-color: var(--success); }
.volume-display{ color:var(--success); font-weight:700; min-width:40px; }

/* Mixer controls layout */
.mixer-controls{
  display:grid !important; grid-template-columns: repeat(3, 1fr) !important; gap:10px !important; margin:24px 0 !important; text-align:center !important;
}
.mixer-controls button{
  background: var(--success) !important; color:#000 !important; border:none !important; border-radius:6px !important; padding:12px 0 !important; font-weight:700;
}
.mixer-controls button:disabled{ background:#666 !important; color:#111 !important; }
@media (max-width:600px){ .mixer-controls{ grid-template-columns:1fr !important; } }

/* Tables (playlists index) */
.affirmnosis-dashboard table{
  border-collapse:collapse; width:100%; max-width:100%;
}
.affirmnosis-dashboard table th,
.affirmnosis-dashboard table td{
  border:1px solid var(--stroke); padding:8px 10px; color:var(--text);
}
.affirmnosis-dashboard table thead th{ background:#1c2027; }

/* Scroll helpers */
.scroll-list, .scrollable-grid{ max-height: 400px !important; overflow-y:auto !important; padding-right:8px !important; }
.scrollable-grid::-webkit-scrollbar{ width:6px !important; }
.scrollable-grid::-webkit-scrollbar-thumb{ background: var(--accent) !important; border-radius:3px !important; }

/* Utilities */
.mt-1{ margin-top:.5rem !important; } .mt-2{ margin-top:1rem !important; } .mt-3{ margin-top:1.5rem !important; }
.center{ text-align:center !important; }
.hidden{ display:none !important; }

/* Profile page niceties (uses .affirmnosis-container/.affirmnosis-form) */
.affirmnosis-form small{ color:#9aa9b5; display:block; margin-top:4px; }

/* Inline “buttons” in playlist actions */
.affirmnosis-dashboard a.button-link{ color: var(--accent); text-decoration:none; }
.affirmnosis-dashboard a.button-link:hover{ text-decoration:underline; }

/* ===== 21-Day Blueprint (scoped) ===== */
.affirmnosis-blueprint-container{max-width:1100px;margin:24px auto;background:#23272f;border-radius:14px;box-shadow:0 8px 25px rgba(0,0,0,.35);overflow:hidden;color:#fff}
.affirmnosis-blueprint-container .blueprint-header{background:linear-gradient(135deg,#23272f,#00bcd4);color:#fff;padding:28px;text-align:center}
.affirmnosis-blueprint-container .blueprint-header h1{margin:0 0 8px;font-size:26px;font-weight:800}
.affirmnosis-blueprint-container .subtitle{margin:0 0 16px;opacity:.9;font-size:15px}
.affirmnosis-blueprint-container .day-progress{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:14px}
.affirmnosis-blueprint-container .day-counter,
.affirmnosis-blueprint-container .phase-indicator{background:rgba(255,255,255,.18);padding:10px 16px;border-radius:22px;backdrop-filter:blur(10px);font-size:13px}

/* Tabs */
.affirmnosis-blueprint-container .blueprint-nav{display:flex;background:#181c22;border-bottom:1px solid #333;overflow-x:auto}
.affirmnosis-blueprint-container .blueprint-tab{padding:14px 18px;background:none;border:0;cursor:pointer;font-weight:700;color:#9aa3ad;transition:.25s;border-bottom:3px solid transparent;white-space:nowrap;font-size:14px}
.affirmnosis-blueprint-container .blueprint-tab:hover{color:#00c2d9;background:#1e2328}
.affirmnosis-blueprint-container .blueprint-tab.active{color:#00c2d9;border-bottom-color:#00c2d9;background:#23272f}

/* Content */
.affirmnosis-blueprint-container .blueprint-content{padding:24px;background:#23272f;color:#fff}
.affirmnosis-blueprint-container .blueprint-tab-content{display:none}
.affirmnosis-blueprint-container .blueprint-tab-content.active{display:block}

/* Cards & sections */
.affirmnosis-blueprint-container .daily-practice-card{background:linear-gradient(135deg,#181c22,#23272f);padding:22px;border-radius:12px;margin:18px 0;border-left:5px solid #00bcd4;box-shadow:0 4px 16px rgba(0,0,0,.25)}
.affirmnosis-blueprint-container .practice-header{border-bottom:2px solid #333;padding-bottom:12px;margin-bottom:16px}
.affirmnosis-blueprint-container .daily-practice-card h3{color:#00bcd4;font-size:22px;margin:0 0 6px;font-weight:800}
.affirmnosis-blueprint-container .practice-subtitle{color:#ffb300;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.affirmnosis-blueprint-container .practice-section{margin:16px 0;background:rgba(0,188,212,.06);padding:14px;border-radius:9px;border-left:4px solid #00bcd4}
.affirmnosis-blueprint-container .practice-section h4{color:#00bcd4;margin:0 0 10px;font-size:17px;font-weight:800}
.affirmnosis-blueprint-container .practice-content{color:#e3e8ee;line-height:1.7;font-size:15px}
.affirmnosis-blueprint-container .practice-content strong{color:#ffb300}
.affirmnosis-blueprint-container .practice-content ul,
.affirmnosis-blueprint-container .practice-content ol{margin:8px 0 0;padding-left:20px}
.affirmnosis-blueprint-container .practice-content li{margin:6px 0;color:#d9e1ea}

/* Checklist */
.affirmnosis-blueprint-container .daily-checklist{background:#181c22;padding:22px;border-radius:12px;margin:18px 0}
.affirmnosis-blueprint-container .ritual-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:16px 0}
.affirmnosis-blueprint-container .step-card{background:#23272f;padding:16px;border-radius:10px;text-align:center;border:2px solid #333;transition:.25s}
.affirmnosis-blueprint-container .step-card:hover{border-color:#00bcd4;transform:translateY(-2px)}
.affirmnosis-blueprint-container .step-icon{font-size:22px;margin-bottom:8px}
.affirmnosis-blueprint-container .step-card h4{margin:0 0 6px;color:#00bcd4;font-weight:800}
.affirmnosis-blueprint-container .step-card p{margin:0 0 12px;color:#c9d1d9;font-size:13px}
.affirmnosis-blueprint-container .step-check{transform:scale(1.35);accent-color:#00bcd4}
.affirmnosis-blueprint-container .complete-day-btn{width:100%;padding:14px;background:linear-gradient(135deg,#00bcd4,#0097a7);color:#fff;border:0;border-radius:10px;font-size:16px;font-weight:800;cursor:pointer;margin-top:16px;transition:.25s}
.affirmnosis-blueprint-container .complete-day-btn:hover{background:linear-gradient(135deg,#0097a7,#00838f);transform:translateY(-1px)}

/* Practice workspace */
.affirmnosis-blueprint-container .todays-practice-area{background:#181c22;padding:18px;border-radius:10px;margin:18px 0;border-left:4px solid #ffb300}
.affirmnosis-blueprint-container .todays-practice-area h3{color:#ffb300;margin-bottom:12px}
.affirmnosis-blueprint-container .practice-workspace{background:#23272f;padding:12px;border-radius:8px}
.affirmnosis-blueprint-container #todaysPracticeNotes{width:100%;min-height:120px;padding:12px;background:#181c22;border:1px solid #333;border-radius:6px;color:#fff;font-family:inherit;resize:vertical;margin-bottom:10px}
.affirmnosis-blueprint-container #todaysPracticeNotes:focus{border-color:#ffb300;outline:none}
.affirmnosis-blueprint-container #todaysPracticeNotes::placeholder{color:#6b7280}

/* Ritual inputs */
.affirmnosis-blueprint-container .ritual-intro{color:#c7d2fe;margin-bottom:14px}
.affirmnosis-blueprint-container .ritual-section{background:#181c22;padding:18px;border-radius:10px;margin:18px 0;border:1px solid #2a2f37}
.affirmnosis-blueprint-container .ritual-subsection h4{margin:12px 0 8px;color:#00bcd4}
.affirmnosis-blueprint-container .clarity-questions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.affirmnosis-blueprint-container .question-box label{display:block;font-size:13px;color:#9fb3c8;margin-bottom:6px}
.affirmnosis-blueprint-container .question-box input{width:100%;padding:10px;background:#0f1318;border:1px solid #2a2f37;color:#fff;border-radius:8px}
.affirmnosis-blueprint-container #mindDump,
.affirmnosis-blueprint-container #goalActivation,
.affirmnosis-blueprint-container #majorGoal,
.affirmnosis-blueprint-container #goalsCard,
.affirmnosis-blueprint-container #customAffirmations,
.affirmnosis-blueprint-container .goal-input{width:100%;padding:12px;background:#0f1318;border:1px solid #2a2f37;color:#fff;border-radius:8px}

/* Visualization timer */
.affirmnosis-blueprint-container .visualization-guide{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center}
.affirmnosis-blueprint-container .viz-steps h4{margin:0 0 8px;color:#00bcd4}
.affirmnosis-blueprint-container .viz-timer{text-align:center;background:#0f1318;border:1px solid #2a2f37;border-radius:10px;padding:16px}
.affirmnosis-blueprint-container .timer-btn{border:0;padding:10px 14px;border-radius:8px;background:#00bcd4;color:#0f1318;font-weight:800;cursor:pointer}
.affirmnosis-blueprint-container .timer-display{margin-top:8px;font-size:22px;font-weight:800;color:#e5f9ff}

/* Goals tab */
.affirmnosis-blueprint-container .major-goal-section,
.affirmnosis-blueprint-container .goals-manager,
.affirmnosis-blueprint-container .goals-card-section{background:#181c22;padding:18px;border-radius:10px;margin:18px 0;border:1px solid #2a2f37}
.affirmnosis-blueprint-container .goals-list{display:grid;gap:12px}
.affirmnosis-blueprint-container .goal-item{background:#0f1318;border:1px solid #2a2f37;border-radius:10px;padding:10px}
.affirmnosis-blueprint-container .goal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.affirmnosis-blueprint-container .goal-number{font-weight:800;color:#00bcd4}
.affirmnosis-blueprint-container .remove-goal{background:transparent;border:0;color:#f87171;font-size:18px;cursor:pointer}
.affirmnosis-blueprint-container .goals-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.affirmnosis-blueprint-container .action-btn{padding:10px 14px;border-radius:8px;text-decoration:none;font-weight:800;display:inline-block;border:none}
.affirmnosis-blueprint-container .action-btn.primary{background:linear-gradient(135deg,#00bcd4,#0097a7);color:#fff}
.affirmnosis-blueprint-container .action-btn.secondary{background:#0f1318;color:#e3e8ee;border:1px solid #2a2f37}

/* Affirmations tab */
.affirmnosis-blueprint-container .affirmation-categories{display:grid;gap:16px}
.affirmnosis-blueprint-container .affirmation-category{background:#181c22;border:1px solid #2a2f37;border-radius:10px;padding:16px}
.affirmnosis-blueprint-container .affirmation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:8px}
.affirmnosis-blueprint-container .affirmation-card{background:#0f1318;border:1px solid #2a2f37;padding:10px;border-radius:8px;color:#e3e8ee}

/* Progress tab */
.affirmnosis-blueprint-container .progress-overview{display:grid;grid-template-columns:160px 1fr;gap:20px;align-items:center;margin-bottom:16px}
.affirmnosis-blueprint-container .progress-circle{position:relative;width:120px;height:120px}
.affirmnosis-blueprint-container .progress-ring-circle{fill:transparent;stroke:#00bcd4;stroke-width:10;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.affirmnosis-blueprint-container .progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;font-weight:800}
.affirmnosis-blueprint-container .progress-day{font-size:24px;display:block}
.affirmnosis-blueprint-container .progress-total{font-size:12px;opacity:.8}
.affirmnosis-blueprint-container .progress-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.affirmnosis-blueprint-container .stat-item{background:#181c22;border:1px solid #2a2f37;border-radius:12px;padding:12px;text-align:center}
.affirmnosis-blueprint-container .stat-number{font-size:20px;font-weight:800;color:#00bcd4}
.affirmnosis-blueprint-container .stat-label{font-size:12px;color:#9fb3c8}
.affirmnosis-blueprint-container .week-breakdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:14px 0}
.affirmnosis-blueprint-container .week-card{background:#181c22;border:1px solid #2a2f37;border-radius:10px;padding:12px;opacity:.6}
.affirmnosis-blueprint-container .week-card.active{opacity:1;border-color:#00bcd4}
.affirmnosis-blueprint-container .week-card h4{margin:0 0 6px;color:#00bcd4}
.affirmnosis-blueprint-container .metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-bottom:10px}
.affirmnosis-blueprint-container .metric-card{background:#0f1318;border:1px solid #2a2f37;padding:10px;border-radius:8px;display:flex;gap:8px;align-items:center}
.affirmnosis-blueprint-container .metric-check{transform:scale(1.2);accent-color:#00bcd4}
.affirmnosis-blueprint-container .belief-tracker{margin-top:10px;display:flex;gap:12px;align-items:center}
.affirmnosis-blueprint-container #beliefLevel{width:240px}
.affirmnosis-blueprint-container #beliefValue{font-weight:800;color:#00bcd4}
.affirmnosis-blueprint-container .transformation-signs{background:#181c22;border:1px solid #2a2f37;border-radius:10px;padding:16px;margin-top:14px}
.affirmnosis-blueprint-container .signs-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.affirmnosis-blueprint-container .sign-item{background:#0f1318;border:1px solid #2a2f37;padding:10px;border-radius:8px;color:#e3e8ee}

/* Buttons */
.affirmnosis-blueprint-container .save-btn{padding:10px 16px;border:0;border-radius:8px;font-weight:800;cursor:pointer;display:inline-block;transition:.25s;background:linear-gradient(135deg,#00bcd4,#0097a7);color:#fff}
.affirmnosis-blueprint-container .save-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}

@media (max-width:720px){
  .affirmnosis-blueprint-container .visualization-guide{grid-template-columns:1fr}
  .affirmnosis-blueprint-container .progress-overview{grid-template-columns:1fr}
}

/* ================================
   GOALS / BLUEPRINT BRIDGE STYLES
   Make blueprint page look/behave like other pages
   =============================================== */

/* Use the same sized, centered card container as other pages */
.affirmnosis-blueprint-container{
  max-width:1100px;
  margin:30px auto;
  background:#23272f;
  border-radius:16px;
  box-shadow:0 2px 16px rgba(0,0,0,.18);
  padding:32px 40px;
  color:#f3f3f3;
  font-family:'Segoe UI', Arial, sans-serif;
}
@media (max-width:1200px){
  .affirmnosis-blueprint-container{ max-width:98vw; padding:20px 3vw; }
}

/* Header area */
.blueprint-header{
  background:linear-gradient(135deg,#23272f,#00bcd4);
  color:#fff;
  padding:30px;
  text-align:center;
  position:relative;
  margin:-32px -40px 0 -40px; /* pull full-bleed like other headers */
}
.blueprint-header h1{ margin:0 0 10px; font-size:28px; font-weight:700; color:#fff; }
.blueprint-header .subtitle{ margin:0; opacity:.9; font-size:16px; }
.day-progress{
  display:flex; justify-content:center; align-items:center; gap:20px; margin-top:20px;
}
.day-counter,.phase-indicator{
  background:rgba(255,255,255,.2);
  padding:12px 20px; border-radius:25px; backdrop-filter:blur(10px);
  font-size:14px; color:#fff; font-weight:600;
}

/* Tab bar styled like your other navs */
.blueprint-nav{
  display:flex; gap:0;
  background:#181c22;
  border-bottom:1px solid #333;
  overflow-x:auto;
  margin:0 -40px; /* full width under header */
}
.blueprint-tab{
  padding:15px 20px;
  background:none; border:0; cursor:pointer;
  font-weight:600; color:#aee7ff;
  transition:all .2s ease;
  border-bottom:3px solid transparent;
  white-space:nowrap; font-size:14px;
}
.blueprint-tab:hover{ color:#00bcd4; background:#23272f; }
.blueprint-tab.active{ color:#00bcd4; border-bottom-color:#00bcd4; background:#23272f; }

/* Content panels */
.blueprint-content{ padding:30px 0; }
.blueprint-tab-content{ display:none; background:#23272f; color:#fff; }
.blueprint-tab-content.active{ display:block; }

/* Cards/sections used inside the Blueprint */
.daily-practice-card{
  background:linear-gradient(135deg,#181c22,#23272f);
  padding:25px; border-radius:15px; margin:20px 0;
  border-left:5px solid #00bcd4; box-shadow:0 4px 15px rgba(0,0,0,.3);
}
.practice-header{ border-bottom:2px solid #333; padding-bottom:15px; margin-bottom:20px; }
.daily-practice-card h3{ color:#00bcd4; font-size:24px; margin:0 0 8px; font-weight:700; }
.practice-subtitle{ color:#ffb300; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
.practice-section{ margin:20px 0; background:rgba(0,188,212,.05); padding:18px; border-radius:10px; border-left:4px solid #00bcd4; }
.practice-section h4{ color:#00bcd4; margin:0 0 12px; font-size:18px; font-weight:600; }
.practice-content{ color:#e0e0e0; line-height:1.7; font-size:15px; }
.practice-content strong{ color:#ffb300; }

/* Checklist / cards */
.daily-checklist{
  background:#181c22; padding:25px; border-radius:12px; margin:25px 0; border:1px solid #444;
}
.ritual-steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin:20px 0;
}
.step-card{
  background:#23272f; padding:20px; border-radius:10px; text-align:center; border:2px solid #333;
  transition:all .2s ease;
}
.step-card:hover{ border-color:#00bcd4; transform:translateY(-2px); }
.step-icon{ font-size:24px; margin-bottom:10px; }
.step-card h4{ margin:0 0 8px; color:#00bcd4; }
.step-card p{ margin:0 0 15px; color:#ccc; font-size:14px; }
.step-check{ transform:scale(1.5); accent-color:#00bcd4; }

/* Buttons (match site) */
.complete-day-btn,
.save-btn,
.action-btn.primary{
  padding:12px 24px; border:0; border-radius:10px; font-weight:600; cursor:pointer;
  background:linear-gradient(135deg,#00bcd4,#6a5acd); color:#fff; transition:all .2s ease;
}
.complete-day-btn{ width:100%; margin-top:20px; }
.complete-day-btn:hover,
.save-btn:hover,
.action-btn.primary:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,188,212,.3); }

.action-btn.secondary{
  padding:12px 24px; border-radius:8px; background:#444; color:#aee7ff; border:0; font-weight:600; cursor:pointer;
  transition:all .2s ease; text-decoration:none;
}
.action-btn.secondary:hover{ transform:translateY(-2px); }

/* Workspace textarea */
.todays-practice-area{ background:#181c22; padding:20px; border-radius:10px; margin:20px 0; border-left:4px solid #ffb300; }
.todays-practice-area h3{ color:#ffb300; margin-bottom:15px; }
.practice-workspace{ background:#23272f; padding:15px; border-radius:8px; }
#todaysPracticeNotes{
  width:100%; min-height:120px; padding:12px; background:#181c22; border:1px solid #333; border-radius:6px; color:#fff; resize:vertical; margin-bottom:10px;
}
#todaysPracticeNotes:focus{ border-color:#ffb300; outline:none; }

/* Goals manager bits from Blueprint */
.goals-manager{ max-width:800px; }
.goal-item{ background:#181c22; padding:20px; border-radius:10px; margin-bottom:15px; border:1px solid #444; }
.goal-item .goal-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; color:#aee7ff; }
.goal-number{ font-weight:600; color:#aee7ff; }
.remove-goal{ background:none; border:0; color:#e74c3c; font-size:20px; cursor:pointer; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.remove-goal:hover{ background:rgba(231,76,60,.2); }
.goal-input{
  width:100%; padding:15px; border:2px solid #444; border-radius:8px; background:#23272f; color:#f3f3f3;
  font-size:16px; resize:vertical; min-height:80px; box-sizing:border-box;
}
.goal-input:focus{ outline:none; border-color:#00bcd4; box-shadow:0 0 0 3px rgba(0,188,212,.2); }

/* Visualization timer card */
.visualization-guide{ display:grid; grid-template-columns:2fr 1fr; gap:30px; margin-top:20px; }
.viz-steps h4{ margin:0 0 10px; color:#aee7ff; }
.viz-timer{ text-align:center; background:#23272f; padding:30px; border-radius:10px; border:1px solid #444; }
.timer-btn{ background:#9c27b0; color:#fff; border:0; padding:12px 20px; border-radius:20px; font-weight:600; cursor:pointer; margin-bottom:15px; }
.timer-btn:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(156,39,176,.3); }
.timer-display{ font-size:36px; font-weight:700; color:#aee7ff; }

/* Progress ring text alignment fix */
.progress-overview{ display:flex; gap:24px; flex-wrap:wrap; align-items:center; }
.progress-circle{ position:relative; width:120px; height:120px; }
.progress-ring{ transform:rotate(-90deg); }
.progress-ring-circle{ fill:transparent; stroke:#00bcd4; stroke-width:12; stroke-linecap:round; }
.progress-text{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.progress-day{ font-size:28px; font-weight:700; }
.progress-total{ opacity:.8; }

/* Mobile tweaks */
@media (max-width:768px){
  .blueprint-header{ margin:-20px -20px 0 -20px; }
  .blueprint-nav{ margin:0 -20px; }
  .visualization-guide{ grid-template-columns:1fr; gap:20px; }
}
:root { --afn-max: 1100px; }
.affirmnosis-container {
  max-width: var(--afn-max);
  margin: 24px auto;
  padding: 24px 28px;
  box-sizing: border-box;
}
/* === Affirmnosis: width clamp + blueprint tabs (hotfix) === */

/* Clamp width like your other pages, even if the theme forces full-width */
:root { --afn-max: 1100px; }

body .affirmnosis-container,
body .affirmnosis-blueprint-container,
body .affirmnosis-blueprint-container.affirmnosis-container {
  max-width: var(--afn-max);
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 28px;
  padding-right: 28px;
  box-sizing: border-box;
}

/* Give the goals page the same card feel */
body .affirmnosis-blueprint-container {
  background: #23272f;
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}

/* Tabs baseline styling (works with 3 or 5 tabs) */
body .blueprint-nav {
  display: flex;
  gap: 0;
  background: #181c22;
  border-bottom: 1px solid #333;
  overflow-x: auto;
  margin: 0 -28px 18px; /* pull to container edges */
}

body .blueprint-tab {
  appearance: none;
  background: none;
  border: 0;
  padding: 14px 18px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  color: #9ad9ea;
  border-bottom: 3px solid transparent;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}

body .blueprint-tab:hover { color: #00bcd4; }
body .blueprint-tab.active {
  color: #00bcd4;
  border-bottom-color: #00bcd4;
  background: #23272f;
}

body .blueprint-content { padding: 6px 0; }
body .blueprint-tab-content { display: none; }
body .blueprint-tab-content.active { display: block; }
