/* =============================================
   TỬ VI ĐẨU SỐ — Complete Stylesheet v2
   Inspired by xem-tuvi.com reference design
   ============================================= */
:root {
  --bg-deep: #080810;
  --bg-card: #0f1020;
  --bg-card-hover: #161830;
  --bg-surface: #0c0d1a;
  --bg-input: #12132a;
  --gold: #d4a853;
  --gold-light: #f0d68a;
  --gold-dim: #b8943f;
  --gold-glow: rgba(212,168,83,0.12);
  --text-primary: #e0ddd5;
  --text-secondary: #8a879a;
  --text-dim: #5c5970;
  --red: #e85d5d;
  --blue: #5b9cf5;
  --green: #5ac78b;
  --purple: #a87ce0;
  --orange: #e8a43e;
  --cyan: #4ecdc4;
  --border: rgba(212,168,83,0.08);
  --border-strong: rgba(212,168,83,0.22);
  --shadow: 0 4px 30px rgba(0,0,0,0.5);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Be Vietnam Pro', system-ui, sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --container: 960px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);background:var(--bg-deep);color:var(--text-primary);line-height:1.7;overflow-x:hidden}
.container{max-width:var(--container);margin:0 auto;padding:0 1.25rem}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-light)}
code{background:rgba(212,168,83,0.1);padding:0.1rem 0.4rem;border-radius:4px;font-size:0.82rem;color:var(--gold)}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:1.5rem}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.star-field{position:absolute;inset:0}
.star-field .star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:twinkle var(--dur,3s) ease-in-out infinite;opacity:0}
@keyframes twinkle{0%,100%{opacity:0}50%{opacity:var(--op,0.6)}}
.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:0.25}
.orb-1{width:420px;height:420px;background:radial-gradient(circle,rgba(212,168,83,0.3),transparent);top:-120px;right:-100px}
.orb-2{width:300px;height:300px;background:radial-gradient(circle,rgba(100,60,180,0.25),transparent);bottom:-80px;left:-60px}
.hero-content{position:relative;z-index:1;text-align:center;max-width:520px;width:100%}
.mandala-wrapper{width:180px;height:180px;margin:0 auto 1rem;animation:mandalaFloat 8s ease-in-out infinite}
@keyframes mandalaFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(3deg)}}
.mandala{width:100%;height:100%}
.hero-title{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,3.6rem);font-weight:600;color:var(--text-primary);letter-spacing:2px;margin-bottom:0.3rem;animation:fadeDown .8s ease}
.hero-tagline{color:var(--text-secondary);font-size:0.95rem;margin-bottom:0.2rem;animation:fadeDown 1s ease}
.hero-quote{color:var(--gold-dim);font-size:0.85rem;margin-bottom:0.8rem;animation:fadeDown 1.2s ease}
.hero-quote-2{color:var(--text-dim);font-size:0.78rem;margin-bottom:1.5rem;font-style:italic;min-height:1.2em}
@keyframes fadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}

/* INPUT CARD */
.input-card{background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius);padding:1.5rem;text-align:left;box-shadow:var(--shadow);animation:fadeUp 1.2s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
.form-section-label{font-size:0.78rem;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:0.4rem;margin-top:1rem}
.form-section-label:first-child{margin-top:0}
.form-section-label--required{color:var(--gold-light)}
.form-label-sm{font-size:0.78rem;font-weight:500;color:var(--gold-dim);margin-bottom:0.25rem;display:block}
.form-input{width:100%;padding:0.7rem 0.9rem;background:var(--bg-input);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:0.92rem;transition:border-color .2s,box-shadow .2s;appearance:none;-webkit-appearance:none}
.form-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-glow)}
.form-input::placeholder{color:var(--text-dim)}
select.form-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23d4a853' d='M5 6L0 0h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.9rem center;padding-right:2.2rem}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.7rem;margin-bottom:0.5rem}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem;margin-bottom:0.3rem}
.form-group{display:flex;flex-direction:column}
.btn-submit{width:100%;padding:0.85rem;margin-top:0.8rem;background:linear-gradient(135deg,var(--gold-dim),var(--gold));border:none;border-radius:var(--radius-sm);color:#080810;font-family:var(--font-body);font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;gap:0.5rem}
.btn-submit:hover{background:linear-gradient(135deg,var(--gold),var(--gold-light));transform:translateY(-1px);box-shadow:0 4px 20px rgba(212,168,83,0.3)}
.btn-submit:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.btn-icon{font-size:1.2rem}
.form-privacy{text-align:center;font-size:0.72rem;color:var(--text-dim);margin-top:0.6rem}
.hero-footer-link{margin-top:1.5rem;animation:fadeUp 1.4s ease}
.link-btn{background:none;border:none;color:var(--gold-dim);font-family:var(--font-body);font-size:0.85rem;cursor:pointer;transition:color .2s}
.link-btn:hover{color:var(--gold-light)}

/* MODALS */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1.5rem;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{background:var(--bg-card);border:1px solid var(--border-strong);border-radius:16px;padding:2rem;max-width:440px;width:100%;text-align:center;animation:modalPop .4s ease}
.modal-card--wide{max-width:600px;text-align:left;max-height:85vh;overflow-y:auto}
@keyframes modalPop{from{opacity:0;transform:scale(0.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-icon{font-size:2.5rem;margin-bottom:0.8rem}
.modal-card h2{font-family:var(--font-display);font-size:1.6rem;color:var(--text-primary);margin-bottom:0.2rem}
.modal-sub{color:var(--text-secondary);font-size:0.9rem;margin-bottom:1.5rem}
.modal-close{background:none;border:none;color:var(--red);font-family:var(--font-body);font-size:0.9rem;cursor:pointer;margin-bottom:1rem;padding:0}
.disclaimer-items{display:flex;flex-direction:column;gap:0.8rem;margin-bottom:1.5rem;text-align:left}
.disclaimer-item{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.9rem 1rem;display:flex;gap:0.7rem;align-items:flex-start}
.disclaimer-emoji{font-size:1.3rem;flex-shrink:0;margin-top:0.1rem}
.disclaimer-item p{font-size:0.88rem;color:var(--text-secondary);line-height:1.6}
.disclaimer-item strong{color:var(--text-primary)}
.disclaimer-quote{border-color:rgba(212,168,83,0.15);background:rgba(212,168,83,0.04)}
.quote-mark{font-size:1.5rem;color:var(--gold-dim);line-height:1}
.disclaimer-quote em{color:var(--gold);font-size:0.9rem}
.btn-understand{width:100%;padding:0.9rem;background:linear-gradient(135deg,var(--gold-dim),var(--gold));border:none;border-radius:var(--radius-sm);color:#080810;font-family:var(--font-body);font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s}
.btn-understand:hover{background:linear-gradient(135deg,var(--gold),var(--gold-light))}

/* About modal */
.about-hero-img{background:linear-gradient(135deg,rgba(20,20,50,0.9),rgba(10,10,30,0.9));border-radius:var(--radius);padding:2.5rem 1.5rem;text-align:center;margin-bottom:1.5rem;border:1px solid var(--border)}
.about-hero-img h2{font-family:var(--font-display);font-size:2rem;color:var(--text-primary)}
.about-hero-img p{color:var(--text-secondary);font-size:0.9rem}
.about-body h3{font-family:var(--font-display);font-size:1.3rem;color:var(--text-primary);margin:1.3rem 0 0.5rem}
.about-body p{font-size:0.9rem;color:var(--text-secondary);margin-bottom:0.6rem;line-height:1.7}
.about-body strong{color:var(--gold-light)}
.about-callout{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;display:flex;gap:0.8rem;align-items:flex-start;margin:1rem 0}
.about-callout span{font-size:1.3rem}
.about-callout p{font-size:0.88rem;color:var(--text-secondary)}

/* LOADING */
.loading-overlay{position:fixed;inset:0;background:radial-gradient(ellipse at center,rgba(20,15,40,0.97),rgba(8,8,16,0.99));z-index:2000;display:flex;align-items:center;justify-content:center;animation:fadeIn .5s ease}
.loading-content{text-align:center}
.loading-orb{position:relative;width:100px;height:100px;margin:0 auto 1.5rem}
.loading-orb-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--text-dim)}
.loading-ring{position:absolute;inset:0;animation:spin 2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-ring-progress{animation:dashSpin 2s linear infinite}
@keyframes dashSpin{to{stroke-dashoffset:-283}}
.loading-text{font-size:1rem;color:var(--text-primary);margin-bottom:0.3rem}
.loading-sub{font-size:0.82rem;color:var(--text-dim)}

/* RESULTS */
.results-section{padding-top:0;background:var(--bg-deep);min-height:100vh}
.results-topbar{background:var(--bg-surface);border-bottom:1px solid var(--border);padding:0.7rem 1.25rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:100}
.btn-back{background:rgba(255,255,255,0.06);border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);font-family:var(--font-body);font-size:0.82rem;padding:0.35rem 0.8rem;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-back:hover{background:rgba(255,255,255,0.1);color:var(--text-primary)}
.topbar-info{font-size:0.82rem;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.section-label{font-size:0.7rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin:2rem 0 0.8rem;padding-left:2px}

/* OVERVIEW CARD */
.overview-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:0.5rem}
.overview-top{text-align:center;margin-bottom:1.2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--border)}
.overview-yinyang{font-size:2rem;margin-bottom:0.5rem;opacity:0.7}
.overview-date{font-size:0.92rem;color:var(--text-secondary)}
.overview-lunar{font-size:0.82rem;color:var(--gold-dim);margin-top:0.2rem}
.overview-grid{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.overview-cell{padding:0.8rem 0.6rem;text-align:center;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.overview-cell:nth-child(3n){border-right:none}
.overview-cell:nth-child(n+4){border-bottom:none}
.ov-label{font-size:0.65rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-bottom:0.2rem}
.ov-value{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--text-primary)}
.ov-sub{font-size:0.72rem;color:var(--text-dim);margin-top:0.1rem}
.ov-value.highlight-gold{color:var(--gold-light)}
.overview-cell:first-child{background:rgba(212,168,83,0.04)}

/* Overview explanations */
.overview-explain{margin-top:1.2rem;display:flex;flex-direction:column;gap:0.8rem}
.explain-block{padding:0.9rem 1rem;border-left:3px solid var(--gold-dim);background:rgba(212,168,83,0.03);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.explain-block h4{font-size:0.85rem;color:var(--gold);margin-bottom:0.3rem}
.explain-block p{font-size:0.84rem;color:var(--text-secondary);line-height:1.6}

/* LA SO HEADER */
.laso-header{margin-bottom:1rem}
.laso-bar{width:3px;height:22px;background:var(--red);border-radius:2px;margin-bottom:0.4rem}
.laso-header h2{font-family:var(--font-display);font-size:1.5rem;color:var(--red);margin-bottom:0.2rem}
.laso-header p{font-size:0.82rem;color:var(--text-dim)}

.time-warning{background:rgba(232,164,62,0.08);border:1px solid rgba(232,164,62,0.2);border-radius:var(--radius-sm);padding:0.7rem 1rem;font-size:0.82rem;color:var(--orange);margin-bottom:1rem}

/* ASTROLABE GRID */
.astrolabe-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,auto);gap:1px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:2rem}
.palace-cell{background:var(--bg-card);padding:0.5rem;min-height:120px;display:flex;flex-direction:column;position:relative;transition:background .15s;cursor:pointer}
.palace-cell:hover{background:var(--bg-card-hover)}
.palace-cell.is-soul{box-shadow:inset 0 0 0 1px var(--gold-dim)}
.palace-cell.is-body{box-shadow:inset 0 0 0 1px var(--purple)}
.palace-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:0.3rem}
.palace-name{font-weight:700;font-size:0.78rem;color:var(--text-primary)}
.palace-branch{font-size:0.68rem;color:var(--text-dim);text-align:right}
.soul-tag,.body-tag{font-size:0.58rem;padding:1px 4px;border-radius:3px;margin-left:2px;font-weight:700}
.soul-tag{background:rgba(212,168,83,0.2);color:var(--gold)}
.body-tag{background:rgba(168,124,224,0.2);color:var(--purple)}
.palace-stars{flex:1;display:flex;flex-direction:column;gap:1px}
/* Color-coded stars matching reference */
.star-major{font-size:0.78rem;font-weight:700;color:var(--red);line-height:1.35}
.star-brightness{font-size:0.62rem;font-weight:500;vertical-align:super}
.bright-mieu{color:var(--green)}
.bright-vuong{color:var(--green)}
.bright-dac{color:var(--cyan)}
.bright-loi{color:var(--blue)}
.bright-binh{color:var(--text-dim)}
.bright-bat{color:var(--orange)}
.bright-han{color:var(--orange)}
.star-mutagen{font-size:0.62rem;font-weight:700;color:var(--purple);margin-left:1px}
.star-minor{font-size:0.72rem;color:var(--blue);line-height:1.3}
.star-minor .star-brightness{color:var(--green)}
.star-adjective{font-size:0.62rem;color:var(--text-dim);line-height:1.25;margin-top:auto}
.palace-footer{display:flex;justify-content:space-between;margin-top:0.2rem;padding-top:0.2rem;border-top:1px solid rgba(255,255,255,0.03);font-size:0.6rem}
.palace-decadal{color:var(--text-dim)}
.palace-changsheng{color:var(--green);font-weight:500}
.palace-boshi{color:var(--text-dim);font-size:0.58rem}

/* Lai Nhan / Original Palace badge */
.lainhan-tag{display:inline-block;font-size:0.58rem;padding:1px 5px;border-radius:3px;background:rgba(94,204,113,0.18);color:var(--green);font-weight:700;margin-left:2px;vertical-align:middle}

/* Center cell */
.palace-center{grid-column:2/4;grid-row:2/4;padding:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:auto;cursor:default}
.palace-center:hover{background:var(--bg-card)}
.center-title{font-family:var(--font-display);font-size:1.3rem;color:var(--gold-light);margin-bottom:0.8rem;font-weight:600}
.center-grid{display:grid;grid-template-columns:auto 1fr;gap:0.25rem 0.8rem;text-align:left;font-size:0.78rem;width:100%;max-width:300px}
.cg-label{color:var(--text-dim);white-space:nowrap;text-align:right}
.cg-value{color:var(--text-primary);font-weight:500}
.cg-value.gold{color:var(--gold-light)}
.cg-value.green{color:var(--green)}
.cg-span{grid-column:1/-1;border-top:1px solid var(--border);margin:0.2rem 0}

/* COMPAT */
.compat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0.8rem;margin-bottom:2rem}
.compat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem 1.2rem}
.compat-card h3{font-family:var(--font-display);font-size:1rem;color:var(--gold-light);margin-bottom:0.4rem}
.compat-card p{font-size:0.84rem;color:var(--text-secondary);line-height:1.6}
.compat-highlight{color:var(--gold);font-weight:600}

/* AI SECTION */
.ai-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem;margin-bottom:1rem}
.ai-card-header{display:flex;gap:0.7rem;align-items:flex-start;margin-bottom:1rem}
.ai-spark{font-size:1.2rem;color:var(--purple)}
.ai-card-header h3{font-size:1rem;color:var(--text-primary);margin-bottom:0.1rem}
.ai-card-header p{font-size:0.78rem;color:var(--text-dim)}
.ai-topics{margin-bottom:1rem}
.ai-topic-label{display:block;font-size:0.68rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-bottom:0.5rem}
.ai-topic-tags{display:flex;flex-wrap:wrap;gap:0.4rem}
.topic-tag{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:100px;padding:0.3rem 0.7rem;font-size:0.78rem;color:var(--text-secondary);cursor:pointer;font-family:var(--font-body);transition:all .2s}
.topic-tag.active{background:rgba(168,124,224,0.1);border-color:rgba(168,124,224,0.3);color:var(--purple)}
.topic-tag:hover{border-color:var(--purple)}
.ai-question-box{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;margin-bottom:1rem}
.ai-question-header{display:flex;gap:0.6rem;align-items:flex-start;margin-bottom:0.7rem}
.ai-question-header span{font-size:1.1rem}
.ai-question-header strong{font-size:0.88rem;color:var(--text-primary)}
.ai-question-header small{font-size:0.72rem;color:var(--text-dim)}
.ai-quick-questions{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:0.7rem}
.quick-q{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:100px;padding:0.25rem 0.65rem;font-size:0.75rem;color:var(--text-secondary);cursor:pointer;font-family:var(--font-body);transition:all .2s}
.quick-q:hover{border-color:var(--gold-dim);color:var(--gold)}
.ai-textarea-wrap{position:relative}
.ai-textarea-wrap textarea{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.6rem 0.8rem;color:var(--text-primary);font-family:var(--font-body);font-size:0.85rem;resize:vertical;min-height:50px}
.ai-textarea-wrap textarea:focus{outline:none;border-color:var(--gold-dim)}
.ai-textarea-wrap textarea::placeholder{color:var(--text-dim)}
.char-count{position:absolute;bottom:0.4rem;right:0.6rem;font-size:0.65rem;color:var(--text-dim)}
.ai-status{text-align:center}
.btn-ai{width:100%;padding:0.8rem;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-body);font-size:0.95rem;font-weight:600;cursor:pointer;transition:all .3s}
.btn-ai:hover{background:var(--bg-card-hover);border-color:var(--gold-dim)}
.btn-ai:disabled{opacity:0.5;cursor:not-allowed}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,0.2);border-top-color:var(--purple);border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:0.3rem}
.ai-disabled-msg{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.8rem;font-size:0.82rem;color:var(--text-dim);text-align:center}

/* AI RESULT */
.ai-result{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1rem}
.ai-result-header{display:flex;gap:0.6rem;align-items:center;margin-bottom:1rem;padding-bottom:0.8rem;border-bottom:1px solid var(--border)}
.ai-result-header span{font-size:1.3rem;opacity:0.7}
.ai-result-header strong{font-size:0.95rem;color:var(--gold)}
.ai-result-body{line-height:1.85;font-size:0.92rem}
.ai-result-body h2{font-family:var(--font-display);font-size:1.25rem;color:var(--gold-light);margin:1.8rem 0 0.6rem;padding-bottom:0.4rem;border-bottom:1px solid var(--border)}
.ai-result-body h2:first-child{margin-top:0}
.ai-result-body h3{font-size:1rem;color:var(--gold);margin:1.2rem 0 0.4rem}
.ai-result-body p{margin-bottom:0.7rem;color:var(--text-primary)}
.ai-result-body ul,.ai-result-body ol{margin:0.4rem 0 0.8rem 1.3rem;color:var(--text-secondary)}
.ai-result-body li{margin-bottom:0.3rem}
.ai-result-body strong{color:var(--gold-light)}
.ai-result-body em{color:var(--purple)}
.ai-cursor{display:inline-block;width:2px;height:1em;background:var(--purple);animation:blink .7s step-end infinite;vertical-align:text-bottom;margin-left:2px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* BUTTONS */
.btn-back-top{padding:0.7rem 1.5rem;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--gold-light);font-family:var(--font-body);font-size:0.9rem;cursor:pointer;transition:all .2s}
.btn-back-top:hover{background:var(--bg-card-hover)}

/* FOOTER */
.site-footer{background:var(--bg-surface);border-top:1px solid var(--border);padding:1.5rem 0;text-align:center;color:var(--text-dim);font-size:0.8rem}
.footer-note{margin-top:0.2rem;font-size:0.72rem}

/* RESPONSIVE */
@media(max-width:768px){
  .hero{padding:1rem}
  .mandala-wrapper{width:140px;height:140px}
  .input-card{padding:1.2rem 1rem}
  .form-row-3{grid-template-columns:1fr 1fr 1fr;gap:0.5rem}
  .overview-grid{grid-template-columns:1fr 1fr 1fr}
  .overview-cell{padding:0.6rem 0.4rem}
  .ov-value{font-size:1rem}
  .palace-cell{min-height:95px;padding:0.35rem}
  .palace-name{font-size:0.7rem}
  .star-major{font-size:0.7rem}
  .star-minor{font-size:0.65rem}
  .star-adjective{font-size:0.55rem}
  .palace-center{padding:0.6rem}
  .center-title{font-size:1rem}
  .center-grid{font-size:0.68rem}
  .compat-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .palace-cell{min-height:80px;padding:0.25rem}
  .palace-name{font-size:0.62rem}
  .star-major{font-size:0.62rem}
  .star-minor{font-size:0.58rem}
  .star-adjective{display:none}
  .palace-footer{display:none}
  .palace-branch{font-size:0.58rem}
  .overview-cell .ov-label{font-size:0.58rem}
  .overview-cell .ov-value{font-size:0.88rem}
  .center-grid{font-size:0.62rem;gap:0.15rem 0.5rem}
  .topic-tag{font-size:0.7rem;padding:0.25rem 0.55rem}
}