:root { --bg:#f7f1e4; --text:#2d241a; --muted:#786754; --accent:#a34225; --line:#ddcdb5; --panel:rgba(255,250,243,.97); --good:#31583a; --good-bg:#dcebd7; --bad:#9a2323; --bad-bg:#fde3e1; }
        * { 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(1500px,calc(100% - 32px)); margin:0 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; }
        .subtitle { max-width:850px; color:var(--muted); line-height:1.6; }
        .nav, form { display:flex; flex-wrap:wrap; align-items:end; 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); }
        label { display:grid; gap:5px; color:var(--muted); font-size:.78rem; font-weight:700; }
        select { min-width:150px; border:1px solid var(--line); border-radius:10px; padding:10px; color:var(--text); background:#fffdf9; font:inherit; }
        .heading { margin-bottom:18px; }
        .heading h2 { margin:0; font-size:1.7rem; }
        .heading p { margin:6px 0 0; color:var(--muted); }
        .month-jawa-summary { display:grid; gap:3px; margin-top:8px; color:var(--muted); font-size:.84rem; line-height:1.45; }
        .month-jawa-summary strong { color:var(--accent); }
        .table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:15px; }
        table { width:100%; min-width:1180px; border-collapse:collapse; background:#fffdf9; }
        th,td { padding:12px 13px; border-bottom:1px solid #eadfce; text-align:left; vertical-align:top; }
        th { color:#fffaf3; background:#7a2418; font-size:.75rem; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
        td { font-size:.88rem; line-height:1.45; }
        tbody tr:last-child td { border-bottom:0; }
        tbody tr:nth-child(even) td { background:rgba(255,250,243,.7); }
        tbody tr.friday td { background:rgba(91,143,97,.12); }
        tbody tr.weekend td { background:rgba(190,63,52,.10); }
        .muted { display:block; color:var(--muted); font-size:.78rem; }
        .muted-inline { color:var(--muted); font-size:.78rem; }
        .date-number { display:block; font-size:1.05rem; font-weight:700; }
        .tag { display:inline-block; max-width:260px; margin:0 3px 3px 0; padding:4px 8px; border-radius:8px; font-size:.76rem; font-weight:700; white-space:normal; vertical-align:top; }
        .compact-line { display:block; min-height:1.45em; }
        .tag.good { color:var(--good); background:var(--good-bg); }
        .tag.bad { color:var(--bad); background:var(--bad-bg); }
        .rule-tooltip { cursor: help; }
        .tag.neutral { color:#6d3a12; background:#f6e4bb; }
        .legend { margin-top:14px; color:var(--muted); font-size:.8rem; line-height:1.6; }
        tbody tr.selectable { cursor:pointer; }
        tbody tr.selectable:hover td, tbody tr.selectable.selected td { background:#f7e8c7; }
        .detail-panel { margin-top:20px; border:1px solid var(--line); border-radius:16px; background:#fffdf9; overflow:hidden; }
        .detail-head { padding:16px 18px; color:#fffaf3; background:#7a2418; }
        .detail-head h3 { margin:0; font-size:1.15rem; }
        .detail-head p { margin:5px 0 0; color:#f8dfc8; font-size:.86rem; }
        .detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; padding:18px; }
        .detail-column { display:grid; gap:8px; align-content:start; min-width:0; }
        .detail-section { margin-top:8px; padding-bottom:6px; border-bottom:1px solid var(--line); color:var(--accent); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
        .detail-section:first-child { margin-top:0; }
        .detail-line { display:grid; grid-template-columns:minmax(112px,34%) minmax(0,1fr); overflow-wrap:anywhere; border:1px solid var(--line); border-radius:8px; background:#fffaf3; color:var(--muted); font-size:.88rem; line-height:1.45; overflow:hidden; }
        .detail-line span { padding:8px 10px; }
        .detail-line .label { font-weight:700; background:#f5ead8; border-right:1px solid var(--line); }
        .detail-line .value { min-width:0; color:var(--text); }
        @media (max-width:640px) { .page { width:min(100% - 20px,1500px); padding-top:24px; } .panel { padding:14px; border-radius:16px; } .nav a { flex:1 1 calc(50% - 10px); text-align:center; } form label { flex:1 1 44%; } select { min-width:0; width:100%; } .detail-grid { grid-template-columns:1fr; gap:14px; padding:14px; } .detail-line { grid-template-columns:minmax(100px,38%) minmax(0,1fr); } .detail-line span { padding:8px; } }