/* ===== Numerologie v5 – Modern UI ===== */
:root{
  --bg:#ffffff;          /* canvas */
  --card:#ffffff;        /* cards */
  --card-2:#ffffff;      /* subtle panels */
  --fg:#000000;          /* text */
  --muted:#000000;       /* secondary text */
  --primary:#6aa3ff;     /* accent */
  --primary-2:#89d0ff;   /* accent hover */
  --success:#5bd3a5;
  --danger:#ff7a7a;
  --warning:#ffd36e;
  --shadow:0 6px 20px rgba(0,0,0,.3);
  --radius:16px;
  --radius-sm:12px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#ffffff; --card:#ffffff; --card-2:#f1f5fb; --fg:#0c1220; --muted:#516075; --primary:#2f6eff; --primary-2:#5aa0ff; --shadow:0 10px 24px rgba(23,36,85,.12);}  
}

html,body{background:var(--bg); color:var(--fg);} 
.navbar{background:linear-gradient(90deg, rgba(106,163,255,.18), rgba(137,208,255,.18)); backdrop-filter:saturate(150%) blur(6px); border-bottom:1px solid rgba(255,255,255,.06);} 
.navbar .navbar-brand{font-weight:700; letter-spacing:.2px;}

.card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); box-shadow:var(--shadow);} 
.card.p-3{padding:1.25rem!important}

/* Sidebar sticky */
.sticky-inputs{position:sticky; top:1rem}
.form-label{font-weight:600}
.help, .muted, .form-text{color:var(--muted)!important}

/* Modern Tabs */
.tab-scroll{position:relative; overflow:auto; -webkit-overflow-scrolling:touch;}
.tab-scroll::-webkit-scrollbar{height:0}
.modern-tabs{border-bottom:none; gap:.5rem; flex-wrap:nowrap}
.modern-tabs .nav-link{border:none; border-radius:999px; color:var(--muted); background:transparent; padding:.5rem .875rem; white-space:nowrap}
.modern-tabs .nav-link:hover{color:var(--fg); background:rgba(255,255,255,.06)}
.modern-tabs .nav-link.active{color:#0c1220; background:linear-gradient(135deg, var(--primary), var(--primary-2)); box-shadow:0 6px 16px rgba(82,148,255,.35);}
@media (max-width: 576px){ .modern-tabs .nav-link{padding:.5rem .75rem; font-size:.95rem} }

/* Pills / Numbers */
.pill-row{display:flex; flex-wrap:wrap; gap:.5rem}
.number-pill{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .7rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); font-weight:600; font-size:.95rem}
.number-pill b{font-weight:700}
.pill-master{background:linear-gradient(180deg, rgba(255,215,130,.25), rgba(255,215,130,.1)); border-color:rgba(255,215,130,.35)}
.pill-debt{background:linear-gradient(180deg, rgba(255,122,122,.22), rgba(255,122,122,.08)); border-color:rgba(255,122,122,.35)}
.pill-tarot{background:linear-gradient(180deg, rgba(106,163,255,.22), rgba(106,163,255,.08)); border-color:rgba(106,163,255,.35)}
.pill-planet{background:linear-gradient(180deg, rgba(91,211,165,.2), rgba(91,211,165,.08)); border-color:rgba(91,211,165,.35)}

/* Tables → clean + responsive wrapper */
.table{--bs-table-color:var(--fg); --bs-table-bg:transparent; --bs-border-color:rgba(255,255,255,.08);}
.table th{color:var(--muted); font-weight:600; width:40%}
.table-responsive{border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-sm); background:var(--card-2);}

/* Meaning Cards */
#meaningList{display:grid; gap:1rem; grid-template-columns:1fr 1fr}
@media (max-width: 992px){ #meaningList{grid-template-columns:1fr} }
.meaning-card{background:var(--card-2); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-sm); padding:1rem}
.meaning-card .title{font-weight:700; margin-bottom:.25rem}
.meaning-card .subtitle{color:var(--muted); font-size:.95rem; margin-bottom:.5rem}
.meaning-card .row{--bs-gutter-x:1rem}
.tag{display:inline-block; padding:.25rem .6rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); font-size:.825rem; font-weight:600}
.tag.success{background:rgba(91,211,165,.14); border-color:rgba(91,211,165,.35)}
.tag.danger{background:rgba(255,122,122,.14); border-color:rgba(255,122,122,.35)}

/* Tarot list */
#tarotMeanings .card-tarot{background:var(--card-2); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-sm); padding:.875rem; margin-bottom:.75rem}
#tarotMeanings .card-tarot .hd{display:flex; justify-content:space-between; gap:.5rem; font-weight:700}
#tarotMeanings .card-tarot .meta{color:var(--muted); font-size:.9rem}

/* Legend & buttons */
.legend-box{border:1px dashed rgba(255,255,255,.18); border-radius:var(--radius-sm); padding:.75rem; background:rgba(255,255,255,.03)}
.btn{border-radius:12px}
.btn-outline{border-color:rgba(255,255,255,.18); color:var(--fg)}
.btn-outline:hover{background:rgba(255,255,255,.08)}

/* Print improvements */
@media print{
  .no-print, .navbar, .tab-scroll, .nav, .modal{display:none!important}
  body{background:#fff; color:#000}
  .card, .table-responsive{box-shadow:none; border-color:#ccc}
}