:root{
    --bg:transparent;
    --card:#ffffff;
    --text:#000000;
    --muted:#1f2937;
    --border:rgba(0,0,0,.12);
    --accent:#c1121f; /* red */
    --accentSoft: rgba(193,18,31,.12);
    --soft:#f3f4f6;
  }
  
  .wrap{
    /* max-width:820px;margin:18px auto;padding:0 12px */
  }
  .card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    /* box-shadow:0 10px 30px rgba(0,0,0,.08); */
    padding:18px
  }
  .top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
  h2{margin:0;font-size:20px;line-height:1.25}
  .sub{margin-top:6px;color:var(--muted);font-size:13px;line-height:1.45}
  .pill{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px;background:#fff}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
  .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:14px}
  @media(max-width:720px){ .grid3{grid-template-columns:1fr} }
  @media(max-width:560px){ .grid{grid-template-columns:1fr} }
  label{display:block;font-weight:800;font-size:12px;margin:0 0 6px}
  select,input,textarea{
    width:100%;
    background:#fff;
    border:1px solid rgba(0,0,0,.2);
    border-radius:10px;
    padding:10px 11px;
    font-size:14px;
    color:var(--text);
    outline:none;
  }
  select:focus,input:focus,textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accentSoft);
  }
  .divider{height:1px;background:var(--border);margin:14px 0}
  .btn{
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    border:2px solid var(--accent);
    background:#fff;
    color:var(--text);
    font-weight:900;
    cursor:pointer;
    font-size:14px;
  }
  .btn:hover{background:var(--accent);color:#fff}
  .btn.secondary{
    border:1px solid rgba(0,0,0,.18);
    background:#fff;
    color:var(--text);
    font-weight:800;
  }
  .btn.secondary:hover{background:var(--soft);color:var(--text)}
  .result{
    margin-top:14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    padding:14px;
    display:none;
  }
  .resultTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
  .rec{font-size:18px;font-weight:1000;margin:0}
  .why{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.55}
  .kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  @media(max-width:560px){ .kpis{grid-template-columns:1fr} }
  .kpi{border:1px solid var(--border);border-radius:12px;padding:12px;background:#fff}
  .kpi .t{font-size:12px;color:var(--muted);font-weight:800}
  .kpi .v{font-size:18px;font-weight:1000;margin-top:4px}
  .bar{height:10px;border-radius:999px;background:#e5e7eb;overflow:hidden;margin-top:8px}
  .bar span{display:block;height:100%;background:var(--accent);width:0%}
  .tags{margin-top:8px}
  .tag{display:inline-block;margin:6px 6px 0 0;padding:5px 9px;border-radius:999px;border:1px solid var(--border);font-size:12px}
  .tag.good{border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.08)}
  .tag.warn{border-color:rgba(202,138,4,.35);background:rgba(202,138,4,.10)}
  .tag.bad{border-color:rgba(220,38,38,.30);background:rgba(220,38,38,.08)}
  .actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px}
  @media(max-width:720px){ .actions{grid-template-columns:1fr} }
  .note{margin-top:10px;color:var(--muted);font-size:12px;line-height:1.45}
  .toast{margin-top:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#fff;color:var(--muted);font-size:12px;display:none}
  .mini{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.35}

  .validation-error {
    color: red;
    font-size: 12px;
  }

  button:disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
    opacity: 0.6;
  }