:root{
      --bg:#f5efe6;
      --bg-2: #efe7d8;
      --panel:rgba(255,255,255,.82);
      --panel-strong:rgba(255,255,255,.95);
      --ink:#201a16;
      --muted:#6a5f55;
      --line:rgba(32,26,22,.10);
      --accent:#b56a45;
      --accent-2:#e59a75;
      --shadow:0 18px 50px rgba(32,26,22,.10);
      --radius:22px;
      --max:980px;
}

*{box-sizing:border-box}
html { scroll-behavior: smooth; }

body{
      margin:0;
      font-family:Arial, Helvetica, sans-serif;
      color:var(--ink);
      background:
        radial-gradient(circle at top left, rgba(143,77,49,.10), transparent 24%),
        radial-gradient(circle at top right, rgba(78,119,135,.10), transparent 22%),
        linear-gradient(180deg, var(--bg), var(--bg-2));
      min-height:100vh;
}

h1{
      margin:14px 0 8px;
      font-size:clamp(1.8rem, 4vw, 3rem);
      line-height:1.02;
      letter-spacing:-.05em;
}

.wrapper{
      width:min(calc(100% - 24px), var(--max));
      margin:0 auto;
      padding:22px 0 34px;
}

.hero{margin-bottom:16px}

.eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      color:var(--muted);
      margin-bottom:16px;
      font-size:.76rem;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
}

.eyebrow::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 6px rgba(143,77,49,.08);
}

.intro{
      margin:0;
      max-width:70ch;
      color:var(--muted);
      line-height:1.7;
      font-size:.98rem;
}

.panel{
      background:var(--panel);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      overflow:hidden;
}

.panel-head{
      padding:18px 18px 0;
}

.panel-head h2{
      margin:0;
      font-size:1.08rem;
      letter-spacing:-.03em;
}

.panel-head p{
      margin:8px 0 0;
      color:var(--muted);
      line-height:1.6;
      font-size:.92rem;
}

.panel-body{
      padding:16px 18px 18px;
}

.actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin:0 0 14px;
}

.table-responsive{
      max-width:100%;
      overflow-x:auto;
      border:1px solid rgba(32,26,22,.08);
      border-radius:18px;
      background:rgba(255,255,255,.35);
}


.data-table{
      width:100%;
      border-collapse:collapse;
      min-width:760px;
}

.data-table th, 
.data-table td{
      padding:8px;
      vertical-align:top;
      border-bottom:1px solid rgba(32,26,22,.08);
      font-size:12px;
      line-height:1.2;
    }

.data-table thead th{
  background:rgba(160,160,160,.78);
  font-weight:800;
  text-align:center;
}

.data-table tbody tr:last-child td{
  border-bottom:none;
}

input[type="number"], input[type="text"]{
      width:120px;
      height:28px;
      padding:2px 7px;
      font-size:12px;
      border:1px solid rgba(32,26,22,.14);
      border-radius:10px;
      background:var(--panel-strong);
      color:var(--ink);
      outline:none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
      -webkit-appearance:none;
      margin:0;
}

input:focus{
      border-color:rgba(143,77,49,.45);
      box-shadow:0 0 0 4px rgba(143,77,49,.10);
}

.btn{
      min-height:38px;
      border:none;
      border-radius:12px;
      padding:0 16px;
      font-weight:800;
      cursor:pointer;
      transition:.18s ease;
}

.btn-primary{
      background:linear-gradient(135deg, var(--accent), #a0a0a0);
      color:#fff;
      box-shadow:0 10px 24px rgba(143,77,49,.18);
}

.btn-secondary{
      background:rgba(255,255,255,.72);
      background:linear-gradient(135deg, #f0f0f0, #a0a0a0);
      color:var(--ink);
      border:1px solid var(--line);
}
.btn-ghost{
      background: rgba(47,106,87,.1);
      color: var(--accent-2);
      border:1px solid rgba(47,106,87,.18);
    }

.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.text-center{text-align:center}
.row-label{white-space:nowrap;font-weight:700}

.gri-rows{background-color:#e0eee0}
.red-rows { background-color: #f0d0d0; }
.blu-rows { background-color: #e0d0f0; }

.note{
      margin:12px 0 0;
      color:var(--muted);
      font-size:.9rem;
      line-height:1.6;
}

@media (max-width:720px){
      .wrapper{
        width:min(calc(100% - 14px), var(--max));
        padding-top:14px;
      }

      .panel-head,
      .panel-body{
        padding-left:12px;
        padding-right:12px;
      }

      h1{
        font-size:clamp(1.55rem, 7vw, 2.4rem);
      }

      .intro{
        font-size:.94rem;
      }

      table{
        min-width:720px;
      }

      th, td{
        padding:6px;
        font-size:11px;
      }

      input[type="number"],
      input[type="text"]{
        width:104px;
        height:26px;
        font-size:11px;
      }

      .actions .btn{
        flex:1 1 auto;
      }
}