/* ============================================================
   components.css — Cards, Grids, Feature Components
   ============================================================ */

/* ---- GRIDS ---- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:14px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px;margin-top:14px}

/* ---- BASE CARD ---- */
.card{
  background:var(--card-bg);border:1px solid var(--cb);
  border-radius:15px;padding:22px;backdrop-filter:blur(8px);transition:all .3s;
}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(155,89,182,.22)}

/* ---- CLICKABLE CARD ---- */
.card-click{cursor:pointer;position:relative;overflow:hidden}
.card-click::after{content:'↗ Detail';position:absolute;bottom:8px;right:12px;font-size:.65em;color:var(--pl);opacity:0;transition:opacity .3s}
.card-click:hover::after{opacity:1}
.card-click:hover{border-color:rgba(155,89,182,.6);box-shadow:0 8px 28px rgba(155,89,182,.28)}

/* ---- LIFE PATH CARD ---- */
.lp-card{
  background:linear-gradient(135deg,rgba(155,89,182,.17) 0%,rgba(90,40,130,.1) 100%);
  border:1px solid rgba(155,89,182,.48);border-radius:20px;padding:38px 30px;
  text-align:center;margin-bottom:16px;cursor:pointer;transition:all .3s;
}
.lp-card:hover{box-shadow:0 0 40px rgba(155,89,182,.35);transform:translateY(-2px)}
.lp-num{font-size:5.2em;font-weight:bold;line-height:1;background:linear-gradient(135deg,var(--pl) 0%,var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:5px}
.lp-title{font-size:1.42em;color:var(--gold);margin-bottom:10px}
.lp-desc{color:var(--dim);line-height:1.88;max-width:580px;margin:0 auto 14px;font-size:.9em}
.click-hint{font-size:.7em;color:var(--pl);opacity:.7;margin-top:8px;animation:pulse 2s ease-in-out infinite}

/* ---- MINI CARDS ---- */
.mini{
  background:var(--card-bg);border:1px solid var(--cb);
  border-radius:13px;padding:16px;transition:all .3s;cursor:pointer;
}
.mini:hover{border-color:rgba(155,89,182,.6);box-shadow:0 4px 18px rgba(155,89,182,.25);transform:translateY(-2px)}
.mini-lbl{font-size:.7em;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin-bottom:4px}
.mini-num{font-size:2.45em;font-weight:bold;color:var(--pl);line-height:1}
.mini-title{font-size:.82em;color:var(--gold);margin:5px 0 3px}
.mini-desc{font-size:.77em;color:var(--dim);line-height:1.56}

/* ---- STRENGTH / CHALLENGE GRID ---- */
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:13px}
.sc-card{background:var(--card-bg);border:1px solid var(--cb);border-radius:12px;padding:15px}
.sc-lbl{font-size:.7em;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin-bottom:9px}
.sc-item{display:flex;gap:7px;font-size:.8em;color:var(--text);margin-bottom:5px;line-height:1.42}
.sc-item::before{flex-shrink:0;font-size:.82em;margin-top:1px}
.si-s::before{content:'✦';color:var(--purple)}
.si-c::before{content:'◆';color:var(--gold)}
.si-w::before{content:'⚠';color:#e74c3c}

/* ---- NAME BREAKDOWN TABLE ---- */
.nb-wrap{overflow-x:auto;margin-top:10px}
.nb-table{border-collapse:collapse;font-size:.75em;min-width:100%}
.nb-table td{padding:4px 7px;border:1px solid rgba(155,89,182,.14);text-align:center;min-width:32px}
.nb-hdr td{background:rgba(155,89,182,.1);color:var(--pl);font-weight:bold}
.nb-v td{background:rgba(240,192,64,.07);color:var(--gl)}
.nb-tot td{background:rgba(155,89,182,.07);color:var(--pl);font-weight:bold}

/* ---- KARMA BADGE ---- */
.karma-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(231,76,60,.12);border:1px solid rgba(231,76,60,.35);
  border-radius:20px;padding:4px 14px;font-size:.78em;color:#e74c3c;margin:4px;
}
.karma-badge.good{background:rgba(46,204,113,.1);border-color:rgba(46,204,113,.3);color:#2ecc71}

/* ---- MATRIX ---- */
.mwrap{text-align:center;padding:6px 0 20px}
.mwrap h3{font-size:1.3em;color:var(--gold);margin-bottom:5px}
.mwrap p{color:var(--dim);font-size:.83em;margin-bottom:18px}
.mstar-outer{position:relative;display:inline-block;overflow-x:auto}
.mstar{display:inline-grid;grid-template-columns:repeat(5,70px);grid-template-rows:repeat(5,70px);gap:8px}
.mcell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--cb);border-radius:11px;
  cursor:pointer;transition:all .3s;padding:5px;
}
.mcell:hover{border-color:var(--purple);transform:scale(1.07);box-shadow:0 0 16px rgba(155,89,182,.42)}
.mcell.center{background:linear-gradient(135deg,rgba(155,89,182,.28),rgba(100,50,180,.18));border-color:var(--purple);box-shadow:0 0 22px rgba(155,89,182,.52)}
.mn{font-size:1.38em;font-weight:bold;color:var(--gold);line-height:1}
.ms{font-size:1.1em;margin:1px 0}
.ml{font-size:.57em;color:var(--dim);text-align:center;line-height:1.15}
.msvg{position:absolute;top:0;left:0;pointer-events:none}
.mpos{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:18px}
.mp{background:var(--card-bg);border:1px solid var(--cb);border-radius:13px;padding:14px;transition:all .3s;cursor:pointer}
.mp:hover{border-color:rgba(155,89,182,.55);transform:translateY(-2px);box-shadow:0 4px 18px rgba(155,89,182,.2)}
.mp-h{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.mp-b{width:33px;height:33px;border-radius:50%;background:linear-gradient(135deg,var(--purple),#6c3483);display:flex;align-items:center;justify-content:center;font-size:.87em;font-weight:bold;color:#fff;flex-shrink:0}
.mp-name{font-size:.84em;color:var(--gold)}
.mp-arc{font-size:.7em;color:var(--dim)}
.mp-m{font-size:.78em;color:var(--text);line-height:1.55;margin-top:5px}
.mp-d{font-size:.73em;color:var(--dim);font-style:italic;line-height:1.44;margin-top:3px}

/* ---- TAROT ---- */
.t-intro{text-align:center;margin-bottom:22px}
.t-intro h3{color:var(--gold);font-size:1.3em;margin-bottom:6px}
.t-intro p{color:var(--dim);font-size:.86em;line-height:1.72}
.spread{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.t-slot{text-align:center}
.t-pos{font-size:.76em;text-transform:uppercase;letter-spacing:.1em;color:var(--dim);margin-bottom:9px}
.cwrap{perspective:1000px;height:188px;cursor:pointer}
.cinner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .88s cubic-bezier(.175,.885,.32,1.275)}
.cinner.flipped{transform:rotateY(180deg)}
.cface{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:13px;border:2px solid rgba(155,89,182,.38);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cback{background:linear-gradient(135deg,#190a2e 0%,#090914 100%)}
.cbpat{width:82%;height:82%;border:1px solid rgba(155,89,182,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,rgba(155,89,182,.04),rgba(155,89,182,.04) 2px,transparent 2px,transparent 10px)}
.cback-icon{font-size:2.2em;opacity:.38}
.cfront{background:linear-gradient(135deg,rgba(155,89,182,.22) 0%,rgba(22,6,42,.96) 100%);transform:rotateY(180deg);padding:13px;text-align:center}
.ce{font-size:2.35em;margin-bottom:5px}
.cn{font-size:.81em;color:var(--gold);font-weight:bold;margin-bottom:2px}
.cel{font-size:.68em;color:var(--dim);margin-bottom:5px}
.cm{font-size:.69em;color:var(--text);line-height:1.44}
.rbadge{position:absolute;top:5px;right:5px;background:rgba(231,76,60,.22);border:1px solid rgba(231,76,60,.48);border-radius:4px;padding:2px 6px;font-size:.6em;color:#e74c3c}
.taphint{font-size:.7em;color:var(--dim);margin-top:6px;animation:pulse 2s ease-in-out infinite}
.cdet{background:var(--card-bg);border:1px solid var(--cb);border-radius:13px;padding:18px;margin-bottom:11px}
.cdh{display:flex;align-items:center;gap:13px;margin-bottom:13px;padding-bottom:13px;border-bottom:1px solid rgba(155,89,182,.16)}
.cde{font-size:2.3em}
.cdt{color:var(--gold);font-size:1.03em}
.cdm2{color:var(--dim);font-size:.76em;margin-top:2px}
.cdmeaning{color:var(--text);line-height:1.87;font-size:.87em;margin-bottom:11px}
.kws{display:flex;flex-wrap:wrap;gap:5px}
.kw{background:rgba(155,89,182,.1);border:1px solid rgba(155,89,182,.26);border-radius:20px;padding:3px 11px;font-size:.72em;color:var(--pl)}

/* ---- BIORHYTHM ---- */
.bio-canvas-wrap{background:var(--card-bg);border:1px solid var(--cb);border-radius:15px;padding:18px;margin-bottom:16px;overflow:hidden}
.bio-canvas-wrap canvas{display:block;max-width:100%;height:auto}
.bio-legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.bio-dot{display:inline-flex;align-items:center;gap:5px;font-size:.78em;color:var(--text)}
.bio-vals{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.bio-val{text-align:center;background:var(--card-bg);border:1px solid var(--cb);border-radius:12px;padding:14px;cursor:pointer;transition:all .3s}
.bio-val:hover{border-color:rgba(155,89,182,.5);transform:translateY(-2px)}
.bio-val-num{font-size:1.9em;font-weight:bold;margin-bottom:4px}
.bio-val-lbl{font-size:.72em;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.bio-val-desc{font-size:.7em;color:var(--dim);margin-top:4px;line-height:1.4}

/* ---- COMPATIBILITY ---- */
.compat-form{background:var(--card-bg);border:1px solid var(--cb);border-radius:18px;padding:24px;margin-bottom:18px}
.compat-people{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.compat-person{background:rgba(255,255,255,.03);border:1px solid rgba(155,89,182,.2);border-radius:12px;padding:16px}
.compat-person-title{font-size:.8em;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
.compat-vs{display:flex;align-items:center;justify-content:center;font-size:1.5em}
.compat-result{animation:slideIn .4s ease}
.compat-score-wrap{text-align:center;padding:28px;background:linear-gradient(135deg,rgba(155,89,182,.12),rgba(240,192,64,.07));border:1px solid rgba(155,89,182,.32);border-radius:20px;margin-bottom:16px;cursor:pointer}
.compat-score{font-size:4.5em;font-weight:bold;background:linear-gradient(135deg,var(--pl),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.compat-grade{font-size:1.2em;color:var(--gold);margin:6px 0}
.compat-tags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:10px}
.compat-dim{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px}
.compat-dim-card{background:var(--card-bg);border:1px solid var(--cb);border-radius:13px;padding:14px;cursor:pointer;transition:all .3s}
.compat-dim-card:hover{border-color:rgba(155,89,182,.5);transform:translateY(-2px)}
.compat-dim-title{font-size:.75em;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.compat-dim-score{font-size:1.6em;font-weight:bold;color:var(--pl)}
.compat-dim-bar{height:6px;background:rgba(255,255,255,.08);border-radius:4px;margin:7px 0}
.compat-dim-fill{height:100%;border-radius:4px;transition:width .8s ease}
.compat-dim-desc{font-size:.75em;color:var(--dim);line-height:1.5}

/* ---- WETON / PRIMBON ---- */
.weton-result{animation:slideIn .4s ease}
.weton-card{background:linear-gradient(135deg,rgba(240,192,64,.1),rgba(155,89,182,.08));border:1px solid rgba(240,192,64,.28);border-radius:18px;padding:24px;text-align:center;margin-bottom:16px;cursor:pointer;transition:all .3s}
.weton-card:hover{box-shadow:0 0 30px rgba(240,192,64,.2);transform:translateY(-2px)}
.weton-name{font-size:1.6em;color:var(--gold);font-weight:bold;margin-bottom:4px}
.weton-neptune{font-size:.85em;color:var(--dim)}
.weton-neptu-num{font-size:3em;font-weight:bold;color:var(--pl)}
.weton-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.weton-item{background:var(--card-bg);border:1px solid var(--cb);border-radius:11px;padding:12px;text-align:center;cursor:pointer;transition:all .3s}
.weton-item:hover{border-color:rgba(155,89,182,.5);transform:translateY(-2px)}
.weton-item-num{font-size:1.8em;font-weight:bold;color:var(--pl)}
.weton-item-lbl{font-size:.68em;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.compat-weton{background:var(--card-bg);border:1px solid var(--cb);border-radius:18px;padding:22px;margin-top:16px;cursor:pointer;transition:all .3s}
.compat-weton:hover{border-color:rgba(155,89,182,.5)}
.compat-weton-score{font-size:3.5em;font-weight:bold;text-align:center;color:var(--gold)}

/* ---- ANGEL NUMBERS ---- */
.angel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:14px}
.angel-card{background:var(--card-bg);border:1px solid var(--cb);border-radius:13px;padding:16px;text-align:center;cursor:pointer;transition:all .3s}
.angel-card:hover{border-color:rgba(155,89,182,.6);transform:translateY(-3px);box-shadow:0 8px 24px rgba(155,89,182,.28)}
.angel-num{font-size:1.7em;font-weight:bold;color:var(--gold);margin-bottom:4px}
.angel-title{font-size:.78em;color:var(--pl);margin-bottom:4px}
.angel-short{font-size:.72em;color:var(--dim);line-height:1.44}
.angel-search{width:100%;background:var(--input-bg);border:1px solid rgba(155,89,182,.38);border-radius:11px;padding:12px 16px;color:var(--text);font-size:.95em;font-family:Georgia,serif;outline:none;transition:all .3s;margin-bottom:14px}
.angel-search:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(155,89,182,.18)}
.angel-search::placeholder{color:var(--dim)}

/* ---- DREAM AI ---- */
.dream-form{background:var(--card-bg);border:1px solid var(--cb);border-radius:18px;padding:24px;margin-bottom:18px}
.dream-textarea{width:100%;background:var(--input-bg);border:1px solid rgba(155,89,182,.38);border-radius:11px;padding:14px 17px;color:var(--text);font-size:.9em;font-family:Georgia,serif;outline:none;transition:all .3s;resize:vertical;min-height:120px;line-height:1.7}
.dream-textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(155,89,182,.18)}
.dream-textarea::placeholder{color:var(--dim)}
.dream-result{background:linear-gradient(135deg,rgba(155,89,182,.07),rgba(20,5,40,.6));border:1px solid rgba(155,89,182,.26);border-radius:18px;padding:28px;line-height:2.05;color:var(--text);font-size:.9em;white-space:pre-wrap;position:relative;margin-bottom:14px}
.dream-result::before{content:'💭';position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:1.9em;background:var(--modal-bg);padding:0 10px}

/* ---- AI ORACLE ---- */
.ai-intro{text-align:center;padding:26px 0 18px}
.ai-intro h3{color:var(--gold);font-size:1.32em;margin-bottom:7px}
.ai-intro p{color:var(--dim);font-size:.87em;line-height:1.72;max-width:480px;margin:0 auto}
.ai-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 22px}
.ai-sum-card{background:var(--card-bg);border:1px solid var(--cb);border-radius:11px;padding:12px;text-align:center;cursor:pointer;transition:all .3s}
.ai-sum-card:hover{border-color:rgba(155,89,182,.5);transform:translateY(-2px)}
.ai-sum-num{font-size:1.7em;font-weight:bold;color:var(--pl)}
.ai-sum-lbl{font-size:.68em;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-top:3px}
.ai-box{background:linear-gradient(135deg,rgba(155,89,182,.07),rgba(20,5,40,.6));border:1px solid rgba(155,89,182,.26);border-radius:18px;padding:30px;line-height:2.05;color:var(--text);font-size:.9em;white-space:pre-wrap;position:relative;margin-bottom:14px}
.ai-box::before{content:'🔮';position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:1.9em;background:var(--modal-bg);padding:0 10px}

/* ---- PINNACLE ---- */
.pinnacle-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px}
.pinnacle-card{background:var(--card-bg);border:1px solid var(--cb);border-radius:13px;padding:16px;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.pinnacle-card:hover{border-color:rgba(155,89,182,.55);transform:translateY(-2px)}
.pinnacle-phase{font-size:.68em;color:var(--dim);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.pinnacle-num{font-size:2.6em;font-weight:bold;color:var(--pl)}
.pinnacle-age{font-size:.72em;color:var(--gold);margin:4px 0}
.pinnacle-desc{font-size:.76em;color:var(--dim);line-height:1.5;margin-top:6px}
.pinnacle-active{border-color:var(--purple)!important;box-shadow:0 0 20px rgba(155,89,182,.3)!important}
.pinnacle-active-badge{position:absolute;top:8px;right:10px;background:rgba(155,89,182,.2);border:1px solid rgba(155,89,182,.4);border-radius:20px;padding:2px 8px;font-size:.62em;color:var(--pl)}

/* ---- PERSONAL DAY/MONTH ---- */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:14px}
.pd-card{text-align:center;background:var(--card-bg);border:1px solid var(--cb);border-radius:13px;padding:20px;cursor:pointer;transition:all .3s}
.pd-card:hover{border-color:rgba(155,89,182,.5);transform:translateY(-2px)}
.pd-num{font-size:3.5em;font-weight:bold;color:var(--pl)}
.pd-type{font-size:.75em;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;margin:5px 0}
.pd-title{font-size:.9em;color:var(--text);margin-bottom:6px}
.pd-desc{font-size:.78em;color:var(--dim);line-height:1.6}

/* ---- CAREER/PARTNER COMPARE ---- */
.compare-tabs{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap}
.ctab{background:transparent;border:1px solid rgba(155,89,182,.28);border-radius:10px;padding:8px 16px;color:var(--dim);cursor:pointer;font-size:.84em;font-family:Georgia,serif;white-space:nowrap;transition:all .3s}
.ctab:hover{border-color:var(--purple);color:var(--text)}
.ctab.active{background:linear-gradient(135deg,var(--purple),#6c3483);border-color:transparent;color:#fff}
.compare-section{animation:slideIn .3s ease}
.career-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:12px}
.career-card{background:var(--card-bg);border:1px solid var(--cb);border-radius:13px;padding:16px;cursor:pointer;transition:all .3s}
.career-card:hover{border-color:rgba(155,89,182,.5);transform:translateY(-2px)}
.career-icon{font-size:1.8em;margin-bottom:6px}
.career-title{font-size:.85em;color:var(--gold);font-weight:bold;margin-bottom:4px}
.career-match{font-size:.72em;color:var(--pl)}
.career-score{font-size:1.4em;font-weight:bold;color:var(--pl);float:right}

/* ---- RESPONSIVE COMPONENTS ---- */
@media(max-width:600px){
  .mstar{grid-template-columns:repeat(5,56px);grid-template-rows:repeat(5,56px)}
  .ml{font-size:.5em}
  .mn{font-size:1.1em}
  .compat-people{grid-template-columns:1fr}
  .weton-grid{grid-template-columns:repeat(2,1fr)}
  .angel-grid{grid-template-columns:repeat(2,1fr)}
  .ai-sum{grid-template-columns:1fr 1fr}
  .career-grid,.compat-dim{grid-template-columns:1fr}
  .pinnacle-grid,.pd-grid{grid-template-columns:1fr}
  .bio-vals{grid-template-columns:1fr}
  .spread{grid-template-columns:1fr}
}
@media(max-width:380px){
  .mstar{grid-template-columns:repeat(5,48px);grid-template-rows:repeat(5,48px)}
}