:root{
    --sap-blue:#0a6ed1; --sap-blue-2:#0854a0;
    --sap-bg:#f7f9fb; --sap-panel:#fff; --sap-border:#d9dee5;
    --sap-text:#1a2733; --sap-muted:#5c6b7a;
    --sap-row:#f2f6fb; --sap-row-2:#fff; --sap-accent:#f59d00;
    --sap-shadow: 0 8px 22px rgba(10,30,60,.08);
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
*{box-sizing:border-box}
body{
    margin:0; font-family:var(--sans); color:var(--sap-text);
    background:linear-gradient(180deg,#eef5ff 0%, var(--sap-bg) 40%, #fff 100%);
}
header{
    background:linear-gradient(90deg,var(--sap-blue) 0%, var(--sap-blue-2) 100%);
    color:#fff; padding:18px 22px; position:sticky; top:0; z-index:50;
    box-shadow:0 6px 20px rgba(0,0,0,.12);
}
header .title{ font-size:18px; font-weight:900; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
header .badge{ font-family:var(--mono); font-size:12px; background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.22); padding:3px 8px; border-radius:999px; }

main{ max-width:1350px; margin:18px auto; padding:0 14px 26px; }
.grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:14px; }
@media (max-width: 980px){ .grid{ grid-template-columns:1fr } }

.card{
    background:var(--sap-panel); border:1px solid var(--sap-border);
    border-radius:14px; box-shadow:var(--sap-shadow); overflow:hidden;
}
.card .card-h{
    padding:12px 14px; border-bottom:1px solid var(--sap-border);
    background:linear-gradient(180deg,#fff 0%, #fbfdff 100%);
    display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.card .card-h .h-left{ display:flex; flex-direction:column; gap:2px; }
.card .card-h .h-title{ font-weight:950; font-size:14px; }
.card .card-h .h-sub{ font-size:12px; color:var(--sap-muted); }
.card .card-b{ padding:14px; }

label{ display:block; font-size:12px; color:var(--sap-muted); margin:0 0 6px; }
input, select, textarea{
    width:100%; border:1px solid var(--sap-border); background:#fff;
    padding:10px 10px; border-radius:10px; font-size:14px; outline:none;
}
input:focus, select:focus, textarea:focus{
    border-color: rgba(10,110,209,.55);
    box-shadow:0 0 0 4px rgba(10,110,209,.12);
}
textarea{ min-height:90px; resize:vertical; font-family:var(--mono); font-size:12px; }

.form{ display:grid; grid-template-columns: 1fr 1fr; gap:10px 12px; align-items:end; }
@media (max-width: 620px){ .form{ grid-template-columns:1fr } }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
@media (max-width: 620px){ .two-col{ grid-template-columns:1fr } }

.row-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px; }

.btn{
    border:1px solid rgba(10,110,209,.35);
    background:linear-gradient(180deg,#fff 0%, #f2f7ff 100%);
    color:#0b3a66; padding:9px 12px; border-radius:12px;
    font-weight:900; font-size:13px; cursor:pointer; display:inline-flex; gap:8px; align-items:center;
    user-select:none;
}
.btn.primary{
    background:linear-gradient(180deg,#1a80e5 0%, #0a6ed1 100%);
    border-color:#0a6ed1; color:#fff;
}
.btn.danger{
    border-color: rgba(220, 38, 38, .35);
    background:linear-gradient(180deg,#fff 0%, #fff5f5 100%);
    color:#7a1111;
}
.btn:active{ transform: translateY(1px); }

.pill{
    font-family:var(--mono); font-size:12px; font-weight:900;
    color:#15324a; background:#eef5ff; border:1px solid rgba(10,110,209,.25);
    padding:4px 8px; border-radius:999px;
}
.hint{ font-size:12px; color:var(--sap-muted); line-height:1.35; margin-top:10px; }
.hidden{ display:none !important; }

.radio-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.radio-row label{ margin:0; display:flex; gap:8px; align-items:center; color:var(--sap-text); font-weight:900; }
.radio-row input{ width:auto; }

.tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tab{
    border:1px solid var(--sap-border);
    background:linear-gradient(180deg,#fff 0%, #f6f9ff 100%);
    padding:8px 10px; border-radius:12px; cursor:pointer;
    font-weight:950; font-size:13px; color:#15324a; display:flex; align-items:center; gap:10px;
}
.tab small{ font-family:var(--mono); font-weight:900; color:var(--sap-muted); }
.tab.active{
    border-color: rgba(10,110,209,.55);
    box-shadow:0 0 0 4px rgba(10,110,209,.10);
    position:relative;
}
.tab.active::after{
    content:""; position:absolute; left:10px; right:10px; bottom:-1px;
    height:3px; background:var(--sap-accent); border-radius:999px;
}

.summary{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:12px; }
@media (max-width: 620px){ .summary{ grid-template-columns:1fr } }
.kpi{
    border:1px solid var(--sap-border); border-radius:12px;
    padding:10px 12px; background:linear-gradient(180deg,#fff 0%, #fbfdff 100%);
}
.kpi .k{ font-size:12px; color:var(--sap-muted); margin-bottom:6px; }
.kpi .v{ font-size:16px; font-weight:950; letter-spacing:.2px; }
.kpi .v.mono{ font-family:var(--mono); font-size:14px; }

.alv-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:12px; }
.table-wrap{ margin-top:10px; border:1px solid var(--sap-border); border-radius:14px; overflow:hidden; }
.scroll{ max-height:560px; overflow:auto; }

table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
thead th{
    position:sticky; top:0; z-index:2;
    background:linear-gradient(180deg,#fff 0%, #f1f6ff 100%);
    border-bottom:1px solid var(--sap-border);
    padding:10px 10px; text-align:left; font-size:12px; color:#32485c; white-space:nowrap;
}
tbody td{ padding:8px 10px; border-bottom:1px solid #eef1f5; white-space:nowrap; }
tbody tr:nth-child(odd){ background:var(--sap-row); }
tbody tr:nth-child(even){ background:var(--sap-row-2); }

td.num, th.num{ text-align:right; font-variant-numeric: tabular-nums; font-family:var(--mono); }

.side-note{ font-size:12px; color:var(--sap-muted); line-height:1.5; }
.warn{ border-left:4px solid var(--sap-accent); padding-left:10px; margin-top:10px; }

/* smaller inputs for rules table */
.mini-input, .mini-select{
    padding:6px 7px;
    border-radius:9px;
    font-size:12px;
    font-family:var(--mono);
}
.mini-select{ font-family:var(--sans); }
.actions-inline{ display:flex; gap:8px; align-items:center; }