:root{
    --as-primary:#0f172a;
    --as-accent:#2563eb;
    --as-accent-hover:#1d4ed8;
    --as-border:#e5e7eb;
    --as-bg:#ffffff;
    --as-muted:#64748b;
    --as-soft:#f8fafc;
    --as-success:#16a34a;
    --as-danger:#dc2626;
    --as-default: #cf2528;
    --as-default-hover: #cf2825;
  }
/* 
  body{
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--as-bg);
    color:var(--as-primary);
    margin:0;
    padding:24px 12px;
  } */

  /* SLIM CONTAINER */
  .tool{
    /*max-width:720px;
    margin:0 auto;
    border:1px solid var(--as-border);
    border-radius:14px;
    padding:20px;
    background:#fff;
    box-shadow:0 8px 26px rgba(15,23,42,.06);*/
  }
  @media (max-width:520px){
    .tool{ padding:14px; }
  }

  .header{
    display:flex;
    gap:12px;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-bottom:14px;
  }

  h1{
    font-size:22px;
    margin:0 0 6px 0;
    letter-spacing:-.02em;
  }

  .sub{
    color:var(--as-muted);
    margin:0;
    max-width:70ch;
    line-height:1.45;
    font-size:13px;
  }

  .badge{
    font-size:12px;
    color:var(--as-muted);
    border:1px solid var(--as-border);
    padding:6px 10px;
    border-radius:999px;
    background:#fff;
    white-space:nowrap;
  }

  .panel{
    margin-top:14px;
    border-radius:12px;
    background:var(--as-soft);
    border:1px solid var(--as-border);
    padding:14px;
  }

  label{
    font-size:13px;
    font-weight:650;
    margin-bottom:6px;
    display:block;
  }

  input, select{
    width:100%;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid var(--as-border);
    font-size:14px;
    background:#fff;
    box-sizing:border-box;
  }

  input:focus, select:focus{
    outline:none;
    border-color:var(--as-accent);
    box-shadow:0 0 0 3px rgba(37,99,235,.12);
  }

  .grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin-top:10px;
  }
  @media (min-width:700px){
    .grid{ grid-template-columns:1fr 1fr; }
  }

  .row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    margin-top:12px;
    padding-left: 0;
  }

  .btn{
    border:1px solid var(--as-default);
    background:#fff;
    color:var(--as-primary);
    padding:10px 14px;
    border-radius:10px;
    font-weight:650;
    cursor:pointer;
    font-size:14px;
  }
  .btn:hover{ background:var(--as-soft); }

  .btn-primary{
    background:var(--as-default);
    border-color:var(--as-default);
    color:#fff;
  }
  .btn-primary:hover{
    background:var(--as-default-hover);
    border-color:var(--as-default-hover);
  }

  .btn-success{
    background:var(--as-success);
    border-color:var(--as-success);
    color:#fff;
  }
  .btn-success:hover{ filter:brightness(.95); }

  .muted{ color:var(--as-muted); font-size:13px; line-height:1.4; margin:0; }
  .divider{ height:1px; background:var(--as-border); margin:12px 0; }

  .item{
    background:#fff;
    border:1px solid var(--as-border);
    border-radius:12px;
    padding:12px;
  }

  .kpi{
    font-size:18px;
    font-weight:900;
    letter-spacing:-.02em;
    margin:0;
  }

  .desc{
    margin-top:8px;
    color:var(--as-muted);
    font-size:13px;
    line-height:1.4;
  }

  .tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
  }
  .tag{
    font-size:12px;
    border:1px solid var(--as-border);
    background:#fff;
    border-radius:999px;
    padding:6px 10px;
    color:var(--as-primary);
  }


  .ok{ color:var(--as-success); font-size:13px; margin-top:8px; display:none; }
  .hint{ font-size:12px; color:var(--as-muted); margin-top:8px; line-height:1.35; }

 /* .quoteBox{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    margin-top:10px;
  }*/
  .quoteEmail{
    font-weight:650;
    color:var(--as-primary);
    padding:8px 10px;
    border-radius:10px;
    border:1px solid var(--as-border);
    background:#fff;
    font-size:13px;
  }



  .validation-error {
    height: 15px;
    font-size: 12px;
    color: red;
  }
  .toast {
    height: 40px;
    font-size: 12px;
  }

  .form-root {
    display: flex; flex-direction: row; justify-content: space-between; gap: 30px; 
  }
  .form-left {
    width: 40%;
  }
  .form-right {
    width: 60%;
  }

  @media screen and (max-width: 600px) {
    .form-root {
      flex-direction: column; gap: 0; 
    }
    .form-left {
      width: 100%;
    }
    .form-right {
      width: 100%;
    }
  }