:root { --text:#2d241a; --muted:#786754; --accent:#a34225; --line:#ddcdb5; --panel:rgba(255,250,243,.97); }
        * { box-sizing:border-box; }
        body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 12% 8%,rgba(211,161,79,.18),transparent 28%),linear-gradient(135deg,#f8f2e8,#efe3d0); font-family:Georgia,'Times New Roman',serif; }
        .page { width:min(1220px,calc(100% - 32px)); margin:auto; padding:34px 0 48px; }
        .eyebrow { color:var(--accent); font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
        h1 { margin:8px 0; font-size:clamp(2rem,4vw,3.3rem); line-height:1; }
        h2 { margin:0; font-size:1.45rem; }
        .subtitle { max-width:850px; color:var(--muted); line-height:1.6; }
        .nav { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
        .nav a, button { border:1px solid rgba(163,66,37,.3); border-radius:999px; padding:9px 14px; color:var(--accent); background:#fffaf3; font:600 .85rem Georgia,'Times New Roman',serif; text-decoration:none; cursor:pointer; }
        .nav a:hover, button:hover { background:#f6e6cf; }
        .panel { margin-top:24px; padding:24px; border:1px solid rgba(159,115,60,.22); border-radius:22px; background:var(--panel); box-shadow:0 16px 38px rgba(73,49,24,.12); }
        .input-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
        .input-card { display:grid; gap:10px; padding:16px; border:1px solid var(--line); border-radius:14px; background:#fffdf9; }
        .input-card h2 { color:var(--accent); }
        .parent-list { display:grid; gap:8px; }
        .parent-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:7px; align-items:end; }
        .parent-row label { min-width:0; }
        .remove-parent { padding:9px 11px; color:#9a2323; border-color:#e0a7a2; }
        .add-parent { justify-self:start; padding:7px 11px; font-size:.78rem; }
        label { display:grid; gap:5px; color:var(--muted); font-size:.78rem; font-weight:700; }
        input { width:100%; border:1px solid var(--line); border-radius:10px; padding:10px; color:var(--text); background:#fffaf3; font:inherit; }
        .actions { margin-top:18px; display:flex; justify-content:flex-end; }
        .error { margin-top:16px; padding:12px 14px; border:1px solid #e0a7a2; border-radius:10px; color:#8b2525; background:#fde3e1; }
        .result-heading { display:flex; justify-content:space-between; gap:16px; align-items:end; margin-bottom:18px; }
        .result-heading p, .formula { margin:5px 0 0; color:var(--muted); font-size:.86rem; }
        .results-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
        .results-table { width:100%; min-width:1280px; border-collapse:collapse; background:#fffdf9; font-size:.84rem; line-height:1.4; }
        .results-table th, .results-table td { padding:10px 11px; border:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
        .results-table thead th { color:#fffaf3; background:#7a2418; font-size:.75rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
        .results-table tbody th { width:180px; color:var(--accent); background:#f5ead8; font-weight:700; }
        .results-table tbody tr:nth-child(even) td { background:#fffaf3; }
        .results-table .formula { min-width:190px; margin:0; font-size:.8rem; }
        .stacked { display:grid; gap:4px; }
        .stacked span { display:block; }
        .stacked strong { color:var(--accent); }
        .rule-tooltip { cursor: help; }
        .generator { display:flex; flex-wrap:wrap; align-items:end; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
        .generator h3 { flex-basis:100%; margin:0; color:var(--accent); font-size:1rem; }
        .generator label { min-width:145px; }
        .generator select { width:100%; border:1px solid var(--line); border-radius:10px; padding:10px; color:var(--text); background:#fffaf3; font:inherit; }
        .generated-heading { margin-bottom:16px; }
        .generated-heading p { margin:5px 0 0; color:var(--muted); }
        .generated-heading .pal-wali-formula { padding:10px 12px; border-left:3px solid #b0871f; color:#765514; background:#fff8dc; line-height:1.6; }
        .generated-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
        .generated-table { width:100%; min-width:1080px; border-collapse:collapse; background:#fffdf9; font-size:.84rem; line-height:1.4; }
        .generated-table th, .generated-table td { padding:10px 11px; border:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
        .generated-table thead th { color:#fffaf3; background:#7a2418; font-size:.75rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }
        .generated-table tbody tr.friday td { background:rgba(91,143,97,.12) !important; }
        .generated-table tbody tr.weekend td { background:rgba(190,63,52,.10) !important; }
        .generated-table tbody tr.aryang td:first-child, .generated-table tbody tr.waler-sangker td:first-child, .generated-table tbody tr.dina-ala td:first-child { box-shadow:inset 4px 0 0 #9a2323; }
        .generated-table tbody tr:nth-child(even):not(.naas-match) td { background:#fffaf3; }
        .generated-table .tag { display:inline-block; margin:0 3px 3px 0; padding:4px 8px; border-radius:8px; font-size:.76rem; font-weight:700; white-space:normal; vertical-align:top; }
        .generated-table .tag.good { color:#31583a; background:#dcebd7; }
        .generated-table .tag.bad { color:#9a2323; background:#fde3e1; border:1px solid rgba(154,35,35,.25); }
        .generated-table .tag.neutral { color:#6d3a12; background:#f6e4bb; }
        .generated-table .tag.pal-wali-jelek { color:#9a2323; background:#fde3e1; border:1px solid rgba(154,35,35,.25); }
        .generated-table .tag.pal-wali-sedang { color:#765514; background:#fff0b8; border:1px solid rgba(176,135,31,.3); }
        .generated-table .tag.pal-wali-baik { color:#31583a; background:#dcebd7; border:1px solid rgba(49,88,58,.22); }
        .generated-table .muted { display:inline; color:var(--muted); font-size:.78rem; }
        .note { margin-top:20px; color:var(--muted); font-size:.82rem; line-height:1.6; }
        @media (max-width:760px) { .page { width:min(100% - 20px,1220px); padding-top:24px; } .panel { padding:14px; border-radius:16px; } .input-grid { grid-template-columns:1fr; } .nav a { flex:1 1 calc(50% - 10px); text-align:center; } .result-heading { display:block; } }