:root{
      --odoo:#875A7B;
      --odoo2:#9B6A8E;
      --radius:18px;
      --font:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;

      /* Light */
      --bg:#f5f6f8;
      --card:#ffffff;
      --stroke:rgba(0,0,0,0.08);
      --text:#1f2937;
      --muted:#6b7280;
      --shadow:0 20px 50px rgba(0,0,0,0.08);
    }

    /* Dark */
    [data-theme="dark"]{
      --bg:#111217;
      --card:#1a1b22;
      --stroke:rgba(255,255,255,0.10);
      --text:#f9fafb;
      --muted:rgba(255,255,255,0.65);
      --shadow:
        0 20px 60px rgba(0,0,0,0.55),
        0 0 0 1px rgba(155,106,142,0.18),
        0 8px 30px rgba(135,90,123,0.25);
    }

    *{box-sizing:border-box}
    html,body{height:100%}

    body{
      margin:0;
      font-family:var(--font);
      background:var(--bg);
      color:var(--text);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
      transition:background-color .35s ease,color .35s ease;
    }

    .card{
      width:min(880px,100%);
      background:var(--card);
      border:1px solid var(--stroke);
      border-radius:var(--radius);
      padding:28px;
      display:grid;
      grid-template-columns:1.2fr 0.8fr;
      gap:20px;
      box-shadow:var(--shadow);
      transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease;
    }

    @media(max-width:860px){ .card{grid-template-columns:1fr} }

    .card > div{
      display:flex;
      flex-direction:column;
      gap:16px;
    }

    .panel{
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    .top{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(135,90,123,0.08);
      border:1px solid rgba(135,90,123,0.25);
      font-size:14px;
    }

    .dot{
      width:10px;
      height:10px;
      border-radius:50%;
      background:#f59e0b;
    }

    .theme-btn{
      border:1px solid var(--stroke);
      background:transparent;
      color:var(--text);
      border-radius:10px;
      padding:6px 8px;
      cursor:pointer;
      font-size:18px;
      transition:transform .15s ease,border-color .25s ease;
    }
    .theme-btn:hover{transform:translateY(-1px)}

    h1{
      margin:0;
      font-size:clamp(28px,3vw,38px);
      letter-spacing:-0.02em;
    }

    p{
      margin:0;
      color:var(--muted);
      line-height:1.55;
      max-width:60ch;
      transition:color .35s ease;
    }

    .btn{
      padding:12px 16px;
      border-radius:12px;
      border:none;
      cursor:pointer;
      font-weight:600;
      color:#fff;
      background:linear-gradient(180deg,var(--odoo2),var(--odoo));
      box-shadow:0 6px 14px rgba(0,0,0,0.25);
      transition:transform .15s ease, box-shadow .15s ease;
      margin-top:auto;
      align-self:flex-start;
    }
    .btn:hover{
      transform:translateY(-1px);
      box-shadow:0 10px 22px rgba(0,0,0,0.35);
    }

    .panel h3{
      margin:0;
      font-size:13px;
      letter-spacing:.1em;
      text-transform:uppercase;
      color:var(--muted);
    }

    .contact{
      padding:12px;
      border-radius:14px;
      border:1px solid var(--stroke);
      margin:0;
      transition:border-color .35s ease;
    }

    .contact span{
      display:block;
      font-size:13px;
      color:var(--muted);
      margin-bottom:4px;
    }

    .contact a,
    .contact .value{
      color:var(--text);
      text-decoration:none;
      font-size:14px;
      transition:color .35s ease;
    }
    .contact a:hover{text-decoration:underline}