:root{
    --ink: #12151a;
    --ink-2: #1b1f26;
    --ink-line: #2c323c;
    --paper: #eae3d3;
    --paper-2: #ded4bc;
    --paper-line: #c7bc9e;
    --ink-text: #211f1a;
    --paper-text: #ece6d8;
    --muted-on-paper: #6b6252;
    --muted-on-ink: #8a8f9a;
    --seal: #a8342a;
    --seal-dim: #7c281f;
    --gold: #b08d3f;
    --wood: #4b6b4a;
    --fire: #b23a2e;
    --earth: #a9803f;
    --metal: #7d8288;
    --water: #35577a;
    --radius: 3px;
    --serif: "Noto Serif", serif;
    --sans: "Inter", sans-serif;
    --mono: "IBM Plex Mono", monospace;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--ink);
    color:var(--paper-text);
    font-family:var(--sans);
    min-height:100vh;
    display:flex;
  }
  ::selection{ background:var(--seal); color:#fff; }

  /* ---------- NAV ---------- */
  .nav{
    width:220px;
    flex-shrink:0;
    padding:28px 0;
    border-right:1px solid var(--ink-line);
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .brand{
    font-family:var(--serif);
    font-weight:700;
    font-size:22px;
    letter-spacing:0.02em;
    padding:0 24px 22px;
    display:flex;
    align-items:baseline;
    gap:8px;
  }
  .brand .mark{
    color:var(--seal);
    font-size:15px;
    font-family:var(--mono);
    border:1px solid var(--seal);
    padding:1px 5px;
    border-radius:2px;
  }
  .nav-item{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.03em;
    color:var(--muted-on-ink);
    background:none;
    border:none;
    text-align:left;
    padding:11px 24px;
    cursor:pointer;
    border-left:2px solid transparent;
    display:flex;
    align-items:center;
    gap:10px;
    text-transform:uppercase;
  }
  .nav-item:hover{ color:var(--paper-text); }
  .nav-item.active{
    color:var(--paper-text);
    border-left:2px solid var(--seal);
    background:var(--ink-2);
  }
  .nav-item .n{ color:var(--seal); font-weight:600; }
  .nav-foot{
    margin-top:auto;
    padding:16px 24px 0;
    font-size:11px;
    color:var(--muted-on-ink);
    font-family:var(--mono);
    border-top:1px solid var(--ink-line);
    padding-top:16px;
  }

  /* ---------- MAIN ---------- */
  .main{
    flex:1;
    padding:40px 48px 80px;
    display:flex;
    justify-content:center;
  }
  .sheet{
    width:100%;
    max-width:860px;
  }
  .view{ display:none; }
  .view.active{ display:block; animation:rise .35s ease; }
  @keyframes rise{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

  .eyebrow{
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--seal);
    margin:0 0 10px;
  }
  h1.title{
    font-family:var(--serif);
    font-weight:700;
    font-size:38px;
    line-height:1.15;
    margin:0 0 14px;
    color:var(--paper-text);
  }
  p.lede{
    font-size:15.5px;
    line-height:1.65;
    color:var(--muted-on-ink);
    max-width:520px;
    margin:0 0 32px;
  }

  /* ---------- CARD / PAPER PANEL ---------- */
  .card{
    background:var(--paper);
    color:var(--ink-text);
    border-radius:var(--radius);
    padding:32px;
    box-shadow:0 24px 60px -20px rgba(0,0,0,0.5);
  }
  .card + .card{ margin-top:18px; }
  .card-label{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--muted-on-paper);
    margin:0 0 4px;
  }

  /* ---------- FORM (Home) ---------- */
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field label{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--muted-on-paper);
  }
  .field input, .field select{
    font-family:var(--sans);
    font-size:14.5px;
    padding:11px 12px;
    border:1px solid var(--paper-line);
    background:#f5f1e6;
    border-radius:2px;
    color:var(--ink-text);
  }
  .field input:focus, .field select:focus{
    outline:2px solid var(--seal);
    outline-offset:1px;
    border-color:var(--seal);
  }
  .btn{
    font-family:var(--sans);
    font-weight:600;
    font-size:14px;
    padding:13px 26px;
    border-radius:2px;
    border:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .btn-primary{ background:var(--seal); color:#fff; }
  .btn-primary:hover{ background:var(--seal-dim); }
  .btn-ghost{
    background:transparent; color:var(--paper-text);
    border:1px solid var(--ink-line);
  }
  .btn-ghost:hover{ border-color:var(--muted-on-ink); }
  .btn-gold{ background:var(--gold); color:#1c1508; }
  .btn-block{ width:100%; justify-content:center; }

  .helper{ font-size:12.5px; color:var(--muted-on-paper); margin-top:14px; }

  /* ---------- FOUR PILLARS GRID (signature element) ---------- */
  .pillars{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border:1px solid var(--paper-line);
    border-radius:2px;
    overflow:hidden;
    margin:22px 0;
  }
  .pillar{
    padding:20px 14px 18px;
    text-align:center;
    border-left:1px solid var(--paper-line);
    position:relative;
  }
  .pillar:first-child{ border-left:none; }
  .pillar.self{ background:#f2ead6; }
  .pillar .label{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted-on-paper);
    margin-bottom:14px;
  }
  .pillar .stem{
    font-family:var(--serif);
    font-size:40px;
    font-weight:700;
    line-height:1;
    margin-bottom:6px;
  }
  .pillar .stem-name{ font-size:11px; color:var(--muted-on-paper); margin-bottom:16px; }
  .pillar .branch{
    font-family:var(--serif);
    font-size:34px;
    font-weight:600;
    line-height:1;
    margin-bottom:6px;
    color:#41392a;
  }
  .pillar .branch-name{ font-size:11px; color:var(--muted-on-paper); }
  .seal-mark{
    position:absolute; top:10px; right:10px;
    font-family:var(--mono); font-size:9px; color:var(--seal);
    border:1px solid var(--seal); border-radius:2px; padding:1px 4px;
  }

  /* ---------- ELEMENT BAR ---------- */
  .elbar{
    display:flex; height:10px; border-radius:2px; overflow:hidden; margin:10px 0 12px;
  }
  .elbar span{ height:100%; }
  .el-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
  .el-legend div{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted-on-paper); font-family:var(--mono); }
  .dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }

  /* ---------- TAGS ---------- */
  .tags{ display:flex; flex-wrap:wrap; gap:8px; }
  .tag{
    font-family:var(--mono);
    font-size:11.5px;
    padding:6px 10px;
    border:1px solid var(--paper-line);
    border-radius:2px;
    color:var(--ink-text);
    background:#f5f1e6;
  }

  /* ---------- LUCK PILLARS TIMELINE ---------- */
  .luck-scroll{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; }
  .luck-chip{
    flex:0 0 auto;
    width:86px;
    border:1px solid var(--paper-line);
    border-radius:2px;
    padding:10px 8px;
    text-align:center;
    background:#f5f1e6;
  }
  .luck-chip.current{ border-color:var(--seal); background:#f2e4de; }
  .luck-chip .age{ font-family:var(--mono); font-size:10px; color:var(--muted-on-paper); }
  .luck-chip .glyphs{ font-family:var(--serif); font-size:20px; font-weight:700; margin:6px 0; }

  /* ---------- ANALYSIS TEASER ---------- */
  .quota-row{
    display:flex; align-items:center; justify-content:space-between;
    font-family:var(--mono); font-size:12.5px; color:var(--muted-on-paper);
    margin-bottom:16px;
  }
  .quota-bar{ height:6px; background:var(--paper-2); border-radius:3px; overflow:hidden; margin-top:8px; }
  .quota-fill{ height:100%; background:var(--seal); }
  .teaser-text{
    font-size:14.5px; line-height:1.7; color:#4a4331;
    position:relative;
    max-height:120px;
    overflow:hidden;
  }
  .teaser-text::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:70px;
    background:linear-gradient(to bottom, rgba(234,227,211,0), var(--paper) 85%);
  }
  .upsell{
    margin-top:20px; padding-top:20px; border-top:1px dashed var(--paper-line);
    display:flex; align-items:center; justify-content:space-between; gap:20px;
  }
  .upsell .txt strong{ display:block; font-family:var(--serif); font-size:17px; margin-bottom:4px; }
  .upsell .txt span{ font-size:12.5px; color:var(--muted-on-paper); }

  /* ---------- LOGIN ---------- */
  .login-wrap{ display:flex; justify-content:center; padding-top:20px; }
  .login-card{ width:360px; text-align:center; }
  .login-mark{
    width:44px; height:44px; margin:0 auto 18px;
    border:1px solid var(--seal); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--serif); font-weight:700; color:var(--seal); font-size:19px;
  }
  .login-card h2{ font-family:var(--serif); font-size:22px; margin:0 0 8px; }
  .login-card p{ font-size:13.5px; color:var(--muted-on-paper); margin:0 0 26px; line-height:1.6; }
  .google-btn{
    width:100%; background:#fff; color:#3c3c3c; border:1px solid var(--paper-line);
    padding:12px; border-radius:2px; font-weight:600; font-size:14px;
    display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  }
  .login-legal{ margin-top:20px; font-size:11px; color:var(--muted-on-paper); }

  /* ---------- AKUN ---------- */
  .akun-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:18px; }
  .stat{ }
  .stat .num{ font-family:var(--serif); font-size:30px; font-weight:700; }
  .stat .cap{ font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted-on-paper); margin-top:4px; }
  .divider{ height:1px; background:var(--paper-line); margin:20px 0; }
  table.hist{ width:100%; border-collapse:collapse; font-size:13px; }
  table.hist th{
    text-align:left; font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
    letter-spacing:0.06em; color:var(--muted-on-paper); font-weight:500;
    padding:8px 6px; border-bottom:1px solid var(--paper-line);
  }
  table.hist td{ padding:10px 6px; border-bottom:1px solid #ddd2b3; }
  .pill{ font-family:var(--mono); font-size:10.5px; padding:3px 8px; border-radius:10px; }
  .pill.free{ background:#e2ded1; color:#6b6252; }
  .pill.pro{ background:#f2e4de; color:var(--seal); }

  @media (max-width: 760px){
    body{ flex-direction:column; }
    .nav{ width:100%; flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--ink-line); padding:14px 0; }
    .brand{ display:none; }
    .nav-foot{ display:none; }
    .main{ padding:28px 20px 60px; }
    .field-row, .akun-grid{ grid-template-columns:1fr; }
    .pillars{ grid-template-columns:repeat(2,1fr); }
    .pillar:nth-child(3){ border-left:none; }
    h1.title{ font-size:29px; }
  }