/* ═══════════════════════════════════════════
   玄机 — Premium Dark Cosmic UI
   Chinese metaphysics divination web app
   ═══════════════════════════════════════════ */

/* === Reset & Variables === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-deep: #05080f;
    --bg-space: #0a0f1a;
    --surface: rgba(14, 17, 28, 0.55);
    --surface-hover: rgba(18, 22, 34, 0.72);
    --surface-raised: rgba(20, 24, 38, 0.65);
    --text: #e8e4dc;
    --text-secondary: #9a9588;
    --text-muted: #5b5650;
    --gold: #d4a843;
    --gold-light: #ecd472;
    --gold-dim: #a08030;
    --ming: #a78bfa;
    --ming-dim: #7c5ce7;
    --bu: #fb923c;
    --bu-dim: #ea6f1a;
    --shi: #60a5fa;
    --shi-dim: #3385e0;
    --good: #4ade80;
    --bad: #f87171;
    --warn: #fbbf24;
    --border: rgba(255, 255, 255, 0.05);
    --border-med: rgba(255, 255, 255, 0.08);
    --border-active: rgba(212, 168, 67, 0.25);
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --font-display: "Noto Serif SC", "SimSun", "宋体", serif;
    --font-body: system-ui, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    background: var(--bg-deep);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.75;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ═══════════════════════════════════════════
   STARFIELD BACKGROUND (3 layers)
   ═══════════════════════════════════════════ */

/* Nebula glows — large soft color washes */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(100, 70, 180, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 50% 50% at 85% 70%, rgba(180, 140, 60, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 45% 45% at 15% 60%, rgba(60, 110, 210, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 60% 100%, rgba(140, 70, 50, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse 30% 30% at 30% 35%, rgba(100, 80, 160, 0.05) 0%, transparent 45%);
    pointer-events: none;
    z-index: 0;
}

/* Star layer 1 — tiny dense stars (fast drift) */
.starfield {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
}
.starfield .stars-1 {
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        5vw 8vh rgba(255,255,255,0.7),    18vw 22vh rgba(255,255,255,0.5),
        32vw 5vh rgba(255,255,255,0.55),   45vw 18vh rgba(255,255,255,0.6),
        58vw 32vh rgba(255,255,255,0.45),  72vw 12vh rgba(255,255,255,0.65),
        85vw 28vh rgba(255,255,255,0.5),   95vw 45vh rgba(255,255,255,0.4),
        8vw 55vh rgba(255,255,255,0.55),   22vw 68vh rgba(255,255,255,0.45),
        38vw 48vh rgba(255,255,255,0.6),   52vw 72vh rgba(255,255,255,0.5),
        66vw 58vh rgba(255,255,255,0.4),   78vw 82vh rgba(255,255,255,0.55),
        90vw 65vh rgba(255,255,255,0.45),  12vw 85vh rgba(255,255,255,0.5),
        28vw 38vh rgba(255,255,255,0.35),  42vw 92vh rgba(255,255,255,0.6),
        55vw 15vh rgba(255,255,255,0.7),   68vw 42vh rgba(255,255,255,0.4),
        82vw 8vh rgba(255,255,255,0.55),   3vw 32vh rgba(255,255,255,0.5),
        15vw 75vh rgba(255,255,255,0.45),  35vw 28vh rgba(255,255,255,0.65),
        48vw 62vh rgba(255,255,255,0.4),   62vw 22vh rgba(255,255,255,0.5),
        75vw 52vh rgba(255,255,255,0.55),  88vw 38vh rgba(255,255,255,0.35),
        20vw 92vh rgba(255,255,255,0.5),   40vw 78vh rgba(255,255,255,0.45),
        92vw 88vh rgba(255,255,255,0.6),   65vw 92vh rgba(255,255,255,0.4),
        30vw 12vh rgba(255,255,255,0.5),   80vw 68vh rgba(255,255,255,0.55),
        10vw 42vh rgba(255,255,255,0.4),   50vw 88vh rgba(255,255,255,0.6),
        70vw 35vh rgba(255,255,255,0.45),  25vw 58vh rgba(255,255,255,0.5),
        55vw 28vh rgba(255,255,255,0.7),   95vw 18vh rgba(255,255,255,0.5);
    animation: starDrift 90s linear infinite;
}

/* Star layer 2 — medium stars (slower, slightly larger) */
.starfield .stars-2 {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        8vw 12vh rgba(200,210,255,0.55),   28vw 35vh rgba(220,200,180,0.45),
        48vw 8vh rgba(255,240,220,0.5),    68vw 28vh rgba(200,210,255,0.4),
        88vw 18vh rgba(220,200,180,0.5),   18vw 55vh rgba(255,240,220,0.45),
        38vw 72vh rgba(200,210,255,0.55),  58vw 48vh rgba(220,200,180,0.4),
        78vw 65vh rgba(255,240,220,0.5),   95vw 55vh rgba(200,210,255,0.45),
        15vw 80vh rgba(220,200,180,0.55),  45vw 90vh rgba(255,240,220,0.4),
        75vw 85vh rgba(200,210,255,0.5),   5vw 28vh rgba(220,200,180,0.5),
        35vw 18vh rgba(255,240,220,0.55),  62vw 78vh rgba(200,210,255,0.45),
        85vw 45vh rgba(220,200,180,0.5),   22vw 42vh rgba(255,240,220,0.4),
        52vw 22vh rgba(200,210,255,0.5),   92vw 38vh rgba(220,200,180,0.55);
    animation: starDrift 140s linear infinite reverse;
}

/* Star layer 3 — large glow spots (very slow) */
.starfield .stars-3 {
    position: absolute;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        12vw 15vh 0 2px rgba(180,160,255,0.15),
        42vw 25vh 0 1px rgba(255,220,160,0.12),
        72vw 10vh 0 2px rgba(160,200,255,0.15),
        25vw 65vh 0 2px rgba(255,180,140,0.12),
        55vw 70vh 0 1px rgba(180,160,255,0.15),
        85vw 50vh 0 2px rgba(255,220,160,0.12),
        18vw 88vh 0 1px rgba(160,200,255,0.15),
        65vw 88vh 0 2px rgba(255,180,140,0.12),
        92vw 75vh 0 1px rgba(180,160,255,0.15),
        8vw 48vh 0 2px rgba(255,220,160,0.12),
        38vw 45vh 0 1px rgba(160,200,255,0.15),
        78vw 32vh 0 2px rgba(255,180,140,0.12);
    animation: starDrift 200s linear infinite;
}

@keyframes starDrift {
    from { transform: translateY(0) rotate(0deg); }
    to { transform: translateY(-5%) rotate(1deg); }
}

/* Mountains silhouette — ink wash style */
.mountains {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    height: 30vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.045;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,224 L60,192 L120,160 L200,200 L280,128 L360,176 L440,96 L520,144 L600,80 L680,128 L760,64 L840,112 L920,56 L1000,96 L1080,48 L1160,88 L1240,40 L1320,80 L1400,32 L1440,64 L1440,320 L0,320 Z'/%3E%3Cpath fill='%23ffffff' opacity='0.4' d='M0,256 L80,224 L160,208 L240,232 L320,192 L400,216 L480,168 L560,200 L640,144 L720,176 L800,136 L880,168 L960,120 L1040,152 L1120,112 L1200,144 L1280,104 L1360,128 L1440,88 L1440,320 L0,320 Z'/%3E%3C/svg%3E") repeat-x bottom;
    background-size: 100% 100%;
}

/* ═══════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════ */
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 3rem;
    position: relative;
    z-index: 1;
}

/* ═══════════════════════════════════════════
   HEADER & FOOTER
   ═══════════════════════════════════════════ */
.site-header {
    text-align: center;
    padding: 3rem 0 2rem;
    position: relative;
}
.site-header::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    margin: 1.8rem auto 0;
    background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

.site-title {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 900;
    background: linear-gradient(180deg, #ecd472 0%, #d4a843 30%, #b89030 65%, #a08030 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
    letter-spacing: 0.5em;
    transition: filter 0.5s;
    filter: drop-shadow(0 2px 12px rgba(200, 160, 60, 0.25));
}
.site-title:hover { filter: drop-shadow(0 2px 20px rgba(220, 180, 80, 0.4)); }

.site-subtitle {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
}

.site-footer {
    text-align: center;
    padding: 2.5rem 0 1.5rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    position: relative;
}
.site-footer::before {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(90deg, transparent, rgba(180,160,120,0.3), transparent);
}
.site-footer .stamp {
    display: inline-block;
    width: 48px; height: 48px;
    line-height: 48px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 900;
    color: rgba(200, 165, 65, 0.25);
    border: 1.5px solid rgba(200, 165, 65, 0.15);
    border-radius: 50%;
    margin-bottom: 0.75rem;
    letter-spacing: 0;
    user-select: none;
}

/* ═══════════════════════════════════════════
   HOMEPAGE — FORM
   ═══════════════════════════════════════════ */
.divine-form-wrapper {
    max-width: 640px;
    margin: 0 auto;
}

.form-title {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--text);
    letter-spacing: 0.1em;
}
.form-desc {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 2.25rem;
}

.form-error {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.2);
    color: #fca5a5;
    padding: 0.7rem 1.2rem;
    border-radius: var(--radius);
    margin-bottom: 1.75rem;
    font-size: 0.88rem;
    text-align: center;
}

/* ═══════════════════════════════════════════
   EQUILATERAL TRIANGLE TIER SELECTOR
   Three cards at 120° angles, equal distance from center
   ═══════════════════════════════════════════ */
.tier-selector {
    margin-bottom: 2.25rem;
    display: flex;
    justify-content: center;
}

.triad-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1;
    margin: 0 auto;
}

/* SVG fills the container */
.triad-container > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Tier cards — square, uniform size, positioned at vertices */
.tier-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 170px;
    height: 170px;
    padding: 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    background: var(--surface);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    position: absolute;
    transform: translate(-50%, -50%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    overflow: visible;
}

/* 命 — top vertex at SVG (150, 40): top=13.3%, left=50% */
#card-ming { top: 13.33%; left: 50%; }

/* 卜 — bottom-left vertex at SVG (54.7, 205): top=68.3%, left=18.2% */
#card-bu { top: 68.33%; left: 18.23%; }

/* 式 — bottom-right vertex at SVG (245.3, 205): top=68.3%, left=81.8% */
#card-shi { top: 68.33%; left: 81.77%; }
.tier-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: calc(var(--radius-xl) + 3px);
    padding: 2px;
    background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
}
.tier-card:hover { transform: translate(-50%, calc(-50% - 4px)); }
.tier-card:hover::before { opacity: 1; }

.tier-card input[type="radio"] { display: none; }

.tier-card .tier-char {
    font-family: var(--font-display);
    font-size: 3.6rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    transition: all 0.4s;
}

.tier-card .tier-tag {
    font-size: 0.68rem;
    font-weight: 500;
    margin-top: 0.35rem;
    opacity: 0.45;
    transition: opacity 0.4s;
    letter-spacing: 0.06em;
}
.tier-card .tier-desc {
    font-size: 0.62rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    opacity: 0.4;
    transition: opacity 0.4s;
    text-align: center;
    line-height: 1.5;
    max-width: 85%;
}
.tier-card:hover .tier-desc { opacity: 0.7; }
.tier-card.active .tier-desc { opacity: 0.75; }

.tier-card .tier-systems {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    opacity: 0.35;
    transition: opacity 0.4s;
}

/* Ming (命) — Purple cosmic */
.tier-card.tier-ming {
    border-color: rgba(167, 139, 250, 0.2);
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.07) 0%, var(--surface) 45%);
}
.tier-card.tier-ming .tier-char { color: #b9a0fc; }
.tier-card.tier-ming .tier-tag { color: rgba(167, 139, 250, 0.7); }
.tier-card.tier-ming::after {
    content: ''; position: absolute; inset: -8px; border-radius: 34px;
    border: 1.5px solid transparent;
    border-top-color: rgba(167, 139, 250, 0.15);
    border-bottom-color: rgba(167, 139, 250, 0.08);
    opacity: 0.5; transition: all 0.4s; pointer-events: none;
}
.tier-card.tier-ming:hover::after { opacity: 1; border-top-color: rgba(167, 139, 250, 0.3); }

/* Bu (卜) — Fire orange */
.tier-card.tier-bu {
    border-color: rgba(251, 146, 60, 0.2);
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.07) 0%, var(--surface) 45%);
}
.tier-card.tier-bu .tier-char { color: #fca870; }
.tier-card.tier-bu .tier-tag { color: rgba(251, 146, 60, 0.7); }
.tier-card.tier-bu::after {
    content: ''; position: absolute; inset: -8px; border-radius: 34px;
    border: 1.5px solid transparent;
    border-top-color: rgba(251, 146, 60, 0.15);
    border-bottom-color: rgba(251, 146, 60, 0.08);
    opacity: 0.5; transition: all 0.4s; pointer-events: none;
}
.tier-card.tier-bu:hover::after { opacity: 1; border-top-color: rgba(251, 146, 60, 0.3); }

/* Shi (式) — Azure blue */
.tier-card.tier-shi {
    border-color: rgba(96, 165, 250, 0.2);
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.07) 0%, var(--surface) 45%);
}
.tier-card.tier-shi .tier-char { color: #82bdfa; }
.tier-card.tier-shi .tier-tag { color: rgba(96, 165, 250, 0.7); }
.tier-card.tier-shi::after {
    content: ''; position: absolute; inset: -8px; border-radius: 34px;
    border: 1.5px solid transparent;
    border-top-color: rgba(96, 165, 250, 0.15);
    border-bottom-color: rgba(96, 165, 250, 0.08);
    opacity: 0.5; transition: all 0.4s; pointer-events: none;
}
.tier-card.tier-shi:hover::after { opacity: 1; border-top-color: rgba(96, 165, 250, 0.3); }

/* Active states */
.tier-card.active {
    transform: translate(-50%, calc(-50% - 6px)) scale(1.04);
    border-color: var(--border-active);
    background: var(--surface-raised);
}
.tier-card.active::before { opacity: 1; }
.tier-card.active .tier-tag { opacity: 0.8; }

.tier-card.tier-ming.active {
    border-color: rgba(167, 139, 250, 0.4);
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.12), 0 0 80px rgba(139, 92, 246, 0.05);
}
.tier-card.tier-ming.active::after {
    opacity: 1;
    border-top-color: rgba(167, 139, 250, 0.5);
    border-bottom-color: rgba(167, 139, 250, 0.2);
    animation: orbitPulseMing 3s ease-in-out infinite;
}

.tier-card.tier-bu.active {
    border-color: rgba(251, 146, 60, 0.4);
    box-shadow: 0 0 40px rgba(249, 115, 22, 0.1), 0 0 80px rgba(249, 115, 22, 0.04);
}
.tier-card.tier-bu.active::after {
    opacity: 1;
    border-top-color: rgba(251, 146, 60, 0.5);
    border-bottom-color: rgba(251, 146, 60, 0.2);
    animation: orbitPulseBu 3s ease-in-out infinite;
}

.tier-card.tier-shi.active {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.1), 0 0 80px rgba(59, 130, 246, 0.04);
}
.tier-card.tier-shi.active::after {
    opacity: 1;
    border-top-color: rgba(96, 165, 250, 0.5);
    border-bottom-color: rgba(96, 165, 250, 0.2);
    animation: orbitPulseShi 3s ease-in-out infinite;
}

@keyframes orbitPulseMing {
    0%, 100% { border-top-color: rgba(167, 139, 250, 0.45); }
    50% { border-top-color: rgba(167, 139, 250, 0.8); }
}
@keyframes orbitPulseBu {
    0%, 100% { border-top-color: rgba(251, 146, 60, 0.45); }
    50% { border-top-color: rgba(251, 146, 60, 0.8); }
}
@keyframes orbitPulseShi {
    0%, 100% { border-top-color: rgba(96, 165, 250, 0.45); }
    50% { border-top-color: rgba(96, 165, 250, 0.8); }
}

/* ── Y-shape SVG Connector ── */
.triad-container svg {
    filter: drop-shadow(0 0 4px rgba(200, 165, 65, 0.15));
}
.triad-container svg line {
    stroke: rgba(180, 155, 110, 0.3);
    stroke-width: 1.2;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 1.4s ease-out forwards;
    transition: stroke 0.5s;
}
.triad-container svg line:nth-child(1) { animation-delay: 0.1s; }
.triad-container svg line:nth-child(2) { animation-delay: 0.3s; }
.triad-container svg line:nth-child(3) { animation-delay: 0.5s; }

@keyframes drawLine { to { stroke-dashoffset: 0; } }

.triad-container svg circle {
    fill: rgba(5, 8, 15, 0.95);
    stroke: rgba(200, 165, 65, 0.4);
    stroke-width: 1.4;
    transition: all 0.5s;
}
.triad-container svg text {
    fill: #c9a040;
    font-family: var(--font-display);
    font-size: 11px;
    transition: fill 0.5s;
}

/* Glow center when any card is active */
.tier-selector:has(.tier-card.active) .triad-container svg circle {
    stroke: rgba(220, 185, 80, 0.7);
    filter: drop-shadow(0 0 8px rgba(200, 165, 65, 0.5));
}
.tier-selector:has(.tier-card.active) .triad-container svg text { fill: #ecd472; }

/* ═══════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════ */
.form-group { margin-bottom: 1.25rem; }

/* Underline-style textarea */
.form-group textarea {
    width: 100%;
    padding: 0.9rem 0;
    border: none;
    border-bottom: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;
    resize: vertical;
    transition: all 0.35s;
    outline: none;
}
.form-group textarea::placeholder { color: var(--text-muted); }
.form-group textarea:focus {
    border-bottom-color: var(--gold-dim);
    box-shadow: 0 1px 0 0 rgba(200, 165, 65, 0.15);
}

/* Birth section */
.birth-section {
    margin-bottom: 1.5rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.4s;
}

.birth-section.required-tier {
    border-color: rgba(167, 139, 250, 0.3);
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.08);
    background: rgba(139, 92, 246, 0.03);
}

.birth-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.7rem;
    letter-spacing: 0.04em;
}
.birth-label .hint { font-size: 0.7rem; color: var(--text-muted); }
.birth-section.required-tier .birth-label { color: #b9a0fc; }

/* Pill selects */
.form-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.6rem;
}
.form-row label {
    font-size: 0.76rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.birth-fields select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 100px;
    background: rgba(10, 13, 22, 0.6);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.82rem;
    outline: none;
    cursor: pointer;
    transition: all 0.25s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b5650' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    min-width: 70px;
}
.birth-fields select:hover { border-color: var(--border-med); }
.birth-fields select:focus { border-color: rgba(200,165,65,0.3); box-shadow: 0 0 0 2px rgba(200,165,65,0.05); }

/* Gender toggle */
.gender-row { gap: 1.5rem; }
.gender-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 100px;
    overflow: hidden;
}
.gender-toggle input { display: none; }
.gender-toggle label {
    padding: 0.4rem 1.25rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.25s;
    background: transparent;
    border-radius: 0;
}
.gender-toggle label:first-of-type { border-radius: 100px 0 0 100px; }
.gender-toggle label:last-of-type  { border-radius: 0 100px 100px 0; }
.gender-toggle input:checked + label {
    background: rgba(200,165,65,0.12);
    color: var(--gold-light);
}

/* Submit button */
.btn-submit {
    display: block;
    width: 100%;
    padding: 0.9rem;
    border: none;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #c9a040 0%, #b08028 100%);
    color: #0a0c12;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(180, 140, 50, 0.15);
}
.btn-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.55s;
}
.btn-submit:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 40px rgba(200, 160, 50, 0.3), 0 0 60px rgba(200, 150, 50, 0.08);
}
.btn-submit:hover::before { transform: translateX(100%); }
.btn-submit:active { transform: translateY(-1px) scale(0.99); }

/* ═══════════════════════════════════════════
   RESULT PAGE — Bento Grid
   ═══════════════════════════════════════════ */
.result-wrapper { max-width: 900px; margin: 0 auto; }

/* Bento grid container */
.bento-grid {
    display: grid;
    grid-template-columns: minmax(360px, 3fr) minmax(240px, 2fr);
    grid-template-rows: auto;
    gap: 1rem;
    grid-template-areas:
        "meta   meta"
        "synth  engines";
}

/* Meta bar — full width */
.proto-meta {
    grid-area: meta;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.5rem;
    background: var(--surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.proto-meta .section-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.proto-meta .section-label .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
    display: inline-block;
}
.proto-meta-grid {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
}
.meta-key {
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.meta-value { color: var(--text); font-weight: 500; }
.meta-divider {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--border-active);
    margin: 0 0.25rem;
}

.tier-badge-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.7rem;
    border-radius: 100px;
    font-size: 0.76rem;
    font-weight: 600;
}
.tier-badge-sm.tier-命 { background: rgba(139,92,246,0.12); color: #b9a0fc; }
.tier-badge-sm.tier-卜 { background: rgba(249,115,22,0.12); color: #fca870; }
.tier-badge-sm.tier-式 { background: rgba(59,130,246,0.12); color: #82bdfa; }

/* Synthesis card — left side, larger */
.proto-synthesis {
    grid-area: synth;
    border: 1px solid rgba(200, 165, 65, 0.2);
    border-radius: var(--radius-lg);
    background: var(--surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow: hidden;
}
.proto-synthesis .section-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 1rem 1.3rem 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.proto-synthesis .section-label .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold-light);
    display: inline-block;
}

/* AI reading card inside synthesis */
.ai-reading {
    padding: 0.5rem;
}
.ai-reading-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    margin-bottom: 0.5rem;
}
.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.8rem;
    border-radius: 100px;
    font-size: 0.74rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(200,165,65,0.2), rgba(180,140,50,0.1));
    border: 1px solid rgba(200,165,65,0.25);
    color: var(--gold-light);
}
.ai-powered { font-size: 0.7rem; color: var(--text-muted); }
.ai-reading-content {
    padding: 0.3rem 1rem 0.8rem;
    font-size: 0.88rem;
    line-height: 1.85;
    color: var(--text);
}
.ai-reading-content h2 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--gold-light);
    margin: 1rem 0 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px dotted rgba(180,160,120,0.15);
}
.ai-reading-content h2:first-child { margin-top: 0; }
.ai-reading-content h3 {
    font-size: 0.92rem;
    color: var(--text);
    margin: 0.6rem 0 0.3rem;
}
.ai-reading-content p { margin-bottom: 0.4rem; }
.ai-reading-content ul, .ai-reading-content ol { margin: 0.3rem 0 0.5rem 1.4rem; }
.ai-reading-content li { margin-bottom: 0.2rem; }
.ai-reading-content strong { color: var(--gold-light); font-weight: 600; }
.ai-reading-content blockquote {
    border-left: 2px solid rgba(200,165,65,0.3);
    padding: 0.3rem 0.8rem;
    margin: 0.5rem 0;
    color: var(--text-secondary);
    background: rgba(200,165,65,0.03);
    border-radius: 0 6px 6px 0;
    font-style: italic;
    font-size: 0.85rem;
}

/* Engines column — right side */
.proto-engines {
    grid-area: engines;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.proto-engines .section-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-left: 0.25rem;
}
.proto-engines .section-label .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    display: inline-block;
}

/* Engine card */
.engine-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
    background: var(--surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.3s;
}
.engine-card:hover { border-color: var(--border-med); }
.engine-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.engine-label {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}
.engine-analysis {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-secondary);
    padding: 0.25rem 0;
    margin-bottom: 0.3rem;
}
.engine-error { border-color: rgba(248,113,113,0.2); background: rgba(248,113,113,0.02); }
.engine-error-msg { color: #fca5a5; font-size: 0.82rem; padding: 0.3rem 0; }
.engine-card .comp-text {
    font-size: 0.73rem;
    max-height: 220px;
    overflow-y: auto;
    background: rgba(0,0,0,0.25);
    padding: 0.55rem 0.7rem;
    border-radius: 6px;
    margin: 0.3rem 0;
    color: var(--text-muted);
    font-family: "SF Mono", "Consolas", "Menlo", monospace;
    line-height: 1.55;
}
.engine-card .sys-visual { margin-top: 0.5rem; }

.comp-question {
    font-size: 0.85rem;
    color: var(--gold-dim);
    margin-bottom: 0.4rem;
    font-weight: 600;
}

/* Verdict badge */
.verdict-badge {
    display: inline-block;
    padding: 0.25rem 1rem;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.verdict-badge.verdict-吉 { background: rgba(74,222,128,0.1); color: var(--good); border: 1px solid rgba(74,222,128,0.15); }
.verdict-badge.verdict-凶 { background: rgba(248,113,113,0.1); color: var(--bad); border: 1px solid rgba(248,113,113,0.15); }
.verdict-badge.verdict-平 { background: rgba(251,191,36,0.1); color: var(--warn); border: 1px solid rgba(251,191,36,0.15); }

/* Result actions */
.result-actions {
    text-align: center;
    margin-top: 2rem;
}
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 2.5rem;
    border: 1px solid var(--border-active);
    border-radius: 100px;
    color: var(--gold-dim);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    background: var(--surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.35s;
}
.btn-back:hover {
    background: rgba(200,165,65,0.08);
    border-color: rgba(200,165,65,0.5);
    box-shadow: 0 4px 24px rgba(200,165,65,0.12);
    transform: translateY(-2px);
}

/* LLM error */
.llm-error {
    padding: 1rem 1.25rem;
    border: 1px solid rgba(248,113,113,0.15);
    border-radius: var(--radius);
    background: rgba(248,113,113,0.03);
    color: #fca5a5;
    font-size: 0.85rem;
    margin: 0.5rem 0;
}
.llm-error h3 { font-size: 0.9rem; margin-bottom: 0.3rem; }

/* ═══════════════════════════════════════════
   SYSTEM-SPECIFIC VISUALS
   ═══════════════════════════════════════════ */

/* Common tags */
.tag {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    margin: 0.1rem 0.2rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 500;
}
.tag.good { background: rgba(74,222,128,0.08); color: var(--good); }
.tag.bad  { background: rgba(248,113,113,0.08); color: var(--bad); }
.tag.warn { background: rgba(251,191,36,0.08); color: var(--warn); }

/* Info cards (used across partials) */
.info-card {
    background: rgba(0,0,0,0.15);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.9rem;
    margin: 0.4rem 0;
}
.info-card h3 {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.info-card p { font-size: 0.82rem; line-height: 1.65; }
.info-card.primary h3 { color: var(--gold-dim); }

.info-cards {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.4rem 0;
}
.info-cards .info-card { flex: 1; min-width: 120px; }

/* ── Ziwei: Palace Grid ── */
.pan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
    margin: 0.5rem 0;
}
.pan-palace {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 0.35rem;
    text-align: center;
    font-size: 0.7rem;
    background: rgba(0,0,0,0.2);
    transition: border-color 0.25s;
}
.pan-palace:hover { border-color: var(--border-med); }
.pan-palace .palace-name {
    font-weight: 700;
    color: var(--gold-dim);
    font-size: 0.72rem;
    margin-bottom: 0.15rem;
    line-height: 1.3;
}
.pan-palace .palace-name small { color: var(--text-muted); font-weight: 400; }
.pan-palace .palace-stars { margin: 0.2rem 0; line-height: 1.5; }
.pan-palace .palace-stars .star-ji { color: var(--good); }
.pan-palace .palace-stars .star-xiong { color: var(--bad); }
.pan-palace .palace-stars .star-mixed { color: var(--warn); }
.pan-palace .palace-stars .star-neutral { color: var(--text-secondary); }
.sihua { font-size: 0.66rem; color: var(--accent, var(--gold-dim)); margin-top: 0.1rem; }
.palace-daxian { font-size: 0.62rem; color: var(--text-muted); margin-top: 0.15rem; }

/* ── Ziping: Pillar cards ── */
.four-pillars h3 { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.4rem; }
.pillar-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.4rem 0;
}
.pillar {
    flex: 1;
    min-width: 80px;
    text-align: center;
    padding: 0.55rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,0.15);
    transition: all 0.25s;
}
.pillar:hover { border-color: var(--border-med); }
.pillar.highlight { border-color: rgba(200,165,65,0.3); background: rgba(200,165,65,0.04); }
.pillar .pillar-label { font-size: 0.65rem; color: var(--text-muted); margin-bottom: 0.1rem; }
.pillar .pillar-ganzhi { font-size: 1.15rem; font-weight: 700; color: var(--text); font-family: var(--font-display); }
.pillar .pillar-shishen { font-size: 0.65rem; color: var(--text-muted); margin-top: 0.1rem; }
.interpretation { margin-top: 0.4rem; }
.interpretation h3 { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.3rem; }
.interpretation p { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 0.15rem; }

/* ── Meihua & Bushi: Hexagram display ── */
.hexagram-display {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0.5rem 0;
}
.hex-card {
    text-align: center;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(14,17,28,0.5);
    min-width: 85px;
    transition: all 0.3s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hex-card:hover { border-color: var(--border-med); transform: translateY(-2px); }
.hex-card.primary { border-color: rgba(200,165,65,0.25); }
.hex-label { font-size: 0.64rem; color: var(--text-muted); margin-bottom: 0.15rem; text-transform: uppercase; letter-spacing: 0.06em; }
.hex-symbol { font-size: 1.8rem; margin: 0.25rem 0; line-height: 1.2; }
.hex-name { font-size: 0.85rem; font-weight: 700; color: var(--text); font-family: var(--font-display); }

/* Tiyong analysis */
.tiyong-section h3 { font-size: 0.78rem; color: var(--text-secondary); margin: 0.5rem 0 0.3rem; }
.tiyong-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.tiyong-item {
    flex: 1; min-width: 90px;
    text-align: center;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,0.15);
    border: 1px solid var(--border);
}
.tiyong-item .label { font-size: 0.66rem; color: var(--text-muted); }
.tiyong-item .value { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.tiyong-item .value.sheng { color: var(--good); }
.tiyong-item .value.ke { color: var(--bad); }

/* ── Bushi: Yao table ── */
.yao-list h3 { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.3rem; }
.yao-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    margin: 0.3rem 0;
}
.yao-table th {
    padding: 0.35rem 0.4rem;
    text-align: center;
    border-bottom: 1px solid var(--border-med);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.yao-table td {
    padding: 0.35rem 0.4rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}
.yao-table tr.changing td { color: var(--gold-dim); }
.yao-table tr.shi-yao td { background: rgba(200,165,65,0.04); }
.yao-table tr.ying-yao td { background: rgba(200,165,65,0.02); }

/* ── Liuren: Sipan tables ── */
.sipan-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
    margin: 0.3rem 0;
}
.sipan-table th {
    padding: 0.4rem 0.5rem;
    text-align: center;
    background: rgba(200,165,65,0.04);
    border-bottom: 1px solid var(--border-med);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.72rem;
}
.sipan-table td {
    padding: 0.45rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

/* ── Qimen: Palace grid ── */
.qimen-grid h3 { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.4rem; }
.palace-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
    margin: 0.4rem 0;
}
.palace-cell {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.3rem;
    text-align: center;
    font-size: 0.7rem;
    background: rgba(0,0,0,0.2);
    line-height: 1.5;
}
.palace-cell .palace-name { font-weight: 700; color: var(--gold-dim); font-size: 0.72rem; margin-bottom: 0.1rem; }
.palace-cell .palace-dipan { color: var(--text-secondary); }
.palace-cell .palace-xing { color: #82bdfa; }
.palace-cell .palace-men { color: var(--good); }
.palace-cell .palace-shen { color: var(--warn); }

/* ═══════════════════════════════════════════
   CHINESE DECORATIVE ELEMENTS
   ═══════════════════════════════════════════ */

/* Section divider — gold line with dot ends */
.section-rule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
    opacity: 0.3;
}
.section-rule::before, .section-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(180,160,120,0.4), transparent);
}
.section-rule .dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(180,160,120,0.5);
}

/* Trigram watermark for empty states */
.trigram-watermark {
    position: fixed;
    font-size: 12rem;
    color: rgba(255,255,255,0.008);
    pointer-events: none;
    z-index: 0;
    user-select: none;
    font-family: var(--font-display);
}

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */

/* Staggered fade-up */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bento-grid > * {
    animation: fadeUp 0.5s ease-out backwards;
}
.bento-grid > *:nth-child(1) { animation-delay: 0s; }
.bento-grid > *:nth-child(2) { animation-delay: 0.08s; }
.bento-grid > *:nth-child(3) { animation-delay: 0.16s; }

.divine-form-wrapper > * {
    animation: fadeUp 0.5s ease-out backwards;
}
.divine-form-wrapper > *:nth-child(1) { animation-delay: 0s; }
.divine-form-wrapper > *:nth-child(2) { animation-delay: 0.05s; }
.divine-form-wrapper > *:nth-child(3) { animation-delay: 0.1s; }
.divine-form-wrapper > *:nth-child(4) { animation-delay: 0.15s; }
.divine-form-wrapper > *:nth-child(5) { animation-delay: 0.2s; }
.divine-form-wrapper > *:nth-child(6) { animation-delay: 0.25s; }

/* Result action fade in later */
.result-actions {
    animation: fadeUp 0.5s ease-out backwards;
    animation-delay: 0.35s;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(180,160,120,0.2);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(180,160,120,0.35); }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(180,160,120,0.2) transparent; }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "meta"
            "synth"
            "engines";
    }
    .proto-meta-grid { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
    .meta-divider { display: none; }
    .pan-grid { grid-template-columns: repeat(3, 1fr); }
    .palace-grid { grid-template-columns: repeat(3, 1fr); }
    .hexagram-display { flex-direction: column; align-items: center; }
    .pillar-row { flex-direction: column; }
}

@media (max-width: 640px) {
    .container { padding: 0.75rem 1rem 2rem; }
    .site-header { padding: 2rem 0 1.5rem; }
    .site-title { font-size: 2rem; letter-spacing: 0.3em; }
    .site-subtitle { font-size: 0.72rem; }
    .form-title { font-size: 1.3rem; }

    /* Triangle → vertical stack on mobile */
    .triad-container {
        aspect-ratio: auto;
        height: auto;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        padding: 0;
    }
    .triad-container > svg { display: none; }
    .tier-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 140px !important;
        height: 140px !important;
        padding: 0.6rem;
        margin: 0 auto;
    }
    .tier-card:hover { transform: translateY(-3px) !important; }
    .tier-card.active { transform: translateY(-4px) scale(1.03) !important; }
    .tier-card .tier-char { font-size: 2.6rem; }

    .pan-grid { grid-template-columns: repeat(2, 1fr); }
    .palace-grid { grid-template-columns: repeat(2, 1fr); }
    .info-cards { flex-direction: column; }
    .tiyong-row { flex-direction: column; }
}