@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@400;700&display=swap');

  :root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #1a1a2e;
    --bg-card-hover: #1f1f35;
    --accent: #c9a84c;
    --accent-light: #e8d48b;
    --accent-dark: #8a6f2f;
    --text-primary: #e8e8e8;
    --text-secondary: #9a9ab0;
    --text-muted: #5a5a70;
    --success: #4ecdc4;
    --danger: #ff6b6b;
    --warning: #ffd93d;
    --info: #6c8fff;
    --gradient-gold: linear-gradient(135deg, #c9a84c, #e8d48b, #c9a84c);
    --shadow-gold: 0 0 30px rgba(201, 168, 76, 0.15);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
    --border-subtle: 1px solid rgba(201, 168, 76, 0.1);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 6px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Montserrat', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
  }

  .bg-animated {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 800px 600px at 20% 20%, rgba(201,168,76,0.04) 0%, transparent 70%),
                radial-gradient(ellipse 600px 400px at 80% 80%, rgba(78,205,196,0.03) 0%, transparent 70%);
    animation: bgPulse 15s ease-in-out infinite alternate;
  }
  @keyframes bgPulse { 0%{opacity:0.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} 100%{opacity:0.8;transform:scale(1)} }

  .bg-pattern {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; opacity: 0.02; pointer-events: none;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(201,168,76,0.5) 35px, rgba(201,168,76,0.5) 36px);
  }

  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--bg-primary); }
  ::-webkit-scrollbar-thumb { background: var(--accent-dark); border-radius: 3px; }

  .auth-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1000; display: flex; align-items: center; justify-content: center;
    background: var(--bg-primary);
  }
  .auth-container.hidden { display: none; }

  .auth-wrapper {
    display: flex; gap: 24px; width: 900px; max-width: 95vw;
    background: rgba(26,26,46,0.95); backdrop-filter: blur(20px);
    border: var(--border-subtle); border-radius: var(--radius);
    padding: 32px; box-shadow: var(--shadow-card), var(--shadow-gold);
    animation: authSlideIn 0.8s cubic-bezier(0.16,1,0.3,1);
  }
  @keyframes authSlideIn { from{opacity:0;transform:translateY(40px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }

  .auth-forms { flex: 1; }
  .auth-logo { text-align: center; margin-bottom: 24px; }
  .auth-logo .snake-icon { 
    width: 64px; height: 64px; margin: 0 auto 12px; 
    background: var(--gradient-gold); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; animation: snakePulse 3s ease-in-out infinite; 
    box-shadow: 0 0 20px rgba(201,168,76,0.4);
  }
  @keyframes snakePulse { 0%,100%{transform:scale(1) rotate(0)} 25%{transform:scale(1.05) rotate(-2deg)} 75%{transform:scale(1.05) rotate(2deg)} }
  .auth-logo h1 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 1px; }
  .auth-logo p { color: var(--text-secondary); font-size: 13px; margin-top: 4px; font-weight: 300; }

  .auth-tabs { display: flex; gap: 4px; background: rgba(0,0,0,0.3); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 20px; }
  .auth-tab { flex: 1; padding: 10px; text-align: center; border: none; background: transparent; color: var(--text-muted); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; border-radius: var(--radius-xs); cursor: pointer; transition: all 0.3s ease; }
  .auth-tab.active { background: var(--accent); color: var(--bg-primary); box-shadow: 0 2px 12px rgba(201,168,76,0.3); }
  .auth-tab:hover:not(.active) { color: var(--text-primary); background: rgba(201,168,76,0.1); }

  .form-group { margin-bottom: 16px; }
  .form-group label { display: block; font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }
  .form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 10px 14px; background: rgba(0,0,0,0.3);
    border: 1px solid rgba(201,168,76,0.15); border-radius: var(--radius-xs);
    color: var(--text-primary); font-family: 'Montserrat', sans-serif; font-size: 14px;
    transition: all 0.3s ease; outline: none;
  }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,168,76,0.1); background: rgba(0,0,0,0.4); }
  .form-group input::placeholder { color: var(--text-muted); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 20px; border: none; border-radius: var(--radius-xs);
    font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); text-decoration: none;
  }
  .btn-primary { width: 100%; background: var(--gradient-gold); color: var(--bg-primary); box-shadow: 0 4px 15px rgba(201,168,76,0.25); }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(201,168,76,0.35); }
  .btn-secondary { background: rgba(201,168,76,0.1); color: var(--accent); border: 1px solid rgba(201,168,76,0.2); }
  .btn-secondary:hover { background: rgba(201,168,76,0.2); border-color: var(--accent); }
  .btn-danger { background: rgba(255,107,107,0.1); color: var(--danger); border: 1px solid rgba(255,107,107,0.2); }
  .btn-danger:hover { background: rgba(255,107,107,0.2); }
  .btn-sm { padding: 6px 12px; font-size: 11px; }

  .auth-error { color: var(--danger); font-size: 12px; text-align: center; margin-top: 10px; min-height: 18px; animation: shake 0.5s ease; }
  @keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

  .auth-articles {
    flex: 1; background: rgba(0,0,0,0.2); border-radius: var(--radius-sm); padding: 20px;
    overflow-y: auto; max-height: 500px; border: var(--border-subtle);
  }
  .articles-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
  .article-nav-btn {
    padding: 6px 12px; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.2);
    border-radius: 20px; font-size: 11px; color: var(--accent); cursor: pointer;
    transition: all 0.2s ease; font-weight: 600;
  }
  .article-nav-btn.active { background: var(--accent); color: var(--bg-primary); }
  .article-nav-btn:hover:not(.active) { background: rgba(201,168,76,0.2); }
  .article-content { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
  .article-content h3 { color: var(--accent); margin: 12px 0 6px; font-size: 15px; }
  .article-content p, .article-content li { margin-bottom: 8px; }
  .article-content ul { padding-left: 18px; }
  .article-content strong { color: var(--text-primary); }
  .article-img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-xs); margin-bottom: 12px; background: linear-gradient(45deg, #2a2a3e, #1a1a2e); display: flex; align-items: center; justify-content: center; font-size: 40px; }

  .app-container { display: none; min-height: 100vh; position: relative; z-index: 1; }
  .app-container.visible { display: block; }

  .header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10,10,15,0.85); backdrop-filter: blur(20px);
    border-bottom: var(--border-subtle); padding: 0 24px;
  }
  .header-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 60px; }
  .header-brand { display: flex; align-items: center; gap: 12px; cursor: pointer; }
  .header-brand .logo-icon { font-size: 26px; filter: drop-shadow(0 0 8px rgba(201,168,76,0.3)); }
  .header-brand h2 { font-family: 'Playfair Display', serif; font-size: 17px; background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .header-nav { display: flex; gap: 4px; }
  .nav-btn {
    padding: 8px 16px; border: none; background: transparent; color: var(--text-secondary);
    font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500;
    border-radius: var(--radius-xs); cursor: pointer; transition: all 0.3s ease; position: relative;
  }
  .nav-btn.active { color: var(--accent); background: rgba(201,168,76,0.1); }
  .nav-btn.active::after { content:''; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); width:20px; height:2px; background:var(--accent); border-radius:1px; }
  .nav-btn:hover:not(.active) { color: var(--text-primary); background: rgba(255,255,255,0.05); }
  .header-actions { display: flex; align-items: center; gap: 12px; }
  .user-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gradient-gold); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--bg-primary); overflow: hidden; }
  .user-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .user-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
  .btn-icon { background: none; border: none; color: var(--text-secondary); font-size: 18px; cursor: pointer; padding: 4px; transition: color 0.2s; }
  .btn-icon:hover { color: var(--accent); }
  .btn-logout { padding: 5px 10px; border: 1px solid rgba(255,107,107,0.2); background: rgba(255,107,107,0.08); color: var(--danger); border-radius: var(--radius-xs); font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'Montserrat', sans-serif; }
  .btn-logout:hover { background: rgba(255,107,107,0.15); border-color: var(--danger); }

  .main-content { max-width: 1400px; margin: 0 auto; padding: 24px; }
  .tab-content { display: none; animation: fadeInUp 0.5s ease; }
  .tab-content.active { display: block; }
  @keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

  .dashboard-header { margin-bottom: 24px; }
  .dashboard-header h1 { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; margin-bottom: 6px; }
  .dashboard-header h1 span { background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .dashboard-header p { color: var(--text-secondary); font-size: 13px; }

  .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
  .stat-card {
    background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius);
    padding: 20px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
    animation: cardSlideIn 0.6s ease backwards;
  }
  .stat-card:nth-child(1) { animation-delay: 0.1s; } .stat-card:nth-child(2) { animation-delay: 0.2s; }
  .stat-card:nth-child(3) { animation-delay: 0.3s; } .stat-card:nth-child(4) { animation-delay: 0.4s; }
  @keyframes cardSlideIn { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
  .stat-card:hover { transform: translateY(-4px); border-color: rgba(201,168,76,0.3); box-shadow: var(--shadow-gold); }
  .stat-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--gradient-gold); opacity:0; transition:opacity 0.3s ease; }
  .stat-card:hover::before { opacity:1; }
  .stat-icon { font-size: 24px; margin-bottom: 10px; display: block; }
  .stat-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
  .stat-value { font-size: 24px; font-weight: 800; color: var(--accent); line-height: 1; }
  .stat-unit { font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-left: 3px; }
  .stat-change { font-size: 10px; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
  .stat-change.positive { color: var(--success); } .stat-change.negative { color: var(--danger); }

  .snake-profile { background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; animation: fadeInUp 0.6s ease 0.3s backwards; }
  .profile-header { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
  .profile-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #2a2a3e, #1a1a2e); border: 3px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 36px; box-shadow: 0 0 20px rgba(201,168,76,0.15); animation: profileGlow 4s ease-in-out infinite alternate; overflow: hidden; position: relative; }
  .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .profile-avatar .upload-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; cursor: pointer; font-size: 14px; }
  .profile-avatar:hover .upload-overlay { opacity: 1; }
  @keyframes profileGlow { from{box-shadow:0 0 15px rgba(201,168,76,0.1)} to{box-shadow:0 0 30px rgba(201,168,76,0.25)} }
  .profile-info h2 { font-family: 'Playfair Display', serif; font-size: 22px; margin-bottom: 2px; }
  .profile-info .species { color: var(--accent); font-size: 12px; font-weight: 500; margin-bottom: 6px; }
  .profile-info .bio { color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
  .profile-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
  .tag { padding: 3px 10px; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.2); border-radius: 20px; font-size: 10px; font-weight: 600; color: var(--accent); }
  .tag.green { background: rgba(78,205,196,0.1); border-color: rgba(78,205,196,0.2); color: var(--success); }
  .tag.blue { background: rgba(108,143,255,0.1); border-color: rgba(108,143,255,0.2); color: var(--info); }

  .chart-container { background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; animation: fadeInUp 0.6s ease 0.4s backwards; }
  .chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
  .chart-header h3 { font-size: 15px; font-weight: 700; }
  .chart-legend { display: flex; gap: 12px; }
  .legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
  .legend-dot { width: 7px; height: 7px; border-radius: 50%; }
  .chart-canvas-wrapper { position: relative; width: 100%; height: 280px; overflow: hidden; }
  canvas { width: 100% !important; height: 100% !important; }
  .chart-stats { position: absolute; top: 10px; right: 10px; background: rgba(10,10,15,0.8); padding: 10px; border-radius: var(--radius-sm); font-size: 11px; color: var(--text-secondary); border: var(--border-subtle); }
  .chart-stats div { margin-bottom: 4px; }
  .chart-stats strong { color: var(--accent); }

  .feeding-section { animation: fadeInUp 0.6s ease 0.5s backwards; }
  .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
  .section-header h3 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
  .feeding-table-wrapper { background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius); overflow: hidden; }
  .feeding-table { width: 100%; border-collapse: collapse; }
  .feeding-table th { padding: 12px 16px; text-align: left; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; background: rgba(0,0,0,0.2); border-bottom: var(--border-subtle); }
  .feeding-table td { padding: 12px 16px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.03); transition: background 0.2s ease; }
  .feeding-table tr:hover td { background: rgba(201,168,76,0.03); }
  .feeding-table tr:last-child td { border-bottom: none; }
  .food-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: rgba(78,205,196,0.1); border: 1px solid rgba(78,205,196,0.15); border-radius: 5px; font-size: 11px; font-weight: 500; color: var(--success); }
  .interval-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; background: rgba(108,143,255,0.1); border: 1px solid rgba(108,143,255,0.15); border-radius: 5px; font-size: 11px; font-weight: 500; color: var(--info); }
  .weight-cell { font-weight: 700; color: var(--accent); }
  .interval-cell { color: var(--text-secondary); }
  .delete-btn, .edit-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 3px; border-radius: 4px; transition: all 0.2s ease; }
  .delete-btn:hover { color: var(--danger); background: rgba(255,107,107,0.1); }
  .edit-btn:hover { color: var(--info); background: rgba(108,143,255,0.1); }

  .add-form-card { background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; animation: fadeInUp 0.6s ease 0.6s backwards; }
  .add-form-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 6px; }
  .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 14px; }
  .form-group textarea { resize: vertical; min-height: 60px; }

  .info-hero { background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius); padding: 36px 32px; margin-bottom: 24px; text-align: center; position: relative; overflow: hidden; animation: fadeInUp 0.6s ease; }
  .info-hero::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(ellipse at center, rgba(201,168,76,0.05) 0%, transparent 70%); }
  .info-hero .hero-icon { font-size: 60px; display: block; margin-bottom: 16px; animation: heroFloat 6s ease-in-out infinite; position: relative; z-index: 1; }
  @keyframes heroFloat { 0%,100%{transform:translateY(0) rotate(0)} 33%{transform:translateY(-8px) rotate(3deg)} 66%{transform:translateY(4px) rotate(-2deg)} }
  .info-hero h1 { font-family: 'Playfair Display', serif; font-size: 30px; background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 10px; position: relative; z-index: 1; }
  .info-hero p { color: var(--text-secondary); font-size: 14px; max-width: 550px; margin: 0 auto; line-height: 1.6; position: relative; z-index: 1; }

  .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-bottom: 24px; }
  .info-card { background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius); padding: 24px; transition: all 0.4s cubic-bezier(0.16,1,0.3,1); animation: cardSlideIn 0.6s ease backwards; }
  .info-card:nth-child(1) { animation-delay: 0.1s; } .info-card:nth-child(2) { animation-delay: 0.2s; } .info-card:nth-child(3) { animation-delay: 0.3s; } .info-card:nth-child(4) { animation-delay: 0.4s; } .info-card:nth-child(5) { animation-delay: 0.5s; } .info-card:nth-child(6) { animation-delay: 0.6s; }
  .info-card:hover { transform: translateY(-4px); border-color: rgba(201,168,76,0.3); box-shadow: var(--shadow-gold); }
  .info-card-icon { font-size: 30px; margin-bottom: 14px; display: block; }
  .info-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 10px; color: var(--accent); }
  .info-card p, .info-card li { color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
  .info-card ul { list-style: none; padding: 0; }
  .info-card ul li { padding: 3px 0; padding-left: 18px; position: relative; }
  .info-card ul li::before { content:'▸'; position:absolute; left:0; color:var(--accent); font-weight:700; }
  .info-card .highlight { display:inline-block; padding:2px 6px; background:rgba(201,168,76,0.1); border-radius:4px; color:var(--accent); font-weight:600; font-size:11px; }
  .info-card .warning { display:inline-block; padding:2px 6px; background:rgba(255,107,107,0.1); border-radius:4px; color:var(--danger); font-weight:600; font-size:11px; }
  .info-card .tip { display:inline-block; padding:2px 6px; background:rgba(78,205,196,0.1); border-radius:4px; color:var(--success); font-weight:600; font-size:11px; }

  .modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); z-index:2000; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all 0.3s ease; }
  .modal-overlay.active { opacity:1; visibility:visible; }
  .modal { background:var(--bg-card); border:var(--border-subtle); border-radius:var(--radius); padding:28px; width:480px; max-width:90vw; max-height:85vh; overflow-y:auto; transform:scale(0.9) translateY(20px); transition:all 0.4s cubic-bezier(0.16,1,0.3,1); box-shadow:var(--shadow-card), var(--shadow-gold); }
  .modal-overlay.active .modal { transform:scale(1) translateY(0); }
  .modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
  .modal-header h3 { font-size:16px; font-weight:700; }
  .modal-close { background:none; border:none; color:var(--text-muted); font-size:20px; cursor:pointer; padding:4px; transition:color 0.2s ease; line-height:1; }
  .modal-close:hover { color:var(--text-primary); }

  .toast-container { position:fixed; top:70px; right:20px; z-index:3000; display:flex; flex-direction:column; gap:6px; }
  .toast { padding:12px 16px; border-radius:var(--radius-sm); font-size:12px; font-weight:500; animation:toastIn 0.4s cubic-bezier(0.16,1,0.3,1); box-shadow:var(--shadow-card); display:flex; align-items:center; gap:8px; min-width:240px; }
  .toast.success { background:rgba(78,205,196,0.15); border:1px solid rgba(78,205,196,0.3); color:var(--success); }
  .toast.error { background:rgba(255,107,107,0.15); border:1px solid rgba(255,107,107,0.3); color:var(--danger); }
  .toast.info { background:rgba(108,143,255,0.15); border:1px solid rgba(108,143,255,0.3); color:var(--info); }
  @keyframes toastIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
  @keyframes toastOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(40px)} }

  .empty-state { text-align:center; padding:40px 20px; color:var(--text-muted); }
  .empty-state .empty-icon { font-size:40px; margin-bottom:14px; opacity:0.5; }
  .empty-state p { font-size:13px; margin-bottom:14px; }

  .progress-bar { width:100%; height:5px; background:rgba(0,0,0,0.3); border-radius:3px; overflow:hidden; margin-top:6px; }
  .progress-fill { height:100%; background:var(--gradient-gold); border-radius:3px; transition:width 1s cubic-bezier(0.16,1,0.3,1); }

  .snake-size-visual { display:flex; align-items:center; gap:14px; padding:16px; background:rgba(0,0,0,0.2); border-radius:var(--radius-sm); margin-top:14px; }
  .snake-body { flex:1; height:16px; background:linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-light)); border-radius:8px; position:relative; transition:width 1s ease; }
  .snake-body::after { content:'🐍'; position:absolute; right:-10px; top:50%; transform:translateY(-50%); font-size:16px; }
  .snake-size-label { font-size:11px; color:var(--text-secondary); white-space:nowrap; }

  .feeding-summary { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; margin-bottom:16px; }
  .summary-item { background:rgba(0,0,0,0.2); border-radius:var(--radius-sm); padding:14px; text-align:center; }
  .summary-item .val { font-size:20px; font-weight:800; color:var(--accent); }
  .summary-item .lbl { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-top:3px; }

  .health-list { display:flex; flex-direction:column; gap:10px; }
  .health-item { background:rgba(0,0,0,0.2); border-left:4px solid var(--accent); padding:14px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
  .health-item.success { border-left-color: var(--success); }
  .health-item.warning { border-left-color: var(--warning); }
  .health-item.danger { border-left-color: var(--danger); }
  .health-title { font-weight:700; margin-bottom:3px; display:flex; justify-content:space-between; }
  .health-dates { font-size:11px; color:var(--text-muted); margin-bottom:5px; }
  .health-treatment { font-size:12px; color:var(--text-secondary); line-height:1.5; }
  .molting-item { display:flex; align-items:center; gap:10px; padding:10px 12px; background:rgba(108,143,255,0.08); border:1px solid rgba(108,143,255,0.15); border-radius:var(--radius-sm); margin-bottom:6px; }
  .molting-icon { font-size:16px; }
  .molting-dates { font-weight:600; color:var(--info); }
  .molting-note { font-size:11px; color:var(--text-secondary); }

  .animal-selector { background: rgba(0,0,0,0.3); border: 1px solid rgba(201,168,76,0.2); border-radius: var(--radius-xs); padding: 6px 10px; color: var(--text-primary); font-size: 12px; font-family: 'Montserrat', sans-serif; cursor: pointer; outline: none; }
  .animal-selector:focus { border-color: var(--accent); }

  @media (max-width: 768px) {
    .header { padding: 0 12px; }
    .header-nav { display: none; }
    .main-content { padding: 12px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .info-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .profile-header { flex-direction: column; text-align: center; }
    .profile-tags { justify-content: center; }
    .auth-wrapper { flex-direction: column; padding: 20px; }
    .auth-articles { max-height: 300px; }
    .mobile-nav { display:flex !important; position:fixed; bottom:0; left:0; width:100%; background:rgba(10,10,15,0.95); backdrop-filter:blur(20px); border-top:var(--border-subtle); z-index:100; padding:6px 0; justify-content:space-around; }
    .mobile-nav .nav-btn { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 10px; font-size:10px; }
    .mobile-nav .nav-btn .mobile-icon { font-size:18px; }
    .main-content { padding-bottom: 70px; }
  }
  .mobile-nav { display: none; }

/* (Вставьте сюда весь CSS код из предыдущего ответа) */
/* Для экономии места я не буду его дублировать полностью, используйте тот же код */
:root { --bg-primary: #0a0a0f; --bg-secondary: #12121a; --bg-card: #1a1a2e; --accent: #c9a84c; --accent-light: #e8d48b; --accent-dark: #8a6f2f; --text-primary: #e8e8e8; --text-secondary: #9a9ab0; --text-muted: #5a5a70; --success: #4ecdc4; --danger: #ff6b6b; --warning: #ffd93d; --info: #6c8fff; --gradient-gold: linear-gradient(135deg, #c9a84c, #e8d48b, #c9a84c); --shadow-gold: 0 0 30px rgba(201, 168, 76, 0.15); --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4); --border-subtle: 1px solid rgba(201, 168, 76, 0.1); --radius: 16px; --radius-sm: 10px; --radius-xs: 6px; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Montserrat', sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; overflow-x: hidden; }
.bg-animated { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 800px 600px at 20% 20%, rgba(201,168,76,0.04) 0%, transparent 70%), radial-gradient(ellipse 600px 400px at 80% 80%, rgba(78,205,196,0.03) 0%, transparent 70%); animation: bgPulse 15s ease-in-out infinite alternate; }
@keyframes bgPulse { 0%{opacity:0.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} 100%{opacity:0.8;transform:scale(1)} }
.bg-pattern { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.02; pointer-events: none; background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(201,168,76,0.5) 35px, rgba(201,168,76,0.5) 36px); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--accent-dark); border-radius: 3px; }
.auth-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: flex; align-items: center; justify-content: center; background: var(--bg-primary); }
.auth-container.hidden { display: none; }
.auth-wrapper { display: flex; gap: 24px; width: 900px; max-width: 95vw; background: rgba(26,26,46,0.95); backdrop-filter: blur(20px); border: var(--border-subtle); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-card), var(--shadow-gold); animation: authSlideIn 0.8s cubic-bezier(0.16,1,0.3,1); }
@keyframes authSlideIn { from{opacity:0;transform:translateY(40px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
.auth-forms { flex: 1; }
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo .snake-icon { width: 64px; height: 64px; margin: 0 auto 12px; background: var(--gradient-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; animation: snakePulse 3s ease-in-out infinite; box-shadow: 0 0 20px rgba(201,168,76,0.4); }
@keyframes snakePulse { 0%,100%{transform:scale(1) rotate(0)} 25%{transform:scale(1.05) rotate(-2deg)} 75%{transform:scale(1.05) rotate(2deg)} }
.auth-logo h1 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 1px; }
.auth-logo p { color: var(--text-secondary); font-size: 13px; margin-top: 4px; font-weight: 300; }
.auth-tabs { display: flex; gap: 4px; background: rgba(0,0,0,0.3); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 20px; }
.auth-tab { flex: 1; padding: 10px; text-align: center; border: none; background: transparent; color: var(--text-muted); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; border-radius: var(--radius-xs); cursor: pointer; transition: all 0.3s ease; }
.auth-tab.active { background: var(--accent); color: var(--bg-primary); box-shadow: 0 2px 12px rgba(201,168,76,0.3); }
.auth-tab:hover:not(.active) { color: var(--text-primary); background: rgba(201,168,76,0.1); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 14px; background: rgba(0,0,0,0.3); border: 1px solid rgba(201,168,76,0.15); border-radius: var(--radius-xs); color: var(--text-primary); font-family: 'Montserrat', sans-serif; font-size: 14px; transition: all 0.3s ease; outline: none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,168,76,0.1); background: rgba(0,0,0,0.4); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: none; border-radius: var(--radius-xs); font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); text-decoration: none; }
.btn-primary { width: 100%; background: var(--gradient-gold); color: var(--bg-primary); box-shadow: 0 4px 15px rgba(201,168,76,0.25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(201,168,76,0.35); }
.btn-secondary { background: rgba(201,168,76,0.1); color: var(--accent); border: 1px solid rgba(201,168,76,0.2); }
.btn-secondary:hover { background: rgba(201,168,76,0.2); border-color: var(--accent); }
.btn-danger { background: rgba(255,107,107,0.1); color: var(--danger); border: 1px solid rgba(255,107,107,0.2); }
.btn-danger:hover { background: rgba(255,107,107,0.2); }
.btn-sm { padding: 6px 12px; font-size: 11px; }
.auth-error { color: var(--danger); font-size: 12px; text-align: center; margin-top: 10px; min-height: 18px; animation: shake 0.5s ease; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.auth-articles { flex: 1; background: rgba(0,0,0,0.2); border-radius: var(--radius-sm); padding: 20px; overflow-y: auto; max-height: 500px; border: var(--border-subtle); }
.articles-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.article-nav-btn { padding: 6px 12px; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.2); border-radius: 20px; font-size: 11px; color: var(--accent); cursor: pointer; transition: all 0.2s ease; font-weight: 600; }
.article-nav-btn.active { background: var(--accent); color: var(--bg-primary); }
.article-nav-btn:hover:not(.active) { background: rgba(201,168,76,0.2); }
.article-content { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.article-content h3 { color: var(--accent); margin: 12px 0 6px; font-size: 15px; }
.article-content p, .article-content li { margin-bottom: 8px; }
.article-content ul { padding-left: 18px; }
.article-content strong { color: var(--text-primary); }
.article-img { width: 100%; height: 120px; object-fit: cover; border-radius: var(--radius-xs); margin-bottom: 12px; background: linear-gradient(45deg, #2a2a3e, #1a1a2e); display: flex; align-items: center; justify-content: center; font-size: 40px; }
.app-container { display: none; min-height: 100vh; position: relative; z-index: 1; }
.app-container.visible { display: block; }
.header { position: sticky; top: 0; z-index: 100; background: rgba(10,10,15,0.85); backdrop-filter: blur(20px); border-bottom: var(--border-subtle); padding: 0 24px; }
.header-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 60px; }
.header-brand { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.header-brand .logo-icon { font-size: 26px; filter: drop-shadow(0 0 8px rgba(201,168,76,0.3)); }
.header-brand h2 { font-family: 'Playfair Display', serif; font-size: 17px; background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.header-nav { display: flex; gap: 4px; }
.nav-btn { padding: 8px 16px; border: none; background: transparent; color: var(--text-secondary); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500; border-radius: var(--radius-xs); cursor: pointer; transition: all 0.3s ease; position: relative; }
.nav-btn.active { color: var(--accent); background: rgba(201,168,76,0.1); }
.nav-btn.active::after { content:''; position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); width:20px; height:2px; background:var(--accent); border-radius:1px; }
.nav-btn:hover:not(.active) { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gradient-gold); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--bg-primary); overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.btn-icon { background: none; border: none; color: var(--text-secondary); font-size: 18px; cursor: pointer; padding: 4px; transition: color 0.2s; }
.btn-icon:hover { color: var(--accent); }
.btn-logout { padding: 5px 10px; border: 1px solid rgba(255,107,107,0.2); background: rgba(255,107,107,0.08); color: var(--danger); border-radius: var(--radius-xs); font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'Montserrat', sans-serif; }
.btn-logout:hover { background: rgba(255,107,107,0.15); border-color: var(--danger); }
.main-content { max-width: 1400px; margin: 0 auto; padding: 24px; }
.tab-content { display: none; animation: fadeInUp 0.5s ease; }
.tab-content.active { display: block; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.dashboard-header { margin-bottom: 24px; }
.dashboard-header h1 { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; margin-bottom: 6px; }
.dashboard-header h1 span { background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.dashboard-header p { color: var(--text-secondary); font-size: 13px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card { background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.16,1,0.3,1); animation: cardSlideIn 0.6s ease backwards; }
.stat-card:nth-child(1) { animation-delay: 0.1s; } .stat-card:nth-child(2) { animation-delay: 0.2s; } .stat-card:nth-child(3) { animation-delay: 0.3s; } .stat-card:nth-child(4) { animation-delay: 0.4s; }
@keyframes cardSlideIn { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.stat-card:hover { transform: translateY(-4px); border-color: rgba(201,168,76,0.3); box-shadow: var(--shadow-gold); }
.stat-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--gradient-gold); opacity:0; transition:opacity 0.3s ease; }
.stat-card:hover::before { opacity:1; }
.stat-icon { font-size: 24px; margin-bottom: 10px; display: block; }
.stat-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.stat-value { font-size: 24px; font-weight: 800; color: var(--accent); line-height: 1; }
.stat-unit { font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-left: 3px; }
.stat-change { font-size: 10px; margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.stat-change.positive { color: var(--success); } .stat-change.negative { color: var(--danger); }
.snake-profile { background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; animation: fadeInUp 0.6s ease 0.3s backwards; }
.profile-header { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.profile-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #2a2a3e, #1a1a2e); border: 3px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 36px; box-shadow: 0 0 20px rgba(201,168,76,0.15); animation: profileGlow 4s ease-in-out infinite alternate; overflow: hidden; position: relative; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar .upload-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; cursor: pointer; font-size: 14px; }
.profile-avatar:hover .upload-overlay { opacity: 1; }
@keyframes profileGlow { from{box-shadow:0 0 15px rgba(201,168,76,0.1)} to{box-shadow:0 0 30px rgba(201,168,76,0.25)} }
.profile-info h2 { font-family: 'Playfair Display', serif; font-size: 22px; margin-bottom: 2px; }
.profile-info .species { color: var(--accent); font-size: 12px; font-weight: 500; margin-bottom: 6px; }
.profile-info .bio { color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
.profile-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.tag { padding: 3px 10px; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.2); border-radius: 20px; font-size: 10px; font-weight: 600; color: var(--accent); }
.tag.green { background: rgba(78,205,196,0.1); border-color: rgba(78,205,196,0.2); color: var(--success); }
.tag.blue { background: rgba(108,143,255,0.1); border-color: rgba(108,143,255,0.2); color: var(--info); }
.chart-container { background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; animation: fadeInUp 0.6s ease 0.4s backwards; }
.chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.chart-header h3 { font-size: 15px; font-weight: 700; }
.chart-legend { display: flex; gap: 12px; }
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-secondary); }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.chart-canvas-wrapper { position: relative; width: 100%; height: 280px; overflow: hidden; }
canvas { width: 100% !important; height: 100% !important; }
.chart-stats { position: absolute; top: 10px; right: 10px; background: rgba(10,10,15,0.8); padding: 10px; border-radius: var(--radius-sm); font-size: 11px; color: var(--text-secondary); border: var(--border-subtle); }
.chart-stats div { margin-bottom: 4px; }
.chart-stats strong { color: var(--accent); }
.feeding-section { animation: fadeInUp 0.6s ease 0.5s backwards; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.section-header h3 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.feeding-table-wrapper { background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius); overflow: hidden; }
.feeding-table { width: 100%; border-collapse: collapse; }
.feeding-table th { padding: 12px 16px; text-align: left; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; background: rgba(0,0,0,0.2); border-bottom: var(--border-subtle); }
.feeding-table td { padding: 12px 16px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.03); transition: background 0.2s ease; }
.feeding-table tr:hover td { background: rgba(201,168,76,0.03); }
.feeding-table tr:last-child td { border-bottom: none; }
.food-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: rgba(78,205,196,0.1); border: 1px solid rgba(78,205,196,0.15); border-radius: 5px; font-size: 11px; font-weight: 500; color: var(--success); }
.interval-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; background: rgba(108,143,255,0.1); border: 1px solid rgba(108,143,255,0.15); border-radius: 5px; font-size: 11px; font-weight: 500; color: var(--info); }
.weight-cell { font-weight: 700; color: var(--accent); }
.interval-cell { color: var(--text-secondary); }
.delete-btn, .edit-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; padding: 3px; border-radius: 4px; transition: all 0.2s ease; }
.delete-btn:hover { color: var(--danger); background: rgba(255,107,107,0.1); }
.edit-btn:hover { color: var(--info); background: rgba(108,143,255,0.1); }
.add-form-card { background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; animation: fadeInUp 0.6s ease 0.6s backwards; }
.add-form-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center; gap: 6px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 14px; }
.form-group textarea { resize: vertical; min-height: 60px; }
.info-hero { background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius); padding: 36px 32px; margin-bottom: 24px; text-align: center; position: relative; overflow: hidden; animation: fadeInUp 0.6s ease; }
.info-hero::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(ellipse at center, rgba(201,168,76,0.05) 0%, transparent 70%); }
.info-hero .hero-icon { font-size: 60px; display: block; margin-bottom: 16px; animation: heroFloat 6s ease-in-out infinite; position: relative; z-index: 1; }
@keyframes heroFloat { 0%,100%{transform:translateY(0) rotate(0)} 33%{transform:translateY(-8px) rotate(3deg)} 66%{transform:translateY(4px) rotate(-2deg)} }
.info-hero h1 { font-family: 'Playfair Display', serif; font-size: 30px; background: var(--gradient-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 10px; position: relative; z-index: 1; }
.info-hero p { color: var(--text-secondary); font-size: 14px; max-width: 550px; margin: 0 auto; line-height: 1.6; position: relative; z-index: 1; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-bottom: 24px; }
.info-card { background: var(--bg-card); border: var(--border-subtle); border-radius: var(--radius); padding: 24px; transition: all 0.4s cubic-bezier(0.16,1,0.3,1); animation: cardSlideIn 0.6s ease backwards; }
.info-card:nth-child(1) { animation-delay: 0.1s; } .info-card:nth-child(2) { animation-delay: 0.2s; } .info-card:nth-child(3) { animation-delay: 0.3s; } .info-card:nth-child(4) { animation-delay: 0.4s; } .info-card:nth-child(5) { animation-delay: 0.5s; } .info-card:nth-child(6) { animation-delay: 0.6s; }
.info-card:hover { transform: translateY(-4px); border-color: rgba(201,168,76,0.3); box-shadow: var(--shadow-gold); }
.info-card-icon { font-size: 30px; margin-bottom: 14px; display: block; }
.info-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 10px; color: var(--accent); }
.info-card p, .info-card li { color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
.info-card ul { list-style: none; padding: 0; }
.info-card ul li { padding: 3px 0; padding-left: 18px; position: relative; }
.info-card ul li::before { content:'▸'; position:absolute; left:0; color:var(--accent); font-weight:700; }
.info-card .highlight { display:inline-block; padding:2px 6px; background:rgba(201,168,76,0.1); border-radius:4px; color:var(--accent); font-weight:600; font-size:11px; }
.info-card .warning { display:inline-block; padding:2px 6px; background:rgba(255,107,107,0.1); border-radius:4px; color:var(--danger); font-weight:600; font-size:11px; }
.info-card .tip { display:inline-block; padding:2px 6px; background:rgba(78,205,196,0.1); border-radius:4px; color:var(--success); font-weight:600; font-size:11px; }
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); z-index:2000; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all 0.3s ease; }
.modal-overlay.active { opacity:1; visibility:visible; }
.modal { background:var(--bg-card); border:var(--border-subtle); border-radius:var(--radius); padding:28px; width:480px; max-width:90vw; max-height:85vh; overflow-y:auto; transform:scale(0.9) translateY(20px); transition:all 0.4s cubic-bezier(0.16,1,0.3,1); box-shadow:var(--shadow-card), var(--shadow-gold); }
.modal-overlay.active .modal { transform:scale(1) translateY(0); }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.modal-header h3 { font-size:16px; font-weight:700; }
.modal-close { background:none; border:none; color:var(--text-muted); font-size:20px; cursor:pointer; padding:4px; transition:color 0.2s ease; line-height:1; }
.modal-close:hover { color:var(--text-primary); }
.toast-container { position:fixed; top:70px; right:20px; z-index:3000; display:flex; flex-direction:column; gap:6px; }
.toast { padding:12px 16px; border-radius:var(--radius-sm); font-size:12px; font-weight:500; animation:toastIn 0.4s cubic-bezier(0.16,1,0.3,1); box-shadow:var(--shadow-card); display:flex; align-items:center; gap:8px; min-width:240px; }
.toast.success { background:rgba(78,205,196,0.15); border:1px solid rgba(78,205,196,0.3); color:var(--success); }
.toast.error { background:rgba(255,107,107,0.15); border:1px solid rgba(255,107,107,0.3); color:var(--danger); }
.toast.info { background:rgba(108,143,255,0.15); border:1px solid rgba(108,143,255,0.3); color:var(--info); }
@keyframes toastIn { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(40px)} }
.empty-state { text-align:center; padding:40px 20px; color:var(--text-muted); }
.empty-state .empty-icon { font-size:40px; margin-bottom:14px; opacity:0.5; }
.empty-state p { font-size:13px; margin-bottom:14px; }
.progress-bar { width:100%; height:5px; background:rgba(0,0,0,0.3); border-radius:3px; overflow:hidden; margin-top:6px; }
.progress-fill { height:100%; background:var(--gradient-gold); border-radius:3px; transition:width 1s cubic-bezier(0.16,1,0.3,1); }
.snake-size-visual { display:flex; align-items:center; gap:14px; padding:16px; background:rgba(0,0,0,0.2); border-radius:var(--radius-sm); margin-top:14px; }
.snake-body { flex:1; height:16px; background:linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-light)); border-radius:8px; position:relative; transition:width 1s ease; }
.snake-body::after { content:'🐍'; position:absolute; right:-10px; top:50%; transform:translateY(-50%); font-size:16px; }
.snake-size-label { font-size:11px; color:var(--text-secondary); white-space:nowrap; }
.feeding-summary { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; margin-bottom:16px; }
.summary-item { background:rgba(0,0,0,0.2); border-radius:var(--radius-sm); padding:14px; text-align:center; }
.summary-item .val { font-size:20px; font-weight:800; color:var(--accent); }
.summary-item .lbl { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-top:3px; }
.health-list { display:flex; flex-direction:column; gap:10px; }
.health-item { background:rgba(0,0,0,0.2); border-left:4px solid var(--accent); padding:14px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.health-item.success { border-left-color: var(--success); }
.health-item.warning { border-left-color: var(--warning); }
.health-item.danger { border-left-color: var(--danger); }
.health-title { font-weight:700; margin-bottom:3px; display:flex; justify-content:space-between; }
.health-dates { font-size:11px; color:var(--text-muted); margin-bottom:5px; }
.health-treatment { font-size:12px; color:var(--text-secondary); line-height:1.5; }
.molting-item { display:flex; align-items:center; gap:10px; padding:10px 12px; background:rgba(108,143,255,0.08); border:1px solid rgba(108,143,255,0.15); border-radius:var(--radius-sm); margin-bottom:6px; }
.molting-icon { font-size:16px; }
.molting-dates { font-weight:600; color:var(--info); }
.molting-note { font-size:11px; color:var(--text-secondary); }
.animal-selector { background: rgba(0,0,0,0.3); border: 1px solid rgba(201,168,76,0.2); border-radius: var(--radius-xs); padding: 6px 10px; color: var(--text-primary); font-size: 12px; font-family: 'Montserrat', sans-serif; cursor: pointer; outline: none; }
.animal-selector:focus { border-color: var(--accent); }
@media (max-width: 768px) { .header { padding: 0 12px; } .header-nav { display: none; } .main-content { padding: 12px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .info-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .profile-header { flex-direction: column; text-align: center; } .profile-tags { justify-content: center; } .auth-wrapper { flex-direction: column; padding: 20px; } .auth-articles { max-height: 300px; } .mobile-nav { display:flex !important; position:fixed; bottom:0; left:0; width:100%; background:rgba(10,10,15,0.95); backdrop-filter:blur(20px); border-top:var(--border-subtle); z-index:100; padding:6px 0; justify-content:space-around; } .mobile-nav .nav-btn { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 10px; font-size:10px; } .mobile-nav .nav-btn .mobile-icon { font-size:18px; } .main-content { padding-bottom: 70px; } }
.mobile-nav { display: none; }


/* v3 refinements */
.status-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; }
.status-badge.success { background:rgba(78,205,196,0.12); border:1px solid rgba(78,205,196,0.22); color:var(--success); }
.status-badge.warning { background:rgba(255,209,102,0.12); border:1px solid rgba(255,209,102,0.24); color:var(--warning); }
.status-badge.danger { background:rgba(255,107,107,0.12); border:1px solid rgba(255,107,107,0.24); color:var(--danger); }
.status-badge.neutral { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:var(--text-secondary); }
.notes-cell { color:var(--text-secondary); max-width:260px; white-space:normal; line-height:1.45; }
.legend-line { display:inline-block; width:18px; height:3px; border-radius:3px; vertical-align:middle; margin-right:4px; }
.legend-line.weight { background:#4ecdc4; }
.legend-line.length { background:#c9a84c; }
.health-item.warning { border-left-color: var(--warning); background: rgba(255,209,102,0.07); border-top:1px solid rgba(255,209,102,0.10); border-right:1px solid rgba(255,209,102,0.10); border-bottom:1px solid rgba(255,209,102,0.10); }
.health-item.success { border-left-color: var(--success); background: rgba(78,205,196,0.07); border-top:1px solid rgba(78,205,196,0.10); border-right:1px solid rgba(78,205,196,0.10); border-bottom:1px solid rgba(78,205,196,0.10); }
.health-item.danger { border-left-color: var(--danger); background: rgba(255,107,107,0.07); border-top:1px solid rgba(255,107,107,0.10); border-right:1px solid rgba(255,107,107,0.10); border-bottom:1px solid rgba(255,107,107,0.10); }
.health-title { gap:12px; align-items:center; }


/* v4: unified growth table + gallery */
.main-style-table {
  margin-top: 8px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
}
.growth-table td { vertical-align: middle; }
.length-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-main);
  font-weight: 600;
}
.interval-badge.warning {
  color: #f5c76b;
  background: rgba(245,199,107,0.12);
  border-color: rgba(245,199,107,0.24);
}
.gallery-upload-card { margin-bottom: 22px; }
.gallery-preview-box {
  width: 220px;
  height: 160px;
  border-radius: 18px;
  overflow: hidden;
  border: var(--border-subtle);
  margin-bottom: 14px;
  background: rgba(255,255,255,0.04);
}
.gallery-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.gallery-card {
  background: var(--bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
  animation: fadeInUp 0.35s ease both;
}
.gallery-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
  background: rgba(255,255,255,0.04);
}
.gallery-card-body {
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.gallery-caption {
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.25;
}
.gallery-date {
  grid-column: 1 / 2;
  color: var(--text-muted);
  font-size: 11px;
}
.gallery-card-body .delete-btn {
  grid-row: 1 / span 2;
  grid-column: 2 / 3;
}


/* v5: gallery lightbox */
.gallery-card img {
  cursor: zoom-in;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(20, 18, 16, 0.86);
  align-items: center;
  justify-content: center;
  padding: 28px;
  backdrop-filter: blur(4px);
}

.gallery-lightbox-content {
  width: min(96vw, 1180px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.gallery-lightbox-content img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  background: #111;
}

.gallery-lightbox-info {
  color: #fff;
  text-align: center;
  font-size: 15px;
  line-height: 1.4;
}

#galleryLightboxCaption {
  font-weight: 700;
  margin-bottom: 2px;
}

#galleryLightboxDate {
  opacity: 0.78;
  font-size: 13px;
}

.gallery-lightbox-close {
  position: fixed;
  top: 22px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  z-index: 10000;
}

.gallery-lightbox-close:hover {
  background: rgba(255,255,255,0.24);
}

body.modal-open {
  overflow: hidden;
}


/* Site logo image integration */
.logo-img-auth {
  width: 72px !important;
  height: 72px !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  margin: 0 auto 12px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: 0 0 18px rgba(34, 240, 215, 0.45), 0 0 32px rgba(34, 240, 215, 0.18) !important;
  animation: snakePulse 3s ease-in-out infinite;
}
.logo-img-header {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  filter: drop-shadow(0 0 8px rgba(34, 240, 215, 0.55)) !important;
  flex: 0 0 auto;
}
.nav-logo-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: -4px;
  margin-right: 4px;
  filter: drop-shadow(0 0 6px rgba(34, 240, 215, 0.45));
}
.heading-logo-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 8px;
  filter: drop-shadow(0 0 8px rgba(34, 240, 215, 0.5));
}
.logo-img-hero {
  width: 90px !important;
  height: 90px !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  margin: 0 auto 12px !important;
  filter: drop-shadow(0 0 16px rgba(34, 240, 215, 0.45));
}
.header-brand .logo-icon {
  font-size: 0 !important;
}

.avatar-placeholder-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  background: #050809;
}


/* v9: avatar border in logo neon color */
.profile-avatar {
  border-color: #22f0d7 !important;
  box-shadow: 0 0 18px rgba(34, 240, 215, 0.32), inset 0 0 14px rgba(34, 240, 215, 0.08) !important;
}
.profile-avatar:hover {
  box-shadow: 0 0 26px rgba(34, 240, 215, 0.48), inset 0 0 16px rgba(34, 240, 215, 0.12) !important;
}
.profile-avatar img,
.avatar-placeholder-logo {
  background: #050809;
}
.avatar-preview {
  border: 2px solid #22f0d7 !important;
  box-shadow: 0 0 14px rgba(34, 240, 215, 0.28) !important;
  border-radius: 14px;
}


/* v12: dark dropdowns and care species tabs */
.form-group select,
.animal-selector,
select {
  background-color: #0b1118 !important;
  color: var(--text-primary) !important;
  border-color: rgba(78, 205, 196, 0.28) !important;
}
.form-group select option,
.form-group select optgroup,
.animal-selector option,
select option,
select optgroup {
  background-color: #0b1118 !important;
  color: var(--text-primary) !important;
}
.form-group select:focus,
.animal-selector:focus,
select:focus {
  border-color: var(--success) !important;
  box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.12) !important;
}
.care-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 22px;
}
.care-tabs-panel,
.care-content-panel,
.care-article-card {
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(78, 205, 196, 0.16);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.care-tabs-panel { padding: 16px; max-height: 70vh; overflow: auto; }
.care-tabs-section + .care-tabs-section { margin-top: 18px; }
.care-tabs-section h3 { color: var(--success); font-size: 14px; margin-bottom: 10px; }
.care-tabs-list { display: flex; flex-direction: column; gap: 8px; }
.care-species-tab {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(78, 205, 196, 0.14);
  background: rgba(8, 16, 24, 0.72);
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  transition: all .2s ease;
}
.care-species-tab:hover { color: var(--text-primary); border-color: rgba(78, 205, 196, 0.42); transform: translateX(2px); }
.care-species-tab.active {
  color: #061113;
  background: linear-gradient(135deg, var(--success), #7ff7ee);
  border-color: var(--success);
  box-shadow: 0 0 18px rgba(78, 205, 196, 0.24);
}
.care-content-panel { padding: 0; overflow: hidden; }
.care-article-card { border: none; padding: 22px; min-height: 360px; }
.care-article-title { color: var(--success); font-size: 22px; font-weight: 800; margin-bottom: 14px; }
.care-article-body { color: var(--text-secondary); line-height: 1.7; font-size: 15px; }
.care-article-body ul { padding-left: 20px; margin: 0; }
.care-article-body li { margin-bottom: 10px; }
.care-note-card { border-color: rgba(78, 205, 196, 0.16) !important; }
@media (max-width: 900px) {
  .care-layout { grid-template-columns: 1fr; }
  .care-tabs-panel { max-height: none; }
  .care-tabs-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* v13: тёмные выпадающие списки и варианты автодополнения под стиль сайта */
select, select option, select optgroup {
  background: #12121a;
  color: var(--text-primary);
}
input[list] {
  background: rgba(0,0,0,0.38);
  color: var(--text-primary);
  border-color: rgba(78,205,196,0.25);
}
input[list]:focus {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(78,205,196,0.12);
}


/* v14: расширенный справочник ухода */
.care-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 12px 0 20px;
}
.care-photo-item {
  border: 1px solid rgba(78,205,196,0.22);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,0.28);
  box-shadow: 0 10px 24px rgba(0,0,0,0.24);
  min-height: 130px;
}
.care-photo-item img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}
.care-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.care-section-card {
  background: rgba(5, 13, 20, 0.72);
  border: 1px solid rgba(78,205,196,0.16);
  border-radius: 16px;
  padding: 15px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.20);
}
.care-section-card h3 {
  color: var(--success);
  font-size: 15px;
  margin-bottom: 8px;
  font-weight: 800;
}
.care-section-card p {
  color: var(--text-secondary);
  line-height: 1.65;
  font-size: 14px;
  margin: 0;
}
@media (max-width: 700px) {
  .care-section-grid { grid-template-columns: 1fr; }
  .care-photo-item img { height: 150px; }
}



/* v15: энциклопедический формат вкладки "Уход" */
.care-encyclopedia {
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(78,205,196,0.10), transparent 60%),
    radial-gradient(600px 360px at 100% 10%, rgba(201,168,76,0.07), transparent 65%),
    rgba(6, 12, 18, 0.86);
}

.care-article-hero {
  position: relative;
  padding: 30px 30px 22px;
  border-bottom: 1px solid rgba(78,205,196,0.14);
  background:
    linear-gradient(135deg, rgba(78,205,196,0.10), rgba(0,0,0,0.05)),
    rgba(0,0,0,0.16);
}

.care-article-hero::after {
  content: '';
  position: absolute;
  inset: auto 26px 0 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(78,205,196,0.55), transparent);
}

.care-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(78,205,196,0.10);
  border: 1px solid rgba(78,205,196,0.22);
  color: var(--success);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
}

.care-article-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.1;
  margin-bottom: 10px;
  color: var(--text-primary);
  text-shadow: 0 0 24px rgba(78,205,196,0.10);
}

.care-article-subtitle {
  color: var(--text-secondary);
  max-width: 780px;
  line-height: 1.7;
  font-size: 14px;
}

.care-photo-grid {
  padding: 22px;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.care-photo-item {
  position: relative;
  min-height: 190px;
  border-color: rgba(78,205,196,0.24);
}

.care-photo-item::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.35));
}

.care-photo-item img {
  height: 210px;
  transition: transform .45s ease, filter .45s ease;
  filter: saturate(1.08) contrast(1.04);
}

.care-photo-item:hover img {
  transform: scale(1.045);
}

.care-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  background:
    radial-gradient(circle at 50% 25%, rgba(78,205,196,0.18), transparent 45%),
    linear-gradient(135deg, rgba(10,20,28,0.95), rgba(0,0,0,0.42));
}

.care-photo-fallback-inner {
  text-align: center;
  padding: 18px;
  color: var(--text-secondary);
}

.care-photo-fallback-inner span {
  display: block;
  font-size: 34px;
  margin-bottom: 8px;
}

.care-photo-fallback-inner strong {
  display: block;
  color: var(--success);
  font-size: 13px;
  margin-bottom: 6px;
}

.care-photo-fallback-inner small {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

.care-section-grid {
  padding: 0 22px 26px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
}

.care-section-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(26,26,46,0.88), rgba(7,12,18,0.88));
  border-color: rgba(78,205,196,0.15);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.care-section-card:hover {
  transform: translateY(-3px);
  border-color: rgba(78,205,196,0.36);
  box-shadow: 0 14px 34px rgba(0,0,0,0.32), 0 0 28px rgba(78,205,196,0.08);
}

.care-section-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(78,205,196,0.65), transparent);
  opacity: 0;
  transition: opacity .25s ease;
}

.care-section-card:hover::before { opacity: 1; }

.care-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.care-section-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(78,205,196,0.10);
  border: 1px solid rgba(78,205,196,0.22);
  box-shadow: 0 0 18px rgba(78,205,196,0.06);
}

.care-section-card h3 {
  margin: 0;
}

.care-section-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.care-section-card li {
  position: relative;
  padding: 6px 0 6px 19px;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.62;
}

.care-section-card li::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 6px;
  color: var(--success);
  font-weight: 900;
}

@media (max-width: 900px) {
  .care-layout { grid-template-columns: 1fr; }
  .care-tabs-panel { max-height: none; }
  .care-photo-grid { grid-template-columns: 1fr; }
  .care-photo-item img { height: 230px; }
}


/* Dashboard layout inspired by generated mockup, colors preserved */
.dashboard-grid,
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(220px,1fr));
  gap:20px;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.content-layout,
.main-content{
  max-width:1600px;
  margin:0 auto;
}


/* Мягкая подсветка кнопки добавления животного в хедере — цвет как у главного логотипа со змеей */
.add-animal-header-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 4px;
  border: none;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 25px;
  line-height: 1;
  transform: translateZ(0);
  filter:
    brightness(1.10)
    drop-shadow(0 0 4px rgba(34, 240, 215, 0.48))
    drop-shadow(0 0 9px rgba(34, 240, 215, 0.22));
  text-shadow:
    0 0 5px rgba(34, 240, 215, 0.45),
    0 0 10px rgba(34, 240, 215, 0.20);
  transition: transform 0.25s ease, filter 0.25s ease, text-shadow 0.25s ease;
  animation: addAnimalSoftPulse 2.8s ease-in-out infinite;
}

.add-animal-header-btn::before,
.add-animal-header-btn::after {
  content: none !important;
}

.add-animal-header-btn:hover {
  transform: translateY(-1px) scale(1.08);
  filter:
    brightness(1.18)
    drop-shadow(0 0 6px rgba(34, 240, 215, 0.62))
    drop-shadow(0 0 14px rgba(34, 240, 215, 0.34));
  text-shadow:
    0 0 7px rgba(34, 240, 215, 0.60),
    0 0 14px rgba(34, 240, 215, 0.30);
}

@keyframes addAnimalSoftPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter:
      brightness(1.08)
      drop-shadow(0 0 4px rgba(34, 240, 215, 0.38))
      drop-shadow(0 0 9px rgba(34, 240, 215, 0.16));
  }
  50% {
    transform: translateY(-1px) scale(1.04);
    filter:
      brightness(1.16)
      drop-shadow(0 0 5px rgba(34, 240, 215, 0.55))
      drop-shadow(0 0 12px rgba(34, 240, 215, 0.26));
  }
}



/* Admin dictionaries */
.admin-dict-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.admin-dict-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-dict-heading h3 {
  margin: 0;
}

.admin-dict-heading > span,
.admin-dict-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(113, 231, 213, 0.24);
  background: rgba(43, 205, 180, 0.09);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-dict-summary {
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
}

.admin-dict-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
}

.admin-dict-row p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

.muted {
  color: var(--text-secondary);
}

/* v15: admin quick actions */
.admin-quick-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid rgba(78, 205, 196, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 0 18px rgba(78, 205, 196, 0.08);
}
#adminCareEditor {
  scroll-margin-top: 24px;
  border-color: rgba(78, 205, 196, 0.22);
}

/* Admin care photo upload */
.admin-care-photo-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.admin-care-empty-photo {
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px dashed rgba(167, 139, 250, 0.35);
  border-radius: 14px;
  color: var(--text-secondary, #a7a4b6);
  background: rgba(255, 255, 255, 0.03);
}

.admin-care-photo-item {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(167, 139, 250, 0.25);
  background: rgba(255, 255, 255, 0.04);
  aspect-ratio: 4 / 3;
}

.admin-care-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-care-photo-item.broken::after {
  content: 'Не загрузилось';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--text-secondary, #a7a4b6);
  background: rgba(12, 10, 22, 0.9);
}

.admin-care-photo-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(20, 14, 35, 0.86);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.35);
}

.admin-care-photo-remove:hover {
  transform: scale(1.08);
}


/* =========================================================
   PUBLIC INFORMATION HOMEPAGE
   ========================================================= */
.public-site {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 8%, rgba(201,168,76,.10), transparent 30%),
    radial-gradient(circle at 86% 28%, rgba(78,205,196,.07), transparent 26%),
    var(--bg-primary);
}
.public-site.hidden { display: none; }
.public-site button { font-family: inherit; }
.public-header {
  position: sticky;
  top: 0;
  z-index: 300;
  border-bottom: 1px solid rgba(201,168,76,.12);
  background: rgba(8,8,13,.86);
  backdrop-filter: blur(22px);
}
.public-header-inner {
  width: min(1400px, calc(100% - 40px));
  min-height: 72px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}
.public-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
.public-brand img { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; clip-path: circle(50% at 50% 50%); background: transparent; filter: drop-shadow(0 0 8px rgba(34,240,215,.72)) drop-shadow(0 0 15px rgba(34,240,215,.28)); }
.public-brand span { display: flex; flex-direction: row; align-items: baseline; line-height: 1; white-space: nowrap; }
.public-brand strong,
.public-brand small { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; letter-spacing: .3px; }
.public-brand small { margin: 0; color: var(--accent); text-transform: none; }
.public-nav { display: flex; justify-content: center; gap: 2px; }
.public-nav button,
.public-footer-links button {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: .25s ease;
}
.public-nav button { padding: 11px 13px; border-radius: 10px; }
.public-nav button:hover { color: var(--accent-light); background: rgba(201,168,76,.08); }
.public-login-button {
  min-width: 112px;
  padding: 10px 16px;
  border: 1px solid rgba(201,168,76,.42);
  border-radius: 10px;
  background: rgba(201,168,76,.06);
  color: var(--accent-light);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 0 18px rgba(201,168,76,.035), 0 0 16px rgba(201,168,76,.06);
  transition: .25s ease;
}
.public-login-button:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 0 22px rgba(201,168,76,.18); }
.public-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(201,168,76,.08);
}
.public-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(10,10,15,.15), rgba(10,10,15,.02) 48%, rgba(201,168,76,.03));
}
.public-hero-inner {
  position: relative;
  width: min(1400px, calc(100% - 40px));
  min-height: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr);
  align-items: center;
  gap: 56px;
  padding: 74px 0 82px;
}
.public-eyebrow,
.public-section-kicker {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}
.public-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.public-eyebrow span { width: 38px; height: 1px; background: var(--accent); box-shadow: 0 0 8px rgba(201,168,76,.5); }
.public-hero-copy h1 {
  max-width: 720px;
  font-family: 'Playfair Display', serif;
  font-size: clamp(48px, 5.5vw, 82px);
  line-height: .98;
  letter-spacing: -2.4px;
  margin-bottom: 25px;
}
.public-hero-copy h1 em { font-style: normal; background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.public-hero-copy > p { max-width: 650px; color: var(--text-secondary); font-size: 16px; line-height: 1.8; }
.public-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.public-primary-action,
.public-secondary-action {
  width: auto;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: .28s ease;
}
.public-primary-action { border: 0; background: var(--gradient-gold); color: #0a0a0f; box-shadow: 0 9px 30px rgba(201,168,76,.20); }
.public-primary-action span { margin-left: 9px; }
.public-primary-action:hover { transform: translateY(-2px); box-shadow: 0 13px 36px rgba(201,168,76,.30); }
.public-secondary-action { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.035); color: var(--text-primary); }
.public-secondary-action:hover { border-color: rgba(201,168,76,.45); color: var(--accent-light); }
.public-hero-metrics { display: flex; gap: 28px; margin-top: 38px; }
.public-hero-metrics div { display: flex; flex-direction: column; padding-left: 14px; border-left: 1px solid rgba(201,168,76,.24); }
.public-hero-metrics strong { font-family: 'Playfair Display', serif; color: var(--accent-light); font-size: 24px; }
.public-hero-metrics span { margin-top: 4px; color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.public-hero-gallery { position: relative; min-height: 505px; }
.public-hero-gallery::before {
  content: '';
  position: absolute;
  width: 390px;
  height: 390px;
  right: 9%;
  top: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.16), rgba(201,168,76,.025) 60%, transparent 72%);
  filter: blur(2px);
}
.public-hero-main-photo {
  position: absolute;
  inset: 28px 20px 22px 95px;
  overflow: hidden;
  border-radius: 34% 13% 28% 12% / 18% 28% 13% 31%;
  border: 1px solid rgba(201,168,76,.23);
  background: var(--bg-card);
  box-shadow: 0 32px 90px rgba(0,0,0,.55), 0 0 50px rgba(201,168,76,.08);
}
.public-hero-main-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,7,10,.9), transparent 44%); }
.public-hero-main-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.public-hero-main-photo figcaption { position: absolute; z-index: 2; left: 28px; bottom: 26px; display: flex; flex-direction: column; }
.public-hero-main-photo figcaption span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: 1.7px; text-transform: uppercase; }
.public-hero-main-photo figcaption strong { margin-top: 5px; font-family: 'Playfair Display', serif; font-size: 24px; }
.public-hero-small-photo { position: absolute; z-index: 3; overflow: hidden; width: 145px; height: 145px; margin: 0; border-radius: 50%; border: 5px solid var(--bg-primary); box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(201,168,76,.22); }
.public-hero-small-photo img { width: 100%; height: 100%; object-fit: cover; }
.public-hero-photo-one { left: 12px; top: 52px; }
.public-hero-photo-two { right: 0; bottom: 8px; width: 122px; height: 122px; }
.public-hero-orbit { position: absolute; border: 1px solid rgba(201,168,76,.17); border-radius: 50%; pointer-events: none; }
.public-orbit-one { width: 430px; height: 430px; right: 5%; top: 7%; animation: publicOrbit 18s linear infinite; }
.public-orbit-two { width: 510px; height: 510px; right: -2%; top: -1%; border-style: dashed; animation: publicOrbit 28s linear infinite reverse; }
@keyframes publicOrbit { to { transform: rotate(360deg); } }
.public-section { width: min(1400px, calc(100% - 40px)); margin: 0 auto; padding: 82px 0; }
.public-section-heading { margin-bottom: 28px; }
.public-section-heading h2 { margin-top: 7px; font-family: 'Playfair Display', serif; font-size: clamp(30px, 4vw, 46px); }
.public-section-heading > p { max-width: 560px; margin-top: 9px; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.public-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.public-heading-row > p { text-align: right; }
.public-text-link { border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 800; cursor: pointer; }
.public-text-link span { margin-left: 7px; }
.public-topics-section { padding-top: 68px; padding-bottom: 36px; }
.public-topic-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.public-topic-card {
  min-height: 168px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  border: 1px solid rgba(201,168,76,.10);
  border-radius: 15px;
  background: linear-gradient(150deg, rgba(26,26,46,.84), rgba(14,14,22,.72));
  color: var(--text-primary);
  cursor: pointer;
  transition: .28s ease;
}
.public-topic-card:hover { transform: translateY(-5px); border-color: rgba(201,168,76,.35); box-shadow: 0 16px 42px rgba(0,0,0,.28), 0 0 25px rgba(201,168,76,.06); }
.public-topic-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 12px; background: rgba(201,168,76,.10); font-size: 20px; }
.public-topic-card strong { font-size: 13px; }
.public-topic-card small { margin-top: 9px; color: var(--text-secondary); font-size: 10px; line-height: 1.55; }
.public-article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.public-article-card {
  display: block;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(201,168,76,.11);
  border-radius: 18px;
  background: rgba(18,18,26,.82);
  cursor: pointer;
  transition: .3s ease;
}
.public-article-card:hover { transform: translateY(-6px); border-color: rgba(201,168,76,.34); box-shadow: 0 22px 52px rgba(0,0,0,.32); }
.public-article-card-image { position: relative; height: 220px; overflow: hidden; }
.public-article-card-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,15,.46), transparent 48%); }
.public-article-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.public-article-card:hover img { transform: scale(1.045); }
.public-article-card-content { padding: 20px; }
.public-article-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: 1.1px; }
.public-article-meta span:first-child { color: var(--accent); font-weight: 800; }
.public-article-card h3 { font-family: 'Playfair Display', serif; font-size: 21px; line-height: 1.25; }
.public-article-card p { margin-top: 10px; color: var(--text-secondary); font-size: 11px; line-height: 1.65; }
.public-article-read { display: inline-flex; margin-top: 17px; color: var(--accent-light); font-size: 10px; font-weight: 800; }
.public-species-section { padding-top: 64px; }
.public-species-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.public-species-card { display: block; border: 0; background: transparent; color: var(--text-primary); text-align: center; text-decoration: none; cursor: pointer; }
.public-species-image { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; border: 1px solid rgba(201,168,76,.22); background: var(--bg-card); box-shadow: 0 15px 34px rgba(0,0,0,.26); transition: .3s ease; }
.public-species-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform .45s ease; }
.public-species-card:hover .public-species-image { transform: translateY(-5px); border-color: rgba(201,168,76,.56); box-shadow: 0 20px 45px rgba(0,0,0,.36), 0 0 28px rgba(201,168,76,.10); }
.public-species-card:hover img { transform: scale(1.025); }
.public-species-card strong { display: block; margin-top: 14px; font-size: 12px; }
.public-species-card small { display: block; margin-top: 5px; color: var(--text-muted); font-size: 9px; font-style: italic; }
.public-features-section { width: 100%; padding-left: max(20px, calc((100% - 1400px)/2)); padding-right: max(20px, calc((100% - 1400px)/2)); }
.public-features-shell {
  position: relative;
  overflow: hidden;
  padding: 52px;
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 54px;
  align-items: center;
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 20%, rgba(78,205,196,.10), transparent 26%),
    radial-gradient(circle at 10% 100%, rgba(201,168,76,.12), transparent 34%),
    linear-gradient(145deg, rgba(22,22,35,.98), rgba(9,9,14,.96));
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
}
.public-features-copy h2 { margin-top: 9px; font-family: 'Playfair Display', serif; font-size: 40px; line-height: 1.12; }
.public-features-copy p { margin: 16px 0 24px; color: var(--text-secondary); font-size: 13px; line-height: 1.75; }
.public-feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.public-feature-list article { min-height: 92px; display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.03); }
.public-feature-list article > span { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: rgba(201,168,76,.10); font-size: 21px; }
.public-feature-list div { display: flex; flex-direction: column; }
.public-feature-list strong { font-size: 12px; }
.public-feature-list small { margin-top: 5px; color: var(--text-secondary); font-size: 9px; line-height: 1.5; }
.public-cta-section { width: min(1400px, calc(100% - 40px)); margin: 0 auto 82px; padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid rgba(201,168,76,.14); border-radius: 18px; background: rgba(201,168,76,.055); }
.public-cta-section > div { display: flex; align-items: center; gap: 16px; }
.public-cta-section img { width: 54px; height: 54px; object-fit: contain; }
.public-cta-section span { display: flex; flex-direction: column; }
.public-cta-section strong { font-family: 'Playfair Display', serif; font-size: 20px; }
.public-cta-section small { margin-top: 5px; color: var(--text-secondary); font-size: 10px; }
.public-footer { border-top: 1px solid rgba(201,168,76,.10); background: rgba(6,6,10,.90); }
.public-footer-inner { width: min(1400px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.public-footer-brand { display: flex; align-items: center; gap: 14px; }
.public-footer-brand img { width: 48px; height: 48px; }
.public-footer-brand strong { font-family: 'Playfair Display', serif; font-size: 16px; }
.public-footer-brand p { margin-top: 6px; color: var(--text-muted); font-size: 10px; }
.public-footer-links { display: flex; gap: 22px; }
.public-footer-links button:hover { color: var(--accent); }
.public-footer-bottom { width: min(1400px, calc(100% - 40px)); margin: 0 auto; padding: 17px 0 22px; border-top: 1px solid rgba(255,255,255,.05); color: var(--text-muted); font-size: 9px; }

/* Public content dialogs */
.public-content-modal { position: fixed; inset: 0; z-index: 1600; display: none; align-items: center; justify-content: center; padding: 26px; background: rgba(3,3,7,.84); backdrop-filter: blur(13px); }
.public-content-modal.active { display: flex; }
.public-content-dialog { position: relative; width: min(980px, 96vw); max-height: 91vh; overflow: auto; border: 1px solid rgba(201,168,76,.20); border-radius: 22px; background: linear-gradient(145deg, #171725, #0d0d14); box-shadow: 0 35px 100px rgba(0,0,0,.65), 0 0 42px rgba(201,168,76,.08); }
.public-content-close { position: sticky; top: 16px; float: right; z-index: 10; width: 38px; height: 38px; margin: 16px 16px -54px 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(7,7,12,.78); color: #fff; font-size: 25px; cursor: pointer; }
.public-modal-hero { position: relative; min-height: 300px; display: flex; align-items: end; padding: 38px; overflow: hidden; }
.public-modal-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #12121c 2%, rgba(10,10,15,.22) 70%); }
.public-modal-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.public-modal-hero-copy { position: relative; z-index: 2; max-width: 720px; }
.public-modal-hero-copy span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }
.public-modal-hero-copy h2 { margin-top: 8px; font-family: 'Playfair Display', serif; font-size: 38px; line-height: 1.08; }
.public-modal-hero-copy p { margin-top: 11px; color: #d0d0dc; font-size: 12px; line-height: 1.7; }
.public-modal-body { padding: 28px 38px 42px; }
.public-modal-section { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.public-modal-section:last-child { border-bottom: 0; }
.public-modal-section h3 { margin-bottom: 12px; color: var(--accent-light); font-family: 'Playfair Display', serif; font-size: 21px; }
.public-modal-section p,
.public-modal-section li { color: var(--text-secondary); font-size: 12px; line-height: 1.75; }
.public-modal-section ul { padding-left: 21px; }
.public-modal-section li + li { margin-top: 7px; }
.public-species-modal-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; }
.public-species-modal-gallery img { width: 100%; height: 190px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(201,168,76,.12); }

/* Dedicated authentication page */
.auth-container { display: none; overflow-y: auto; padding: 34px 20px; }
.auth-page-shell { width: min(980px, 100%); margin: auto; }
.auth-back-button { margin-bottom: 14px; border: 0; background: transparent; color: var(--text-secondary); font-size: 11px; font-weight: 700; cursor: pointer; }
.auth-back-button:hover { color: var(--accent); }
.auth-wrapper.auth-wrapper-page { width: 100%; max-width: none; align-items: stretch; padding: 0; overflow: hidden; }
.auth-wrapper-page .auth-forms { padding: 38px; }
.auth-side-panel { flex: 1.05; position: relative; overflow: hidden; padding: 42px; background: linear-gradient(145deg, rgba(201,168,76,.10), rgba(78,205,196,.04)); border-left: 1px solid rgba(201,168,76,.10); }
.auth-side-panel h2 { margin-top: 10px; font-family: 'Playfair Display', serif; font-size: 34px; line-height: 1.12; }
.auth-side-panel > p { margin-top: 14px; color: var(--text-secondary); font-size: 12px; line-height: 1.7; }
.auth-benefit-list { display: grid; gap: 10px; margin-top: 22px; }
.auth-benefit-list div { display: flex; align-items: center; gap: 10px; color: var(--text-primary); font-size: 11px; }
.auth-benefit-list span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(201,168,76,.13); color: var(--accent-light); }
.auth-side-photo { height: 180px; margin-top: 28px; overflow: hidden; border-radius: 16px; border: 1px solid rgba(201,168,76,.18); }
.auth-side-photo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1120px) {
  .public-header-inner { grid-template-columns: auto 1fr auto; gap: 14px; }
  .public-nav button { padding-inline: 8px; }
  .public-hero-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
  .public-topic-grid { grid-template-columns: repeat(3, 1fr); }
  .public-species-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .public-nav { display: none; }
  .public-header-inner { grid-template-columns: 1fr auto; }
  .public-hero-inner { grid-template-columns: 1fr; padding-top: 56px; }
  .public-hero-gallery { min-height: 470px; }
  .public-article-grid { grid-template-columns: repeat(2, 1fr); }
  .public-features-shell { grid-template-columns: 1fr; padding: 34px; }
  .auth-side-panel { display: none; }
}
@media (max-width: 620px) {
  .public-header-inner,
  .public-section,
  .public-cta-section,
  .public-footer-inner,
  .public-footer-bottom,
  .public-hero-inner { width: min(100% - 24px, 1400px); }
  .public-brand strong,
  .public-brand small { font-size: 14px; }
  .public-login-button { min-width: 90px; padding-inline: 11px; }
  .public-hero-inner { min-height: auto; padding: 46px 0 54px; }
  .public-hero-copy h1 { font-size: 46px; letter-spacing: -1.4px; }
  .public-hero-copy > p { font-size: 13px; }
  .public-hero-metrics { gap: 12px; }
  .public-hero-metrics div { padding-left: 8px; }
  .public-hero-metrics strong { font-size: 18px; }
  .public-hero-metrics span { font-size: 7px; }
  .public-hero-gallery { min-height: 355px; }
  .public-hero-main-photo { inset: 20px 9px 18px 45px; }
  .public-hero-small-photo { width: 95px; height: 95px; border-width: 3px; }
  .public-hero-photo-one { left: 0; top: 44px; }
  .public-hero-photo-two { width: 84px; height: 84px; }
  .public-orbit-one { width: 300px; height: 300px; }
  .public-orbit-two { width: 350px; height: 350px; }
  .public-section { padding: 58px 0; }
  .public-topic-grid,
  .public-article-grid,
  .public-species-grid,
  .public-feature-list { grid-template-columns: 1fr 1fr; }
  .public-topic-card { min-height: 150px; }
  .public-heading-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .public-heading-row > p { text-align: left; }
  .public-article-card-image { height: 165px; }
  .public-species-grid { gap: 14px; }
  .public-features-shell { padding: 26px 20px; }
  .public-features-copy h2 { font-size: 31px; }
  .public-cta-section { flex-direction: column; align-items: stretch; }
  .public-cta-section .public-primary-action { width: 100%; }
  .public-footer-inner { align-items: flex-start; flex-direction: column; }
  .public-footer-links { flex-wrap: wrap; }
  .public-modal-hero { min-height: 245px; padding: 26px 22px; }
  .public-modal-hero-copy h2 { font-size: 29px; }
  .public-modal-body { padding: 20px 22px 30px; }
  .public-species-modal-gallery { grid-template-columns: 1fr; }
  .public-species-modal-gallery img { height: 210px; }
  .auth-wrapper-page .auth-forms { padding: 28px 20px; }
}
@media (max-width: 410px) {
  .public-topic-grid,
  .public-article-grid,
  .public-feature-list { grid-template-columns: 1fr; }
}


/* Public species encyclopedia: full catalogue while preserving the existing visual language */
.public-species-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -8px 0 28px;
  padding: 12px;
  border: 1px solid rgba(201,168,76,.14);
  border-radius: 16px;
  background: rgba(10,15,20,.64);
  backdrop-filter: blur(12px);
}
.public-species-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.public-species-filter {
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 999px;
  padding: 9px 15px;
  background: rgba(255,255,255,.025);
  color: var(--text-muted);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: .2s ease;
}
.public-species-filter:hover,
.public-species-filter.active {
  color: var(--text-primary);
  border-color: rgba(201,168,76,.58);
  background: rgba(201,168,76,.10);
  box-shadow: 0 0 22px rgba(201,168,76,.08);
}
.public-species-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: min(310px, 100%);
  padding: 8px 12px;
  border: 1px solid rgba(201,168,76,.16);
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  color: var(--text-muted);
}
.public-species-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 10px;
}
.public-species-search input::placeholder { color: var(--text-muted); }
.public-species-image { display: block; }
.public-species-kind,
.public-species-beginner {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
}
.public-species-kind {
  left: 10px;
  bottom: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(5,10,14,.72);
  color: #fff;
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.public-species-beginner {
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(201,168,76,.88);
  color: #111;
  font-size: 12px;
  box-shadow: 0 0 20px rgba(201,168,76,.24);
}
.public-species-difficulty {
  display: inline-block;
  margin-top: 7px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(34,240,215,.06);
  border: 1px solid rgba(34,240,215,.12);
  color: #73d9cd;
  font-size: 8px;
}
.public-species-empty {
  grid-column: 1 / -1;
  padding: 38px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed rgba(201,168,76,.18);
  border-radius: 16px;
}
.public-species-latin {
  margin-top: -8px !important;
  font-style: italic;
  color: #b9c6ca !important;
}
.public-species-article-body .public-modal-section ul { margin: 0; padding-left: 19px; }
.public-species-article-body .public-modal-section li { margin: 0 0 9px; line-height: 1.68; }
.public-species-source-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.public-species-source a {
  display: inline-flex;
  margin-top: 10px;
  color: #dfc46f;
  text-decoration: none;
  border-bottom: 1px solid rgba(223,196,111,.34);
}
.public-species-source small { display: block; margin-top: 12px; color: var(--text-muted); }
.public-species-warning { border-color: rgba(34,240,215,.18) !important; background: rgba(34,240,215,.035) !important; }

@media (max-width: 760px) {
  .public-species-toolbar { align-items: stretch; flex-direction: column; }
  .public-species-search { min-width: 0; }
}


/* Popular species: wide photo cards instead of circular crops */
.public-species-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.public-species-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(201,168,76,.16);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(20,27,34,.98), rgba(10,15,20,.98));
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease;
}
.public-species-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201,168,76,.48);
  box-shadow: 0 22px 46px rgba(0,0,0,.34), 0 0 24px rgba(201,168,76,.07);
}
.public-species-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex: 0 0 auto;
  border: 0;
  border-bottom: 1px solid rgba(201,168,76,.12);
  border-radius: 0;
  background: #0b1015;
  box-shadow: none;
  transition: none;
}
.public-species-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: none;
  transition: filter .28s ease;
}
.public-species-card:hover .public-species-image {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}
.public-species-card:hover img {
  transform: none;
  filter: brightness(1.045) saturate(1.025);
}
.public-species-card > strong {
  display: block;
  margin: 16px 16px 0;
  font-size: 14px;
  line-height: 1.35;
}
.public-species-card > small {
  display: block;
  margin: 6px 16px 0;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
  font-style: italic;
}
.public-species-card > .public-species-difficulty {
  align-self: flex-start;
  margin: 11px 16px 16px;
}
.public-species-kind {
  left: 12px;
  bottom: 12px;
}
.public-species-beginner {
  top: 12px;
  right: 12px;
}

@media (max-width: 1120px) {
  .public-species-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .public-species-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .public-species-grid { grid-template-columns: 1fr; }
  .public-species-card > strong { font-size: 15px; }
}


/* Full-bleed species card photos: no letterboxing, no nested frames */
.public-species-image {
  background: transparent !important;
}
.public-species-image img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
}


/* Full-length encyclopedia articles in the public “Popular species” section */
.public-species-article-body {
  max-width: 980px;
  margin: 0 auto;
}
.public-species-article-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 20px;
}
.public-species-article-meta > div {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(201,168,76,.14);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}
.public-species-article-meta span {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 14px;
}
.public-species-article-meta strong {
  display: block;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.45;
  font-weight: 700;
}
.public-species-long-section {
  padding: 28px 0;
}
.public-species-long-section h3 {
  margin-bottom: 16px;
  font-size: 23px;
}
.public-species-long-section p {
  margin: 0;
  color: #c8c8d2;
  font-size: 13px;
  line-height: 1.88;
}
.public-species-long-section p + p {
  margin-top: 14px;
}
.public-species-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.public-species-fact {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 9px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(78,205,196,.14);
  border-radius: 13px;
  background: rgba(78,205,196,.035);
}
.public-species-fact span {
  color: var(--accent);
}
.public-species-fact p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.65;
}
.public-species-source-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.public-species-source-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(201,168,76,.14);
  border-radius: 11px;
  background: rgba(255,255,255,.02);
  line-height: 1.45;
}
@media (max-width: 760px) {
  .public-species-article-meta {
    grid-template-columns: 1fr 1fr;
  }
  .public-species-fact-grid,
  .public-species-source-links {
    grid-template-columns: 1fr;
  }
  .public-species-long-section p {
    font-size: 12px;
    line-height: 1.78;
  }
}


/* Central sources and rights page */
.public-nav-link { display:inline-flex; align-items:center; color:var(--text-secondary); text-decoration:none; font-size:11px; font-weight:700; transition:.2s ease; }
.public-nav-link:hover, .public-nav-link.active { color:var(--accent-light); }
.public-footer a { color:inherit; text-decoration:none; }
.public-footer a:hover { color:var(--accent-light); }
.public-legal-single-link { display:flex; justify-content:flex-end; margin:12px 0 0; }
.public-legal-single-link a { color:var(--accent-light); text-decoration:none; font-size:10px; font-weight:800; }
.legal-page-body { min-height:100vh; background:var(--bg-primary); color:var(--text-primary); }
.legal-header { position:sticky; top:0; }
.legal-back-button { text-decoration:none; }
.legal-main { position:relative; z-index:1; width:min(1180px, calc(100% - 40px)); margin:0 auto; padding:82px 0 90px; }
.legal-hero { padding:48px; border:1px solid rgba(201,168,76,.18); border-radius:26px; background:radial-gradient(circle at 90% 10%, rgba(78,205,196,.10), transparent 28%), linear-gradient(145deg, rgba(19,27,34,.96), rgba(9,14,19,.98)); box-shadow:0 30px 80px rgba(0,0,0,.28); }
.legal-hero h1 { margin:12px 0 16px; font-family:'Playfair Display',serif; font-size:clamp(38px,5vw,68px); line-height:1.03; }
.legal-hero>p { max-width:850px; color:var(--text-secondary); font-size:14px; line-height:1.8; }
.legal-summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:32px; }
.legal-summary-grid div { padding:18px; border:1px solid rgba(201,168,76,.14); border-radius:16px; background:rgba(255,255,255,.025); }
.legal-summary-grid strong { display:block; color:var(--accent-light); font-size:27px; }
.legal-summary-grid span { display:block; margin-top:5px; color:var(--text-muted); font-size:10px; line-height:1.45; }
.legal-section { padding-top:64px; }
.legal-section-heading { display:flex; align-items:flex-start; gap:18px; margin-bottom:22px; }
.legal-section-heading>span { display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(201,168,76,.26); border-radius:50%; color:var(--accent-light); font-size:10px; }
.legal-section-heading h2 { font-family:'Playfair Display',serif; font-size:30px; }
.legal-section-heading p { margin-top:5px; color:var(--text-muted); font-size:11px; }
.legal-copy-card { padding:26px; border:1px solid rgba(201,168,76,.14); border-radius:18px; background:rgba(15,21,27,.88); }
.legal-copy-card p { color:var(--text-secondary); font-size:12px; line-height:1.85; }
.legal-copy-card p+p { margin-top:15px; }
.legal-copy-card h3 { margin-bottom:12px; color:var(--accent-light); font-size:17px; }
.legal-copy-card a { display:inline-flex; margin-top:16px; color:var(--accent-light); text-decoration:none; font-size:10px; font-weight:800; }
.legal-source-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.legal-source-card { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:72px; padding:17px; border:1px solid rgba(201,168,76,.14); border-radius:14px; background:rgba(15,21,27,.78); color:var(--text-secondary); text-decoration:none; font-size:10px; line-height:1.5; transition:.2s ease; }
.legal-source-card:hover { border-color:rgba(201,168,76,.45); color:var(--text-primary); transform:translateY(-2px); }
.legal-source-card b { color:var(--accent-light); }
.legal-master-details { margin-top:18px; border:1px solid rgba(201,168,76,.14); border-radius:16px; background:rgba(15,21,27,.72); }
.legal-master-details>summary { cursor:pointer; padding:18px 20px; color:var(--accent-light); font-size:11px; font-weight:800; }
.legal-details-list { padding:0 16px 16px; }
.legal-details { border-top:1px solid rgba(255,255,255,.055); }
.legal-details summary { display:flex; gap:12px; align-items:baseline; cursor:pointer; padding:14px 4px; }
.legal-details summary strong { font-size:11px; }
.legal-details summary em { color:var(--text-muted); font-size:9px; }
.legal-details ul { margin:0 0 15px 22px; }
.legal-details li { margin:8px 0; }
.legal-details a { color:var(--text-secondary); font-size:10px; text-decoration:none; }
.legal-details a:hover { color:var(--accent-light); }
.legal-license-note { margin-bottom:16px; }
.legal-photo-list { display:grid; gap:10px; }
.legal-photo-row { display:grid; grid-template-columns:minmax(190px,.65fr) minmax(320px,1.6fr) auto; gap:20px; align-items:center; padding:18px 20px; border:1px solid rgba(201,168,76,.13); border-radius:15px; background:rgba(15,21,27,.82); }
.legal-photo-row strong,.legal-photo-row small { display:block; }
.legal-photo-row strong { font-size:12px; }
.legal-photo-row small { margin-top:4px; color:var(--text-muted); font-size:9px; font-style:italic; }
.legal-photo-row p { color:var(--text-secondary); font-size:10px; line-height:1.6; }
.legal-photo-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.legal-photo-links a { color:var(--accent-light); font-size:9px; font-weight:800; text-decoration:none; }
.legal-badge { padding:7px 10px; border-radius:999px; font-size:8px; font-weight:800; white-space:nowrap; }
.legal-badge.generated { color:#57dfcc; border:1px solid rgba(87,223,204,.25); background:rgba(87,223,204,.07); }
.legal-grid-two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.legal-footer { margin-top:0; }
@media (max-width:900px) { .legal-summary-grid{grid-template-columns:1fr 1fr}.legal-source-grid{grid-template-columns:1fr 1fr}.legal-photo-row{grid-template-columns:1fr}.legal-photo-links{justify-content:flex-start}.legal-grid-two{grid-template-columns:1fr} }
@media (max-width:620px) { .legal-main{width:min(100% - 24px,1180px);padding-top:40px}.legal-hero{padding:28px 20px}.legal-summary-grid,.legal-source-grid{grid-template-columns:1fr}.legal-section{padding-top:46px}.legal-section-heading h2{font-size:25px}.legal-photo-row{padding:16px}.legal-back-button{display:none} }


/* Compact grouped layout for legal sources and photo licences */
.legal-source-intro { margin-bottom: 16px; }
.legal-source-grid-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.legal-source-card-compact { min-height: 132px; align-items: flex-start; }
.legal-source-card-compact > div { min-width: 0; }
.legal-source-card-compact strong {
  display: block;
  margin-top: 9px;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.3;
}
.legal-source-card-compact small {
  display: block;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.55;
}
.legal-source-tag {
  display: inline-flex;
  padding: 4px 7px;
  border: 1px solid rgba(87,223,204,.22);
  border-radius: 999px;
  background: rgba(87,223,204,.06);
  color: #57dfcc;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.legal-scope-details,
.legal-generated-group,
.legal-license-group {
  border: 1px solid rgba(201,168,76,.14);
  border-radius: 16px;
  background: rgba(15,21,27,.76);
}
.legal-scope-details { margin-top: 16px; }
.legal-scope-details > summary,
.legal-generated-group > summary,
.legal-license-group > summary {
  list-style: none;
  cursor: pointer;
}
.legal-scope-details > summary::-webkit-details-marker,
.legal-generated-group > summary::-webkit-details-marker,
.legal-license-group > summary::-webkit-details-marker { display: none; }
.legal-scope-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 800;
}
.legal-scope-details > summary span {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 25px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(201,168,76,.09);
  color: var(--accent-light);
  font-size: 9px;
}
.legal-scope-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding: 0 20px 22px;
}
.legal-scope-columns h3 {
  margin: 0 0 11px;
  color: var(--text-primary);
  font-size: 12px;
}
.legal-chip-list { display: flex; flex-wrap: wrap; gap: 7px; }
.legal-chip-list span {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: var(--text-secondary);
  font-size: 8px;
  line-height: 1.25;
}
.legal-generated-group { margin-bottom: 16px; }
.legal-generated-group > summary,
.legal-license-group > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}
.legal-generated-group > summary span,
.legal-license-group > summary span {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
}
.legal-generated-group > summary small,
.legal-license-group > summary small {
  color: var(--text-muted);
  font-size: 8px;
}
.legal-generated-body {
  padding: 0 20px 22px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.legal-generated-body p {
  margin: 16px 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.65;
}
.legal-license-groups { display: grid; gap: 10px; }
.legal-license-group > summary a {
  color: var(--accent-light);
  font-size: 8px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.legal-license-group-body {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.legal-photo-row-compact {
  margin-top: 8px;
  padding: 15px 16px;
  border-radius: 12px;
  background: rgba(9,14,18,.7);
}
.legal-photo-row-compact p b { color: var(--text-primary); }
.legal-photo-row-compact .legal-photo-links { min-width: 120px; }

@media (max-width: 980px) {
  .legal-source-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-scope-columns { grid-template-columns: 1fr; }
  .legal-generated-group > summary,
  .legal-license-group > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .legal-license-group > summary a { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .legal-source-grid-compact { grid-template-columns: 1fr; }
  .legal-source-card-compact { min-height: 0; }
  .legal-generated-group > summary,
  .legal-license-group > summary { grid-template-columns: 1fr; gap: 7px; }
  .legal-photo-row-compact {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .legal-photo-row-compact .legal-photo-links { justify-content: flex-start; }
}


/* Minimal legal page */
.legal-contact-compact { margin-top: 64px; }
.legal-contact-compact p { margin: 0; }
.legal-license-note { padding: 18px 20px; }
.legal-license-note p { margin: 0; }


/* v22: три лицензированные фотографии в карточках ухода */
.care-photo-item {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
.care-photo-item::after { display: none; }
.care-photo-frame {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 220px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #090d12;
}
.care-photo-frame img,
.care-photo-item img {
  width: 100%;
  height: 100%;
  max-height: 330px;
  object-fit: contain;
  object-position: center center;
  transform: none !important;
  filter: saturate(1.04) contrast(1.02);
}
.care-photo-credit {
  display: grid;
  gap: 5px;
  min-height: 86px;
  padding: 11px 13px 13px;
  border-top: 1px solid rgba(78,205,196,.12);
  background: rgba(7,12,17,.96);
}
.care-photo-credit small {
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.care-photo-credit strong {
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.45;
  font-weight: 600;
}
.care-photo-credit div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.care-photo-credit a,
.care-photo-credit span {
  color: var(--accent-light);
  font-size: 8px;
  font-weight: 800;
  text-decoration: none;
}
.care-photo-credit a:hover { text-decoration: underline; }
@media (max-width: 700px) {
  .care-photo-frame { min-height: 210px; }
  .care-photo-frame img,
  .care-photo-item img { height: 100%; max-height: 360px; }
}


/* v23: local full-bleed care gallery */
.care-photo-grid {
  align-items: stretch;
}
.care-photo-item {
  min-height: 0 !important;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(78,205,196,.16) !important;
  border-radius: 16px;
  background: transparent !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.care-photo-frame {
  display: block !important;
  width: 100%;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden;
  background: transparent !important;
}
.care-photo-frame img,
.care-photo-item img {
  display: block;
  width: 100%;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: 16 / 9;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}
.care-photo-credit { display: none !important; }
@media (max-width:700px) {
  .care-photo-frame { min-height:0 !important; }
  .care-photo-frame img,
  .care-photo-item img { height:100% !important; max-height:none !important; }
}

/* =========================================================
   Stage 1: collection dashboard
   ========================================================= */
.dashboard-header-stage1 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.dashboard-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.dashboard-scope-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: var(--border-subtle);
  border-radius: 12px;
  background: rgba(0,0,0,.22);
}
.dashboard-scope-btn {
  border: 0;
  border-radius: 9px;
  padding: 9px 12px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: .2s ease;
}
.dashboard-scope-btn:hover { color: var(--accent-light); }
.dashboard-scope-btn.active {
  background: rgba(201,168,76,.16);
  color: var(--accent-light);
  box-shadow: inset 0 0 0 1px rgba(201,168,76,.18);
}
.dashboard-summary-grid .stat-card-danger {
  border-color: rgba(255,107,107,.3);
  background: linear-gradient(145deg, rgba(255,107,107,.07), var(--bg-card));
}
.dashboard-summary-grid .stat-card-danger .stat-value { color: var(--danger); }
.dashboard-panels-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
  margin-bottom: 26px;
}
.dashboard-panel {
  min-width: 0;
  padding: 17px;
  border: var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}
.dashboard-panel-attention { border-color: rgba(255,107,107,.18); }
.dashboard-panel .section-header { margin-bottom: 12px; }
.dashboard-panel-count {
  display: inline-grid;
  min-width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: rgba(201,168,76,.12);
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 800;
}
.dashboard-event-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,.52) rgba(255,255,255,.045);
}
.dashboard-event-list::-webkit-scrollbar {
  width: 8px;
}
.dashboard-event-list::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255,255,255,.045);
}
.dashboard-event-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(201,168,76,.52);
  background-clip: padding-box;
}
.dashboard-event-list::-webkit-scrollbar-thumb:hover {
  background: rgba(201,168,76,.72);
  background-clip: padding-box;
}
.dashboard-event {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 11px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.035);
}
.dashboard-event-feeding,
.dashboard-event-feeding_missing { border-left: 3px solid var(--warning); }
.dashboard-event-weighing,
.dashboard-event-weighing_missing { border-left: 3px solid var(--info); }
.dashboard-event-weight_loss,
.dashboard-event-medical { border-left: 3px solid var(--danger); }
.dashboard-event-molting { border-left: 3px solid var(--success); }
.dashboard-event-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
}
.dashboard-event-copy { min-width: 0; }
.dashboard-event-copy strong,
.dashboard-event-copy span { display: block; }
.dashboard-event-copy strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-event-copy span {
  margin-top: 3px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-event-action,
.dashboard-settings-btn {
  border: 1px solid rgba(201,168,76,.12);
  border-radius: 9px;
  background: rgba(201,168,76,.06);
  color: var(--accent-light);
  cursor: pointer;
  transition: .2s ease;
}
.dashboard-event-action { width: 30px; height: 30px; }
.dashboard-event-action:hover,
.dashboard-settings-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(201,168,76,.35);
  background: rgba(201,168,76,.13);
}
.dashboard-empty {
  min-height: 76px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 14px;
  text-align: center;
  color: var(--text-muted);
}
.dashboard-empty span { color: var(--success); font-size: 18px; }
.dashboard-empty p { font-size: 11px; line-height: 1.45; }
.dashboard-animals-heading {
  align-items: flex-end;
  gap: 16px;
  margin: 4px 0 8px;
  flex-wrap: wrap;
}
.dashboard-animals-title-block {
  min-width: 210px;
  flex: 0 1 auto;
}
.dashboard-animals-heading p { margin-top: 4px; color: var(--text-muted); font-size: 11px; }
.dashboard-animal-controls {
  min-width: min(100%, 680px);
  display: grid;
  grid-template-columns: minmax(210px, 1.3fr) minmax(180px, .9fr) minmax(220px, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-left: auto;
}
.dashboard-animal-search {
  height: 42px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(201,168,76,.13);
  border-radius: 11px;
  background: rgba(0,0,0,.19);
  color: var(--text-muted);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.dashboard-animal-search:focus-within {
  border-color: rgba(201,168,76,.42);
  background: rgba(201,168,76,.055);
  box-shadow: 0 0 0 3px rgba(201,168,76,.055);
}
.dashboard-animal-search input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 11px;
}
.dashboard-animal-search input::placeholder { color: var(--text-muted); }
.dashboard-animal-search input::-webkit-search-cancel-button { cursor: pointer; }
.dashboard-animal-select-wrap {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.dashboard-animal-select-wrap > span {
  padding-left: 2px;
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dashboard-animal-select-wrap select {
  width: 100%;
  height: 42px;
  min-width: 0;
  padding: 0 34px 0 11px;
  border: 1px solid rgba(201,168,76,.13);
  border-radius: 11px;
  background-color: rgba(0,0,0,.19);
  color: var(--text-primary);
  font-size: 10px;
  cursor: pointer;
}
.dashboard-animal-select-wrap select:focus {
  outline: 0;
  border-color: rgba(201,168,76,.42);
  box-shadow: 0 0 0 3px rgba(201,168,76,.055);
}
.dashboard-animal-filter-reset {
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(201,168,76,.14);
  border-radius: 11px;
  background: rgba(201,168,76,.055);
  color: var(--accent-light);
  cursor: pointer;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
.dashboard-animal-filter-reset:hover {
  border-color: rgba(201,168,76,.36);
  background: rgba(201,168,76,.11);
}
.dashboard-animal-filter-reset[hidden] { display: none; }
.dashboard-animal-filter-summary {
  min-height: 16px;
  margin: 0 0 7px;
  color: var(--text-muted);
  font-size: 9px;
  text-align: right;
}
.dashboard-animal-filter-summary[hidden] { visibility: hidden; }
.dashboard-no-search-results {
  padding: 24px;
  border: 1px dashed rgba(201,168,76,.14);
  border-radius: var(--radius);
  background: rgba(255,255,255,.018);
}
.dashboard-no-search-results .dashboard-empty { min-height: auto; }
.dashboard-animal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.dashboard-animal-card {
  min-width: 0;
  padding: 18px;
  border: var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}
.dashboard-animal-card.has-warning { border-color: rgba(255,107,107,.28); }
.dashboard-animal-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 36px;
  gap: 12px;
  align-items: center;
}
.dashboard-animal-avatar {
  width: 54px;
  height: 54px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(201,168,76,.18);
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  cursor: pointer;
}
.dashboard-animal-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dashboard-animal-title { min-width: 0; }
.dashboard-animal-title h3 {
  overflow: hidden;
  color: var(--accent-light);
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-animal-title p {
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-settings-btn { width: 36px; height: 36px; }
.dashboard-due-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.dashboard-due-badge {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  border: 1px solid transparent;
}
.dashboard-due-badge b { font-weight: 800; }
.dashboard-due-badge.success { color: var(--success); background: rgba(78,205,196,.08); border-color: rgba(78,205,196,.15); }
.dashboard-due-badge.warning { color: var(--warning); background: rgba(255,217,61,.08); border-color: rgba(255,217,61,.15); }
.dashboard-due-badge.danger { color: var(--danger); background: rgba(255,107,107,.08); border-color: rgba(255,107,107,.18); }
.dashboard-due-badge.muted { color: var(--text-muted); background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.05); }
.dashboard-weight-warning {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--danger);
  background: rgba(255,107,107,.07);
  font-size: 10px;
  font-weight: 700;
}
.dashboard-animal-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.dashboard-animal-metrics div {
  min-width: 0;
  padding: 9px;
  border-radius: 10px;
  background: rgba(0,0,0,.18);
}
.dashboard-animal-metrics span,
.dashboard-animal-metrics strong { display: block; }
.dashboard-animal-metrics span {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 8px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.dashboard-animal-metrics strong {
  margin-top: 5px;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-quick-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
}
.dashboard-quick-actions button {
  min-width: 0;
  min-height: 47px;
  padding: 7px 4px;
  border: 1px solid rgba(201,168,76,.09);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 15px;
  transition: .2s ease;
}
.dashboard-quick-actions button span {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-quick-actions button:hover {
  border-color: rgba(201,168,76,.3);
  background: rgba(201,168,76,.08);
  color: var(--accent-light);
}
.dashboard-activity-panel { margin-top: 2px; }
.dashboard-activity-list { display: flex; flex-direction: column; }
.dashboard-activity-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(255,255,255,.045);
}
.dashboard-activity-item:last-child { border-bottom: 0; }
.dashboard-activity-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--text-secondary);
  background: rgba(255,255,255,.04);
}
.dashboard-activity-icon.created { color: var(--success); }
.dashboard-activity-icon.updated { color: var(--warning); }
.dashboard-activity-icon.deleted { color: var(--danger); }
.dashboard-activity-item div { min-width: 0; }
.dashboard-activity-item strong,
.dashboard-activity-item span { display: block; }
.dashboard-activity-item strong { color: var(--text-primary); font-size: 11px; }
.dashboard-activity-item span { margin-top: 2px; color: var(--text-muted); font-size: 9px; }
.dashboard-activity-item time { color: var(--text-muted); font-size: 9px; white-space: nowrap; }
.dashboard-no-animals { grid-column: 1 / -1; text-align: center; }
.settings-modal .modal-header p { margin-top: 4px; color: var(--text-muted); font-size: 10px; }
.settings-hint {
  margin-bottom: 16px;
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(108,143,255,.07);
  border: 1px solid rgba(108,143,255,.12);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.5;
}
.modal-actions-row { display: flex; gap: 9px; flex-wrap: wrap; }

@media (max-width: 1240px) {
  .dashboard-animals-title-block { flex: 1 1 100%; }
  .dashboard-animal-controls {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
}
@media (max-width: 1100px) {
  .dashboard-panels-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-panel:last-child { grid-column: 1 / -1; }
  .dashboard-animal-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .dashboard-header-stage1 { flex-direction: column; }
  .dashboard-animal-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-animal-search { grid-column: 1 / -1; }
  .dashboard-animal-filter-reset { grid-column: 1 / -1; }
  .dashboard-animal-filter-summary { text-align: left; }
  .dashboard-header-actions { width: 100%; justify-content: flex-start; }
  .dashboard-panels-grid { grid-template-columns: 1fr; }
  .dashboard-panel:last-child { grid-column: auto; }
  .dashboard-animal-metrics { grid-template-columns: 1fr 1fr; }
  .dashboard-quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-activity-item { grid-template-columns: 30px minmax(0, 1fr); }
  .dashboard-activity-item time { grid-column: 2; }
}
@media (max-width: 420px) {
  .dashboard-scope-switch { width: 100%; }
  .dashboard-animal-controls { grid-template-columns: 1fr; }
  .dashboard-animal-search,
  .dashboard-animal-filter-reset { grid-column: auto; }
  .dashboard-scope-btn { flex: 1; padding-inline: 8px; }
  .dashboard-header-actions .btn { width: 100%; }
  .dashboard-animal-card { padding: 14px; }
  .dashboard-animal-head { grid-template-columns: 48px minmax(0, 1fr) 34px; }
  .dashboard-animal-avatar { width: 48px; height: 48px; }
  .dashboard-due-row { flex-direction: column; align-items: flex-start; }
}

/* Stage 1 responsive guard against the older four-column stats rule */
.dashboard-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 760px) {
  .dashboard-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   ЭТАП 2: расширенный журнал кормлений
   ========================================================= */
.feeding-page-header {
  align-items: flex-start;
  gap: 18px;
}
.section-subtitle {
  margin-top: 7px;
  max-width: 760px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}
.feeding-summary {
  grid-template-columns: repeat(6, minmax(132px, 1fr));
  margin-bottom: 18px;
}
.feeding-stat-card {
  min-width: 0;
  padding: 15px 16px;
  border: var(--border-subtle);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  box-shadow: 0 13px 34px rgba(0,0,0,.14);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feeding-stat-card span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.feeding-stat-card strong {
  color: var(--text-main);
  font-size: 20px;
  line-height: 1.12;
}
.feeding-stat-card small {
  color: var(--text-muted);
  font-size: 10px;
}
.feeding-form-card {
  margin-bottom: 18px;
}
.feeding-form-row-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.feeding-form-row-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feeding-form-card textarea {
  width: 100%;
  resize: vertical;
  min-height: 106px;
}
.field-hint {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.4;
}
.feeding-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.feeding-form-actions .btn:disabled {
  opacity: .58;
  cursor: wait;
  transform: none;
}
.feeding-photo-preview {
  margin-top: 10px;
  padding: 10px;
  border: var(--border-subtle);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  align-items: center;
  gap: 12px;
}
.feeding-photo-preview img {
  width: 112px;
  height: 84px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(255,255,255,.04);
}
.feeding-filter-card {
  margin-bottom: 18px;
  padding: 16px;
  border: var(--border-subtle);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.feeding-filter-card .section-header {
  margin-bottom: 10px;
}
.feeding-filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0;
}
.feeding-filter-button .btn {
  width: 100%;
}
.feeding-filter-result {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 11px;
}
.feeding-table-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.feeding-table-extended {
  min-width: 1320px;
}
.feeding-table-extended th,
.feeding-table-extended td {
  vertical-align: top;
}
.feeding-cell-sub {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 10px;
}
.feeding-next-date {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(201,168,76,.22);
  background: rgba(201,168,76,.08);
  color: var(--gold-light);
  white-space: nowrap;
}
.feeding-notes-cell {
  min-width: 220px;
  max-width: 320px;
  white-space: normal;
  line-height: 1.45;
}
.feeding-actions-cell {
  min-width: 118px;
  white-space: nowrap;
}
.feeding-photo-button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: var(--border-subtle);
  background: rgba(255,255,255,.035);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.feeding-photo-button:hover {
  transform: translateY(-2px);
  background: rgba(201,168,76,.1);
}

@media (max-width: 1180px) {
  .feeding-summary { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
}

@media (max-width: 768px) {
  .feeding-page-header { flex-direction: column; }
  .feeding-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feeding-form-row-3,
  .feeding-form-row-2,
  .feeding-filter-grid { grid-template-columns: 1fr; }
  .feeding-form-actions .btn { flex: 1 1 100%; }
  .feeding-photo-preview { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 420px) {
  .feeding-summary { grid-template-columns: 1fr; }
  .feeding-stat-card { padding: 13px 14px; }
}

/* Stage 2 cleanup */
.feeding-table-clean { min-width: 860px; }
.section-count { color: var(--text-muted); font-size: .85em; font-weight: 600; }
.health-treatment { white-space: pre-line; }
@media (max-width: 720px) {
  .feeding-form-row-2, .feeding-form-row-3 { grid-template-columns: 1fr !important; }
  .feeding-table-clean { min-width: 760px; }
}

/* Stage 3: molting cycles and growth analytics */
.header-nav { overflow-x: auto; scrollbar-width: thin; }
.header-nav .nav-btn { flex: 0 0 auto; }

.growth-summary,
.molting-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.growth-stat-card,
.molting-stat-card {
  min-width: 0;
  padding: 16px;
  background: var(--bg-card);
  border: var(--border-subtle);
  border-radius: var(--radius);
}
.growth-stat-card span,
.growth-stat-card strong,
.growth-stat-card small,
.molting-stat-card span,
.molting-stat-card strong { display: block; }
.growth-stat-card span,
.molting-stat-card span {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.growth-stat-card strong,
.molting-stat-card strong {
  margin-top: 7px;
  color: var(--text-primary);
  font-size: 21px;
}
.growth-stat-card small { margin-top: 4px; color: var(--text-muted); font-size: 9px; }

.growth-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 107, 107, .28);
  border-radius: var(--radius-sm);
  background: rgba(255, 107, 107, .08);
}
.growth-warning strong,
.growth-warning span { display: block; }
.growth-warning strong { color: var(--danger); font-size: 12px; }
.growth-warning span { margin-top: 3px; color: var(--text-secondary); font-size: 10px; }

.growth-form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.growth-details-grid { grid-template-columns: minmax(0, 1.6fr) minmax(220px, .8fr); }
.form-actions-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.record-photo-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.record-photo-preview img {
  width: 92px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.09);
}

.growth-chart-card { overflow: hidden; }
.growth-chart-header { align-items: flex-start; }
.growth-chart-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.growth-metric-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: rgba(0,0,0,.18);
}
.growth-metric-btn {
  border: 0;
  border-radius: 7px;
  padding: 8px 10px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.growth-metric-btn:hover { color: var(--text-primary); }
.growth-metric-btn.active { color: #111218; background: var(--accent); }
.growth-chart-controls select { min-width: 130px; }
.growth-export-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.growth-export-actions .btn { white-space: nowrap; }
.growth-custom-period {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 220px));
  gap: 10px;
  justify-content: flex-end;
  margin: -3px 0 14px;
}
.growth-chart-card .chart-canvas-wrapper { height: 300px; }
.growth-chart-stats {
  position: static;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  background: transparent;
  border: 0;
}
.growth-chart-stats div {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  background: rgba(0,0,0,.13);
}
.growth-chart-stats span,
.growth-chart-stats strong { display: block; }
.growth-chart-stats span { color: var(--text-muted); font-size: 9px; }
.growth-chart-stats strong { margin-top: 4px; font-size: 11px; overflow-wrap: anywhere; }
.growth-table-scroll { overflow-x: auto; }
.growth-table-extended { min-width: 1080px; }
.table-subline { display: block; margin-top: 3px; color: var(--text-muted); font-size: 9px; }
.growth-note-cell { min-width: 160px; }
.growth-note { display: inline; color: var(--text-secondary); font-size: 10px; line-height: 1.45; }
.record-photo-button {
  margin-left: 7px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  padding: 5px 7px;
  background: rgba(255,255,255,.03);
  cursor: pointer;
}

.molting-page-header,
.health-page-header { align-items: center; }
.molting-filter-grid { grid-template-columns: repeat(3, minmax(0, 220px)); }
.molting-filter-button .btn { width: 100%; }
.molting-active-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 217, 61, .24);
  border-radius: var(--radius-sm);
  background: rgba(255, 217, 61, .07);
}
.molting-active-alert strong,
.molting-active-alert span { display: block; }
.molting-active-alert strong { color: var(--warning); font-size: 12px; }
.molting-active-alert span { margin-top: 3px; color: var(--text-secondary); font-size: 10px; }
.molting-cycle-list { display: grid; gap: 13px; }
.molting-cycle-card {
  padding: 16px;
  border: 1px solid rgba(108, 143, 255, .16);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.molting-cycle-card.active { border-color: rgba(255, 217, 61, .28); box-shadow: inset 3px 0 0 rgba(255, 217, 61, .75); }
.molting-cycle-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.molting-cycle-head h3 { margin-top: 7px; color: var(--text-primary); font-size: 14px; }
.molting-card-actions { display: flex; align-items: center; gap: 7px; }
.molting-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 15px;
}
.molting-stage {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 9px;
  background: rgba(0,0,0,.14);
}
.molting-stage > span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  color: var(--text-muted);
  font-size: 11px;
}
.molting-stage.done > span { background: rgba(78,205,196,.13); color: var(--success); }
.molting-stage.current { border-color: rgba(255,217,61,.22); }
.molting-stage.current > span { background: rgba(255,217,61,.12); color: var(--warning); }
.molting-stage strong,
.molting-stage small { display: block; overflow-wrap: anywhere; }
.molting-stage strong { color: var(--text-secondary); font-size: 9px; }
.molting-stage small { margin-top: 3px; color: var(--text-muted); font-size: 8px; }
.molting-cycle-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 13px; color: var(--text-muted); font-size: 9px; }
.danger-text { color: var(--danger); }
.molting-cycle-note { margin-top: 11px; color: var(--text-secondary); font-size: 10px; line-height: 1.5; }
.molting-photo {
  width: 96px;
  height: 72px;
  margin-top: 11px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
.molting-photo img { width: 100%; height: 100%; object-fit: cover; }
.molting-modal { max-width: 760px; }
.molting-stage-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.molting-details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.record-actions { margin-top: 10px; }

@media (max-width: 980px) {
  .growth-summary,
  .molting-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .growth-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .growth-details-grid { grid-template-columns: 1fr; }
  .growth-chart-header { align-items: stretch; }
  .growth-chart-controls { justify-content: flex-start; }
  .growth-chart-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .molting-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .molting-stage-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .growth-summary,
  .molting-summary { grid-template-columns: 1fr 1fr; }
  .growth-form-grid,
  .molting-stage-form,
  .molting-details-grid { grid-template-columns: 1fr; }
  .growth-chart-controls,
  .growth-metric-switch { width: 100%; }
  .growth-metric-btn { flex: 1 1 44%; }
  .growth-chart-controls select { width: 100%; }
  .growth-export-actions { width: 100%; }
  .growth-export-actions .btn { flex: 1; }
  .growth-custom-period { grid-template-columns: 1fr; justify-content: stretch; }
  .growth-chart-stats { grid-template-columns: 1fr 1fr; }
  .molting-page-header,
  .health-page-header { align-items: stretch; }
  .molting-page-header .btn,
  .health-page-header .btn { width: 100%; }
  .molting-filter-grid { grid-template-columns: 1fr; }
  .molting-active-alert,
  .molting-cycle-head { align-items: stretch; flex-direction: column; }
  .molting-card-actions { justify-content: flex-end; }
  .molting-timeline { grid-template-columns: 1fr; }
}

/* Stage 3 responsive containment */
.main-content,
.tab-content,
.feeding-table-wrapper,
.feeding-table-scroll,
.growth-table-scroll {
  min-width: 0;
  max-width: 100%;
}
.feeding-table-scroll,
.growth-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Stage 3 refinement: compact molting journal */
.molting-modal-compact { max-width: 560px; }
.molting-compact-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.molting-filter-card-compact { max-width: 520px; }
.molting-filter-grid-compact { grid-template-columns: minmax(180px, 1fr) minmax(120px, 150px); }
.molting-list-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.molting-card-compact {
  position: relative;
  min-width: 0;
  padding: 15px 58px 15px 16px;
  border-color: rgba(108, 143, 255, .13);
  background:
    linear-gradient(145deg, rgba(108, 143, 255, .045), transparent 42%),
    var(--bg-card);
}
.molting-card-compact:hover { border-color: rgba(201, 168, 76, .23); }
.molting-compact-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.molting-date-mark { display: flex; align-items: center; gap: 10px; min-width: 0; }
.molting-date-mark > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(108, 143, 255, .16);
  border-radius: 10px;
  background: rgba(108, 143, 255, .07);
  font-size: 16px;
}
.molting-date-mark small,
.molting-date-mark strong { display: block; }
.molting-date-mark small { color: var(--text-muted); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }
.molting-date-mark strong { margin-top: 3px; color: var(--text-primary); font-size: 13px; }
.molting-card-compact .molting-card-actions {
  position: absolute;
  top: 14px;
  right: 13px;
  gap: 4px;
}
.molting-card-compact .molting-cycle-note {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.055);
}
.molting-problem-line {
  margin-top: 11px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 107, 107, .15);
  border-radius: 8px;
  background: rgba(255, 107, 107, .055);
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.45;
}
.molting-problem-line strong { color: var(--danger); }

@media (max-width: 920px) {
  .molting-list-compact { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .molting-compact-form-grid,
  .molting-filter-grid-compact { grid-template-columns: 1fr; }
  .molting-filter-card-compact { max-width: none; }
  .molting-card-compact { padding-right: 54px; }
  .molting-compact-main { align-items: flex-start; flex-direction: column; }
}

/* Stage 3 refinement: molting journal returned to Health */
.health-journal-section + .health-journal-section {
  margin-top: 28px;
}

.molting-health-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.molting-health-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px 14px 16px;
  border: 1px solid rgba(108, 143, 255, 0.14);
  border-left: 4px solid rgba(108, 143, 255, 0.7);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(0, 0, 0, 0.2);
}

.molting-health-item.active {
  border-left-color: var(--warning);
  background: rgba(255, 209, 102, 0.06);
}

.molting-health-item.completed {
  border-left-color: var(--success);
}

.molting-health-item.latest {
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.08);
}

.molting-health-content {
  min-width: 0;
  flex: 1;
}

.molting-health-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.molting-health-name,
.molting-health-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.molting-health-name strong {
  font-size: 13px;
  color: var(--text-primary);
}

.molting-health-icon {
  font-size: 15px;
}

.molting-latest-badge {
  display: inline-flex;
  padding: 3px 7px;
  border: 1px solid rgba(201, 168, 76, 0.24);
  border-radius: 999px;
  color: var(--accent);
  background: rgba(201, 168, 76, 0.08);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.molting-health-dates {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.molting-health-detail {
  margin-top: 7px;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.molting-health-detail strong {
  color: var(--text-primary);
}

.molting-health-actions {
  flex: 0 0 auto;
  white-space: nowrap;
}

.molting-health-modal {
  max-width: 560px;
}

.molting-health-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 620px) {
  .molting-health-item,
  .molting-health-title {
    align-items: stretch;
    flex-direction: column;
  }

  .molting-health-actions {
    align-self: flex-end;
  }

  .molting-health-form-grid {
    grid-template-columns: 1fr;
  }
}


/* Stage 3 UX refinement: compact dashboard, growth and collapsible health journals */
.dashboard-animal-count {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 4px 8px;
  border: 1px solid rgba(201, 168, 76, .22);
  border-radius: 999px;
  background: rgba(201, 168, 76, .07);
  color: var(--accent-light);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
  vertical-align: middle;
}

.growth-form-grid-simple { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.health-journal-header { gap: 12px; }
.health-journal-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.health-journal-heading { margin: 0; color: var(--text-primary); font-size: 13px; font-weight: 700; }
.health-journal-chevron {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: var(--text-muted);
  background: rgba(255,255,255,.025);
  font-size: 17px;
  line-height: 1;
  transition: transform .18s ease, color .18s ease, border-color .18s ease;
}
.health-journal-toggle:hover .health-journal-chevron { color: var(--accent-light); border-color: rgba(201,168,76,.22); }
.health-journal-collapsible:not(.is-collapsed) .health-journal-chevron { transform: rotate(180deg); }
.health-journal-body { margin-top: 12px; }
.health-journal-body[hidden] { display: none !important; }
.health-journal-collapsible.is-collapsed {
  padding-bottom: 0;
}
.health-journal-collapsible.is-collapsed .section-header { margin-bottom: 0; }

@media (max-width: 720px) {
  .growth-form-grid-simple { grid-template-columns: 1fr; }
  .health-journal-header { align-items: center; }
  .health-journal-toggle { flex: 1; }
  .health-journal-header .btn { flex: 0 0 auto; width: auto; }
  .dashboard-animal-count { margin-left: 5px; }
}

/* Stage 3: expressive health accordions and dashboard quick-entry modals */
.health-journal-section {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 0%, rgba(78,205,196,.055), transparent 38%),
    rgba(5,9,14,.54);
}
.health-journal-section.molting-health-section {
  background:
    radial-gradient(circle at 12% 0%, rgba(201,168,76,.06), transparent 38%),
    rgba(5,9,14,.54);
}
.health-journal-header {
  min-height: 76px;
  padding: 12px 14px;
  margin: 0;
  border-bottom: 1px solid transparent;
}
.health-journal-collapsible:not(.is-collapsed) .health-journal-header {
  border-bottom-color: rgba(255,255,255,.055);
}
.health-journal-toggle-card {
  flex: 1;
  min-height: 50px;
}
.health-journal-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid rgba(78,205,196,.18);
  border-radius: 13px;
  background: rgba(78,205,196,.08);
  font-size: 21px;
  box-shadow: inset 0 0 18px rgba(78,205,196,.035);
}
.health-journal-icon.molting {
  border-color: rgba(201,168,76,.22);
  background: rgba(201,168,76,.08);
  box-shadow: inset 0 0 18px rgba(201,168,76,.04);
}
.health-journal-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}
.health-journal-title-row {
  display: flex;
  align-items: center;
  gap: 9px;
}
.health-journal-title-row strong {
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.health-journal-title-row .section-count {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
}
.health-journal-summary {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-journal-toggle-card .health-journal-chevron {
  margin-left: auto;
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: 10px;
}
.health-journal-header > .btn {
  min-width: 98px;
  border-color: rgba(78,205,196,.18);
  background: rgba(78,205,196,.06);
}
.molting-health-section .health-journal-header > .btn {
  border-color: rgba(201,168,76,.2);
  background: rgba(201,168,76,.06);
}
.health-journal-body {
  margin: 0;
  padding: 14px;
}
.health-journal-collapsible.is-collapsed {
  padding-bottom: 0;
}

.quick-action-modal {
  width: min(620px, 92vw);
  padding: 24px;
}
.quick-action-modal-header {
  align-items: flex-start;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.quick-action-modal-header h3 {
  color: var(--text-primary);
  font-size: 18px;
}
.quick-action-modal-header p {
  margin-top: 5px;
  color: var(--accent-light);
  font-size: 10px;
  font-weight: 700;
}
.quick-action-panel {
  padding-top: 2px;
}
.quick-action-panel[hidden] { display: none !important; }
.quick-action-grid {
  display: grid;
  gap: 12px;
}
.quick-action-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quick-action-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quick-action-modal .form-group { margin-bottom: 13px; }
.quick-action-modal textarea { min-height: 74px; resize: vertical; }
.quick-photo-drop {
  padding: 14px;
  border: 1px dashed rgba(78,205,196,.22);
  border-radius: 13px;
  background: rgba(78,205,196,.035);
}
.quick-gallery-preview {
  margin-top: 11px;
}
.quick-gallery-preview[hidden] { display: none !important; }
.quick-gallery-preview img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 11px;
}
.dashboard-quick-actions button {
  position: relative;
  overflow: hidden;
}
.dashboard-quick-actions button::after {
  content: '';
  position: absolute;
  inset: auto 14% 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(78,205,196,.45), transparent);
  opacity: 0;
  transition: opacity .2s ease;
}
.dashboard-quick-actions button:hover::after { opacity: 1; }

@media (max-width: 720px) {
  .health-journal-header {
    min-height: 70px;
    padding: 10px;
  }
  .health-journal-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 19px;
  }
  .health-journal-title-row strong { font-size: 15px; }
  .health-journal-summary { max-width: 48vw; }
  .health-journal-header > .btn {
    min-width: 0;
    padding: 8px 9px;
    font-size: 9px;
  }
  .quick-action-grid-2,
  .quick-action-grid-3 { grid-template-columns: 1fr; }
  .quick-action-modal { padding: 18px; }
}

/* Stage 3: compact selected-animal counters */
#dashboardSelectedView #statsGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

#dashboardSelectedView #statsGrid .stat-card {
  min-width: 0;
  min-height: 104px;
  padding: 17px 16px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value";
  column-gap: 11px;
  row-gap: 7px;
  align-items: center;
}

#dashboardSelectedView #statsGrid .stat-icon {
  grid-area: icon;
  margin: 0;
  font-size: 24px;
  line-height: 1;
  text-align: center;
}

#dashboardSelectedView #statsGrid .stat-label {
  grid-area: label;
  min-width: 0;
  margin: 0;
  font-size: 9.5px;
  line-height: 1.35;
  letter-spacing: .7px;
}

#dashboardSelectedView #statsGrid .stat-value {
  grid-area: value;
  min-width: 0;
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
}

#dashboardSelectedView #statsGrid .stat-unit {
  font-size: 11px;
}

#dashboardSelectedView .snake-profile {
  padding: 28px;
}

#dashboardSelectedView .profile-avatar {
  width: 90px;
  height: 90px;
}

#dashboardSelectedView .profile-info h2 {
  font-size: 25px;
}

#dashboardSelectedView .profile-info .species,
#dashboardSelectedView .profile-info .bio {
  font-size: 13px;
}

@media (max-width: 980px) {
  #dashboardSelectedView #statsGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  #dashboardSelectedView #statsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #dashboardSelectedView #statsGrid .stat-card {
    min-height: 92px;
    padding: 14px;
  }

  #dashboardSelectedView .snake-profile {
    padding: 22px 16px;
  }
}

/* Stage 4: compact health journal and discreet attachments */
.health-page-header {
  align-items: center;
  gap: 14px;
}
.health-page-header .btn { margin-left: auto; }
.health-filter-bar {
  display: inline-flex;
  gap: 5px;
  margin-bottom: 12px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 12px;
  background: rgba(0,0,0,.2);
}
.health-filter-btn {
  border: 0;
  border-radius: 9px;
  padding: 8px 12px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
  transition: .2s ease;
}
.health-filter-btn:hover { color: var(--text-primary); }
.health-filter-btn.active {
  background: rgba(78,205,196,.12);
  color: #8fe3da;
  box-shadow: inset 0 0 0 1px rgba(78,205,196,.16);
}
.health-record-card {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.065);
  border-left: 4px solid var(--accent);
  border-radius: 0 14px 14px 0;
  background: rgba(0,0,0,.2);
  transition: border-color .2s ease, background .2s ease;
}
.health-record-card.active {
  border-left-color: var(--warning);
  background: rgba(255,209,102,.055);
}
.health-record-card.completed {
  border-left-color: var(--success);
  background: rgba(78,205,196,.045);
}
.health-record-card.is-open { border-color: rgba(255,255,255,.11); }
.health-record-summary {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 0;
  padding: 14px 15px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.health-record-main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 6px;
}
.health-record-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}
.health-record-title-row strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-record-meta {
  color: var(--text-muted);
  font-size: 9px;
}
.health-record-chevron {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  color: var(--text-muted);
  transition: transform .2s ease, color .2s ease;
}
.health-record-card.is-open .health-record-chevron {
  transform: rotate(180deg);
  color: var(--accent-light);
}
.health-record-body {
  padding: 0 15px 14px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.health-record-body[hidden] { display: none !important; }
.health-record-detail {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.045);
}
.health-record-detail > span,
.health-record-subtitle {
  display: block;
  margin-bottom: 5px;
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.health-record-detail strong,
.health-record-detail p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.55;
}
.health-record-detail strong { color: var(--text-primary); }
.health-record-attachments { padding-top: 13px; }
.health-record-attachment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.health-record-attachment {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 11px;
  padding: 8px;
  background: rgba(255,255,255,.025);
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: .2s ease;
}
.health-record-attachment:hover {
  border-color: rgba(78,205,196,.22);
  background: rgba(78,205,196,.045);
}
.health-record-attachment img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 8px;
  object-fit: cover;
}
.health-record-file-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 8px;
  background: rgba(201,168,76,.08);
  font-size: 19px;
}
.health-record-attachment span:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.health-record-attachment strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-record-attachment small {
  color: var(--text-muted);
  font-size: 8px;
}
.health-record-actions {
  justify-content: flex-end;
  margin-top: 12px;
}
.health-record-modal { width: min(680px, 94vw); }
.field-optional {
  margin-left: 5px;
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 500;
}
.health-status-date-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.health-status-date-row > .form-group { min-width: 0; }
.health-attachment-editor {
  overflow: hidden;
  margin: 4px 0 16px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 13px;
  background: rgba(0,0,0,.16);
}
.health-attachment-editor summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.health-attachment-editor summary::-webkit-details-marker { display: none; }
.health-attachment-editor summary::after {
  margin-left: auto;
  content: '⌄';
  color: var(--text-muted);
  transition: transform .2s ease;
}
.health-attachment-editor[open] summary::after { transform: rotate(180deg); }
.health-attachment-count {
  display: inline-grid;
  min-width: 21px;
  height: 21px;
  place-items: center;
  border-radius: 999px;
  background: rgba(78,205,196,.09);
  color: #87ddd4;
  font-size: 8px;
}
.health-attachment-editor-body {
  padding: 0 13px 13px;
  border-top: 1px solid rgba(255,255,255,.045);
}
.health-file-picker {
  display: flex;
  margin-top: 12px;
  flex-direction: column;
  gap: 4px;
  border: 1px dashed rgba(78,205,196,.22);
  border-radius: 11px;
  padding: 12px;
  background: rgba(78,205,196,.035);
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}
.health-file-picker small {
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 500;
}
.health-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.health-attachment-draft-list {
  display: flex;
  margin-top: 9px;
  flex-direction: column;
  gap: 7px;
}
.health-attachment-draft-item {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 10px;
  padding: 8px 9px;
  background: rgba(255,255,255,.02);
}
.health-attachment-draft-item.pending { border-style: dashed; }
.health-attachment-draft-icon { font-size: 17px; }
.health-attachment-draft-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}
.health-attachment-draft-copy strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.health-attachment-draft-copy small,
.health-attachment-empty {
  color: var(--text-muted);
  font-size: 8px;
}
.health-attachment-remove {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid rgba(255,107,107,.15);
  border-radius: 8px;
  background: rgba(255,107,107,.045);
  color: #d98e8e;
  cursor: pointer;
}
.health-form-actions { margin-top: 2px; }

@media (max-width: 700px) {
  .health-page-header { align-items: stretch; flex-direction: column; }
  .health-page-header .btn { width: 100%; margin-left: 0; }
  .health-status-date-row { grid-template-columns: 1fr; gap: 0; }
  .health-record-attachment-grid { grid-template-columns: 1fr; }
  .health-filter-bar { width: 100%; }
  .health-filter-btn { flex: 1; padding-inline: 6px; }
}

/* =========================================================
   Stage 6: calendar and server-backed gallery
   ========================================================= */
.calendar-page-header,
.gallery-page-header {
  align-items: center;
}
.calendar-page-header > div:first-child,
.gallery-page-header > div:first-child {
  min-width: 0;
}
.calendar-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.calendar-animal-select {
  min-width: 190px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  padding: 10px 36px 10px 12px;
  background: rgba(8,12,18,.78);
  color: var(--text-primary);
}
.calendar-card,
.calendar-agenda-card {
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(19,25,34,.95), rgba(12,17,24,.96));
  box-shadow: 0 18px 45px rgba(0,0,0,.2);
}
.calendar-card {
  overflow: hidden;
}
.calendar-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.calendar-toolbar h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 20px;
  text-align: center;
}
.calendar-nav-controls,
.calendar-view-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}
.calendar-view-switch {
  justify-content: flex-end;
}
.calendar-nav-btn,
.calendar-view-btn,
.calendar-filter-btn {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.calendar-nav-btn:hover,
.calendar-view-btn:hover,
.calendar-filter-btn:hover {
  border-color: rgba(78,205,196,.25);
  background: rgba(78,205,196,.06);
  color: var(--text-primary);
}
.calendar-nav-btn {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  font-size: 24px;
  line-height: 1;
}
.calendar-view-btn {
  border-radius: 10px;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 750;
}
.calendar-view-btn.active,
.calendar-filter-btn.active {
  border-color: rgba(78,205,196,.3);
  background: rgba(78,205,196,.11);
  color: #9ce6df;
}
.calendar-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.calendar-filter-btn {
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 10px;
  font-weight: 750;
}
.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-weekdays {
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: rgba(255,255,255,.012);
}
.calendar-weekdays span {
  padding: 10px 6px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}
.calendar-day {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 112px;
  flex-direction: column;
  gap: 8px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.045);
  border-bottom: 1px solid rgba(255,255,255,.045);
  padding: 9px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease;
}
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day:hover { background: rgba(255,255,255,.025); }
.calendar-day.is-outside { background: rgba(0,0,0,.10); color: var(--text-muted); }
.calendar-day.is-selected {
  background: rgba(78,205,196,.045);
  box-shadow: inset 0 0 0 1px rgba(78,205,196,.22);
}
.calendar-day-number {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
}
.calendar-day.is-today .calendar-day-number {
  background: var(--accent);
  color: #071016;
}
.calendar-day-events {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}
.calendar-event-pill {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 7px;
  padding: 4px 6px;
  background: rgba(255,255,255,.025);
  color: var(--text-secondary);
  font-size: 8px;
  line-height: 1.2;
}
.calendar-event-pill b {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-event-pill.is-planned { border-style: dashed; }
.calendar-event-pill.type-feeding { border-color: rgba(239,183,88,.18); background: rgba(239,183,88,.055); }
.calendar-event-pill.type-growth { border-color: rgba(86,165,239,.18); background: rgba(86,165,239,.05); }
.calendar-event-pill.type-medical { border-color: rgba(235,104,104,.18); background: rgba(235,104,104,.05); }
.calendar-event-pill.type-molting { border-color: rgba(180,132,236,.2); background: rgba(180,132,236,.055); }
.calendar-event-pill.type-gallery { border-color: rgba(78,205,196,.2); background: rgba(78,205,196,.05); }
.calendar-more {
  padding-left: 5px;
  color: var(--text-muted);
  font-size: 8px;
  font-weight: 750;
}
.calendar-list-view {
  display: flex;
  min-height: 280px;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 20px;
}
.calendar-list-view[hidden] { display: none !important; }
.calendar-list-day {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 13px;
  background: rgba(255,255,255,.018);
}
.calendar-list-date {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
  color: var(--text-primary);
  cursor: pointer;
}
.calendar-list-date strong { font-size: 12px; }
.calendar-list-date span {
  display: grid;
  min-width: 23px;
  height: 23px;
  place-items: center;
  border-radius: 999px;
  background: rgba(78,205,196,.09);
  color: #91ded7;
  font-size: 9px;
}
.calendar-list-day > div { padding: 8px; }
.calendar-agenda-card {
  margin-top: 18px;
  padding: 16px;
}
.calendar-agenda-card .section-header { margin-bottom: 12px; }
.calendar-agenda-card .section-header p { margin: 4px 0 0; color: var(--text-muted); font-size: 10px; }
.calendar-agenda-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.calendar-agenda-event {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.calendar-agenda-event:hover {
  transform: translateY(-1px);
  border-color: rgba(78,205,196,.2);
  background: rgba(78,205,196,.035);
}
.calendar-agenda-event.is-planned { border-style: dashed; }
.calendar-agenda-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  font-size: 16px;
}
.calendar-agenda-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}
.calendar-agenda-copy strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-agenda-copy small { color: var(--text-muted); font-size: 9px; }
.calendar-agenda-arrow { color: var(--text-muted); font-size: 16px; }
.calendar-empty { min-height: 240px; }
.gallery-total-count {
  display: inline-grid;
  min-height: 34px;
  place-items: center;
  border: 1px solid rgba(78,205,196,.15);
  border-radius: 999px;
  padding: 0 13px;
  background: rgba(78,205,196,.055);
  color: #93ded7;
  font-size: 10px;
  font-weight: 800;
}
.gallery-form-row { grid-template-columns: 1.3fr 1.2fr .7fr; }
.gallery-card-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
.gallery-edit-btn {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(78,205,196,.13);
  border-radius: 8px;
  background: rgba(78,205,196,.04);
  color: #8bd8d1;
  cursor: pointer;
}
.gallery-card-body .gallery-card-actions .delete-btn {
  position: static;
  width: 28px;
  height: 28px;
}

@media (max-width: 920px) {
  .calendar-toolbar { grid-template-columns: 1fr; }
  .calendar-toolbar h2 { grid-row: 1; }
  .calendar-nav-controls,
  .calendar-view-switch { justify-content: center; }
  .calendar-day { min-height: 96px; padding: 7px; }
  .gallery-form-row { grid-template-columns: 1fr 1fr; }
  .gallery-form-row > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .calendar-page-header,
  .gallery-page-header { align-items: stretch; flex-direction: column; }
  .calendar-animal-select { width: 100%; }
  .calendar-filter-bar { overflow-x: auto; flex-wrap: nowrap; padding-inline: 12px; }
  .calendar-filter-btn { flex: 0 0 auto; }
  .calendar-weekdays span { padding: 8px 2px; font-size: 8px; }
  .calendar-day { min-height: 76px; gap: 4px; padding: 5px 3px; }
  .calendar-day-number { width: 24px; height: 24px; font-size: 10px; }
  .calendar-event-pill { justify-content: center; padding: 3px; }
  .calendar-event-pill b { display: none; }
  .calendar-more { padding-left: 2px; font-size: 7px; }
  .calendar-agenda-card { padding: 12px; }
  .gallery-form-row { grid-template-columns: 1fr; }
  .gallery-form-row > :first-child { grid-column: auto; }
}

/* Stage 7: profile and account settings */
.account-modal {
  width: min(720px, calc(100vw - 28px));
  max-height: min(88vh, 820px);
  overflow-y: auto;
}
.account-modal-subtitle {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}
.account-profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(147, 51, 234, .12), rgba(245, 158, 11, .06));
}
.account-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}
.account-avatar-preview {
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid rgba(245, 158, 11, .75);
  background: var(--gradient-gold);
  color: var(--bg-primary);
  font-size: 28px;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .26);
}
.account-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.account-profile-copy {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
}
.account-profile-copy strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-profile-copy > span {
  color: var(--text-secondary);
  font-size: 13px;
}
.account-role-badge {
  width: fit-content;
  margin-top: 4px;
  padding: 4px 9px;
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: 999px;
  background: rgba(245, 158, 11, .12);
  color: #fbbf24;
  font-size: 11px;
  font-weight: 700;
}
.account-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  margin-bottom: 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
}
.account-tab {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.account-tab:hover { color: var(--text-primary); }
.account-tab.active {
  background: linear-gradient(135deg, rgba(147, 51, 234, .75), rgba(109, 40, 217, .75));
  color: #fff;
  box-shadow: 0 6px 18px rgba(109, 40, 217, .25);
}
.account-panel { display: none; }
.account-panel.active { display: block; }
.account-panel-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.account-settings-block {
  padding: 15px;
  margin-bottom: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
}
.account-settings-block h4 {
  margin: 0 0 13px;
  color: var(--text-primary);
  font-size: 14px;
}
.account-settings-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.account-danger-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(239, 68, 68, .35);
  border-radius: 14px;
  background: rgba(239, 68, 68, .06);
}
.account-danger-card strong { color: #fca5a5; }
.account-danger-card p {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

@media (max-width: 640px) {
  .account-profile-head { align-items: flex-start; flex-wrap: wrap; }
  .account-profile-head > .btn { margin-left: 92px; }
  .account-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-settings-three { grid-template-columns: 1fr; }
  .account-danger-card { align-items: stretch; flex-direction: column; }
  .account-danger-card .btn { width: 100%; }
}

/* ================= STAGE 8: BREEDING ================= */
.breeding-page-header {
  align-items: center;
}

.breeding-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.breeding-stat-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid var(--border, #2e3447);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(34, 38, 54, .96), rgba(23, 26, 38, .96));
}

.breeding-stat-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 13px;
  background: rgba(139, 92, 246, .14);
  font-size: 22px;
}

.breeding-stat-card div {
  display: grid;
  min-width: 0;
}

.breeding-stat-card strong {
  font-size: 22px;
  line-height: 1;
}

.breeding-stat-card span:not(.breeding-stat-icon) {
  margin-top: 4px;
  color: var(--text, #f6f7fb);
  font-size: 13px;
  font-weight: 700;
}

.breeding-stat-card small {
  margin-top: 3px;
  overflow: hidden;
  color: var(--text-muted, #9da5b8);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breeding-section {
  margin-bottom: 20px;
  border: 1px solid var(--border, #2e3447);
  border-radius: 18px;
  background: rgba(20, 23, 34, .82);
  overflow: hidden;
}

.breeding-section-header {
  margin: 0;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border, #2e3447);
}

.breeding-section-header h3 {
  margin: 0 0 4px;
}

.breeding-section-header p,
.breeding-section-toggle small {
  display: block;
  margin: 0;
  color: var(--text-muted, #9da5b8);
  font-size: 12px;
  font-weight: 500;
}

.breeding-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
}

.breeding-pair-card,
.breeding-clutch-card,
.breeding-offspring-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(35, 39, 55, .94), rgba(26, 29, 42, .94));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

.breeding-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.breeding-card-top h3 {
  margin: 3px 0 0;
  font-size: 18px;
  line-height: 1.25;
}

.breeding-card-kicker {
  color: #a78bfa;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.breeding-parent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 17px 0;
}

.breeding-parent-row > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}

.breeding-parent-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breeding-parent-row > div > span {
  color: #c4b5fd;
  font-size: 18px;
  font-weight: 800;
}

.breeding-pair-cross {
  color: var(--text-muted, #9da5b8);
  font-weight: 800;
}

.breeding-card-meta,
.breeding-offspring-info,
.breeding-parent-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 13px;
  color: var(--text-muted, #9da5b8);
  font-size: 12px;
}

.breeding-card-note {
  margin: 13px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, .12);
  color: #d8dce7;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.breeding-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.breeding-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.breeding-section-toggle strong {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
}

.breeding-toggle-side {
  display: flex;
  align-items: center;
  gap: 10px;
}

.breeding-toggle-chevron {
  display: inline-block;
  color: var(--text-muted, #9da5b8);
  transition: transform .2s ease;
}

.breeding-section.is-collapsed .breeding-toggle-chevron {
  transform: rotate(-90deg);
}

.breeding-section-body {
  border-top: 1px solid var(--border, #2e3447);
}

.breeding-section-body[hidden] {
  display: none;
}

.breeding-list {
  display: grid;
  gap: 1px;
  background: rgba(148, 163, 184, .1);
}

.breeding-list-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  background: rgba(22, 25, 36, .98);
}

.breeding-list-date,
.breeding-list-main {
  min-width: 0;
}

.breeding-list-date strong,
.breeding-list-date span,
.breeding-list-main strong,
.breeding-list-main p {
  display: block;
}

.breeding-list-date span,
.breeding-list-main p {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--text-muted, #9da5b8);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breeding-list-actions {
  display: flex;
  gap: 7px;
}

.breeding-clutch-numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.breeding-clutch-numbers div {
  min-width: 0;
  padding: 11px 8px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
  text-align: center;
}

.breeding-clutch-numbers strong,
.breeding-clutch-numbers span {
  display: block;
}

.breeding-clutch-numbers strong {
  font-size: 20px;
}

.breeding-clutch-numbers span {
  margin-top: 3px;
  color: var(--text-muted, #9da5b8);
  font-size: 10px;
}

.breeding-parent-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}

.breeding-empty-state {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  padding: 34px 20px;
  text-align: center;
}

.breeding-empty-state > span {
  margin-bottom: 8px;
  font-size: 34px;
}

.breeding-empty-state strong {
  font-size: 16px;
}

.breeding-empty-state p {
  max-width: 430px;
  margin: 7px 0 14px;
  color: var(--text-muted, #9da5b8);
  font-size: 13px;
}

.breeding-modal {
  max-width: 610px;
}

.breeding-clutch-modal {
  max-width: 700px;
}

.breeding-number-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 1100px) {
  .breeding-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .breeding-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .breeding-page-header { align-items: stretch; }
  .breeding-page-header .btn { width: 100%; }
  .breeding-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .breeding-stat-card { padding: 13px; }
  .breeding-stat-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .breeding-card-grid { padding: 12px; }
  .breeding-list-row { grid-template-columns: 1fr auto; gap: 10px; }
  .breeding-list-date, .breeding-list-main { grid-column: 1; }
  .breeding-list-status, .breeding-list-actions { grid-column: 2; }
  .breeding-list-status { grid-row: 1; }
  .breeding-list-actions { grid-row: 2; }
  .breeding-number-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .breeding-stats-grid { grid-template-columns: 1fr; }
  .breeding-parent-row { grid-template-columns: 1fr; }
  .breeding-pair-cross { text-align: center; }
  .breeding-clutch-numbers { grid-template-columns: 1fr 1fr 1fr; }
  .breeding-parent-summary { grid-template-columns: 1fr; }
}

/* ================= STAGE 8 UX REFINEMENT: HEADER, MODALS, OFFSPRING LINKS ================= */
@media (min-width: 769px) {
  .header {
    padding-inline: 16px;
  }

  .header-inner {
    width: 100%;
    max-width: 1880px;
    min-height: 64px;
    height: auto;
    gap: 14px;
  }

  .header-brand,
  .header-actions {
    flex: 0 0 auto;
  }

  .header-nav {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
    overflow: visible;
    scrollbar-width: none;
  }

  .header-nav::-webkit-scrollbar {
    display: none;
  }

  .header-nav .nav-btn {
    flex: 0 0 auto;
    padding: 8px 11px;
    white-space: nowrap;
  }

  .header-actions {
    gap: 8px;
  }
}

@media (min-width: 769px) and (max-width: 1480px) {
  .header-inner {
    flex-wrap: wrap;
    padding-block: 8px;
  }

  .header-brand {
    order: 1;
  }

  .header-actions {
    order: 2;
    margin-left: auto;
  }

  .header-nav {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, .055);
  }
}

.breeding-modal {
  width: min(680px, calc(100vw - 32px));
  max-width: none;
  padding: 26px;
}

.breeding-clutch-modal {
  width: min(760px, calc(100vw - 32px));
  max-width: none;
}

.breeding-modal .modal-header {
  align-items: flex-start;
  gap: 18px;
}

.breeding-modal .modal-header > div {
  min-width: 0;
}

.breeding-modal .modal-header h3,
.breeding-modal .modal-header p {
  overflow-wrap: anywhere;
}

.breeding-modal .form-row {
  align-items: start;
  gap: 14px;
}

.breeding-modal .form-group,
.breeding-modal .form-row > .form-group,
.breeding-number-grid > .form-group {
  min-width: 0;
}

.breeding-modal .form-row > .form-group,
.breeding-number-grid > .form-group {
  margin-bottom: 0;
}

.breeding-modal .form-group label {
  display: flex;
  align-items: flex-end;
  min-height: 18px;
  margin-bottom: 7px;
  line-height: 1.3;
}

.breeding-clutch-modal .form-row .form-group label,
.breeding-clutch-modal .breeding-number-grid .form-group label {
  min-height: 34px;
}

.breeding-modal input,
.breeding-modal select,
.breeding-modal textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.breeding-modal input[type="date"],
.breeding-modal input[type="number"],
.breeding-modal select {
  min-height: 42px;
}

.breeding-modal input[type="date"] {
  color-scheme: dark;
}

.breeding-modal textarea {
  resize: vertical;
}

.breeding-modal .modal-actions-row {
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(148, 163, 184, .12);
}

.offspring-link-card {
  margin: 4px 0 18px;
  padding: 16px;
  border: 1px solid rgba(139, 92, 246, .28);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(139, 92, 246, .08), rgba(255, 255, 255, .025));
}

.offspring-link-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.offspring-link-head strong {
  display: block;
  font-size: 14px;
}

.offspring-link-head p,
.offspring-link-help,
.offspring-create-hint p {
  margin: 5px 0 0;
  color: var(--text-muted, #9da5b8);
  font-size: 12px;
  line-height: 1.45;
}

.offspring-link-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  background: rgba(139, 92, 246, .15);
  font-size: 20px;
}

.offspring-link-mode-group {
  margin-bottom: 12px !important;
}

.offspring-link-panel {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .035);
}

.offspring-link-panel[hidden] {
  display: none;
}

.offspring-link-panel .form-group {
  margin-bottom: 0;
}

.offspring-create-hint strong {
  color: #c4b5fd;
  font-size: 13px;
}

.offspring-current-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 12px;
  border: 1px solid rgba(34, 197, 94, .2);
  background: rgba(34, 197, 94, .07);
}

.offspring-current-link > span {
  grid-column: 1;
  color: var(--text-muted, #9da5b8);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.offspring-current-link > strong {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offspring-current-link > .btn {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.breeding-linked-animal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
  padding: 10px 12px;
  border: 1px solid rgba(34, 197, 94, .18);
  border-radius: 11px;
  background: rgba(34, 197, 94, .06);
}

.breeding-linked-animal span {
  color: var(--text-muted, #9da5b8);
  font-size: 11px;
}

.breeding-linked-animal strong {
  min-width: 0;
  overflow: hidden;
  color: #bbf7d0;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .breeding-modal,
  .breeding-clutch-modal {
    width: min(100% - 20px, 680px);
    max-width: none;
    padding: 20px;
  }

  .breeding-modal .form-row {
    grid-template-columns: 1fr;
  }

  .breeding-clutch-modal .form-row .form-group label,
  .breeding-clutch-modal .breeding-number-grid .form-group label {
    min-height: 18px;
  }

  .offspring-current-link {
    grid-template-columns: 1fr;
  }

  .offspring-current-link > .btn {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }
}

/* ================= STAGE 8: REPEATED BREEDING CYCLES AND GROUPED LITTERS ================= */
.breeding-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.breeding-cycle-list,
.breeding-litter-list {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.breeding-cycle-card,
.breeding-litter-card {
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(28, 31, 44, .98), rgba(19, 22, 32, .98));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
  overflow: hidden;
}

.breeding-cycle-card {
  padding: 18px;
}

.breeding-cycle-head,
.breeding-litter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.breeding-cycle-head h3,
.breeding-litter-title strong {
  display: block;
  margin: 3px 0 0;
  color: #f4f5fa;
  font-size: 18px;
  line-height: 1.25;
}

.breeding-cycle-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.breeding-cycle-summary span {
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  color: #cfd4e1;
  font-size: 12px;
}

.breeding-cycle-timeline {
  display: grid;
  gap: 7px;
  margin-top: 15px;
}

.breeding-cycle-timeline > div {
  display: grid;
  grid-template-columns: 92px minmax(120px, .7fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .032);
}

.breeding-cycle-timeline time,
.breeding-cycle-timeline span {
  color: var(--text-muted, #9da5b8);
  font-size: 11px;
}

.breeding-cycle-timeline span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breeding-cycle-timeline button,
.breeding-row-actions button {
  display: inline-grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  color: #d9dce6;
  cursor: pointer;
}

.breeding-cycle-empty {
  margin: 14px 0 0;
  color: var(--text-muted, #9da5b8);
  font-size: 12px;
}

.breeding-litter-head {
  width: 100%;
  padding: 17px 18px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.breeding-litter-title {
  min-width: 0;
}

.breeding-litter-title small {
  display: block;
  margin-top: 5px;
  color: var(--text-muted, #9da5b8);
  font-size: 12px;
}

.breeding-litter-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.breeding-litter-card.is-open .breeding-toggle-chevron {
  transform: rotate(180deg);
}

.breeding-litter-body {
  padding: 0 18px 18px;
  border-top: 1px solid rgba(148, 163, 184, .12);
}

.breeding-litter-body[hidden] {
  display: none;
}

.breeding-litter-gender-summary {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.breeding-litter-gender-summary span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(139, 92, 246, .1);
  color: #ddd6fe;
  font-size: 12px;
  font-weight: 700;
}

.breeding-offspring-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 13px;
}

.breeding-offspring-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.breeding-offspring-table th,
.breeding-offspring-table td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
  text-align: left;
  vertical-align: middle;
  font-size: 12px;
}

.breeding-offspring-table th {
  color: var(--text-muted, #9da5b8);
  font-size: 10px;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.breeding-offspring-table tr:last-child td {
  border-bottom: 0;
}

.breeding-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.breeding-card-link {
  border: 0;
  background: transparent;
  color: #a7f3d0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.btn-xs {
  padding: 5px 8px;
  font-size: 10px;
}

.breeding-table-empty {
  padding: 20px;
  color: var(--text-muted, #9da5b8);
  text-align: center;
}

.breeding-litter-actions {
  margin-top: 13px;
}

.breeding-auto-offspring-note {
  margin: 2px 0 14px;
  padding: 11px 12px;
  border: 1px solid rgba(139, 92, 246, .18);
  border-radius: 12px;
  background: rgba(139, 92, 246, .065);
  color: #d8d2ef;
  font-size: 12px;
  line-height: 1.45;
}

.breeding-advanced-link {
  margin: 4px 0 15px;
  padding: 11px 12px;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}

.breeding-advanced-link summary {
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.breeding-advanced-link > p {
  margin: 8px 0 12px;
  color: var(--text-muted, #9da5b8);
  font-size: 11px;
  line-height: 1.45;
}

.breeding-focus-flash {
  animation: breedingFocusFlash 1.8s ease;
}

@keyframes breedingFocusFlash {
  0%, 100% { box-shadow: 0 12px 30px rgba(0, 0, 0, .14); }
  25%, 65% { box-shadow: 0 0 0 3px rgba(139, 92, 246, .48), 0 18px 42px rgba(139, 92, 246, .18); }
}

.dashboard-breeding-status {
  display: block;
  width: 100%;
  margin: 9px 0 0;
  padding: 8px 10px;
  border: 1px solid rgba(139, 92, 246, .2);
  border-radius: 10px;
  background: rgba(139, 92, 246, .065);
  color: #ddd6fe;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.dashboard-event-breeding { border-left: 3px solid #a78bfa; }
.calendar-event-pill.type-breeding { border-color: rgba(167,139,250,.24); background: rgba(167,139,250,.07); }
.calendar-agenda-event.type-breeding { border-left-color: #a78bfa; }

.profile-parentage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--text-muted, #9da5b8);
  font-size: 12px;
}

.profile-parentage span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.profile-parentage strong {
  color: #ddd6fe;
}

@media (max-width: 760px) {
  .breeding-header-actions { width: 100%; }
  .breeding-header-actions .btn { flex: 1 1 180px; }
  .breeding-cycle-head,
  .breeding-litter-head { align-items: stretch; }
  .breeding-cycle-timeline > div { grid-template-columns: 1fr auto; }
  .breeding-cycle-timeline time,
  .breeding-cycle-timeline strong,
  .breeding-cycle-timeline span { grid-column: 1; }
  .breeding-cycle-timeline button { grid-column: 2; grid-row: 1 / span 3; }
  .breeding-cycle-summary { display: grid; }
}

@media (max-width: 520px) {
  .breeding-cycle-head,
  .breeding-litter-head { flex-direction: column; }
  .breeding-litter-side { justify-content: space-between; }
  .breeding-litter-gender-summary { flex-wrap: wrap; }
}

/* Stage 8 refinement: fewer duplicate controls and a clearer breeding flow */
.breeding-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.breeding-section-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.breeding-cycle-actions {
  align-items: center;
  flex-wrap: wrap;
}

.breeding-add-offspring-btn {
  border-color: rgba(167,139,250,.32);
  background: rgba(139,92,246,.15);
}

.breeding-add-offspring-btn:hover {
  background: rgba(139,92,246,.24);
}

.breeding-cycle-related {
  margin-left: auto;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  color: var(--text-muted, #9da5b8);
  font-size: 11px;
  font-weight: 700;
}

.modal-actions-spacer {
  flex: 1 1 auto;
}

.breeding-modal .modal-danger-action {
  margin-right: auto;
}

@media (max-width: 700px) {
  .breeding-section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .breeding-section-header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .breeding-cycle-related {
    width: 100%;
    margin-left: 0;
  }


  .breeding-modal .modal-actions-row {
    align-items: stretch;
  }

  .breeding-modal .modal-actions-row .btn {
    flex: 1 1 100%;
  }

  .breeding-modal .modal-danger-action {
    order: 3;
  }

  .modal-actions-spacer {
    display: none;
  }
}
.breeding-modal .modal-danger-action[hidden] { display: none !important; }

/* Dashboard task panels: equal compact height with internal scrolling. */
.dashboard-panels-grid {
  align-items: stretch;
}

.dashboard-panel {
  display: flex;
  height: 262px;
  min-height: 262px;
  flex-direction: column;
  overflow: hidden;
}

.dashboard-panel .section-header {
  flex: 0 0 auto;
}

.dashboard-event-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

.dashboard-event-list .dashboard-empty {
  min-height: 100%;
}

@media (max-width: 1100px) {
  .dashboard-panel {
    height: 252px;
    min-height: 252px;
  }
}

@media (max-width: 760px) {
  .dashboard-panel {
    height: 242px;
    min-height: 242px;
  }
}

/* === HOMEPAGE PANORAMIC HERO: selected boa image, 2026-07-15 === */
.public-hero {
  position: relative;
  height: clamp(420px, 28.72vw, 520px);
  min-height: 420px;
  overflow: hidden;
  border-bottom: 1px solid rgba(201,168,76,.72);
  background: #08080c;
}
.public-hero::before {
  z-index: 2;
  background:
    linear-gradient(90deg,
      rgba(5,5,8,.96) 0%,
      rgba(5,5,8,.90) 17%,
      rgba(5,5,8,.72) 28%,
      rgba(5,5,8,.34) 40%,
      rgba(5,5,8,.08) 54%,
      transparent 68%),
    linear-gradient(to bottom,
      rgba(3,3,5,.16),
      transparent 30%,
      transparent 72%,
      rgba(3,3,5,.24));
  pointer-events: none;
}
.public-hero-inner {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
}
.public-hero-gallery {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.public-hero-gallery::before,
.public-hero-small-photo,
.public-hero-orbit,
.public-hero-main-photo figcaption {
  display: none;
}
.public-hero-main-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #08080c;
  box-shadow: none;
}
.public-hero-main-photo::after { display: none; }
.public-hero-main-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.public-hero-copy {
  position: absolute;
  z-index: 4;
  left: clamp(32px, 4.15vw, 64px);
  top: clamp(28px, 2.22vw, 38px);
  width: min(520px, calc(100% - 64px));
  max-width: 520px;
  color: var(--text-primary);
  text-shadow: 0 2px 18px rgba(0,0,0,.76);
}
.public-eyebrow {
  margin-bottom: 15px;
  font-size: 9px;
  letter-spacing: 1.7px;
}
.public-hero-copy h1 {
  max-width: 520px;
  margin: 0 0 13px;
  font-size: clamp(48px, 3.52vw, 56px);
  line-height: .96;
  letter-spacing: -1.7px;
}
.public-hero-copy > p {
  max-width: 500px;
  margin: 0;
  color: rgba(239,237,242,.90);
  font-size: 13px;
  line-height: 1.55;
}
.public-hero-actions {
  gap: 10px;
  margin-top: 18px;
}
.public-primary-action,
.public-secondary-action {
  min-height: 42px;
  padding: 0 17px;
  font-size: 11px;
  background-clip: padding-box;
  backdrop-filter: blur(4px);
}
.public-secondary-action {
  background: rgba(12,12,18,.64);
  border-color: rgba(255,255,255,.46);
}
.public-hero-metrics {
  gap: 18px;
  margin-top: 20px;
}
.public-hero-metrics div { padding-left: 11px; }
.public-hero-metrics strong { font-size: 20px; }
.public-hero-metrics span { font-size: 8px; letter-spacing: .7px; }

@media (max-width: 860px) {
  .public-hero {
    height: 570px;
    min-height: 570px;
  }
  .public-hero::before {
    background:
      linear-gradient(90deg, rgba(5,5,8,.95), rgba(5,5,8,.77) 58%, rgba(5,5,8,.24)),
      linear-gradient(to bottom, rgba(3,3,5,.12), transparent 48%, rgba(3,3,5,.35));
  }
  .public-hero-copy {
    left: 28px;
    top: 38px;
    width: min(520px, calc(100% - 56px));
  }
  .public-hero-copy h1 { font-size: clamp(45px, 8vw, 56px); }
  .public-hero-main-photo img { object-position: 57% center; }
}

@media (max-width: 620px) {
  .public-hero {
    height: 535px;
    min-height: 535px;
  }
  .public-hero-copy {
    left: 18px;
    top: 27px;
    width: calc(100% - 36px);
    max-width: none;
  }
  .public-eyebrow {
    margin-bottom: 12px;
    font-size: 8px;
    letter-spacing: 1.3px;
  }
  .public-hero-copy h1 {
    max-width: 430px;
    margin-bottom: 12px;
    font-size: clamp(39px, 11.7vw, 48px);
    letter-spacing: -1.3px;
  }
  .public-hero-copy > p {
    max-width: 430px;
    font-size: 12px;
    line-height: 1.5;
  }
  .public-hero-actions { margin-top: 16px; }
  .public-primary-action,
  .public-secondary-action {
    min-height: 40px;
    padding-inline: 14px;
    font-size: 10px;
  }
  .public-hero-metrics {
    gap: 10px;
    margin-top: 17px;
  }
  .public-hero-metrics div { padding-left: 8px; }
  .public-hero-metrics strong { font-size: 18px; }
  .public-hero-metrics span { font-size: 7px; }
  .public-hero-main-photo img { object-position: 58% center; }
}


/* === HOMEPAGE CONTENT ALIGNMENT: shared left edge, 2026-07-15 === */
@media (min-width: 861px) {
  .public-site {
    --public-home-left-edge: clamp(64px, 5.4vw, 84px);
  }

  .public-hero-copy {
    left: var(--public-home-left-edge);
  }

  #publicArticles.public-section,
  #publicSpecies.public-section {
    width: min(1680px, calc(100% - var(--public-home-left-edge) - 40px));
    margin-left: var(--public-home-left-edge);
    margin-right: 0;
  }
}

/* === HOMEPAGE HEADER ALIGNMENT: match the content columns, 2026-07-15 === */
@media (min-width: 861px) {
  .public-site .public-header-inner {
    width: min(1680px, calc(100% - var(--public-home-left-edge) - 40px));
    margin-left: var(--public-home-left-edge);
    margin-right: 0;
  }

  .public-site .public-brand {
    padding: 0;
    justify-self: start;
  }

  .public-site .public-login-button {
    justify-self: end;
  }
}

/* === REPTIVIBE WORDMARK: Repti white, Vibe gold; logo artwork unchanged === */
:root {
  --brand-white: #ffffff;
  --brand-gold: #d7aa43;
}

.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(226, 190, 91, 0.14);
}

.brand-wordmark .brand-word {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

/* Repti */
.brand-wordmark .brand-word:first-child .brand-initial,
.brand-wordmark .brand-word:first-child .brand-tail {
  background: none;
  color: var(--brand-white);
  -webkit-text-fill-color: var(--brand-white);
}

/* Vibe */
.brand-wordmark .brand-word:last-child .brand-initial,
.brand-wordmark .brand-word:last-child .brand-tail {
  background: none;
  color: var(--brand-gold);
  -webkit-text-fill-color: var(--brand-gold);
}

.public-brand .brand-wordmark {
  line-height: 1;
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .55px;
}

.auth-brand-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.auth-logo .auth-brand-row .logo-img-auth {
  margin: 0 !important;
  flex: 0 0 auto;
}

.auth-logo h1.brand-wordmark {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 1.25px;
}

.auth-logo p {
  margin-top: 11px;
}

.header-brand h2.brand-wordmark {
  font-family: 'Playfair Display', serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .65px;
}

.public-footer-brand strong.brand-wordmark {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .5px;
}

.public-footer-bottom .brand-inline {
  font-family: 'Playfair Display', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .35px;
}

@media (max-width: 620px) {
  .public-brand .brand-wordmark {
    font-size: 22px;
  }

  .auth-logo h1.brand-wordmark {
    font-size: 30px;
  }

  .header-brand h2.brand-wordmark {
    font-size: 22px;
  }

  .public-footer-brand strong.brand-wordmark {
    font-size: 21px;
  }
}

/* === PUBLIC BRAND EMBLEM: transparent round mark, no square field === */
.public-header .public-brand > img.public-brand-emblem,
.legal-header .public-brand > img.public-brand-emblem {
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: contain;
  border: 0 !important;
  border-radius: 50% !important;
  clip-path: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 7px rgba(34, 240, 215, .78))
    drop-shadow(0 0 15px rgba(34, 240, 215, .34)) !important;
}

/* === COPYRIGHT AND RIGHTS NOTICE === */
.public-footer-bottom.public-footer-legal {
  display: flex;
  flex-direction: column;
  gap: 7px;
  line-height: 1.65;
}

.public-footer-copyright {
  color: rgba(255,255,255,.78);
  font-size: 10px;
}

.public-footer-disclaimer {
  color: var(--text-muted);
  font-size: 9px;
}

.public-footer-disclaimer a {
  color: var(--accent-light);
  text-decoration: none;
}

.public-footer-disclaimer a:hover {
  color: var(--accent);
}

.legal-copyright-card {
  border-color: rgba(201,168,76,.24);
  background:
    radial-gradient(circle at 100% 0%, rgba(201,168,76,.08), transparent 34%),
    rgba(15,21,27,.9);
}

.legal-copyright-card h3 {
  color: #f1d27a;
}

@media (max-width: 620px) {
  .public-footer-copyright,
  .public-footer-disclaimer {
    font-size: 9px;
  }
}


/* v16: admin user metrics and maintenance mode */
.admin-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.admin-metric-card {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 132px;
  padding: 22px 24px;
  border: 1px solid rgba(216, 183, 95, 0.2);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
.admin-metric-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: rgba(216,183,95,.1);
  border: 1px solid rgba(216,183,95,.2);
  font-size: 25px;
}
.admin-metric-icon.active { color: #4cdcd2; text-shadow: 0 0 16px rgba(76,220,210,.7); }
.admin-metric-card span { display: block; color: var(--text-secondary); font-size: 14px; }
.admin-metric-card strong { display: block; margin: 3px 0; font-size: clamp(30px, 4vw, 42px); line-height: 1; color: var(--text-primary); }
.admin-metric-card small { color: rgba(255,255,255,.48); font-size: 12px; }
.admin-maintenance-card { border-color: rgba(76,220,210,.24); scroll-margin-top: 24px; }
.admin-maintenance-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.admin-maintenance-heading h3 { margin-bottom: 8px; }
.admin-maintenance-heading p { margin: 0; }
.admin-maintenance-status {
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}
.admin-maintenance-status[data-state="active"] { color: #ffb3aa; border-color: rgba(255,100,90,.35); background: rgba(255,90,80,.09); }
.admin-maintenance-status[data-state="scheduled"] { color: #f1d58b; border-color: rgba(216,183,95,.35); background: rgba(216,183,95,.09); }
.admin-maintenance-status[data-state="disabled"] { color: #74e4dc; border-color: rgba(76,220,210,.3); background: rgba(76,220,210,.08); }
.admin-maintenance-switch { display: flex; gap: 13px; align-items: center; padding: 16px; margin-bottom: 18px; border-radius: 15px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); cursor: pointer; }
.admin-maintenance-switch input { position: absolute; opacity: 0; pointer-events: none; }
.admin-switch-track { position: relative; width: 48px; height: 27px; flex: 0 0 48px; border-radius: 99px; background: rgba(255,255,255,.15); transition: .2s ease; }
.admin-switch-track span { position: absolute; top: 4px; left: 4px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: .2s ease; box-shadow: 0 3px 10px rgba(0,0,0,.3); }
.admin-maintenance-switch input:checked + .admin-switch-track { background: rgba(76,220,210,.68); box-shadow: 0 0 18px rgba(76,220,210,.18); }
.admin-maintenance-switch input:checked + .admin-switch-track span { transform: translateX(21px); }
.admin-maintenance-switch strong, .admin-maintenance-switch small { display: block; }
.admin-maintenance-switch small { margin-top: 3px; color: var(--text-secondary); font-size: 12px; }
.admin-maintenance-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.admin-maintenance-note { margin-top: 16px; padding: 13px 15px; border-radius: 13px; background: rgba(76,220,210,.055); color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.admin-maintenance-note code { color: #f1d58b; background: rgba(0,0,0,.22); padding: 2px 6px; border-radius: 6px; }

/* v17: read-only admin user list and presence statistics */
.admin-users-card {
  scroll-margin-top: 24px;
  margin-bottom: 20px;
  border-color: rgba(216,183,95,.22);
}
.admin-users-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.admin-users-heading h3 { margin-bottom: 8px; }
.admin-users-heading p { margin: 0; }
.admin-users-total {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(216,183,95,.22);
  border-radius: 999px;
  background: rgba(216,183,95,.07);
  color: var(--accent-light);
  font-size: 12px;
  font-weight: 800;
}
.admin-users-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(190px, 240px) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}
.admin-users-toolbar .form-group { margin-bottom: 0; }
.admin-users-refresh { min-height: 42px; white-space: nowrap; }
.admin-users-list {
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 15px;
  background: rgba(0,0,0,.12);
}
.admin-users-table { min-width: 1040px; }
.admin-users-row {
  display: grid;
  grid-template-columns: minmax(210px,1.35fr) minmax(140px,.8fr) minmax(150px,.9fr) minmax(185px,1.05fr) minmax(150px,.8fr) 112px;
  gap: 14px;
  align-items: center;
  padding: 14px 15px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.admin-users-row:last-child { border-bottom: 0; }
.admin-users-row:not(.admin-users-row-head):hover { background: rgba(216,183,95,.035); }
.admin-users-row-head {
  min-height: 42px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(255,255,255,.035);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.admin-user-main,
.admin-user-animals,
.admin-user-date,
.admin-user-time { min-width: 0; }
.admin-user-main strong,
.admin-user-animals strong,
.admin-user-date strong,
.admin-user-time strong {
  display: block;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
}
.admin-user-main a,
.admin-user-main small,
.admin-user-animals small,
.admin-user-date small,
.admin-user-time small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.45;
  text-overflow: ellipsis;
}
.admin-user-main a { color: var(--text-secondary); text-decoration: none; }
.admin-user-main a:hover { color: var(--accent-light); }
.admin-user-state {
  display: inline-flex !important;
  width: fit-content;
  margin-top: 7px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.admin-user-state.active { color: #73e5dc; border-color: rgba(76,220,210,.28); background: rgba(76,220,210,.08); }
.admin-user-state.recent { color: #f1d58b; border-color: rgba(216,183,95,.28); background: rgba(216,183,95,.08); }
.admin-user-state.inactive { color: #ffb3aa; border-color: rgba(255,100,90,.28); background: rgba(255,100,90,.07); }
.admin-user-state.never { color: var(--text-muted); background: rgba(255,255,255,.035); }
.admin-user-action { text-align: right; }
.admin-user-action .btn { white-space: nowrap; }
.admin-users-empty {
  padding: 28px 18px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}
.admin-users-empty.compact { padding: 16px; }
.admin-users-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}
.admin-users-pagination span { color: var(--text-muted); font-size: 11px; }
.admin-users-privacy-note,
.admin-user-preview-note {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 11px;
  background: rgba(76,220,210,.045);
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.55;
}
.admin-user-preview-modal { width: min(940px, 94vw); }
.admin-user-preview-modal .modal-header { align-items: flex-start; }
.admin-user-preview-modal .modal-header p { margin: 4px 0 0; font-size: 10px; }
.admin-user-preview-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.admin-user-preview-summary > div {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.admin-user-preview-summary span,
.admin-user-preview-summary strong,
.admin-user-preview-summary small { display: block; }
.admin-user-preview-summary > div > span { color: var(--text-muted); font-size: 9px; text-transform: uppercase; }
.admin-user-preview-summary > div > strong { margin-top: 6px; overflow: hidden; color: var(--text-primary); font-size: 12px; text-overflow: ellipsis; }
.admin-user-preview-summary > div > small { margin-top: 5px; color: var(--text-muted); font-size: 9px; line-height: 1.45; }
.admin-user-preview-section { margin-top: 18px; }
.admin-user-preview-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.admin-user-preview-section-head h4 { margin: 0; color: var(--text-primary); font-size: 13px; }
.admin-user-preview-section-head span { color: var(--text-muted); font-size: 10px; }
.admin-user-preview-animals { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.admin-user-preview-animal {
  padding: 14px;
  border: 1px solid rgba(216,183,95,.14);
  border-radius: 13px;
  background: rgba(0,0,0,.12);
}
.admin-user-preview-animal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.admin-user-preview-animal-head strong,
.admin-user-preview-animal-head small { display: block; }
.admin-user-preview-animal-head strong { color: var(--accent-light); font-size: 13px; }
.admin-user-preview-animal-head small { margin-top: 3px; color: var(--text-secondary); font-size: 10px; }
.admin-user-preview-animal-head > span { flex: 0 0 auto; color: var(--text-muted); font-size: 9px; }
.admin-user-preview-animal p { margin: 10px 0; color: var(--text-muted); font-size: 10px; line-height: 1.5; }
.admin-user-preview-counters { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-user-preview-counters span {
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: var(--text-secondary);
  font-size: 9px;
}
.admin-user-activity-list {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
}
.admin-user-activity-item {
  display: grid;
  grid-template-columns: 9px minmax(0,1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.admin-user-activity-item:last-child { border-bottom: 0; }
.admin-user-activity-item > span { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(216,183,95,.25); }
.admin-user-activity-item strong,
.admin-user-activity-item small { display: block; }
.admin-user-activity-item strong { color: var(--text-secondary); font-size: 10px; font-weight: 700; }
.admin-user-activity-item small { margin-top: 3px; color: var(--text-muted); font-size: 9px; }

html[data-theme="light"] .admin-users-list,
html[data-theme="light"] .admin-user-preview-animal { background: rgba(109,91,54,.035); }
html[data-theme="light"] .admin-users-row { border-bottom-color: rgba(76,61,35,.08); }
html[data-theme="light"] .admin-users-row:not(.admin-users-row-head):hover { background: rgba(176,139,59,.055); }
html[data-theme="light"] .admin-user-activity-list,
html[data-theme="light"] .admin-user-preview-summary > div,
html[data-theme="light"] .admin-user-preview-counters span { border-color: rgba(76,61,35,.09); }

@media (max-width: 760px) {
  .admin-metrics-grid { grid-template-columns: 1fr; }
  .admin-maintenance-heading { flex-direction: column; }
  .admin-maintenance-status { white-space: normal; }
  .admin-maintenance-actions .btn { width: 100%; }
  .admin-users-heading { flex-direction: column; }
  .admin-users-toolbar { grid-template-columns: 1fr; }
  .admin-users-refresh { width: 100%; }
  .admin-users-list { overflow: visible; border: 0; background: transparent; }
  .admin-users-table { min-width: 0; }
  .admin-users-row-head { display: none; }
  .admin-users-row {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 10px;
    padding: 4px 14px 12px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px;
    background: rgba(255,255,255,.02);
  }
  .admin-users-row > div:not(.admin-user-action) { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
  .admin-users-row > div:not(.admin-user-action)::before {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted);
    content: attr(data-label);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .admin-user-action { padding-top: 10px; }
  .admin-user-action .btn { width: 100%; }
  .admin-users-pagination { justify-content: space-between; }
  .admin-user-preview-summary { grid-template-columns: 1fr 1fr; }
  .admin-user-preview-animals { grid-template-columns: 1fr; }
  .admin-user-preview-modal { width: 94vw; padding: 20px; }
}

@media (max-width: 480px) {
  .admin-user-preview-summary { grid-template-columns: 1fr; }
}


/* Veiled chameleon card: crop only the thin embedded line at the top; the source photo remains unchanged. */
.public-species-image img[src*="chamaeleo-calyptratus-card.webp"] {
  height: calc(100% + 20px) !important;
  margin-top: -20px !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}
.public-species-card:hover .public-species-image img[src*="chamaeleo-calyptratus-card.webp"] {
  transform: none !important;
}

/* =====================================================================
   REPTIVIBE GLOBAL THEME SWITCHER · v1.13.0
   The existing dark theme is the untouched default. All new visual rules
   are scoped to html[data-theme="light"].
   ===================================================================== */
:root {
  --chart-muted: #9aa4b2;
  --chart-grid: rgba(255,255,255,.08);
}

.theme-toggle {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(201,168,76,.2);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: var(--text-secondary);
  font: 700 10px/1 'Montserrat', sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.theme-toggle:hover {
  color: var(--accent-light);
  border-color: rgba(201,168,76,.42);
  background: rgba(201,168,76,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
.theme-toggle-icon { font-size: 15px; line-height: 1; }
.theme-toggle-label { line-height: 1; }
.public-header-actions,
.reading-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.theme-toggle-public { min-width: 91px; }
.theme-toggle-app { min-width: 84px; }
.reading-header-actions .theme-toggle { min-width: 91px; }

.theme-settings-copy {
  max-width: 620px;
  margin: 6px 0 18px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.7;
}
.theme-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.theme-choice {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 15px;
  min-height: 110px;
  padding: 14px;
  border: 1px solid rgba(201,168,76,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.theme-choice:hover { transform: translateY(-2px); border-color: rgba(201,168,76,.38); }
.theme-choice.active {
  border-color: rgba(201,168,76,.55);
  background: rgba(201,168,76,.075);
  box-shadow: 0 0 0 2px rgba(201,168,76,.08), 0 14px 30px rgba(0,0,0,.12);
}
.theme-choice > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.theme-choice strong { font-size: 13px; }
.theme-choice small { color: var(--text-secondary); font-size: 10px; line-height: 1.5; }
.theme-choice-preview {
  height: 76px;
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-rows: 18px 1fr;
  overflow: hidden;
  border-radius: 11px;
  border: 1px solid rgba(201,168,76,.2);
  box-shadow: 0 8px 18px rgba(0,0,0,.16);
}
.theme-choice-preview i { display: block; }
.theme-choice-preview i:nth-child(1) { grid-column: 1 / -1; }
.theme-choice-preview i:nth-child(2) { grid-row: 2; }
.theme-choice-preview i:nth-child(3) { grid-row: 2; }
.theme-choice-preview-dark { background: #11131b; }
.theme-choice-preview-dark i:nth-child(1) { background: #090b11; border-bottom: 1px solid rgba(201,168,76,.25); }
.theme-choice-preview-dark i:nth-child(2) { background: #171a25; }
.theme-choice-preview-dark i:nth-child(3) { margin: 8px; border-radius: 6px; background: #202535; }
.theme-choice-preview-light { background: #f6f1e7; }
.theme-choice-preview-light i:nth-child(1) { background: #fffdf8; border-bottom: 1px solid rgba(140,100,27,.22); }
.theme-choice-preview-light i:nth-child(2) { background: #eee5d6; }
.theme-choice-preview-light i:nth-child(3) { margin: 8px; border-radius: 6px; background: #fffdfa; box-shadow: 0 4px 12px rgba(57,47,27,.12); }

html[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #f5f1e8;
  --bg-secondary: #ece5d8;
  --bg-card: #fffdf8;
  --bg-card-hover: #f8f1e5;
  --accent: #a67420;
  --accent-light: #8a6018;
  --accent-dark: #735014;
  --text-primary: #292822;
  --text-secondary: #5d615d;
  --text-muted: #85877f;
  --success: #197f78;
  --danger: #c44d4d;
  --warning: #9b7100;
  --info: #3a62ae;
  --gradient-gold: linear-gradient(135deg, #95671c, #d4b15e, #a67420);
  --shadow-gold: 0 0 28px rgba(166,116,32,.11);
  --shadow-card: 0 12px 34px rgba(67,56,35,.10);
  --border-subtle: 1px solid rgba(128,94,35,.16);
  --brand-white: #292822;
  --brand-gold: #a67420;
  --chart-muted: #6f746f;
  --chart-grid: rgba(68,62,50,.13);
}

html[data-theme="light"] body {
  background: var(--bg-primary);
  color: var(--text-primary);
}
html[data-theme="light"] .bg-animated {
  background:
    radial-gradient(ellipse 860px 620px at 16% 14%, rgba(192,151,75,.13) 0%, transparent 70%),
    radial-gradient(ellipse 680px 470px at 86% 82%, rgba(25,127,120,.08) 0%, transparent 70%);
}
html[data-theme="light"] .bg-pattern {
  opacity: .035;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(128,94,35,.32) 35px, rgba(128,94,35,.32) 36px);
}
html[data-theme="light"] ::selection { background: rgba(166,116,32,.22); color: #221d13; }

/* Shared controls */
html[data-theme="light"] .theme-toggle {
  border-color: rgba(128,94,35,.2);
  background: rgba(255,253,248,.72);
  color: #625c51;
  box-shadow: 0 5px 16px rgba(67,56,35,.06);
}
html[data-theme="light"] .theme-toggle:hover {
  color: var(--accent-dark);
  border-color: rgba(128,94,35,.42);
  background: #fffdf8;
  box-shadow: 0 9px 22px rgba(67,56,35,.11);
}
html[data-theme="light"] .theme-choice { background: #fffdf8; border-color: rgba(128,94,35,.16); }
html[data-theme="light"] .theme-choice.active { background: #fbf3e5; border-color: rgba(166,116,32,.48); }
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .form-group textarea,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background-color: rgba(255,253,248,.96);
  border-color: rgba(128,94,35,.2);
  color: var(--text-primary);
}
html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group select:focus,
html[data-theme="light"] .form-group textarea:focus,
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
  background-color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(166,116,32,.11);
}
html[data-theme="light"] select option { background: #fffdf8; color: #292822; }
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #9b9b92; }
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .auth-tab.active,
html[data-theme="light"] .article-nav-btn.active,
html[data-theme="light"] .user-avatar,
html[data-theme="light"] .account-avatar-preview { color: #fffdf8; }
html[data-theme="light"] .btn-secondary { background: rgba(166,116,32,.08); border-color: rgba(166,116,32,.22); }
html[data-theme="light"] .btn-secondary:hover { background: rgba(166,116,32,.14); }
html[data-theme="light"] .modal-overlay { background: rgba(64,56,43,.44); }
html[data-theme="light"] .modal,
html[data-theme="light"] .auth-wrapper {
  background: rgba(255,253,248,.97);
  border-color: rgba(128,94,35,.18);
  box-shadow: 0 24px 70px rgba(55,45,29,.18), var(--shadow-gold);
}
html[data-theme="light"] .auth-tabs,
html[data-theme="light"] .account-tabs { background: rgba(104,88,59,.075); }
html[data-theme="light"] .auth-articles { background: rgba(236,229,216,.68); }
html[data-theme="light"] .account-profile-head { background: linear-gradient(135deg, rgba(25,127,120,.08), rgba(166,116,32,.08)); }
html[data-theme="light"] .account-avatar-edit { box-shadow: 0 7px 18px rgba(67,56,35,.13); }

/* Personal cabinet */
html[data-theme="light"] .header {
  background: rgba(255,253,248,.91);
  border-bottom-color: rgba(128,94,35,.16);
  box-shadow: 0 8px 24px rgba(67,56,35,.055);
}
html[data-theme="light"] .mobile-nav { background: rgba(255,253,248,.96) !important; }
html[data-theme="light"] .nav-btn:hover:not(.active) { background: rgba(104,88,59,.07); }
html[data-theme="light"] .header-nav { border-color: rgba(128,94,35,.12); }
html[data-theme="light"] .stat-card,
html[data-theme="light"] .snake-profile,
html[data-theme="light"] .chart-container,
html[data-theme="light"] .feeding-table-wrapper,
html[data-theme="light"] .add-form-card,
html[data-theme="light"] .info-hero,
html[data-theme="light"] .info-card,
html[data-theme="light"] .dashboard-panel,
html[data-theme="light"] .dashboard-animal-card,
html[data-theme="light"] .health-card,
html[data-theme="light"] .molting-card,
html[data-theme="light"] .gallery-card,
html[data-theme="light"] .breeding-pair-card,
html[data-theme="light"] .breeding-cycle-card,
html[data-theme="light"] .breeding-clutch-card,
html[data-theme="light"] .breeding-offspring-card,
html[data-theme="light"] .admin-metric-card,
html[data-theme="light"] .admin-maintenance-card {
  background-color: var(--bg-card);
  border-color: rgba(128,94,35,.15);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .calendar-card,
html[data-theme="light"] .calendar-agenda-card {
  background: linear-gradient(180deg, #fffdf8, #faf5ec);
  border-color: rgba(128,94,35,.15);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .calendar-toolbar,
html[data-theme="light"] .calendar-filter-bar,
html[data-theme="light"] .calendar-weekdays,
html[data-theme="light"] .calendar-day,
html[data-theme="light"] .calendar-agenda-card,
html[data-theme="light"] .feeding-table th,
html[data-theme="light"] .feeding-table td,
html[data-theme="light"] table th,
html[data-theme="light"] table td {
  border-color: rgba(90,78,55,.11);
}
html[data-theme="light"] .calendar-animal-select { background: #fffdf8; border-color: rgba(128,94,35,.18); }
html[data-theme="light"] .calendar-nav-btn,
html[data-theme="light"] .calendar-view-btn,
html[data-theme="light"] .calendar-filter-btn,
html[data-theme="light"] .dashboard-scope-btn {
  background: rgba(104,88,59,.04);
  border-color: rgba(104,88,59,.14);
}
html[data-theme="light"] .calendar-day { background: rgba(255,253,248,.72); }
html[data-theme="light"] .calendar-day:hover { background: #fff; }
html[data-theme="light"] .calendar-day.outside-month { background: rgba(236,229,216,.42); }
html[data-theme="light"] .dashboard-event-list,
html[data-theme="light"] .dashboard-panel,
html[data-theme="light"] .account-panel,
html[data-theme="light"] .feeding-table-wrapper { scrollbar-color: rgba(166,116,32,.45) rgba(104,88,59,.08); }
html[data-theme="light"] .dashboard-event-list::-webkit-scrollbar-track { background: rgba(104,88,59,.07); }
html[data-theme="light"] .dashboard-empty,
html[data-theme="light"] .empty-state { color: var(--text-secondary); }
html[data-theme="light"] .admin-metric-card,
html[data-theme="light"] .admin-maintenance-switch { background: linear-gradient(145deg, #fffdf8, #faf4e9); }
html[data-theme="light"] .admin-metric-card small { color: var(--text-muted); }
html[data-theme="light"] .admin-maintenance-status { background: rgba(104,88,59,.055); border-color: rgba(104,88,59,.15); }
html[data-theme="light"] .admin-switch-track { background: rgba(104,88,59,.22); }
html[data-theme="light"] .admin-maintenance-note { background: rgba(25,127,120,.07); }
html[data-theme="light"] .admin-maintenance-note code { background: rgba(104,88,59,.08); }

/* Public home and authentication */
html[data-theme="light"] .public-site {
  background:
    radial-gradient(circle at 8% 8%, rgba(166,116,32,.12), transparent 30%),
    radial-gradient(circle at 86% 28%, rgba(25,127,120,.08), transparent 26%),
    var(--bg-primary);
}
html[data-theme="light"] .public-header {
  background: rgba(255,253,248,.91);
  border-bottom-color: rgba(128,94,35,.16);
  box-shadow: 0 8px 24px rgba(67,56,35,.055);
}
html[data-theme="light"] .public-nav button:hover { background: rgba(166,116,32,.08); }
html[data-theme="light"] .public-login-button {
  background: rgba(166,116,32,.07);
  border-color: rgba(166,116,32,.34);
  color: var(--accent-dark);
  box-shadow: inset 0 0 16px rgba(166,116,32,.025);
}
html[data-theme="light"] .public-hero {
  background: #08080c;
}
html[data-theme="light"] .public-hero-copy,
html[data-theme="light"] .public-hero-copy h1,
html[data-theme="light"] .public-hero-copy p,
html[data-theme="light"] .public-hero-metrics strong { color: #f4f1ea; }
html[data-theme="light"] .public-hero-copy em,
html[data-theme="light"] .public-eyebrow,
html[data-theme="light"] .public-hero-metrics span { color: #d9c480; }
html[data-theme="light"] .public-secondary-action { color: #f4f1ea; border-color: rgba(255,255,255,.3); background: rgba(8,8,12,.25); }
html[data-theme="light"] .public-topic-card,
html[data-theme="light"] .public-article-card {
  background: linear-gradient(150deg, #fffdf8, #faf5ec);
  border-color: rgba(128,94,35,.15);
  box-shadow: 0 12px 30px rgba(67,56,35,.08);
}
html[data-theme="light"] .public-article-card:hover,
html[data-theme="light"] .public-topic-card:hover { box-shadow: 0 20px 48px rgba(67,56,35,.14); }
html[data-theme="light"] .public-species-card {
  background: linear-gradient(180deg, #fffdf8, #f8f1e5);
  border-color: rgba(128,94,35,.17);
  box-shadow: 0 13px 30px rgba(67,56,35,.10);
}
html[data-theme="light"] .public-species-card:hover { box-shadow: 0 21px 44px rgba(67,56,35,.16), 0 0 22px rgba(166,116,32,.06); }
html[data-theme="light"] .public-species-image { border-bottom-color: rgba(128,94,35,.14); }
html[data-theme="light"] .public-features-shell {
  background:
    radial-gradient(circle at 92% 20%, rgba(25,127,120,.09), transparent 26%),
    radial-gradient(circle at 10% 100%, rgba(166,116,32,.12), transparent 34%),
    linear-gradient(145deg, #fffdf8, #f4ecdf);
  border-color: rgba(128,94,35,.18);
  box-shadow: 0 26px 62px rgba(67,56,35,.12);
}
html[data-theme="light"] .public-feature-list article { background: rgba(255,255,255,.58); border-color: rgba(128,94,35,.12); }
html[data-theme="light"] .public-footer {
  background: #ebe3d5;
  border-top-color: rgba(128,94,35,.15);
}
html[data-theme="light"] .public-footer-bottom { border-top-color: rgba(90,78,55,.11); }
html[data-theme="light"] .public-footer-copyright { color: #5d574d; }
html[data-theme="light"] .auth-container { background: var(--bg-primary); }
html[data-theme="light"] .auth-side-panel { background: linear-gradient(145deg, rgba(166,116,32,.1), rgba(25,127,120,.055)); border-left-color: rgba(128,94,35,.14); }

/* Long-form article pages */
html[data-theme="light"] body.public-reading-page {
  background:
    radial-gradient(circle at 80% 0%, rgba(25,127,120,.08), transparent 28%),
    radial-gradient(circle at 10% 18%, rgba(166,116,32,.11), transparent 30%),
    var(--bg-primary);
}
html[data-theme="light"] .reading-header {
  background: rgba(255,253,248,.91);
  border-bottom-color: rgba(128,94,35,.16);
  box-shadow: 0 8px 24px rgba(67,56,35,.055);
}
html[data-theme="light"] .reading-hero { border-color: rgba(128,94,35,.18); box-shadow: 0 30px 72px rgba(67,56,35,.18); }
html[data-theme="light"] .reading-hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
html[data-theme="light"] .reading-hero .reading-lead { color: #eeeae2; }
html[data-theme="light"] .reading-hero .reading-latin,
html[data-theme="light"] .reading-hero .reading-kicker { color: #f0d68b; }
html[data-theme="light"] .reading-meta div,
html[data-theme="light"] .reading-opening,
html[data-theme="light"] .reading-action-list,
html[data-theme="light"] .reading-fact,
html[data-theme="light"] .reading-warning,
html[data-theme="light"] .reading-aside,
html[data-theme="light"] .reading-related a {
  background: rgba(255,253,248,.83);
  border-color: rgba(128,94,35,.15);
}
html[data-theme="light"] .reading-opening { color: #45443e; }
html[data-theme="light"] .reading-section { border-bottom-color: rgba(90,78,55,.11); }
html[data-theme="light"] .reading-section p,
html[data-theme="light"] .reading-section li { color: #515550; }
html[data-theme="light"] .reading-fact p { color: #555a55; }
html[data-theme="light"] .reading-warning { background: rgba(176,130,15,.07); border-color: rgba(155,113,0,.2); }
html[data-theme="light"] .reading-warning h2 { color: #8d6703; }
html[data-theme="light"] .reading-warning p { color: #5d5b52; }
html[data-theme="light"] .reading-aside { box-shadow: 0 16px 38px rgba(67,56,35,.09); }
html[data-theme="light"] .reading-toc a:hover { background: rgba(166,116,32,.07); }
html[data-theme="light"] .reading-related a { background: #fffdf8; }
html[data-theme="light"] .reading-footer { background: #ebe3d5; border-top-color: rgba(128,94,35,.15); }

/* Sources and rights */
html[data-theme="light"] .legal-page-body { background: var(--bg-primary); }
html[data-theme="light"] .legal-hero {
  background: radial-gradient(circle at 90% 10%, rgba(25,127,120,.10), transparent 28%), linear-gradient(145deg, #fffdf8, #f1e8d9);
  border-color: rgba(128,94,35,.18);
  box-shadow: 0 26px 62px rgba(67,56,35,.12);
}
html[data-theme="light"] .legal-copy-card,
html[data-theme="light"] .legal-source-card,
html[data-theme="light"] .legal-master-details,
html[data-theme="light"] .legal-photo-row,
html[data-theme="light"] .legal-license-group {
  background: rgba(255,253,248,.9);
  border-color: rgba(128,94,35,.15);
  box-shadow: 0 10px 26px rgba(67,56,35,.055);
}
html[data-theme="light"] .legal-details { border-top-color: rgba(90,78,55,.10); }
html[data-theme="light"] .legal-copyright-card {
  background: radial-gradient(circle at 100% 0%, rgba(166,116,32,.09), transparent 34%), #fffdf8;
}

@media (max-width: 860px) {
  .theme-toggle-public,
  .theme-toggle-app,
  .reading-header-actions .theme-toggle { min-width: 38px; width: 38px; padding-inline: 0; }
  .theme-toggle-label { display: none; }
  .public-header-actions { gap: 7px; }
  .reading-header-actions { gap: 8px; }
}
@media (max-width: 620px) {
  .theme-choice-grid { grid-template-columns: 1fr; }
  .theme-choice { grid-template-columns: 82px 1fr; }
  .public-header-actions .public-login-button { min-width: 78px; padding-inline: 9px; }
}
.auth-page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.auth-page-toolbar .auth-back-button { margin-bottom: 0; }

/* Light-theme refinements for components that use legacy literal dark fills. */
html[data-theme="light"] select,
html[data-theme="light"] select option,
html[data-theme="light"] select optgroup,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .form-group select option,
html[data-theme="light"] .form-group select optgroup,
html[data-theme="light"] .animal-selector,
html[data-theme="light"] .animal-selector option {
  background-color: #fffdf8 !important;
  color: var(--text-primary) !important;
  border-color: rgba(128,94,35,.2) !important;
}
html[data-theme="light"] select:focus,
html[data-theme="light"] .form-group select:focus,
html[data-theme="light"] .animal-selector:focus {
  border-color: var(--success) !important;
  box-shadow: 0 0 0 3px rgba(25,127,120,.11) !important;
}
html[data-theme="light"] .chart-stats,
html[data-theme="light"] .feeding-table th,
html[data-theme="light"] .summary-item,
html[data-theme="light"] .snake-size-visual,
html[data-theme="light"] .health-item,
html[data-theme="light"] .molting-health-item,
html[data-theme="light"] .progress-bar {
  background: rgba(236,229,216,.62);
}
html[data-theme="light"] .chart-stats { box-shadow: 0 7px 18px rgba(67,56,35,.08); }
html[data-theme="light"] .care-tabs-panel,
html[data-theme="light"] .care-content-panel,
html[data-theme="light"] .care-article-card,
html[data-theme="light"] .care-photo-item,
html[data-theme="light"] .care-section-card {
  background: #fffdf8;
  border-color: rgba(25,127,120,.16);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .care-species-tab { background: #f5eee3; border-color: rgba(25,127,120,.14); }
html[data-theme="light"] .care-species-tab:hover { background: #fff; }
html[data-theme="light"] .care-photo-frame { background: #e9e2d7; }
html[data-theme="light"] .care-photo-credit { background: #f8f2e8; border-top-color: rgba(25,127,120,.13); }
html[data-theme="light"] .public-species-toolbar { background: rgba(255,253,248,.76); border-color: rgba(128,94,35,.15); }
html[data-theme="light"] .public-species-search { background: #fffdf8; border-color: rgba(128,94,35,.18); }
html[data-theme="light"] .public-species-filter { background: rgba(255,253,248,.78); border-color: rgba(128,94,35,.18); }
html[data-theme="light"] .public-species-filter.active { background: rgba(166,116,32,.10); }
html[data-theme="light"] .public-content-dialog {
  background: linear-gradient(145deg, #fffdf8, #f4ecdf);
  box-shadow: 0 34px 88px rgba(67,56,35,.24), 0 0 36px rgba(166,116,32,.06);
}
html[data-theme="light"] .public-modal-hero-copy h2 { color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.35); }
html[data-theme="light"] .public-modal-hero-copy p { color: #ece8df; }
html[data-theme="light"] .public-modal-section { border-bottom-color: rgba(90,78,55,.11); }
html[data-theme="light"] .public-species-warning { border-color: rgba(25,127,120,.2) !important; background: rgba(25,127,120,.06) !important; }

html[data-theme="light"] .dashboard-scope-switch,
html[data-theme="light"] .dashboard-animal-search,
html[data-theme="light"] .dashboard-animal-select-wrap select,
html[data-theme="light"] .dashboard-animal-avatar,
html[data-theme="light"] .dashboard-animal-metrics div,
html[data-theme="light"] .growth-metric-switch,
html[data-theme="light"] .growth-chart-stats div,
html[data-theme="light"] .molting-stage,
html[data-theme="light"] .health-filter-bar,
html[data-theme="light"] .health-record-card,
html[data-theme="light"] .health-attachment-editor {
  background: rgba(236,229,216,.55);
  border-color: rgba(90,78,55,.13);
}
html[data-theme="light"] .dashboard-animal-search:focus-within,
html[data-theme="light"] .dashboard-animal-select-wrap select:focus { background: #fff; }
html[data-theme="light"] .growth-metric-btn.active { color: #fffdf8; }
html[data-theme="light"] .molting-stage > span { background: rgba(104,88,59,.09); }
html[data-theme="light"] .health-filter-btn.active { color: var(--success); }
html[data-theme="light"] .health-record-card.active { background: rgba(176,130,15,.075); }
html[data-theme="light"] .health-record-card.completed { background: rgba(25,127,120,.065); }
html[data-theme="light"] .breeding-section,
html[data-theme="light"] .breeding-list-row {
  background: #fffdf8;
  border-color: rgba(90,78,55,.14);
}
html[data-theme="light"] .breeding-list { background: rgba(90,78,55,.1); }
html[data-theme="light"] .breeding-list-row:nth-child(even) { background: #faf5ec; }
html[data-theme="light"] .legal-license-group-body { border-top-color: rgba(90,78,55,.10); }
html[data-theme="light"] .legal-photo-row-compact { background: #faf5ec; }

/* =====================================================================
   REPTIVIBE LIGHT THEME REFINEMENT · v1.13.1
   Dark theme remains untouched. These rules improve contrast, health,
   breeding and logo presentation only when the light theme is active.
   ===================================================================== */
html[data-theme="light"] {
  --bg-primary: #e8e1d5;
  --bg-secondary: #ddd4c5;
  --bg-card: #f7f3eb;
  --bg-card-hover: #efe8dc;
  --text-primary: #1f2420;
  --text-secondary: #3f4741;
  --text-muted: #626a64;
  --border: rgba(91,78,55,.20);
  --text: #1f2420;
  --shadow-card: 0 12px 34px rgba(62,52,37,.13);
}
html[data-theme="light"] .theme-choice-preview-light { background: #e8e1d5; }
html[data-theme="light"] .theme-choice-preview-light i:nth-child(1) { background: #f7f3eb; }
html[data-theme="light"] .theme-choice-preview-light i:nth-child(2) { background: #ddd4c5; }
html[data-theme="light"] .theme-choice-preview-light i:nth-child(3) { background: #f7f3eb; }
html[data-theme="light"] .bg-animated {
  background:
    radial-gradient(ellipse 860px 620px at 16% 14%, rgba(161,120,52,.14) 0%, transparent 70%),
    radial-gradient(ellipse 680px 470px at 86% 82%, rgba(25,112,105,.09) 0%, transparent 70%);
}
html[data-theme="light"] .public-site,
html[data-theme="light"] body.public-reading-page {
  background-color: var(--bg-primary);
}
html[data-theme="light"] .theme-settings-copy,
html[data-theme="light"] .section-header p,
html[data-theme="light"] .dashboard-header p,
html[data-theme="light"] .info-card p,
html[data-theme="light"] .form-group label,
html[data-theme="light"] .table-subline {
  color: var(--text-secondary);
}

/* Health and molting: remove old dark islands and raise text contrast. */
html[data-theme="light"] .health-journal-section,
html[data-theme="light"] .health-journal-section.molting-health-section {
  border-color: rgba(91,78,55,.18);
  background:
    radial-gradient(circle at 12% 0%, rgba(25,127,120,.09), transparent 38%),
    #f4efe6;
  box-shadow: 0 10px 28px rgba(62,52,37,.09);
}
html[data-theme="light"] .health-journal-section.molting-health-section {
  background:
    radial-gradient(circle at 12% 0%, rgba(166,116,32,.11), transparent 38%),
    #f4efe6;
}
html[data-theme="light"] .health-journal-collapsible:not(.is-collapsed) .health-journal-header,
html[data-theme="light"] .health-record-body,
html[data-theme="light"] .health-record-detail,
html[data-theme="light"] .molting-card-compact .molting-cycle-note {
  border-color: rgba(91,78,55,.13);
}
html[data-theme="light"] .health-journal-title-row strong,
html[data-theme="light"] .health-record-title-row strong,
html[data-theme="light"] .molting-health-name strong,
html[data-theme="light"] .molting-date-mark strong {
  color: #1f2420;
}
html[data-theme="light"] .health-journal-summary,
html[data-theme="light"] .health-record-meta,
html[data-theme="light"] .health-record-detail > span,
html[data-theme="light"] .health-record-subtitle,
html[data-theme="light"] .molting-health-detail,
html[data-theme="light"] .molting-health-dates,
html[data-theme="light"] .molting-cycle-note,
html[data-theme="light"] .molting-cycle-meta {
  color: #515a53;
}
html[data-theme="light"] .health-journal-title-row .section-count,
html[data-theme="light"] .health-journal-chevron,
html[data-theme="light"] .health-record-chevron {
  border-color: rgba(91,78,55,.18);
  background: rgba(255,255,255,.46);
  color: #515a53;
}
html[data-theme="light"] .health-filter-bar {
  border-color: rgba(91,78,55,.17);
  background: #e4dccf;
}
html[data-theme="light"] .health-filter-btn { color: #5c645e; }
html[data-theme="light"] .health-filter-btn.active {
  background: rgba(25,127,120,.14);
  color: #126e68;
  box-shadow: inset 0 0 0 1px rgba(25,127,120,.22);
}
html[data-theme="light"] .health-record-card,
html[data-theme="light"] .molting-health-item,
html[data-theme="light"] .molting-cycle-card,
html[data-theme="light"] .molting-card-compact {
  border-color: rgba(91,78,55,.16);
  background: #faf7f1;
  box-shadow: 0 7px 18px rgba(62,52,37,.07);
}
html[data-theme="light"] .health-record-card.active,
html[data-theme="light"] .molting-health-item.active,
html[data-theme="light"] .molting-cycle-card.active {
  background: #fbf3df;
}
html[data-theme="light"] .health-record-card.completed,
html[data-theme="light"] .molting-health-item.completed {
  background: #edf7f3;
}
html[data-theme="light"] .molting-stage {
  border-color: rgba(91,78,55,.14);
  background: #eee8dd;
}
html[data-theme="light"] .molting-stage > span {
  background: rgba(255,255,255,.58);
  color: #59615b;
}
html[data-theme="light"] .molting-stage strong { color: #424b44; }
html[data-theme="light"] .molting-stage small { color: #667069; }
html[data-theme="light"] .health-record-attachment,
html[data-theme="light"] .health-attachment-draft-item {
  border-color: rgba(91,78,55,.15);
  background: #f0eadf;
}
html[data-theme="light"] .health-attachment-editor {
  border-color: rgba(91,78,55,.17);
  background: #eee7dc;
}
html[data-theme="light"] .health-attachment-editor-body { border-top-color: rgba(91,78,55,.13); }
html[data-theme="light"] .health-attachment-count { color: #126e68; }

/* Breeding dashboard, records and creation forms. */
html[data-theme="light"] .breeding-stat-card,
html[data-theme="light"] .breeding-section,
html[data-theme="light"] .breeding-pair-card,
html[data-theme="light"] .breeding-clutch-card,
html[data-theme="light"] .breeding-offspring-card,
html[data-theme="light"] .breeding-cycle-card,
html[data-theme="light"] .breeding-litter-card {
  border-color: rgba(91,78,55,.17);
  background: linear-gradient(145deg, #faf7f1, #f1eadf);
  box-shadow: 0 10px 26px rgba(62,52,37,.10);
}
html[data-theme="light"] .breeding-section { background: #f2ece2; }
html[data-theme="light"] .breeding-section-header,
html[data-theme="light"] .breeding-section-body,
html[data-theme="light"] .breeding-litter-body,
html[data-theme="light"] .breeding-modal .modal-actions-row {
  border-color: rgba(91,78,55,.14);
}
html[data-theme="light"] .breeding-list { background: rgba(91,78,55,.12); }
html[data-theme="light"] .breeding-list-row { background: #faf7f1; }
html[data-theme="light"] .breeding-parent-row > div,
html[data-theme="light"] .breeding-clutch-numbers div,
html[data-theme="light"] .breeding-parent-summary,
html[data-theme="light"] .breeding-cycle-summary span,
html[data-theme="light"] .breeding-cycle-timeline > div,
html[data-theme="light"] .breeding-cycle-related,
html[data-theme="light"] .offspring-link-panel {
  background: #e9e1d4;
  border-color: rgba(91,78,55,.14);
}
html[data-theme="light"] .breeding-stat-card strong,
html[data-theme="light"] .breeding-stat-card span:not(.breeding-stat-icon),
html[data-theme="light"] .breeding-card-top h3,
html[data-theme="light"] .breeding-cycle-head h3,
html[data-theme="light"] .breeding-litter-title strong,
html[data-theme="light"] .breeding-list-date strong,
html[data-theme="light"] .breeding-list-main strong,
html[data-theme="light"] .breeding-clutch-numbers strong,
html[data-theme="light"] .breeding-offspring-table td,
html[data-theme="light"] .offspring-link-head strong,
html[data-theme="light"] .offspring-current-link > strong {
  color: #20251f;
}
html[data-theme="light"] .breeding-stat-card small,
html[data-theme="light"] .breeding-section-header p,
html[data-theme="light"] .breeding-section-toggle small,
html[data-theme="light"] .breeding-card-meta,
html[data-theme="light"] .breeding-offspring-info,
html[data-theme="light"] .breeding-parent-summary,
html[data-theme="light"] .breeding-list-date span,
html[data-theme="light"] .breeding-list-main p,
html[data-theme="light"] .breeding-clutch-numbers span,
html[data-theme="light"] .breeding-cycle-timeline time,
html[data-theme="light"] .breeding-cycle-timeline span,
html[data-theme="light"] .breeding-cycle-empty,
html[data-theme="light"] .breeding-litter-title small,
html[data-theme="light"] .breeding-offspring-table th,
html[data-theme="light"] .breeding-table-empty,
html[data-theme="light"] .offspring-link-head p,
html[data-theme="light"] .offspring-link-help,
html[data-theme="light"] .offspring-create-hint p,
html[data-theme="light"] .breeding-linked-animal span {
  color: #515a53;
}
html[data-theme="light"] .breeding-card-note,
html[data-theme="light"] .breeding-auto-offspring-note {
  color: #3f4741;
  border-color: rgba(91,78,55,.14);
}
html[data-theme="light"] .breeding-card-kicker,
html[data-theme="light"] .breeding-parent-row > div > span,
html[data-theme="light"] .breeding-advanced-link summary,
html[data-theme="light"] .offspring-create-hint strong {
  color: #6c4aa5;
}
html[data-theme="light"] .breeding-litter-gender-summary span {
  background: rgba(108,74,165,.11);
  color: #5e408f;
}
html[data-theme="light"] .breeding-card-link,
html[data-theme="light"] .breeding-linked-animal strong {
  color: #126e68;
}
html[data-theme="light"] .breeding-cycle-timeline button,
html[data-theme="light"] .breeding-row-actions button {
  border-color: rgba(91,78,55,.18);
  background: #eee7dc;
  color: #3f4741;
}
html[data-theme="light"] .breeding-offspring-table-wrap {
  border-color: rgba(91,78,55,.16);
  background: #faf7f1;
}
html[data-theme="light"] .breeding-offspring-table th,
html[data-theme="light"] .breeding-offspring-table td { border-bottom-color: rgba(91,78,55,.12); }
html[data-theme="light"] .offspring-link-card,
html[data-theme="light"] .breeding-advanced-link {
  border-color: rgba(108,74,165,.20);
  background: linear-gradient(145deg, rgba(108,74,165,.075), rgba(255,255,255,.34));
}
html[data-theme="light"] .offspring-current-link,
html[data-theme="light"] .breeding-linked-animal {
  border-color: rgba(25,127,120,.22);
  background: rgba(25,127,120,.08);
}
html[data-theme="light"] .breeding-modal input[type="date"] { color-scheme: light; }
html[data-theme="light"] .breeding-modal,
html[data-theme="light"] .breeding-clutch-modal { color: var(--text-primary); }
html[data-theme="light"] .breeding-cycle-summary span,
html[data-theme="light"] .breeding-cycle-related { color: #465048; }
html[data-theme="light"] .dashboard-breeding-status,
html[data-theme="light"] .profile-parentage strong { color: #5e408f; }
html[data-theme="light"] .health-item {
  background: #faf7f1;
  border-top-color: rgba(91,78,55,.13);
  border-right-color: rgba(91,78,55,.13);
  border-bottom-color: rgba(91,78,55,.13);
}
html[data-theme="light"] .molting-item {
  background: rgba(58,98,174,.07);
  border-color: rgba(58,98,174,.16);
}

/* =====================================================================
   REPTIVIBE COOL LIGHT THEME · v1.14.0
   Dark theme remains unchanged. The light theme uses cool smoke-blue
   surfaces, graphite typography, turquoise details and the existing gold.
   ===================================================================== */
html[data-theme="light"] {
  --bg-primary: #dce4ea;
  --bg-secondary: #cfd9e0;
  --bg-card: #f4f7f9;
  --bg-card-hover: #e8eef2;
  --accent: #95681b;
  --accent-light: #875f19;
  --accent-dark: #694811;
  --text-primary: #18242d;
  --text-secondary: #3d4c57;
  --text-muted: #596873;
  --success: #147f79;
  --danger: #b9444d;
  --warning: #89630d;
  --info: #3565a8;
  --gradient-gold: linear-gradient(135deg, #8d6319, #c7a44f, #9d6f1f);
  --shadow-gold: 0 0 28px rgba(167,118,33,.10);
  --shadow-card: 0 12px 34px rgba(36,53,65,.12);
  --border-subtle: 1px solid rgba(64,84,99,.19);
  --border: rgba(64,84,99,.20);
  --text: #18242d;
  --brand-white: #18242d;
  --brand-gold: #95681b;
  --chart-muted: #667682;
  --chart-grid: rgba(51,72,87,.14);
}

html[data-theme="light"] body,
html[data-theme="light"] .public-site,
html[data-theme="light"] .auth-container,
html[data-theme="light"] .legal-page-body,
html[data-theme="light"] body.public-reading-page {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

html[data-theme="light"] .bg-animated {
  background:
    radial-gradient(ellipse 820px 560px at 13% 11%, rgba(27,130,124,.10) 0%, transparent 70%),
    radial-gradient(ellipse 720px 520px at 88% 86%, rgba(85,106,134,.12) 0%, transparent 72%),
    radial-gradient(ellipse 520px 360px at 54% 38%, rgba(167,118,33,.055) 0%, transparent 74%);
}
html[data-theme="light"] .bg-pattern {
  opacity: .04;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(61,82,98,.24) 35px, rgba(61,82,98,.24) 36px);
}
html[data-theme="light"] ::selection { background: rgba(20,127,121,.22); color: #101a21; }

html[data-theme="light"] .theme-choice-preview-light { background: #dce4ea; }
html[data-theme="light"] .theme-choice-preview-light i:nth-child(1) { background: #f4f7f9; border-bottom-color: rgba(64,84,99,.20); }
html[data-theme="light"] .theme-choice-preview-light i:nth-child(2) { background: #cfd9e0; }
html[data-theme="light"] .theme-choice-preview-light i:nth-child(3) { background: #edf2f5; box-shadow: 0 4px 12px rgba(36,53,65,.13); }

/* Original brand artwork, clipped to a clean circle without a square field. */
.public-brand-emblem,
.public-footer-brand > img,
.logo-img-auth,
.logo-img-header,
.nav-logo-icon,
.heading-logo-icon,
.logo-img-hero,
.reading-brand img,
.avatar-placeholder-logo {
  border-radius: 50% !important;
  clip-path: circle(50% at 50% 50%);
  background: transparent !important;
}
html[data-theme="light"] .public-brand-emblem,
html[data-theme="light"] .public-footer-brand > img,
html[data-theme="light"] .logo-img-auth,
html[data-theme="light"] .logo-img-header,
html[data-theme="light"] .nav-logo-icon,
html[data-theme="light"] .heading-logo-icon,
html[data-theme="light"] .logo-img-hero,
html[data-theme="light"] .reading-brand img,
html[data-theme="light"] .avatar-placeholder-logo {
  filter: drop-shadow(0 0 7px rgba(24,190,178,.40)) drop-shadow(0 5px 12px rgba(36,53,65,.15)) !important;
}
.avatar-placeholder-logo {
  object-fit: cover;
  box-shadow: none !important;
}
.dashboard-animal-avatar.logo-placeholder {
  border-radius: 50%;
  background: transparent;
  border-color: rgba(34,240,215,.34);
  box-shadow: 0 0 13px rgba(34,240,215,.18);
}
.dashboard-animal-avatar.logo-placeholder .avatar-placeholder-logo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
html[data-theme="light"] .profile-avatar,
html[data-theme="light"] .profile-avatar img,
html[data-theme="light"] .avatar-placeholder-logo,
html[data-theme="light"] .dashboard-animal-avatar.logo-placeholder {
  background: transparent !important;
}

/* One wordmark rule on the homepage, cabinet, legal page and articles. */
.reading-brand .brand-wordmark {
  font-family: 'Playfair Display', serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .45px;
  line-height: 1;
}
html[data-theme="light"] .brand-wordmark .brand-word:first-child .brand-initial,
html[data-theme="light"] .brand-wordmark .brand-word:first-child .brand-tail {
  color: #18242d;
  -webkit-text-fill-color: #18242d;
}
html[data-theme="light"] .brand-wordmark .brand-word:last-child .brand-initial,
html[data-theme="light"] .brand-wordmark .brand-word:last-child .brand-tail {
  color: #95681b;
  -webkit-text-fill-color: #95681b;
}

/* Headers and navigation */
html[data-theme="light"] .header,
html[data-theme="light"] .public-header,
html[data-theme="light"] .reading-header {
  background: rgba(244,247,249,.93);
  border-bottom-color: rgba(64,84,99,.18);
  box-shadow: 0 8px 24px rgba(36,53,65,.075);
}
html[data-theme="light"] .mobile-nav { background: rgba(244,247,249,.97) !important; }
html[data-theme="light"] .header-nav { border-color: rgba(64,84,99,.14); }
html[data-theme="light"] .nav-btn:hover:not(.active),
html[data-theme="light"] .public-nav button:hover,
html[data-theme="light"] .public-nav-link:hover { background: rgba(61,82,98,.075); }
html[data-theme="light"] .theme-toggle {
  border-color: rgba(64,84,99,.22);
  background: rgba(244,247,249,.82);
  color: #455560;
  box-shadow: 0 5px 16px rgba(36,53,65,.07);
}
html[data-theme="light"] .theme-toggle:hover {
  color: #147f79;
  border-color: rgba(20,127,121,.40);
  background: #f8fafb;
  box-shadow: 0 9px 22px rgba(36,53,65,.12);
}
html[data-theme="light"] .public-login-button {
  background: rgba(167,118,33,.075);
  border-color: rgba(167,118,33,.32);
  color: #6f4e14;
}

/* Inputs and controls */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .form-group textarea,
html[data-theme="light"] .animal-selector,
html[data-theme="light"] select option,
html[data-theme="light"] select optgroup {
  background-color: #f7f9fa !important;
  border-color: rgba(64,84,99,.22) !important;
  color: #18242d !important;
}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group select:focus,
html[data-theme="light"] .form-group textarea:focus,
html[data-theme="light"] .animal-selector:focus {
  background-color: #fff !important;
  border-color: #147f79 !important;
  box-shadow: 0 0 0 3px rgba(20,127,121,.12) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #7b8992; }
html[data-theme="light"] .modal-overlay { background: rgba(29,43,53,.48); }
html[data-theme="light"] .modal,
html[data-theme="light"] .auth-wrapper,
html[data-theme="light"] .public-content-dialog {
  background: #f3f6f8;
  border-color: rgba(64,84,99,.19);
  box-shadow: 0 24px 70px rgba(28,44,55,.22), var(--shadow-gold);
}
html[data-theme="light"] .auth-tabs,
html[data-theme="light"] .account-tabs { background: rgba(63,82,97,.085); }
html[data-theme="light"] .auth-articles { background: rgba(207,217,224,.62); }
html[data-theme="light"] .auth-side-panel {
  background: linear-gradient(145deg, rgba(53,101,168,.09), rgba(20,127,121,.07));
  border-left-color: rgba(64,84,99,.17);
}
html[data-theme="light"] .account-profile-head {
  background: linear-gradient(135deg, rgba(20,127,121,.09), rgba(53,101,168,.08));
}
html[data-theme="light"] .theme-choice {
  background: #f4f7f9;
  border-color: rgba(64,84,99,.18);
}
html[data-theme="light"] .theme-choice.active {
  background: #e7eef2;
  border-color: rgba(20,127,121,.42);
  box-shadow: 0 0 0 2px rgba(20,127,121,.08), 0 14px 30px rgba(36,53,65,.12);
}

/* Shared cards and tables */
html[data-theme="light"] .stat-card,
html[data-theme="light"] .snake-profile,
html[data-theme="light"] .chart-container,
html[data-theme="light"] .feeding-table-wrapper,
html[data-theme="light"] .add-form-card,
html[data-theme="light"] .info-hero,
html[data-theme="light"] .info-card,
html[data-theme="light"] .dashboard-panel,
html[data-theme="light"] .dashboard-animal-card,
html[data-theme="light"] .health-card,
html[data-theme="light"] .molting-card,
html[data-theme="light"] .gallery-card,
html[data-theme="light"] .admin-metric-card,
html[data-theme="light"] .admin-maintenance-card,
html[data-theme="light"] .calendar-card,
html[data-theme="light"] .calendar-agenda-card,
html[data-theme="light"] .care-tabs-panel,
html[data-theme="light"] .care-content-panel,
html[data-theme="light"] .care-article-card,
html[data-theme="light"] .care-photo-item,
html[data-theme="light"] .care-section-card {
  background: #f4f7f9;
  border-color: rgba(64,84,99,.17);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .feeding-table th,
html[data-theme="light"] .feeding-table td,
html[data-theme="light"] table th,
html[data-theme="light"] table td,
html[data-theme="light"] .calendar-toolbar,
html[data-theme="light"] .calendar-filter-bar,
html[data-theme="light"] .calendar-weekdays,
html[data-theme="light"] .calendar-day,
html[data-theme="light"] .calendar-agenda-card {
  border-color: rgba(64,84,99,.14);
}
html[data-theme="light"] .calendar-day { background: rgba(244,247,249,.78); }
html[data-theme="light"] .calendar-day:hover { background: #fff; }
html[data-theme="light"] .calendar-day.outside-month { background: rgba(207,217,224,.48); }
html[data-theme="light"] .calendar-animal-select,
html[data-theme="light"] .calendar-nav-btn,
html[data-theme="light"] .calendar-view-btn,
html[data-theme="light"] .calendar-filter-btn,
html[data-theme="light"] .dashboard-scope-btn {
  background: #edf2f5;
  border-color: rgba(64,84,99,.18);
}
html[data-theme="light"] .chart-stats,
html[data-theme="light"] .feeding-table th,
html[data-theme="light"] .summary-item,
html[data-theme="light"] .snake-size-visual,
html[data-theme="light"] .health-item,
html[data-theme="light"] .molting-health-item,
html[data-theme="light"] .progress-bar,
html[data-theme="light"] .dashboard-scope-switch,
html[data-theme="light"] .dashboard-animal-search,
html[data-theme="light"] .dashboard-animal-select-wrap select,
html[data-theme="light"] .dashboard-animal-metrics div,
html[data-theme="light"] .growth-metric-switch,
html[data-theme="light"] .growth-chart-stats div,
html[data-theme="light"] .molting-stage,
html[data-theme="light"] .health-filter-bar,
html[data-theme="light"] .health-attachment-editor {
  background: #e7edf1;
  border-color: rgba(64,84,99,.15);
}
html[data-theme="light"] .admin-maintenance-switch,
html[data-theme="light"] .admin-metric-card { background: linear-gradient(145deg, #f7f9fa, #e9eff3); }
html[data-theme="light"] .admin-maintenance-status,
html[data-theme="light"] .admin-maintenance-note code { background: rgba(63,82,97,.075); border-color: rgba(64,84,99,.16); }
html[data-theme="light"] .admin-maintenance-note { background: rgba(20,127,121,.075); }

/* Public homepage */
html[data-theme="light"] .public-topic-card,
html[data-theme="light"] .public-article-card,
html[data-theme="light"] .public-species-card {
  background: linear-gradient(150deg, #f7f9fa, #e9eff3);
  border-color: rgba(64,84,99,.17);
  box-shadow: 0 13px 31px rgba(36,53,65,.11);
}
html[data-theme="light"] .public-topic-card:hover,
html[data-theme="light"] .public-article-card:hover,
html[data-theme="light"] .public-species-card:hover {
  box-shadow: 0 21px 46px rgba(36,53,65,.17), 0 0 22px rgba(20,127,121,.055);
}
html[data-theme="light"] .public-species-image { border-bottom-color: rgba(64,84,99,.14); }
html[data-theme="light"] .public-species-toolbar,
html[data-theme="light"] .public-species-filter {
  background: rgba(244,247,249,.79);
  border-color: rgba(64,84,99,.17);
}
html[data-theme="light"] .public-species-search { background: #f7f9fa; border-color: rgba(64,84,99,.20); }
html[data-theme="light"] .public-species-filter.active { background: rgba(20,127,121,.105); }
html[data-theme="light"] .public-features-shell {
  background:
    radial-gradient(circle at 92% 20%, rgba(20,127,121,.10), transparent 28%),
    radial-gradient(circle at 10% 100%, rgba(53,101,168,.09), transparent 36%),
    linear-gradient(145deg, #f4f7f9, #e5ecf0);
  border-color: rgba(64,84,99,.18);
  box-shadow: 0 26px 62px rgba(36,53,65,.14);
}
html[data-theme="light"] .public-feature-list article { background: rgba(255,255,255,.48); border-color: rgba(64,84,99,.13); }
html[data-theme="light"] .public-footer {
  background: #cbd6dd;
  border-top-color: rgba(64,84,99,.17);
}
html[data-theme="light"] .public-footer-bottom { border-top-color: rgba(64,84,99,.13); }
html[data-theme="light"] .public-footer-copyright { color: #465660; }

/* Care directory */
html[data-theme="light"] .care-species-tab { background: #e7edf1; border-color: rgba(20,127,121,.15); }
html[data-theme="light"] .care-species-tab:hover { background: #f9fbfc; }
html[data-theme="light"] .care-photo-frame { background: #d2dce2; }
html[data-theme="light"] .care-photo-credit { background: #eaf0f3; border-top-color: rgba(20,127,121,.14); }

/* Health and molting */
html[data-theme="light"] .health-journal-section,
html[data-theme="light"] .health-journal-section.molting-health-section {
  border-color: rgba(64,84,99,.18);
  background:
    radial-gradient(circle at 12% 0%, rgba(20,127,121,.09), transparent 38%),
    #eef3f6;
  box-shadow: 0 10px 28px rgba(36,53,65,.10);
}
html[data-theme="light"] .health-journal-section.molting-health-section {
  background:
    radial-gradient(circle at 12% 0%, rgba(53,101,168,.09), transparent 38%),
    #eef3f6;
}
html[data-theme="light"] .health-filter-bar { background: #dfe7ec; border-color: rgba(64,84,99,.18); }
html[data-theme="light"] .health-filter-btn { color: #53636e; }
html[data-theme="light"] .health-filter-btn.active {
  background: rgba(20,127,121,.14);
  color: #0f6965;
  box-shadow: inset 0 0 0 1px rgba(20,127,121,.22);
}
html[data-theme="light"] .health-record-card,
html[data-theme="light"] .molting-health-item,
html[data-theme="light"] .molting-cycle-card,
html[data-theme="light"] .molting-card-compact {
  border-color: rgba(64,84,99,.16);
  background: #f7f9fa;
  box-shadow: 0 7px 18px rgba(36,53,65,.075);
}
html[data-theme="light"] .health-record-card.active,
html[data-theme="light"] .molting-health-item.active,
html[data-theme="light"] .molting-cycle-card.active { background: #f3eedf; }
html[data-theme="light"] .health-record-card.completed,
html[data-theme="light"] .molting-health-item.completed { background: #e6f2ef; }
html[data-theme="light"] .molting-stage { background: #e3eaee; border-color: rgba(64,84,99,.15); }
html[data-theme="light"] .molting-stage > span { background: rgba(255,255,255,.55); color: #53636e; }
html[data-theme="light"] .health-record-attachment,
html[data-theme="light"] .health-attachment-draft-item,
html[data-theme="light"] .health-attachment-editor { background: #e5ecef; border-color: rgba(64,84,99,.16); }

/* Breeding cards and creation flows */
html[data-theme="light"] .breeding-stat-card,
html[data-theme="light"] .breeding-section,
html[data-theme="light"] .breeding-pair-card,
html[data-theme="light"] .breeding-clutch-card,
html[data-theme="light"] .breeding-offspring-card,
html[data-theme="light"] .breeding-cycle-card,
html[data-theme="light"] .breeding-litter-card {
  border-color: rgba(64,84,99,.17);
  background: linear-gradient(145deg, #f6f8fa, #e6edf1);
  box-shadow: 0 10px 26px rgba(36,53,65,.11);
}
html[data-theme="light"] .breeding-section { background: #eaf0f3; }
html[data-theme="light"] .breeding-list { background: rgba(64,84,99,.12); }
html[data-theme="light"] .breeding-list-row,
html[data-theme="light"] .breeding-list-row:nth-child(even) { background: #f4f7f9; border-color: rgba(64,84,99,.14); }
html[data-theme="light"] .breeding-parent-row > div,
html[data-theme="light"] .breeding-clutch-numbers div,
html[data-theme="light"] .breeding-parent-summary,
html[data-theme="light"] .breeding-cycle-summary span,
html[data-theme="light"] .breeding-cycle-timeline > div,
html[data-theme="light"] .breeding-cycle-related,
html[data-theme="light"] .offspring-link-panel {
  background: #dfe7ec;
  border-color: rgba(64,84,99,.15);
}
html[data-theme="light"] .breeding-cycle-timeline button,
html[data-theme="light"] .breeding-row-actions button {
  border-color: rgba(64,84,99,.19);
  background: #e4ebef;
  color: #354650;
}
html[data-theme="light"] .breeding-offspring-table-wrap { background: #f5f8f9; border-color: rgba(64,84,99,.16); }
html[data-theme="light"] .offspring-link-card,
html[data-theme="light"] .breeding-advanced-link {
  border-color: rgba(91,78,150,.20);
  background: linear-gradient(145deg, rgba(91,78,150,.075), rgba(255,255,255,.34));
}
html[data-theme="light"] .offspring-current-link,
html[data-theme="light"] .breeding-linked-animal {
  border-color: rgba(20,127,121,.22);
  background: rgba(20,127,121,.08);
}
html[data-theme="light"] .breeding-modal,
html[data-theme="light"] .breeding-clutch-modal { color: #18242d; }
html[data-theme="light"] .breeding-modal input[type="date"] { color-scheme: light; }

/* Legal page */
html[data-theme="light"] .legal-hero {
  background:
    radial-gradient(circle at 90% 10%, rgba(20,127,121,.11), transparent 30%),
    linear-gradient(145deg, #f5f8f9, #e4ebef);
  border-color: rgba(64,84,99,.18);
  box-shadow: 0 26px 62px rgba(36,53,65,.13);
}
html[data-theme="light"] .legal-copy-card,
html[data-theme="light"] .legal-source-card,
html[data-theme="light"] .legal-master-details,
html[data-theme="light"] .legal-photo-row,
html[data-theme="light"] .legal-license-group,
html[data-theme="light"] .legal-photo-row-compact {
  background: rgba(244,247,249,.93);
  border-color: rgba(64,84,99,.16);
  box-shadow: 0 10px 26px rgba(36,53,65,.07);
}
html[data-theme="light"] .legal-details,
html[data-theme="light"] .legal-license-group-body { border-top-color: rgba(64,84,99,.12); }
html[data-theme="light"] .legal-copyright-card {
  background: radial-gradient(circle at 100% 0%, rgba(167,118,33,.08), transparent 34%), #f4f7f9;
}
/* =====================================================================
   REPTIVIBE INDIGO LIGHT THEME · v1.14.1
   Dark theme remains untouched. This pass deepens the cool background,
   replaces light-theme gold with indigo and raises contrast throughout.
   ===================================================================== */
html[data-theme="light"] {
  --bg-primary: #cdd8e0;
  --bg-secondary: #c1ced7;
  --bg-card: #e8edf1;
  --bg-card-hover: #dfe6eb;
  --accent: #4d4f8f;
  --accent-light: #43467f;
  --accent-dark: #343663;
  --text-primary: #17232c;
  --text-secondary: #334550;
  --text-muted: #4c5f6b;
  --success: #075f5a;
  --danger: #9b303d;
  --warning: #7a4b16;
  --info: #234f83;
  --gradient-gold: linear-gradient(135deg, #3e4078, #5a5c9d, #4d4f8f);
  --shadow-gold: 0 0 28px rgba(62,64,120,.16);
  --shadow-card: 0 12px 34px rgba(31,49,62,.15);
  --border-subtle: 1px solid rgba(54,76,91,.23);
  --border: rgba(54,76,91,.24);
  --text: #17232c;
  --brand-white: #17232c;
  --brand-gold: #4d4f8f;
  --chart-muted: #465b68;
  --chart-grid: rgba(42,66,82,.17);
}

html[data-theme="light"] body,
html[data-theme="light"] .public-site,
html[data-theme="light"] .auth-container,
html[data-theme="light"] .legal-page-body,
html[data-theme="light"] body.public-reading-page {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}
html[data-theme="light"] .bg-animated {
  background:
    radial-gradient(ellipse 820px 560px at 13% 11%, rgba(7,95,90,.11) 0%, transparent 70%),
    radial-gradient(ellipse 720px 520px at 88% 86%, rgba(77,79,143,.14) 0%, transparent 72%),
    radial-gradient(ellipse 520px 360px at 54% 38%, rgba(35,79,131,.07) 0%, transparent 74%);
}
html[data-theme="light"] ::selection { background: rgba(77,79,143,.24); color: #101820; }

/* Theme preview and shared surfaces */
html[data-theme="light"] .theme-choice-preview-light { background: #cdd8e0; }
html[data-theme="light"] .theme-choice-preview-light i:nth-child(1) { background: #e8edf1; border-bottom-color: rgba(54,76,91,.23); }
html[data-theme="light"] .theme-choice-preview-light i:nth-child(2) { background: #c1ced7; }
html[data-theme="light"] .theme-choice-preview-light i:nth-child(3) { background: #dfe6eb; box-shadow: 0 4px 12px rgba(31,49,62,.15); }
html[data-theme="light"] .theme-choice,
html[data-theme="light"] .modal,
html[data-theme="light"] .auth-wrapper,
html[data-theme="light"] .public-content-dialog {
  background: #e6ecef;
  border-color: rgba(54,76,91,.23);
}
html[data-theme="light"] .theme-choice.active {
  background: #d8dced;
  border-color: rgba(77,79,143,.55);
  box-shadow: 0 0 0 2px rgba(77,79,143,.10), 0 14px 30px rgba(31,49,62,.14);
}
html[data-theme="light"] .theme-toggle {
  border-color: rgba(54,76,91,.28);
  background: rgba(232,237,241,.88);
  color: #334550;
}
html[data-theme="light"] .theme-toggle:hover {
  color: #343663;
  border-color: rgba(77,79,143,.48);
  background: #edf1f4;
}

/* Wordmark: Repti graphite, Vibe indigo everywhere in the light theme. */
html[data-theme="light"] .brand-wordmark .brand-word:first-child .brand-initial,
html[data-theme="light"] .brand-wordmark .brand-word:first-child .brand-tail {
  color: #17232c !important;
  -webkit-text-fill-color: #17232c !important;
}
html[data-theme="light"] .brand-wordmark .brand-word:last-child .brand-initial,
html[data-theme="light"] .brand-wordmark .brand-word:last-child .brand-tail {
  color: #4d4f8f !important;
  -webkit-text-fill-color: #4d4f8f !important;
}

/* Stronger general typography. */
html[data-theme="light"] .theme-settings-copy,
html[data-theme="light"] .section-header p,
html[data-theme="light"] .dashboard-header p,
html[data-theme="light"] .info-card p,
html[data-theme="light"] .form-group label,
html[data-theme="light"] .table-subline,
html[data-theme="light"] .notes-cell,
html[data-theme="light"] .growth-note,
html[data-theme="light"] .calendar-agenda-copy small,
html[data-theme="light"] .calendar-agenda-arrow,
html[data-theme="light"] .calendar-more,
html[data-theme="light"] .calendar-weekdays span,
html[data-theme="light"] .growth-stat-card span,
html[data-theme="light"] .growth-stat-card small,
html[data-theme="light"] .molting-stat-card span,
html[data-theme="light"] .gallery-card small,
html[data-theme="light"] .admin-metric-card small,
html[data-theme="light"] .admin-maintenance-switch small,
html[data-theme="light"] .breeding-stat-card small,
html[data-theme="light"] .breeding-section-header p,
html[data-theme="light"] .breeding-section-toggle small,
html[data-theme="light"] .breeding-card-meta,
html[data-theme="light"] .breeding-offspring-info,
html[data-theme="light"] .breeding-list-date span,
html[data-theme="light"] .breeding-list-main p,
html[data-theme="light"] .breeding-clutch-numbers span,
html[data-theme="light"] .breeding-cycle-timeline time,
html[data-theme="light"] .breeding-cycle-timeline span,
html[data-theme="light"] .breeding-cycle-empty,
html[data-theme="light"] .breeding-litter-title small,
html[data-theme="light"] .breeding-offspring-table th,
html[data-theme="light"] .breeding-table-empty,
html[data-theme="light"] .offspring-link-head p,
html[data-theme="light"] .offspring-link-help,
html[data-theme="light"] .offspring-create-hint p,
html[data-theme="light"] .breeding-linked-animal span {
  color: var(--text-secondary) !important;
}
html[data-theme="light"] .section-count,
html[data-theme="light"] .dashboard-empty,
html[data-theme="light"] .empty-state { color: var(--text-muted) !important; }

/* Headers, cards and windows: gray rather than pure white. */
html[data-theme="light"] .header,
html[data-theme="light"] .public-header,
html[data-theme="light"] .reading-header {
  background: rgba(232,237,241,.95);
  border-bottom-color: rgba(54,76,91,.22);
}
html[data-theme="light"] .mobile-nav { background: rgba(232,237,241,.98) !important; }
html[data-theme="light"] .stat-card,
html[data-theme="light"] .snake-profile,
html[data-theme="light"] .chart-container,
html[data-theme="light"] .feeding-table-wrapper,
html[data-theme="light"] .add-form-card,
html[data-theme="light"] .info-hero,
html[data-theme="light"] .info-card,
html[data-theme="light"] .dashboard-panel,
html[data-theme="light"] .dashboard-animal-card,
html[data-theme="light"] .health-card,
html[data-theme="light"] .molting-card,
html[data-theme="light"] .gallery-card,
html[data-theme="light"] .admin-metric-card,
html[data-theme="light"] .admin-maintenance-card,
html[data-theme="light"] .calendar-card,
html[data-theme="light"] .calendar-agenda-card,
html[data-theme="light"] .care-tabs-panel,
html[data-theme="light"] .care-content-panel,
html[data-theme="light"] .care-article-card,
html[data-theme="light"] .care-photo-item,
html[data-theme="light"] .care-section-card,
html[data-theme="light"] .public-topic-card,
html[data-theme="light"] .public-article-card,
html[data-theme="light"] .public-species-card,
html[data-theme="light"] .legal-copy-card,
html[data-theme="light"] .legal-source-card,
html[data-theme="light"] .legal-master-details,
html[data-theme="light"] .legal-photo-row,
html[data-theme="light"] .legal-license-group,
html[data-theme="light"] .legal-photo-row-compact {
  background: #e8edf1;
  border-color: rgba(54,76,91,.22);
  box-shadow: var(--shadow-card);
}
html[data-theme="light"] .calendar-day { background: rgba(232,237,241,.82); }
html[data-theme="light"] .calendar-day:hover { background: #eef2f4; }
html[data-theme="light"] .calendar-day.is-outside,
html[data-theme="light"] .calendar-day.outside-month { background: rgba(193,206,215,.60); }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .form-group textarea,
html[data-theme="light"] .animal-selector,
html[data-theme="light"] select option,
html[data-theme="light"] select optgroup {
  background-color: #edf1f4 !important;
  border-color: rgba(54,76,91,.28) !important;
  color: #17232c !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #5d6e79; }
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group select:focus,
html[data-theme="light"] .form-group textarea:focus,
html[data-theme="light"] .animal-selector:focus {
  background-color: #f3f6f8 !important;
  border-color: #4d4f8f !important;
  box-shadow: 0 0 0 3px rgba(77,79,143,.15) !important;
}

/* Indigo replaces all decorative gold in the light theme. */
html[data-theme="light"] .public-login-button {
  background: rgba(77,79,143,.13);
  border-color: rgba(77,79,143,.42);
  color: #343663;
}
html[data-theme="light"] .public-login-button:hover {
  background: rgba(77,79,143,.20);
  border-color: rgba(77,79,143,.62);
  box-shadow: 0 0 22px rgba(77,79,143,.15);
}
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .auth-tab.active,
html[data-theme="light"] .article-nav-btn.active,
html[data-theme="light"] .user-avatar,
html[data-theme="light"] .account-avatar-preview,
html[data-theme="light"] .growth-metric-btn.active {
  background: var(--gradient-gold) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  border-color: rgba(62,64,120,.48) !important;
}
html[data-theme="light"] .btn-secondary {
  background: rgba(77,79,143,.10);
  border-color: rgba(77,79,143,.30);
  color: #343663;
}
html[data-theme="light"] .btn-secondary:hover { background: rgba(77,79,143,.17); }
html[data-theme="light"] .public-hero-copy h1 em,
html[data-theme="light"] .public-hero-copy em,
html[data-theme="light"] .public-eyebrow,
html[data-theme="light"] .public-hero-metrics span {
  color: #c5c7ff !important;
  -webkit-text-fill-color: #c5c7ff !important;
  background: none !important;
}
html[data-theme="light"] .legal-copyright-card {
  background: radial-gradient(circle at 100% 0%, rgba(77,79,143,.11), transparent 34%), #e8edf1;
}
html[data-theme="light"] .legend-line.length { background: #4d4f8f; }
html[data-theme="light"] .progress-fill { background: var(--gradient-gold); }

/* Calendar controls and event labels. */
html[data-theme="light"] .calendar-nav-btn,
html[data-theme="light"] .calendar-view-btn,
html[data-theme="light"] .calendar-filter-btn,
html[data-theme="light"] .dashboard-scope-btn {
  background: #d8e1e7;
  border-color: rgba(54,76,91,.25);
  color: #334550;
}
html[data-theme="light"] .calendar-nav-btn:hover,
html[data-theme="light"] .calendar-view-btn:hover,
html[data-theme="light"] .calendar-filter-btn:hover,
html[data-theme="light"] .dashboard-scope-btn:hover {
  background: #e2e3f0;
  border-color: rgba(77,79,143,.38);
  color: #272a59;
}
html[data-theme="light"] .calendar-view-btn.active,
html[data-theme="light"] .calendar-filter-btn.active,
html[data-theme="light"] .dashboard-scope-btn.active {
  background: #d4d6eb;
  border-color: rgba(77,79,143,.55);
  color: #292b60 !important;
  box-shadow: inset 0 0 0 1px rgba(77,79,143,.12);
}
html[data-theme="light"] .calendar-event-pill {
  background: #dce4e9;
  border-color: rgba(54,76,91,.20);
  color: #2f414c;
}
html[data-theme="light"] .calendar-event-pill.type-feeding { background: #e7dce8; border-color: #b79ab5; color: #653d62; }
html[data-theme="light"] .calendar-event-pill.type-growth { background: #d5e2f1; border-color: #87a8cb; color: #234f83; }
html[data-theme="light"] .calendar-event-pill.type-medical { background: #efd9dd; border-color: #c88d97; color: #8b2f3a; }
html[data-theme="light"] .calendar-event-pill.type-molting { background: #e0d7f1; border-color: #a990c8; color: #5a3f83; }
html[data-theme="light"] .calendar-event-pill.type-gallery { background: #c8e3e1; border-color: #6da9a5; color: #075e5a; }
html[data-theme="light"] .calendar-event-pill.type-breeding { background: #d8d9ef; border-color: #9295c2; color: #3e4078; }
html[data-theme="light"] .calendar-list-date span {
  background: #c8e3e1;
  color: #075e5a;
}
html[data-theme="light"] .calendar-agenda-icon { background: #d8e1e7; }
html[data-theme="light"] .calendar-agenda-event { background: #e2e8ec; border-color: rgba(54,76,91,.20); }

/* Feeding and growth records. */
html[data-theme="light"] .food-badge {
  background: #c8e3e1;
  border-color: #6da9a5;
  color: #075e5a;
  font-weight: 750;
}
html[data-theme="light"] .interval-badge {
  background: #d5e2f1;
  border-color: #87a8cb;
  color: #234f83;
  font-weight: 750;
}
html[data-theme="light"] .interval-badge.warning {
  background: #efd9dd;
  border-color: #c88d97;
  color: #8b2f3a;
}
html[data-theme="light"] .weight-cell { color: #3e4078; }
html[data-theme="light"] .length-cell { color: #234f83; }
html[data-theme="light"] .growth-metric-switch,
html[data-theme="light"] .growth-chart-stats div,
html[data-theme="light"] .chart-stats,
html[data-theme="light"] .summary-item,
html[data-theme="light"] .snake-size-visual,
html[data-theme="light"] .progress-bar {
  background: #d8e1e7;
  border-color: rgba(54,76,91,.20);
}
html[data-theme="light"] .growth-metric-btn { color: #41545f; }
html[data-theme="light"] .growth-chart-stats span { color: #435762; }
html[data-theme="light"] .growth-chart-stats strong { color: #17232c; }

/* Health status chips and cards. */
html[data-theme="light"] .status-badge.success,
html[data-theme="light"] .dashboard-due-badge.success {
  background: #c8e3e1;
  border-color: #6da9a5;
  color: #075e5a;
}
html[data-theme="light"] .status-badge.warning,
html[data-theme="light"] .dashboard-due-badge.warning {
  background: #e5dce9;
  border-color: #ae98bc;
  color: #5c3d73;
}
html[data-theme="light"] .status-badge.danger,
html[data-theme="light"] .dashboard-due-badge.danger {
  background: #efd9dd;
  border-color: #c88d97;
  color: #8b2f3a;
}
html[data-theme="light"] .status-badge.neutral,
html[data-theme="light"] .dashboard-due-badge.muted {
  background: #d8e1e7;
  border-color: rgba(54,76,91,.22);
  color: #3f525e;
}
html[data-theme="light"] .health-journal-section,
html[data-theme="light"] .health-journal-section.molting-health-section {
  background: radial-gradient(circle at 12% 0%, rgba(7,95,90,.10), transparent 38%), #e2e8ec;
}
html[data-theme="light"] .health-journal-section.molting-health-section {
  background: radial-gradient(circle at 12% 0%, rgba(77,79,143,.11), transparent 38%), #e2e8ec;
}
html[data-theme="light"] .health-filter-bar,
html[data-theme="light"] .health-attachment-editor,
html[data-theme="light"] .molting-stage { background: #d5dfe5; }
html[data-theme="light"] .health-record-card,
html[data-theme="light"] .molting-health-item,
html[data-theme="light"] .molting-cycle-card,
html[data-theme="light"] .molting-card-compact { background: #e9eef1; }
html[data-theme="light"] .health-record-card.active,
html[data-theme="light"] .molting-health-item.active,
html[data-theme="light"] .molting-cycle-card.active { background: #dcddef; }
html[data-theme="light"] .health-record-card.completed,
html[data-theme="light"] .molting-health-item.completed { background: #d5e8e5; }

/* Breeding section: stronger text, darker indigo controls and visible add button. */
html[data-theme="light"] .breeding-stat-card,
html[data-theme="light"] .breeding-section,
html[data-theme="light"] .breeding-pair-card,
html[data-theme="light"] .breeding-clutch-card,
html[data-theme="light"] .breeding-offspring-card,
html[data-theme="light"] .breeding-cycle-card,
html[data-theme="light"] .breeding-litter-card {
  background: linear-gradient(145deg, #e8edf1, #dce4e9);
  border-color: rgba(54,76,91,.23);
}
html[data-theme="light"] .breeding-section { background: #dfe6eb; }
html[data-theme="light"] .breeding-list { background: rgba(54,76,91,.17); }
html[data-theme="light"] .breeding-list-row,
html[data-theme="light"] .breeding-list-row:nth-child(even),
html[data-theme="light"] .breeding-offspring-table-wrap { background: #e9eef1; }
html[data-theme="light"] .breeding-parent-row > div,
html[data-theme="light"] .breeding-clutch-numbers div,
html[data-theme="light"] .breeding-parent-summary,
html[data-theme="light"] .breeding-cycle-summary span,
html[data-theme="light"] .breeding-cycle-timeline > div,
html[data-theme="light"] .breeding-cycle-related,
html[data-theme="light"] .offspring-link-panel { background: #d4dee4; }
html[data-theme="light"] .breeding-card-top h3,
html[data-theme="light"] .breeding-cycle-head h3,
html[data-theme="light"] .breeding-litter-title strong,
html[data-theme="light"] .breeding-list-date strong,
html[data-theme="light"] .breeding-list-main strong,
html[data-theme="light"] .breeding-clutch-numbers strong,
html[data-theme="light"] .breeding-offspring-table td,
html[data-theme="light"] .offspring-link-head strong,
html[data-theme="light"] .offspring-current-link > strong { color: #17232c !important; }
html[data-theme="light"] .breeding-card-kicker,
html[data-theme="light"] .breeding-parent-row > div > span,
html[data-theme="light"] .breeding-advanced-link summary,
html[data-theme="light"] .offspring-create-hint strong,
html[data-theme="light"] .dashboard-breeding-status,
html[data-theme="light"] .profile-parentage strong { color: #3e4078 !important; }
html[data-theme="light"] .breeding-litter-gender-summary span {
  background: #d8d9ef;
  color: #3e4078;
}
html[data-theme="light"] .offspring-link-card,
html[data-theme="light"] .breeding-advanced-link {
  border-color: rgba(77,79,143,.32);
  background: linear-gradient(145deg, rgba(77,79,143,.13), rgba(232,237,241,.64));
}
html[data-theme="light"] .breeding-cycle-timeline button,
html[data-theme="light"] .breeding-row-actions button {
  background: #d4dce3;
  border-color: rgba(54,76,91,.26);
  color: #283944;
}
html[data-theme="light"] .breeding-add-offspring-btn {
  background: #3e4078 !important;
  border-color: #343663 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 7px 18px rgba(62,64,120,.24);
}
html[data-theme="light"] .breeding-add-offspring-btn:hover { background: #343663 !important; }

/* Gallery and administration turquoise chips. */
html[data-theme="light"] .gallery-total-count,
html[data-theme="light"] .admin-maintenance-status[data-state="disabled"] {
  background: #c8e3e1;
  border-color: #5faaa5;
  color: #075e5a;
  font-weight: 800;
}
html[data-theme="light"] .gallery-edit-btn {
  background: #c8e3e1;
  border-color: #6da9a5;
  color: #075e5a;
}
html[data-theme="light"] .admin-maintenance-status[data-state="scheduled"] {
  background: #d8d9ef;
  border-color: #9295c2;
  color: #3e4078;
}
html[data-theme="light"] .admin-maintenance-status[data-state="active"] {
  background: #efd9dd;
  border-color: #c88d97;
  color: #8b2f3a;
}
html[data-theme="light"] .admin-maintenance-switch,
html[data-theme="light"] .admin-maintenance-status,
html[data-theme="light"] .admin-maintenance-note code { background: #d8e1e7; }
html[data-theme="light"] .admin-maintenance-note { background: #cfe3e2; color: #29464b; }
html[data-theme="light"] .admin-maintenance-note code { color: #3e4078; }

/* Public and legal surfaces without residual warm/gold tint. */
html[data-theme="light"] .public-features-shell,
html[data-theme="light"] .legal-hero {
  background:
    radial-gradient(circle at 92% 20%, rgba(7,95,90,.11), transparent 28%),
    radial-gradient(circle at 10% 100%, rgba(77,79,143,.12), transparent 36%),
    linear-gradient(145deg, #e8edf1, #d9e2e7);
}
html[data-theme="light"] .public-footer,
html[data-theme="light"] .reading-footer { background: #becbd4; }
html[data-theme="light"] .public-footer-copyright { color: #334550; }

/* Final residual warm-accent cleanup for light theme v1.14.1. */
html[data-theme="light"] .public-site {
  background:
    radial-gradient(circle at 8% 8%, rgba(77,79,143,.10), transparent 30%),
    radial-gradient(circle at 88% 76%, rgba(7,95,90,.08), transparent 34%),
    var(--bg-primary);
}
html[data-theme="light"] .feeding-table-wrapper {
  scrollbar-color: rgba(77,79,143,.46) rgba(54,76,91,.10);
}
html[data-theme="light"] .dashboard-event-list::-webkit-scrollbar-track { background: rgba(54,76,91,.10); }
html[data-theme="light"] .dashboard-event-list::-webkit-scrollbar-thumb { background: rgba(77,79,143,.42); }
html[data-theme="light"] .theme-choice:hover {
  border-color: rgba(77,79,143,.48);
  box-shadow: 0 10px 24px rgba(31,49,62,.12);
}
html[data-theme="light"] .stat-card:hover,
html[data-theme="light"] .info-card:hover {
  border-color: rgba(77,79,143,.36);
  box-shadow: 0 15px 38px rgba(62,64,120,.15);
}
html[data-theme="light"] .stat-card::before { background: var(--gradient-gold); }
html[data-theme="light"] .health-item.warning {
  border-color: rgba(92,61,115,.25);
  border-left-color: #5c3d73;
  background: rgba(92,61,115,.08);
}
html[data-theme="light"] .admin-metric-icon {
  background: rgba(77,79,143,.12);
  border-color: rgba(77,79,143,.28);
  color: #3e4078;
}
html[data-theme="light"] .admin-switch-track { background: rgba(54,76,91,.28); }
html[data-theme="light"] .admin-maintenance-switch input:checked + .admin-switch-track {
  background: #4d4f8f;
  box-shadow: 0 0 18px rgba(77,79,143,.22);
}
html[data-theme="light"] .public-species-filter.active {
  background: rgba(77,79,143,.13);
  border-color: rgba(77,79,143,.34);
  color: #343663;
}
html[data-theme="light"] .account-profile-head {
  background: linear-gradient(135deg, rgba(7,95,90,.10), rgba(77,79,143,.11));
}

/* Remove remaining gold decorations from light-mode components. */
html[data-theme="light"] .public-hero { border-bottom-color: rgba(77,79,143,.66); }
html[data-theme="light"] .public-hero-metrics div { border-left-color: rgba(197,199,255,.34); }
html[data-theme="light"] .public-hero-orbit { border-color: rgba(197,199,255,.24); }
html[data-theme="light"] .public-hero-small-photo {
  box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(197,199,255,.28);
}
html[data-theme="light"] .public-topic-card:hover,
html[data-theme="light"] .public-species-card:hover .public-species-image {
  border-color: rgba(77,79,143,.46);
}
html[data-theme="light"] .public-species-image { border-color: rgba(77,79,143,.24); }
html[data-theme="light"] .public-feature-list article > span,
html[data-theme="light"] .auth-benefit-list span {
  background: rgba(77,79,143,.14);
  color: #3e4078;
}
html[data-theme="light"] .public-cta-section {
  border-color: rgba(77,79,143,.26);
  background: rgba(77,79,143,.09);
}
html[data-theme="light"] .auth-side-photo { border-color: rgba(77,79,143,.28); }
html[data-theme="light"] .nav-btn.active {
  background: rgba(77,79,143,.13);
  color: #4d4f8f;
}
html[data-theme="light"] .dashboard-panel-count {
  background: rgba(77,79,143,.15);
  color: #43467f;
}
html[data-theme="light"] .dashboard-event-list {
  scrollbar-color: rgba(77,79,143,.52) rgba(54,76,91,.10);
}
html[data-theme="light"] .dashboard-animal-count {
  border-color: rgba(77,79,143,.32);
  background: rgba(77,79,143,.11);
  color: #43467f;
}
html[data-theme="light"] .dashboard-animal-filter-reset {
  border-color: rgba(77,79,143,.27);
  background: rgba(77,79,143,.10);
  color: #43467f;
}
html[data-theme="light"] .dashboard-animal-filter-reset:hover {
  border-color: rgba(77,79,143,.48);
  background: rgba(77,79,143,.17);
}
html[data-theme="light"] .health-journal-icon.molting {
  border-color: rgba(77,79,143,.34);
  background: rgba(77,79,143,.13);
  box-shadow: inset 0 0 18px rgba(77,79,143,.07);
}
html[data-theme="light"] .health-journal-toggle:hover .health-journal-chevron {
  border-color: rgba(77,79,143,.34);
  color: #43467f;
}
html[data-theme="light"] .molting-health-section .health-journal-header > .btn {
  border-color: rgba(77,79,143,.32);
  background: rgba(77,79,143,.11);
  color: #343663;
}
html[data-theme="light"] .theme-choice-preview { border-color: rgba(77,79,143,.28); }
html[data-theme="light"] .theme-choice-preview-light i:nth-child(1) { border-bottom-color: rgba(77,79,143,.28); }

/* =====================================================================
   REPTIVIBE LIGHT THEME CONTRAST & NATIVE CONTROL PASS · v1.14.2
   Dark palette is preserved. Shared readability sizes apply to both themes.
   ===================================================================== */

/* Readability improvements shared by dark and light themes. */
.dashboard-empty p {
  font-size: 13px;
  line-height: 1.55;
  font-weight: 600;
}
.dashboard-event-copy strong { font-size: 13px; }
.dashboard-event-copy span { font-size: 11px; line-height: 1.4; }
.dashboard-animal-title h3 { font-size: 21px; }
.dashboard-animal-title p { font-size: 12px; line-height: 1.45; }
.dashboard-due-badge { font-size: 10px; padding: 6px 9px; }
.dashboard-animal-metrics span { font-size: 9px; }
.dashboard-animal-metrics strong { font-size: 13px; }
.dashboard-quick-actions button span { font-size: 9px; }
.calendar-toolbar h2 { font-size: 22px; }
.calendar-view-btn { font-size: 12px; }
.calendar-filter-btn { font-size: 11px; }
.calendar-weekdays span { font-size: 11px; }
.calendar-day-number { font-size: 13px; }
.calendar-event-pill { font-size: 10px; line-height: 1.32; }
.calendar-more { font-size: 9px; }
.calendar-list-date strong { font-size: 13px; }
.calendar-agenda-copy strong { font-size: 13px; }
.calendar-agenda-copy small { font-size: 10px; line-height: 1.4; }
.calendar-agenda-card .section-header p { font-size: 11px; }
.health-record-meta { font-size: 10px; }
.health-record-detail > span,
.health-record-subtitle { font-size: 9px; }
.health-record-detail strong,
.health-record-detail p { font-size: 12px; line-height: 1.65; }
.molting-cycle-note,
.molting-health-detail,
.molting-health-dates,
.molting-cycle-meta { font-size: 12px; line-height: 1.6; }

html[data-theme="dark"] .health-record-detail p,
html[data-theme="dark"] .health-record-detail strong,
html[data-theme="dark"] .molting-cycle-note,
html[data-theme="dark"] .molting-health-detail,
html[data-theme="dark"] .molting-health-dates,
html[data-theme="dark"] .molting-cycle-meta {
  color: #b2b2c5;
}
html[data-theme="dark"] .health-record-detail strong { color: #eeeeF4; }

/* Styled dictionary autocomplete replaces the unstyleable native datalist. */
.styled-datalist {
  position: relative;
  width: 100%;
}
.styled-datalist > input { width: 100%; }
.styled-datalist-menu {
  position: absolute;
  z-index: 2200;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(201,168,76,.22);
  border-radius: 12px;
  background: #151521;
  box-shadow: 0 18px 42px rgba(0,0,0,.42);
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,.5) rgba(255,255,255,.04);
}
.styled-datalist-menu[hidden] { display: none !important; }
.styled-datalist-option {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 9px 10px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.styled-datalist-option:hover,
.styled-datalist-option.is-active {
  background: rgba(201,168,76,.12);
  color: var(--text-primary);
}
.styled-datalist-empty {
  padding: 10px;
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
}

/* Light theme contrast baseline. */
html[data-theme="light"] {
  --text-secondary: #263943;
  --text-muted: #394d58;
  color-scheme: light;
}
html[data-theme="light"] body,
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] button,
html[data-theme="light"] datalist,
html[data-theme="light"] option,
html[data-theme="light"] optgroup {
  color-scheme: light !important;
}
html[data-theme="light"] .muted,
html[data-theme="light"] .section-subtitle,
html[data-theme="light"] .field-hint,
html[data-theme="light"] .table-subline,
html[data-theme="light"] .feeding-cell-sub,
html[data-theme="light"] .feeding-filter-result,
html[data-theme="light"] .calendar-agenda-copy small,
html[data-theme="light"] .dashboard-event-copy span,
html[data-theme="light"] .dashboard-animal-title p,
html[data-theme="light"] .dashboard-animal-metrics span,
html[data-theme="light"] .dashboard-activity-item span,
html[data-theme="light"] .dashboard-activity-item time,
html[data-theme="light"] .health-record-meta,
html[data-theme="light"] .health-record-detail > span,
html[data-theme="light"] .health-record-subtitle,
html[data-theme="light"] .molting-cycle-note,
html[data-theme="light"] .molting-cycle-meta {
  color: #394d58 !important;
}

/* Copyright statement and species difficulty labels use indigo in light mode. */
html[data-theme="light"] .legal-copyright-card h3 {
  color: #343663 !important;
  -webkit-text-fill-color: #343663 !important;
}
html[data-theme="light"] .public-species-difficulty {
  background: #d5d7ec;
  border-color: #8d90bd;
  color: #343663;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .01em;
}

/* All native date/time controls and mini calendars follow the light palette. */
html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="datetime-local"],
html[data-theme="light"] input[type="month"],
html[data-theme="light"] input[type="time"],
html[data-theme="light"] input[type="week"] {
  color-scheme: light !important;
  background-color: #e6ecef !important;
  border-color: rgba(54,76,91,.30) !important;
  color: #17232c !important;
}
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="month"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="week"]::-webkit-calendar-picker-indicator {
  opacity: .78;
  cursor: pointer;
  filter: none !important;
}
html[data-theme="light"] select,
html[data-theme="light"] select option,
html[data-theme="light"] select optgroup {
  color-scheme: light !important;
  background: #e8edf1 !important;
  color: #17232c !important;
}
html[data-theme="light"] .styled-datalist-menu {
  border-color: rgba(54,76,91,.28);
  background: #e8edf1;
  box-shadow: 0 18px 42px rgba(31,49,62,.25);
  scrollbar-color: rgba(77,79,143,.5) rgba(54,76,91,.10);
}
html[data-theme="light"] .styled-datalist-option { color: #263943; }
html[data-theme="light"] .styled-datalist-option:hover,
html[data-theme="light"] .styled-datalist-option.is-active {
  background: #d4d6eb;
  color: #272a59;
}
html[data-theme="light"] .styled-datalist-empty { color: #394d58; }

/* Feeding summary cards match the clearer Growth card treatment. */
html[data-theme="light"] .feeding-stat-card {
  background: #dce4e9;
  border-color: rgba(54,76,91,.24);
  box-shadow: 0 9px 23px rgba(31,49,62,.11);
}
html[data-theme="light"] .feeding-stat-card span,
html[data-theme="light"] .feeding-stat-card small { color: #30454f; }
html[data-theme="light"] .feeding-stat-card strong { color: #17232c; }

/* Stronger role badge for both administrator and regular user labels. */
html[data-theme="light"] .account-role-badge {
  border-color: rgba(77,79,143,.45);
  background: #d4d6eb;
  color: #292b60;
  box-shadow: inset 0 0 0 1px rgba(77,79,143,.08);
}

/* Calendar labels, agenda and cards: darker text and roomier typography. */
html[data-theme="light"] .calendar-filter-btn,
html[data-theme="light"] .calendar-view-btn,
html[data-theme="light"] .calendar-nav-btn,
html[data-theme="light"] .calendar-animal-select { color: #263943 !important; }
html[data-theme="light"] .calendar-filter-btn.active,
html[data-theme="light"] .calendar-view-btn.active {
  color: #272a59 !important;
  font-weight: 850;
}
html[data-theme="light"] .calendar-weekdays span,
html[data-theme="light"] .calendar-day,
html[data-theme="light"] .calendar-agenda-copy strong,
html[data-theme="light"] .calendar-list-date strong { color: #263943; }
html[data-theme="light"] .calendar-event-pill { font-weight: 700; }

/* Breeding actions remain readable on the indigo surface. */
html[data-theme="light"] .breeding-add-offspring-btn,
html[data-theme="light"] button.breeding-add-offspring-btn,
html[data-theme="light"] .breeding-add-offspring-btn * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Health notes/descriptions: larger and darker in light mode. */
html[data-theme="light"] .health-record-detail strong,
html[data-theme="light"] .health-record-detail p,
html[data-theme="light"] .molting-cycle-note,
html[data-theme="light"] .molting-health-detail,
html[data-theme="light"] .molting-health-dates,
html[data-theme="light"] .molting-cycle-meta {
  color: #263943 !important;
}

@media (max-width: 620px) {
  .calendar-event-pill { font-size: 9px; }
  .dashboard-animal-title h3 { font-size: 19px; }
  .dashboard-animal-title p { font-size: 11px; }
}


/* =====================================================================
   REPTIVIBE READABILITY, CUSTOM CALENDAR & INDIGO BRAND PASS · v1.14.3
   Headings remain unchanged. These rules target supporting text only.
   ===================================================================== */

/* Browser-independent mini calendar. Native dark popups are hidden. */
.rv-date-field {
  position: relative;
  width: 100%;
}
.rv-date-field > .rv-date-native {
  width: 100%;
  padding-right: 43px !important;
}
.rv-date-native::-webkit-calendar-picker-indicator {
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.rv-date-trigger {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 5px;
  display: grid;
  width: 34px;
  height: 32px;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(78,205,196,.22);
  border-radius: 9px;
  background: rgba(78,205,196,.08);
  color: #9ce6df;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.rv-date-trigger:hover,
.rv-date-trigger:focus-visible {
  border-color: rgba(78,205,196,.42);
  background: rgba(78,205,196,.14);
  outline: none;
}
.rv-date-picker {
  position: fixed;
  z-index: 12000;
  width: 330px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: #171a25;
  color: #f4f4f8;
  box-shadow: 0 22px 60px rgba(0,0,0,.48);
  font-family: inherit;
}
.rv-date-picker[hidden] { display: none !important; }
.rv-date-picker-head {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 36px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.rv-date-picker-head strong {
  color: #f4f4f8;
  font-size: 14px;
  text-align: center;
}
.rv-date-nav {
  display: grid;
  width: 36px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  color: #e8e9f0;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
.rv-date-nav:hover { background: rgba(78,205,196,.10); border-color: rgba(78,205,196,.30); }
.rv-date-weekdays,
.rv-date-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 4px;
}
.rv-date-weekdays { margin-bottom: 5px; }
.rv-date-weekdays span {
  padding: 4px 0;
  color: #aeb2c0;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}
.rv-date-day {
  display: grid;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: #e8e9f0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.rv-date-day:hover { border-color: rgba(78,205,196,.32); background: rgba(78,205,196,.10); }
.rv-date-day.is-outside { color: #747987; background: transparent; }
.rv-date-day.is-today { border-color: rgba(78,205,196,.48); }
.rv-date-day.is-selected { background: #2f8d87; border-color: #58cfc6; color: #fff; }
.rv-date-day:disabled { opacity: .28; cursor: not-allowed; }
.rv-date-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
  padding: 9px;
  border-radius: 11px;
  background: rgba(255,255,255,.035);
  color: #c7cad4;
  font-size: 11px;
  font-weight: 700;
}
.rv-date-time input {
  width: 55px !important;
  min-width: 0 !important;
  padding: 7px 6px !important;
  border-radius: 8px !important;
  text-align: center;
}
.rv-date-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.rv-date-picker-actions button {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  padding: 7px 10px;
  background: rgba(255,255,255,.04);
  color: #d8dae3;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
}
.rv-date-picker-actions button:hover { background: rgba(255,255,255,.08); }
.rv-date-picker-actions button.is-primary { background: #2f8d87; border-color: #58cfc6; color: #fff; }

html[data-theme="light"] .rv-date-trigger {
  border-color: rgba(77,79,143,.34);
  background: #d5d7ec;
  color: #343663;
}
html[data-theme="light"] .rv-date-trigger:hover,
html[data-theme="light"] .rv-date-trigger:focus-visible {
  border-color: rgba(77,79,143,.58);
  background: #c9cbe4;
}
html[data-theme="light"] .rv-date-picker {
  border-color: rgba(54,76,91,.28);
  background: #e9eef2;
  color: #17232c;
  box-shadow: 0 22px 60px rgba(31,49,62,.28);
}
html[data-theme="light"] .rv-date-picker-head strong { color: #17232c; }
html[data-theme="light"] .rv-date-nav {
  border-color: rgba(54,76,91,.24);
  background: #dce4e9;
  color: #263943;
}
html[data-theme="light"] .rv-date-nav:hover { background: #d4d6eb; border-color: rgba(77,79,143,.45); color: #292b60; }
html[data-theme="light"] .rv-date-weekdays span { color: #445964; }
html[data-theme="light"] .rv-date-day {
  background: #dde5ea;
  color: #20323d;
}
html[data-theme="light"] .rv-date-day:hover { border-color: rgba(77,79,143,.45); background: #d4d6eb; color: #272a59; }
html[data-theme="light"] .rv-date-day.is-outside { color: #73818a; background: transparent; }
html[data-theme="light"] .rv-date-day.is-today { border-color: rgba(77,79,143,.62); }
html[data-theme="light"] .rv-date-day.is-selected { background: #4d4f8f; border-color: #343663; color: #fff; }
html[data-theme="light"] .rv-date-time { background: #dce4e9; color: #30454f; }
html[data-theme="light"] .rv-date-time input {
  background: #f0f3f5 !important;
  border-color: rgba(54,76,91,.30) !important;
  color: #17232c !important;
}
html[data-theme="light"] .rv-date-picker-actions { border-top-color: rgba(54,76,91,.18); }
html[data-theme="light"] .rv-date-picker-actions button {
  border-color: rgba(54,76,91,.24);
  background: #dce4e9;
  color: #263943;
}
html[data-theme="light"] .rv-date-picker-actions button:hover { background: #d4d6eb; color: #292b60; }
html[data-theme="light"] .rv-date-picker-actions button.is-primary { background: #4d4f8f; border-color: #343663; color: #fff; }

/* My animals: supporting copy is larger and clearer, headings stay untouched. */
.dashboard-animal-title p { font-size: 13px; line-height: 1.5; }
.dashboard-due-badge { font-size: 11px; }
.dashboard-animal-metrics span { font-size: 10px; }
.dashboard-animal-metrics strong { font-size: 14px; }
.dashboard-quick-actions button span { font-size: 10px; }
.dashboard-animal-filter-summary { font-size: 12px; }
html[data-theme="light"] .dashboard-animal-title p,
html[data-theme="light"] .dashboard-animal-metrics span,
html[data-theme="light"] .dashboard-animal-filter-summary,
html[data-theme="light"] .dashboard-quick-actions button span { color: #263943 !important; }
html[data-theme="light"] .dashboard-animal-metrics strong { color: #17232c !important; }
html[data-theme="dark"] .dashboard-animal-title p,
html[data-theme="dark"] .dashboard-animal-metrics span,
html[data-theme="dark"] .dashboard-animal-filter-summary,
html[data-theme="dark"] .dashboard-quick-actions button span { color: #c0c4d1 !important; }
html[data-theme="dark"] .dashboard-animal-metrics strong { color: #f1f1f6 !important; }

/* Calendar: increase only content text and contrast, not the section title. */
.calendar-weekdays span { font-size: 12px; }
.calendar-day-number { font-size: 14px; }
.calendar-event-pill { font-size: 11px; line-height: 1.4; }
.calendar-more { font-size: 10px; }
.calendar-list-date strong { font-size: 14px; }
.calendar-list-date span { font-size: 11px; }
.calendar-agenda-copy strong { font-size: 14px; }
.calendar-agenda-copy small { font-size: 11px; line-height: 1.48; }
.calendar-agenda-card .section-header p { font-size: 12px; }
html[data-theme="light"] .calendar-weekdays span,
html[data-theme="light"] .calendar-day,
html[data-theme="light"] .calendar-more,
html[data-theme="light"] .calendar-agenda-copy small,
html[data-theme="light"] .calendar-agenda-card .section-header p { color: #263943 !important; }
html[data-theme="light"] .calendar-agenda-copy strong,
html[data-theme="light"] .calendar-list-date strong { color: #17232c !important; }
html[data-theme="dark"] .calendar-weekdays span,
html[data-theme="dark"] .calendar-more,
html[data-theme="dark"] .calendar-agenda-copy small,
html[data-theme="dark"] .calendar-agenda-card .section-header p { color: #c0c4d1 !important; }
html[data-theme="dark"] .calendar-day,
html[data-theme="dark"] .calendar-agenda-copy strong,
html[data-theme="dark"] .calendar-list-date strong { color: #f0f0f5 !important; }

/* Health: notes and supporting fields, with headings deliberately unchanged. */
.health-record-meta { font-size: 11px; }
.health-record-detail > span,
.health-record-subtitle { font-size: 10px; }
.health-record-detail strong,
.health-record-detail p { font-size: 13px; line-height: 1.7; }
.molting-cycle-note,
.molting-health-detail,
.molting-health-dates,
.molting-cycle-meta { font-size: 13px; line-height: 1.66; }
html[data-theme="light"] .health-record-meta,
html[data-theme="light"] .health-record-detail > span,
html[data-theme="light"] .health-record-subtitle,
html[data-theme="light"] .health-record-detail strong,
html[data-theme="light"] .health-record-detail p,
html[data-theme="light"] .molting-cycle-note,
html[data-theme="light"] .molting-health-detail,
html[data-theme="light"] .molting-health-dates,
html[data-theme="light"] .molting-cycle-meta { color: #263943 !important; }
html[data-theme="dark"] .health-record-meta,
html[data-theme="dark"] .health-record-detail > span,
html[data-theme="dark"] .health-record-subtitle,
html[data-theme="dark"] .molting-cycle-note,
html[data-theme="dark"] .molting-health-detail,
html[data-theme="dark"] .molting-health-dates,
html[data-theme="dark"] .molting-cycle-meta { color: #c1c4d1 !important; }
html[data-theme="dark"] .health-record-detail strong,
html[data-theme="dark"] .health-record-detail p { color: #ececf3 !important; }

/* Breeding: larger supporting text in both themes, section/card headings stay as-is. */
.breeding-section-header p,
.breeding-section-toggle small,
.breeding-card-meta,
.breeding-offspring-info,
.breeding-parent-summary,
.breeding-list-date span,
.breeding-list-main p { font-size: 13px; line-height: 1.5; }
.breeding-card-note { font-size: 14px; line-height: 1.6; }
.breeding-clutch-numbers span { font-size: 11px; }
.breeding-empty-state p { font-size: 14px; line-height: 1.55; }
.breeding-offspring-table td { font-size: 13px; }
.breeding-offspring-table th { font-size: 11px; }
.breeding-auto-offspring-note { font-size: 13px; line-height: 1.55; }
.breeding-advanced-link > p { font-size: 12px; line-height: 1.55; }
.breeding-cycle-related,
.dashboard-breeding-status { font-size: 12px; }
html[data-theme="light"] .breeding-section-header p,
html[data-theme="light"] .breeding-section-toggle small,
html[data-theme="light"] .breeding-card-meta,
html[data-theme="light"] .breeding-offspring-info,
html[data-theme="light"] .breeding-parent-summary,
html[data-theme="light"] .breeding-list-date span,
html[data-theme="light"] .breeding-list-main p,
html[data-theme="light"] .breeding-card-note,
html[data-theme="light"] .breeding-clutch-numbers span,
html[data-theme="light"] .breeding-empty-state p,
html[data-theme="light"] .breeding-offspring-table td,
html[data-theme="light"] .breeding-offspring-table th,
html[data-theme="light"] .breeding-auto-offspring-note,
html[data-theme="light"] .breeding-advanced-link > p,
html[data-theme="light"] .breeding-cycle-related,
html[data-theme="light"] .dashboard-breeding-status { color: #263943 !important; }
html[data-theme="dark"] .breeding-section-header p,
html[data-theme="dark"] .breeding-section-toggle small,
html[data-theme="dark"] .breeding-card-meta,
html[data-theme="dark"] .breeding-offspring-info,
html[data-theme="dark"] .breeding-parent-summary,
html[data-theme="dark"] .breeding-list-date span,
html[data-theme="dark"] .breeding-list-main p,
html[data-theme="dark"] .breeding-card-note,
html[data-theme="dark"] .breeding-clutch-numbers span,
html[data-theme="dark"] .breeding-empty-state p,
html[data-theme="dark"] .breeding-offspring-table td,
html[data-theme="dark"] .breeding-offspring-table th,
html[data-theme="dark"] .breeding-auto-offspring-note,
html[data-theme="dark"] .breeding-advanced-link > p,
html[data-theme="dark"] .breeding-cycle-related,
html[data-theme="dark"] .dashboard-breeding-status { color: #c5c8d4 !important; }

/* Indigo light artwork and matching paw glow. Original turquoise files remain for dark mode. */
html[data-theme="light"] .public-brand-emblem,
html[data-theme="light"] .public-footer-brand > img,
html[data-theme="light"] .logo-img-auth,
html[data-theme="light"] .logo-img-header,
html[data-theme="light"] .nav-logo-icon,
html[data-theme="light"] .heading-logo-icon,
html[data-theme="light"] .logo-img-hero,
html[data-theme="light"] .reading-brand img,
html[data-theme="light"] .avatar-placeholder-logo {
  filter: drop-shadow(0 0 8px rgba(77,79,143,.46)) drop-shadow(0 5px 12px rgba(36,53,65,.16)) !important;
}
html[data-theme="light"] .dashboard-animal-avatar.logo-placeholder {
  border-color: rgba(77,79,143,.44) !important;
  box-shadow: 0 0 14px rgba(77,79,143,.24) !important;
}
html[data-theme="light"] .add-animal-header-btn {
  color: #4d4f8f;
  animation-name: addAnimalSoftPulseIndigo;
  filter: brightness(1.04) drop-shadow(0 0 5px rgba(77,79,143,.55)) drop-shadow(0 0 11px rgba(77,79,143,.28));
  text-shadow: 0 0 6px rgba(77,79,143,.58), 0 0 13px rgba(77,79,143,.30);
}
html[data-theme="light"] .add-animal-header-btn:hover {
  filter: brightness(1.08) drop-shadow(0 0 7px rgba(77,79,143,.72)) drop-shadow(0 0 15px rgba(77,79,143,.38));
  text-shadow: 0 0 8px rgba(77,79,143,.70), 0 0 16px rgba(77,79,143,.38);
}
@keyframes addAnimalSoftPulseIndigo {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1.03) drop-shadow(0 0 5px rgba(77,79,143,.48)) drop-shadow(0 0 10px rgba(77,79,143,.23));
  }
  50% {
    transform: translateY(-1px) scale(1.04);
    filter: brightness(1.09) drop-shadow(0 0 7px rgba(77,79,143,.66)) drop-shadow(0 0 14px rgba(77,79,143,.34));
  }
}

/* The add-offspring label is white in both palettes. */
.breeding-add-offspring-btn,
button.breeding-add-offspring-btn,
.breeding-add-offspring-btn:hover,
.breeding-add-offspring-btn:focus,
.breeding-add-offspring-btn * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}

@media (max-width: 620px) {
  .calendar-event-pill { font-size: 10px; }
  .rv-date-picker { padding: 10px; }
}
.rv-date-native {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  cursor: pointer;
}


/* =====================================================================
   REPTIVIBE LIGHT THEME POLISH · v1.14.4
   Focused corrections: account tabs, collection events, public CTAs and
   fully indigo logo glow. Dark palette remains unchanged.
   ===================================================================== */

/* Profile/settings tabs: use the same indigo language as the light theme. */
html[data-theme="light"] .account-tab.active {
  background: linear-gradient(135deg, #6265aa, #4d4f8f) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 7px 18px rgba(77,79,143,.24) !important;
}
html[data-theme="light"] .account-tab:hover:not(.active) {
  background: rgba(77,79,143,.09);
  color: #343663;
}

/* Current collection events: a very pale indigo surface instead of grey. */
html[data-theme="light"] .dashboard-event {
  background: #d9dbea;
  border-color: rgba(77,79,143,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
html[data-theme="light"] .dashboard-event:hover {
  background: #d2d5e8;
  border-color: rgba(77,79,143,.34);
}
html[data-theme="light"] .dashboard-event-icon {
  background: rgba(77,79,143,.11);
}
html[data-theme="light"] .dashboard-event-action,
html[data-theme="light"] .dashboard-settings-btn {
  border-color: rgba(77,79,143,.28);
  background: rgba(77,79,143,.12);
  color: #343663;
}
html[data-theme="light"] .dashboard-event-action:hover,
html[data-theme="light"] .dashboard-settings-btn:hover {
  border-color: rgba(77,79,143,.48);
  background: rgba(77,79,143,.20);
}

/* Main-page primary actions: a lighter indigo while keeping white text readable. */
html[data-theme="light"] .public-primary-action {
  background: linear-gradient(135deg, #6d70b5, #6265aa, #5a5d9e) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 10px 28px rgba(77,79,143,.24) !important;
}
html[data-theme="light"] .public-primary-action:hover {
  background: linear-gradient(135deg, #7477bc, #696caf, #5f62a5) !important;
  box-shadow: 0 14px 34px rgba(77,79,143,.32) !important;
}

/* Every logo glow in light mode is indigo, including surrounding containers. */
html[data-theme="light"] img[src*="logo-indigo-"],
html[data-theme="light"] .public-brand-emblem,
html[data-theme="light"] .public-footer-brand > img,
html[data-theme="light"] .logo-img-auth,
html[data-theme="light"] .logo-img-header,
html[data-theme="light"] .nav-logo-icon,
html[data-theme="light"] .heading-logo-icon,
html[data-theme="light"] .logo-img-hero,
html[data-theme="light"] .reading-brand img,
html[data-theme="light"] .avatar-placeholder-logo {
  filter: drop-shadow(0 0 9px rgba(77,79,143,.58)) drop-shadow(0 0 18px rgba(77,79,143,.24)) drop-shadow(0 5px 12px rgba(36,53,65,.14)) !important;
}
html[data-theme="light"] .dashboard-animal-avatar.logo-placeholder,
html[data-theme="light"] .profile-avatar:has(.avatar-placeholder-logo) {
  border-color: rgba(77,79,143,.48) !important;
  box-shadow: 0 0 16px rgba(77,79,143,.30) !important;
}


/* =====================================================================
   REPTIVIBE INDIGO LOGO & HEADING CORRECTION · v1.14.5
   Light theme only: true indigo artwork, visible glow in every placement,
   and a deeper indigo for brand accents, page headings and animal names.
   ===================================================================== */
html[data-theme="light"] {
  --rv-indigo-heading: #303261;
  --rv-indigo-glow: #565aa8;
  --brand-gold: #303261;
  --accent-light: #3a3d72;
  --accent-dark: #2b2d58;
}

/* The Vibe half is now a deeper, calmer indigo on every public/private page. */
html[data-theme="light"] .brand-wordmark .brand-word:last-child .brand-initial,
html[data-theme="light"] .brand-wordmark .brand-word:last-child .brand-tail {
  background: none !important;
  color: var(--rv-indigo-heading) !important;
  -webkit-text-fill-color: var(--rv-indigo-heading) !important;
  text-shadow: 0 0 13px rgba(48,50,97,.13);
}

/* Page and block headings inside the cabinet. Font size and typography stay unchanged. */
html[data-theme="light"] .main-content h1,
html[data-theme="light"] .main-content h2,
html[data-theme="light"] .main-content h3,
html[data-theme="light"] .main-content .dashboard-header h1,
html[data-theme="light"] .main-content .dashboard-header h1 span,
html[data-theme="light"] .main-content .section-header h2,
html[data-theme="light"] .main-content .section-header h3,
html[data-theme="light"] .main-content .calendar-toolbar h2 {
  background: none !important;
  color: var(--rv-indigo-heading) !important;
  -webkit-text-fill-color: var(--rv-indigo-heading) !important;
}

/* Animal names follow the same deeper indigo. */
html[data-theme="light"] .dashboard-animal-title h3,
html[data-theme="light"] .selected-animal-profile h2,
html[data-theme="light"] .animal-card h3 {
  background: none !important;
  color: var(--rv-indigo-heading) !important;
  -webkit-text-fill-color: var(--rv-indigo-heading) !important;
}

/* Strong, visible indigo halo around every logo placement in light mode. */
html[data-theme="light"] img[src*="logo-indigo-v5-"],
html[data-theme="light"] .public-brand-emblem,
html[data-theme="light"] .public-footer-brand > img,
html[data-theme="light"] .logo-img-auth,
html[data-theme="light"] .logo-img-header,
html[data-theme="light"] .nav-logo-icon,
html[data-theme="light"] .heading-logo-icon,
html[data-theme="light"] .logo-img-hero,
html[data-theme="light"] .reading-brand img,
html[data-theme="light"] .avatar-placeholder-logo {
  filter:
    drop-shadow(0 0 5px rgba(70,74,145,.88))
    drop-shadow(0 0 12px rgba(70,74,145,.56))
    drop-shadow(0 0 22px rgba(70,74,145,.30)) !important;
  box-shadow:
    0 0 0 1px rgba(70,74,145,.42),
    0 0 12px rgba(70,74,145,.58),
    0 0 24px rgba(70,74,145,.28) !important;
}

/* Cabinet logo containers need their own halo because some crop child shadows. */
html[data-theme="light"] .dashboard-animal-avatar.logo-placeholder {
  border-color: rgba(70,74,145,.62) !important;
  box-shadow:
    0 0 0 1px rgba(70,74,145,.26),
    0 0 13px rgba(70,74,145,.62),
    0 0 25px rgba(70,74,145,.31) !important;
}
html[data-theme="light"] .dashboard-animal-avatar.logo-placeholder .avatar-placeholder-logo {
  box-shadow: inset 0 0 12px rgba(70,74,145,.18) !important;
}
html[data-theme="light"] .profile-avatar:has(.avatar-placeholder-logo),
html[data-theme="light"] .avatar-preview:has(.avatar-placeholder-logo) {
  border-color: rgba(70,74,145,.66) !important;
  box-shadow:
    0 0 0 1px rgba(70,74,145,.28),
    0 0 15px rgba(70,74,145,.60),
    0 0 28px rgba(70,74,145,.28) !important;
}


/* =====================================================================
   REPTIVIBE UNIFIED BRAND GLOW · v1.14.6
   One visual formula for every ReptiVibe emblem. Light mode uses indigo,
   dark mode uses turquoise. Gallery deliberately uses a photo icon.
   ===================================================================== */
:root,
html[data-theme="dark"] {
  --rv-logo-glow-rgb: 34, 240, 215;
  --rv-logo-glow-solid: #22f0d7;
}
html[data-theme="light"] {
  --rv-logo-glow-rgb: 70, 74, 145;
  --rv-logo-glow-solid: #464a91;
}

/* The same halo as the animal-card placeholder, now used everywhere. */
.rv-brand-logo,
.public-brand-emblem,
.public-footer-brand > img,
.logo-img-auth,
.logo-img-header,
.logo-img-hero,
.reading-brand img,
.avatar-placeholder-logo {
  border-radius: 50% !important;
  overflow: visible !important;
  filter:
    drop-shadow(0 0 5px rgba(var(--rv-logo-glow-rgb), .96))
    drop-shadow(0 0 12px rgba(var(--rv-logo-glow-rgb), .72))
    drop-shadow(0 0 23px rgba(var(--rv-logo-glow-rgb), .43)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--rv-logo-glow-rgb), .48),
    0 0 13px rgba(var(--rv-logo-glow-rgb), .68),
    0 0 26px rgba(var(--rv-logo-glow-rgb), .34) !important;
}

/* Compact header/footer marks need a slightly tighter halo, not a weaker one. */
.public-brand-emblem,
.logo-img-header,
.public-footer-brand > img,
.reading-brand img {
  filter:
    drop-shadow(0 0 4px rgba(var(--rv-logo-glow-rgb), .98))
    drop-shadow(0 0 9px rgba(var(--rv-logo-glow-rgb), .76))
    drop-shadow(0 0 17px rgba(var(--rv-logo-glow-rgb), .48)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--rv-logo-glow-rgb), .54),
    0 0 10px rgba(var(--rv-logo-glow-rgb), .72),
    0 0 20px rgba(var(--rv-logo-glow-rgb), .38) !important;
}

/* Cabinet placeholders can crop child shadows, so the round container glows too. */
.dashboard-animal-avatar.logo-placeholder,
.profile-avatar:has(.avatar-placeholder-logo),
.avatar-preview:has(.avatar-placeholder-logo) {
  overflow: visible !important;
  border-color: rgba(var(--rv-logo-glow-rgb), .66) !important;
  box-shadow:
    0 0 0 1px rgba(var(--rv-logo-glow-rgb), .30),
    0 0 13px rgba(var(--rv-logo-glow-rgb), .68),
    0 0 26px rgba(var(--rv-logo-glow-rgb), .35) !important;
}
.dashboard-animal-avatar.logo-placeholder .avatar-placeholder-logo,
.profile-avatar .avatar-placeholder-logo,
.avatar-preview .avatar-placeholder-logo {
  box-shadow: inset 0 0 12px rgba(var(--rv-logo-glow-rgb), .17) !important;
}

/* Gallery uses one compact colour image in both themes. */
.gallery-photo-icon {
  width: 1.28em;
  height: 1.28em;
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: -.24em;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(24, 31, 48, .22));
}
.header-nav .gallery-photo-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: -5px;
}
.gallery-page-header h1 .gallery-photo-icon {
  width: 46px;
  height: 46px;
  margin-right: 8px;
  vertical-align: middle;
  filter: drop-shadow(0 4px 9px rgba(37, 45, 72, .24));
}
.public-feature-list article > img.feature-gallery-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 3px 7px rgba(26, 33, 52, .22));
}

/* Release lock: beat every legacy logo selector, including old !important rules. */
html[data-theme="light"] body img.rv-brand-logo,
html[data-theme="light"] body .public-header .public-brand > img.public-brand-emblem.rv-brand-logo,
html[data-theme="light"] body .legal-header .public-brand > img.public-brand-emblem.rv-brand-logo,
html[data-theme="light"] body .public-footer-brand > img.rv-brand-logo,
html[data-theme="light"] body .reading-brand > img.rv-brand-logo,
html[data-theme="light"] body img.logo-img-auth.rv-brand-logo,
html[data-theme="light"] body img.logo-img-header.rv-brand-logo,
html[data-theme="light"] body img.logo-img-hero.rv-brand-logo,
html[data-theme="light"] body .dashboard-animal-avatar.logo-placeholder > img.avatar-placeholder-logo,
html[data-theme="light"] body .profile-avatar img.avatar-placeholder-logo,
html[data-theme="light"] body .avatar-preview img.avatar-placeholder-logo {
  filter:
    drop-shadow(0 0 5px rgba(70, 74, 145, .98))
    drop-shadow(0 0 12px rgba(70, 74, 145, .74))
    drop-shadow(0 0 23px rgba(70, 74, 145, .45)) !important;
  box-shadow:
    0 0 0 1px rgba(70, 74, 145, .52),
    0 0 13px rgba(70, 74, 145, .70),
    0 0 26px rgba(70, 74, 145, .36) !important;
}
html[data-theme="dark"] body img.rv-brand-logo,
html[data-theme="dark"] body .public-header .public-brand > img.public-brand-emblem.rv-brand-logo,
html[data-theme="dark"] body .legal-header .public-brand > img.public-brand-emblem.rv-brand-logo,
html[data-theme="dark"] body .public-footer-brand > img.rv-brand-logo,
html[data-theme="dark"] body .reading-brand > img.rv-brand-logo,
html[data-theme="dark"] body img.logo-img-auth.rv-brand-logo,
html[data-theme="dark"] body img.logo-img-header.rv-brand-logo,
html[data-theme="dark"] body img.logo-img-hero.rv-brand-logo,
html[data-theme="dark"] body .dashboard-animal-avatar.logo-placeholder > img.avatar-placeholder-logo,
html[data-theme="dark"] body .profile-avatar img.avatar-placeholder-logo,
html[data-theme="dark"] body .avatar-preview img.avatar-placeholder-logo {
  filter:
    drop-shadow(0 0 5px rgba(34, 240, 215, .98))
    drop-shadow(0 0 12px rgba(34, 240, 215, .74))
    drop-shadow(0 0 23px rgba(34, 240, 215, .45)) !important;
  box-shadow:
    0 0 0 1px rgba(34, 240, 215, .52),
    0 0 13px rgba(34, 240, 215, .70),
    0 0 26px rgba(34, 240, 215, .36) !important;
}
html[data-theme="light"] body .dashboard-animal-avatar.logo-placeholder,
html[data-theme="light"] body .profile-avatar:has(.avatar-placeholder-logo),
html[data-theme="light"] body .avatar-preview:has(.avatar-placeholder-logo) {
  border-color: rgba(70, 74, 145, .68) !important;
  box-shadow: 0 0 0 1px rgba(70, 74, 145, .30), 0 0 13px rgba(70, 74, 145, .70), 0 0 26px rgba(70, 74, 145, .36) !important;
}
html[data-theme="dark"] body .dashboard-animal-avatar.logo-placeholder,
html[data-theme="dark"] body .profile-avatar:has(.avatar-placeholder-logo),
html[data-theme="dark"] body .avatar-preview:has(.avatar-placeholder-logo) {
  border-color: rgba(34, 240, 215, .68) !important;
  box-shadow: 0 0 0 1px rgba(34, 240, 215, .30), 0 0 13px rgba(34, 240, 215, .70), 0 0 26px rgba(34, 240, 215, .36) !important;
}

/* =====================================================================
   REPTIVIBE PUBLIC LOGO GLOW SOFTENING · v1.14.7
   Public home and Sources use a calmer halo in both themes. Cabinet,
   profile and animal-card logos intentionally keep the stronger glow.
   ===================================================================== */
html body .public-site .public-header .public-brand > img.public-brand-emblem.rv-brand-logo,
html body .public-site .public-footer-brand > img.rv-brand-logo,
html body.legal-page-body .legal-header .public-brand > img.public-brand-emblem.rv-brand-logo {
  filter:
    drop-shadow(0 0 3px rgba(var(--rv-logo-glow-rgb), .52))
    drop-shadow(0 0 8px rgba(var(--rv-logo-glow-rgb), .22)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--rv-logo-glow-rgb), .20),
    0 0 7px rgba(var(--rv-logo-glow-rgb), .27),
    0 0 14px rgba(var(--rv-logo-glow-rgb), .11) !important;
}

/* =====================================================================
   REPTIVIBE CABINET + CARE LOGO GLOW SOFTENING · v1.14.8
   Match the calm public halo in the cabinet's top-left brand and the
   «Уход» hero. Theme variables keep indigo in light and turquoise in dark.
   ===================================================================== */
html body .app-container .header .header-brand > img.logo-img-header.rv-brand-logo,
html body #tab-info .info-hero > img.logo-img-hero.rv-brand-logo {
  filter:
    drop-shadow(0 0 3px rgba(var(--rv-logo-glow-rgb), .52))
    drop-shadow(0 0 8px rgba(var(--rv-logo-glow-rgb), .22)) !important;
  box-shadow:
    0 0 0 1px rgba(var(--rv-logo-glow-rgb), .20),
    0 0 7px rgba(var(--rv-logo-glow-rgb), .27),
    0 0 14px rgba(var(--rv-logo-glow-rgb), .11) !important;
}


/* =====================================================================
   REPTIVIBE CABINET + CARE VISIBLE SOFT HALO · v1.14.9
   The previous image-only shadow was hidden by the PNG/container geometry.
   These two placements now receive a real radial halo behind the emblem.
   ===================================================================== */
html body .app-container .header .header-brand {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
html body .app-container .header .header-brand::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  width: 50px;
  height: 50px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--rv-logo-glow-rgb), .30) 0%,
    rgba(var(--rv-logo-glow-rgb), .16) 40%,
    rgba(var(--rv-logo-glow-rgb), .06) 58%,
    transparent 74%
  );
  filter: blur(3px);
  pointer-events: none;
  z-index: 0;
}
html body .app-container .header .header-brand > * {
  position: relative;
  z-index: 1;
}

html body #tab-info .info-hero {
  isolation: isolate;
}
html body #tab-info .info-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 16px;
  width: 130px;
  height: 130px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--rv-logo-glow-rgb), .28) 0%,
    rgba(var(--rv-logo-glow-rgb), .14) 42%,
    rgba(var(--rv-logo-glow-rgb), .05) 60%,
    transparent 76%
  );
  filter: blur(5px);
  pointer-events: none;
  z-index: 0;
}
html body #tab-info .info-hero > * {
  position: relative;
  z-index: 1;
}

/* =====================================================================
   REPTIVIBE FINAL CARE CLEANUP + BREEDING HEADING ALIGNMENT · v1.14.10
   Remove the two redundant Care helper blocks in markup/data and keep the
   light-theme parent-pairs heading visually consistent with other sections.
   ===================================================================== */
html[data-theme="light"] #tab-breeding .breeding-section-header h3 {
  color: #17232c !important;
}


/* =====================================================================
   REPTIVIBE HEADER NAV ICON ALIGNMENT · v1.14.11
   Match every top navigation icon to the 20px colour Gallery image while
   preserving the existing header height, labels and tab spacing.
   ===================================================================== */
.header-nav .nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.header-nav .nav-tab-icon {
  width: 20px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  flex: 0 0 20px;
}
.header-nav .nav-tab-icon .gallery-photo-icon {
  width: 20px;
  height: 20px;
  margin: 0;
  display: block;
  vertical-align: initial;
}

/* =====================================================================
   REPTIVIBE PUBLIC DIARY WIDE SECTION · v1.14.12
   Place the existing personal-diary presentation directly below the hero
   as a full-width page section instead of a detached rounded outer card.
   The feature items inside the section keep their original appearance.
   ===================================================================== */
.public-site main > .public-features-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(58px, 6vw, 86px) max(20px, calc((100% - 1400px) / 2));
  border-top: 1px solid rgba(201,168,76,.10);
  border-bottom: 1px solid rgba(201,168,76,.10);
  background:
    radial-gradient(circle at 91% 14%, rgba(78,205,196,.08), transparent 28%),
    radial-gradient(circle at 8% 92%, rgba(201,168,76,.09), transparent 34%),
    linear-gradient(180deg, rgba(17,17,27,.52), rgba(10,10,16,.28));
}

.public-site main > .public-features-section .public-features-shell {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

html[data-theme="light"] .public-site main > .public-features-section {
  border-top-color: rgba(64,84,99,.12);
  border-bottom-color: rgba(64,84,99,.12);
  background:
    radial-gradient(circle at 91% 14%, rgba(20,127,121,.07), transparent 29%),
    radial-gradient(circle at 8% 92%, rgba(77,79,143,.07), transparent 35%),
    linear-gradient(180deg, rgba(231,237,241,.74), rgba(218,227,233,.52));
}

html[data-theme="light"] .public-site main > .public-features-section .public-features-shell {
  border: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 860px) {
  .public-site main > .public-features-section .public-features-shell {
    padding: 0;
  }
}

@media (max-width: 620px) {
  .public-site main > .public-features-section {
    padding: 46px 12px 52px;
  }

  .public-site main > .public-features-section .public-features-shell {
    padding: 0;
  }
}



/* =====================================================================
   REPTIVIBE PUBLIC DIARY TYPOGRAPHY · v1.14.13
   Match the diary heading to the neighbouring public-section headings,
   keep the heading copy left-aligned and improve feature-card readability.
   ===================================================================== */
.public-site main > .public-features-section .public-features-copy {
  text-align: left;
  align-self: start;
}

.public-site main > .public-features-section .public-features-copy h2 {
  margin-top: 7px;
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  text-align: left;
}

.public-site main > .public-features-section .public-features-copy p {
  font-size: 14px;
  line-height: 1.75;
  text-align: left;
}

.public-site main > .public-features-section .public-feature-list article {
  min-height: 100px;
  gap: 16px;
  padding: 18px;
}

.public-site main > .public-features-section .public-feature-list article > span {
  width: 48px;
  height: 48px;
  font-size: 25px;
}

.public-site main > .public-features-section .public-feature-list article > img.feature-gallery-icon {
  width: 48px;
  height: 48px;
}

.public-site main > .public-features-section .public-feature-list strong {
  font-size: 14px;
  line-height: 1.3;
}

.public-site main > .public-features-section .public-feature-list small {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.55;
}

@media (max-width: 620px) {
  .public-site main > .public-features-section .public-features-copy h2 {
    font-size: clamp(30px, 9vw, 40px);
  }

  .public-site main > .public-features-section .public-feature-list article {
    min-height: 94px;
    padding: 16px;
  }
}

/* =====================================================================
   REPTIVIBE PUBLIC HOMEPAGE CENTERED LAYOUT · v1.14.15
   Remove the old desktop-only shared left edge. Header, article/species
   sections and panoramic hero copy now share one centered 1400px frame.
   The diary introduction is centred inside its column; feature-card text
   remains left-aligned for readability.
   ===================================================================== */
@media (min-width: 861px) {
  .public-site .public-header-inner,
  .public-site #publicArticles.public-section,
  .public-site #publicSpecies.public-section {
    width: min(1400px, calc(100% - 40px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /*
   * Панорамный фон остаётся во всю ширину экрана,
   * а текст начинается от левой границы центрального контейнера.
   */
  .public-site .public-hero-copy {
    left: max(20px, calc((100% - 1400px) / 2)) !important;
  }
}

/*
 * Сам блок дневника уже имеет центральную оболочку шириной 1400px.
 * Центрируем его вводную часть и отменяем прежнюю жёсткую привязку влево.
 */
.public-site main > .public-features-section .public-features-shell {
  align-items: center !important;
}

.public-site main > .public-features-section .public-features-copy {
  width: 100% !important;
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  align-self: center !important;
  justify-self: center !important;
  text-align: center !important;
}

.public-site main > .public-features-section .public-features-copy .public-section-kicker,
.public-site main > .public-features-section .public-features-copy h2,
.public-site main > .public-features-section .public-features-copy p {
  width: 100% !important;
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.public-site main > .public-features-section .public-features-copy h2 {
  font-size: clamp(30px, 4vw, 46px) !important;
}

.public-site main > .public-features-section .public-features-copy p {
  margin-top: 16px !important;
  margin-bottom: 24px !important;
}

/* Сохраняем увеличенную читаемость карточек из последней версии. */
.public-site main > .public-features-section .public-feature-list article {
  min-height: 108px !important;
  gap: 17px !important;
  padding: 19px !important;
}

.public-site main > .public-features-section .public-feature-list article > span {
  width: 52px !important;
  height: 52px !important;
  flex-basis: 52px !important;
  font-size: 28px !important;
}

.public-site main > .public-features-section .public-feature-list article > img.feature-gallery-icon {
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
}

.public-site main > .public-features-section .public-feature-list strong {
  font-size: 16px !important;
  line-height: 1.28 !important;
}

.public-site main > .public-features-section .public-feature-list small {
  margin-top: 7px !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

@media (max-width: 860px) {
  .public-site main > .public-features-section .public-features-copy {
    max-width: 680px !important;
  }

  .public-site main > .public-features-section .public-features-copy .public-section-kicker,
  .public-site main > .public-features-section .public-features-copy h2,
  .public-site main > .public-features-section .public-features-copy p {
    max-width: 680px !important;
  }
}

@media (max-width: 620px) {
  .public-site main > .public-features-section .public-feature-list article {
    min-height: 102px !important;
    gap: 15px !important;
    padding: 17px !important;
  }

  .public-site main > .public-features-section .public-feature-list article > span,
  .public-site main > .public-features-section .public-feature-list article > img.feature-gallery-icon {
    width: 49px !important;
    height: 49px !important;
    flex-basis: 49px !important;
  }

  .public-site main > .public-features-section .public-feature-list strong {
    font-size: 15px !important;
  }

  .public-site main > .public-features-section .public-feature-list small {
    font-size: 12px !important;
  }
}

/* =====================================================================
   REPTIVIBE PASSWORD RECOVERY · v1.15.0
   ===================================================================== */
.auth-recovery-link {
  display: block;
  width: fit-content;
  margin: 14px auto 0;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--accent-light, #7eb9ff);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(126, 185, 255, .38);
  text-underline-offset: 4px;
}

.auth-recovery-link:hover,
.auth-recovery-link:focus-visible {
  color: #b7d8ff;
  text-decoration-color: currentColor;
}

.auth-recovery-form {
  animation: authRecoveryIn .24s ease-out;
}

.auth-recovery-back {
  display: inline-flex;
  align-items: center;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.auth-recovery-back:hover,
.auth-recovery-back:focus-visible {
  color: var(--accent-light, #7eb9ff);
}

.auth-recovery-heading {
  margin-bottom: 22px;
  text-align: center;
}

.auth-recovery-heading h2 {
  margin: 10px 0 8px;
  font-family: 'Playfair Display', serif;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.12;
}

.auth-recovery-heading p {
  margin: 0 auto;
  max-width: 440px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

.auth-recovery-icon {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(78, 205, 196, .28);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(78, 205, 196, .16), rgba(83, 129, 255, .13));
  box-shadow: 0 12px 35px rgba(0, 0, 0, .18);
  font-size: 27px;
}

.form-help {
  display: block;
  margin-top: 7px;
  color: var(--text-muted, #8f97ac);
  font-size: 11px;
  line-height: 1.45;
}

.auth-status {
  min-height: 22px;
  margin-top: 14px;
  padding: 0 4px;
  text-align: center;
  font-size: 12px;
  line-height: 1.55;
}

.auth-status.success { color: #72d6ac; }
.auth-status.error { color: var(--danger); }
.auth-status.info { color: var(--accent-light, #7eb9ff); }

.auth-recovery-form .btn[disabled] {
  cursor: wait;
  opacity: .72;
}

@keyframes authRecoveryIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

html[data-theme="light"] .auth-recovery-link,
html[data-theme="light"] .auth-recovery-back:hover,
html[data-theme="light"] .auth-recovery-back:focus-visible {
  color: #286eb7;
}

html[data-theme="light"] .auth-recovery-icon {
  border-color: rgba(40, 110, 183, .22);
  background: linear-gradient(145deg, rgba(40, 110, 183, .10), rgba(78, 205, 196, .10));
}