:root {
  --bg:#f4f6f8; --panel:#fff; --text:#17202a; --muted:#667085; --line:#d9e0e8;
  --dark:#111827; --green:#0f8a4b; --red:#b42318; --blue:#1d4ed8; --yellow:#b7791f;
  --shadow:0 10px 28px rgba(15,23,42,.08); --radius:16px;
}
* { box-sizing:border-box; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; background:var(--bg); color:var(--text); }
.app { max-width:1540px; margin:0 auto; padding:24px; }
.hero { background:linear-gradient(135deg,#111827,#374151); color:#fff; border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); margin-bottom:20px; }
.hero h1 { margin:0 0 8px; font-size:30px; }
.hero p { margin:0; color:#d1d5db; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); margin-bottom:20px; }
h2,h3 { margin:0 0 14px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
label { display:block; color:var(--muted); font-size:13px; margin-bottom:5px; }
input,select,textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:15px; background:#fff; }
textarea { min-height:78px; resize:vertical; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
table { width:100%; border-collapse:collapse; background:#fff; }
th,td { border-bottom:1px solid var(--line); padding:10px; text-align:left; vertical-align:middle; white-space:nowrap; }
th { background:#f8fafc; color:#344054; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
td input[type=number] { width:88px; text-align:right; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; }
.country-cell { font-weight:700; min-width:190px; }
.preview-cell { text-align:center; min-width:90px; }
.country-preview { width:64px; height:64px; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:#f3f4f6; cursor:pointer; }
.no-image { width:64px; height:64px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; border:1px dashed var(--line); color:var(--muted); font-size:11px; }
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:20px; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow); }
.kpi .label { color:var(--muted); font-size:13px; margin-bottom:8px; }
.kpi .value { font-size:24px; font-weight:800; }
.blue .value { color:var(--blue); } .green .value { color:var(--green); } .red .value { color:var(--red); }
.badge { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; font-weight:700; font-size:13px; }
.badge.green { background:#dcfce7; color:var(--green); } .badge.yellow { background:#fef3c7; color:var(--yellow); } .badge.blue { background:#dbeafe; color:var(--blue); }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
button { border:0; border-radius:10px; padding:11px 14px; font-weight:700; cursor:pointer; background:#e5e7eb; color:#111827; }
button.primary { background:#111827; color:#fff; } button.good { background:#0f8a4b; color:#fff; } 
button.good2 { background:#0f8a4b; color:#fff; font-size: 1.8rem;  padding: 24px 48px;   min-width: 500px;   font-weight: bold; }
button.danger { background:#b42318; color:#fff; }
button:disabled { opacity:.5; cursor:not-allowed; }
.button-center {   width: 100%;  display: flex;  justify-content: center;}
.muted { color:var(--muted); font-size:13px; }
.summary-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:20px; }
.progress { height:14px; border-radius:99px; overflow:hidden; background:#e5e7eb; }
.progress span { display:block; height:100%; width:0%; background:linear-gradient(90deg,#1d4ed8,#0f8a4b); }
.final-box { border:2px solid #111827; border-radius:16px; padding:18px; background:#fff; line-height:1.7; }
.final-box strong { display:inline-block; min-width:180px; }
tfoot td { font-weight:800; background:#f3f4f6; }
.locked { background:#f3f4f6; color:#667085; }
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:9999; align-items:center; justify-content:center; padding:20px; }
.lightbox.show { display:flex; }
.lightbox-inner { background:#fff; border-radius:18px; max-width:760px; width:100%; padding:20px; position:relative; box-shadow:0 20px 80px rgba(0,0,0,.35); }
.lightbox-close { position:absolute; right:12px; top:12px; border-radius:999px; width:38px; height:38px; padding:0; font-size:24px; }
.lightbox img { max-width:100%; max-height:70vh; display:block; margin:0 auto; border-radius:14px; }
.product-link-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-top:12px; }
.product-link-grid a { display:block; padding:9px; border:1px solid var(--line); border-radius:10px; color:#111827; text-decoration:none; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:980px) { .two-col,.summary-layout { grid-template-columns:1fr; } .app { padding:12px; } }
@media print {
  body { background:#fff; } .app { max-width:none; padding:0; } .no-print,button,.actions,.lightbox { display:none!important; }
  .panel,.hero,.kpi { box-shadow:none; } input,select,textarea { border:0; padding:0; }
  .table-wrap { overflow:visible; } th,td { padding:6px; font-size:10px; } .hero { background:#fff; color:#111; border:1px solid #111; }
  .country-preview,.no-image { width:42px; height:42px; }
}