/* ============================================================
   Reconcile Desty vs WMS — panel-scoped presentation

   GENERATED FILE — do not edit by hand.
   Source:    Reconcile - Desty x WMS.html
   Generator: node tools/port-desty-wms.js

   Every selector is scoped to .dwPanel. The tool was written as a whole
   page, so its body / :root / * rules fold onto the panel element: its CSS
   variables keep cascading to its own children and none of it reaches the
   rest of the app.
   ============================================================ */
.dwPanel{
    --bg:#f3f7fc;--card:#ffffff;--ink:#10213a;--muted:#6d7d94;--line:#dce6f2;
    --blue:#165dff;--blue2:#0f46bd;--cyan:#20b8ee;--soft:#edf5ff;--soft2:#f7faff;
    --green:#0d9c6e;--greenSoft:#e8f8f2;--red:#d74646;--redSoft:#fff0f0;
    --amber:#c57b0a;--amberSoft:#fff6df;--shadow:0 18px 50px rgba(31,65,112,.09);
  }
.dwPanel,.dwPanel *{box-sizing:border-box}
.dwPanel{scroll-behavior:smooth}
.dwPanel{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:
    radial-gradient(circle at 10% 0%,rgba(32,184,238,.10),transparent 27rem),
    radial-gradient(circle at 88% 4%,rgba(22,93,255,.12),transparent 28rem),var(--bg)}
.dwPanel button,.dwPanel input{font:inherit}
.dwPanel .wrap{max-width:1320px;margin:0 auto;padding:26px 22px 52px}
.dwPanel .hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0e3f9f 0%,#165dff 56%,#1aa8e7 100%);border-radius:26px;padding:28px 30px;color:#fff;box-shadow:0 24px 60px rgba(19,76,177,.22);margin-bottom:20px}
.dwPanel .hero:before,.dwPanel .hero:after{content:"";position:absolute;border-radius:999px;background:rgba(255,255,255,.08);pointer-events:none}
.dwPanel .hero:before{width:320px;height:320px;right:-92px;top:-160px}
.dwPanel .hero:after{width:210px;height:210px;right:176px;bottom:-158px}
.dwPanel .heroInner{position:relative;z-index:1;display:flex;justify-content:space-between;gap:24px;align-items:center}
.dwPanel .brand{display:flex;gap:16px;align-items:center;min-width:0}
.dwPanel .logo{position:relative;width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(8px);display:grid;place-items:center;font-weight:900;font-size:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
.dwPanel .logo:after{content:"";position:absolute;width:16px;height:16px;border:4px solid #fff;border-left-color:transparent;border-bottom-color:transparent;border-radius:5px;right:9px;top:9px;transform:rotate(45deg);opacity:.92}
.dwPanel .eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#d8ecff;margin-bottom:7px}
.dwPanel .eyebrow i{width:7px;height:7px;background:#8cf1cf;border-radius:50%;box-shadow:0 0 0 5px rgba(140,241,207,.13)}
.dwPanel h1{font-size:29px;line-height:1.15;letter-spacing:-.7px;margin:0 0 7px}
.dwPanel .sub{max-width:760px;color:#dceaff;font-size:13.5px;line-height:1.6}
.dwPanel .heroSide{min-width:235px;display:grid;gap:9px}
.dwPanel .heroMetric{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:15px;padding:11px 13px;backdrop-filter:blur(8px)}
.dwPanel .heroMetric b{display:block;font-size:13px;margin-bottom:3px}
.dwPanel .heroMetric span{font-size:11px;color:#dceaff}
.dwPanel .uploadGrid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.dwPanel .card{background:rgba(255,255,255,.96);border:1px solid rgba(208,222,239,.9);border-radius:20px;box-shadow:var(--shadow);padding:19px}
.dwPanel .cardHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.dwPanel .stepWrap{display:flex;gap:11px;align-items:flex-start}
.dwPanel .stepNo{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:11px;background:var(--soft);color:var(--blue);font-size:11px;font-weight:900;border:1px solid #d9e9ff}
.dwPanel .card h2{font-size:15px;margin:1px 0 4px;letter-spacing:-.1px}
.dwPanel .desc{font-size:12px;color:var(--muted);line-height:1.5}
.dwPanel .miniPill{font-size:10px;font-weight:800;color:var(--blue2);background:#f2f7ff;border:1px solid #dceaff;padding:6px 8px;border-radius:999px;white-space:nowrap}
.dwPanel .drop{min-height:150px;border:1.5px dashed #abc7eb;background:linear-gradient(180deg,#fbfdff,#f6faff);border-radius:16px;padding:20px;display:grid;place-items:center;text-align:center;cursor:pointer;transition:.18s ease;position:relative;overflow:hidden}
.dwPanel .drop:hover,.dwPanel .drop.drag{border-color:var(--blue);background:#eff6ff;transform:translateY(-1px);box-shadow:0 12px 30px rgba(22,93,255,.08)}
.dwPanel .uploadIcon{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;margin:0 auto 9px;background:#eaf3ff;color:var(--blue);font-size:22px;font-weight:900}
.dwPanel .drop strong{display:block;font-size:13.5px;margin-bottom:5px}
.dwPanel .drop span{display:block;font-size:11.5px;color:var(--muted)}
.dwPanel .drop em{display:block;font-style:normal;font-size:10.5px;color:#93a1b5;margin-top:7px}
.dwPanel input[type=file]{display:none}
.dwPanel .uploadFoot{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:10px;padding:0 2px;font-size:10.5px;color:var(--muted)}
.dwPanel .uploadFoot b{color:var(--ink)}
.dwPanel .files{margin-top:11px;display:grid;gap:7px;max-height:220px;overflow:auto;padding-right:2px}
.dwPanel .files:empty{display:none}
.dwPanel .file{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid #e2eaf4;border-radius:12px;padding:9px 10px;background:#fbfdff}
.dwPanel .fname{font-size:11.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dwPanel .fmeta{font-size:10px;color:var(--muted);margin-top:2px}
.dwPanel .clientInput{width:158px;border:1px solid #ccd9e8;border-radius:9px;padding:7px 8px;font-size:11px;color:var(--ink);outline:none;background:#fff}
.dwPanel .clientInput:focus{border-color:var(--blue);box-shadow:0 0 0 3px #e8f2ff}
.dwPanel .logicStrip{margin-top:17px;display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:17px;padding:13px 15px;box-shadow:0 10px 28px rgba(31,65,112,.05)}
.dwPanel .logicIcon{width:39px;height:39px;border-radius:12px;background:linear-gradient(135deg,#e9f4ff,#edf9ff);display:grid;place-items:center;color:var(--blue);font-size:18px}
.dwPanel .logicStrip b{color:var(--ink)}
.dwPanel .logicText{font-size:11.7px;color:var(--muted);line-height:1.55}
.dwPanel .actionsPanel{margin-top:15px;background:#fff;border:1px solid var(--line);border-radius:17px;padding:12px 14px;display:flex;justify-content:space-between;gap:14px;align-items:center;box-shadow:0 10px 28px rgba(31,65,112,.05)}
.dwPanel .actions{display:flex;gap:9px;flex-wrap:wrap}
.dwPanel .btn{border:0;border-radius:11px;padding:10px 15px;font-weight:850;font-size:11.5px;cursor:pointer;transition:.18s}
.dwPanel .btn:hover:not(:disabled){transform:translateY(-1px)}
.dwPanel .primary{background:linear-gradient(135deg,var(--blue),#0d74d8);color:#fff;box-shadow:0 9px 20px rgba(22,93,255,.21)}
.dwPanel .primary:hover{box-shadow:0 12px 26px rgba(22,93,255,.28)}
.dwPanel .secondary{background:#f8fbff;border:1px solid #dbe6f2;color:var(--ink)}
.dwPanel .btn:disabled{opacity:.43;cursor:not-allowed;box-shadow:none;transform:none}
.dwPanel .exportGoal{text-align:right}
.dwPanel .exportGoal b{display:block;font-size:11px}
.dwPanel .exportGoal span{font-size:10.5px;color:var(--muted)}
.dwPanel .sizeGood{color:var(--green)!important;font-weight:800}
.dwPanel .sizeWarn{color:var(--amber)!important;font-weight:800}
.dwPanel .progressWrap{display:none;margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:12px 14px}
.dwPanel .progressTop{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;margin-bottom:7px}
.dwPanel .progressText{font-weight:800}
.dwPanel .pct{color:var(--muted)}
.dwPanel .bar{height:7px;border-radius:999px;background:#e7edf5;overflow:hidden}
.dwPanel .bar>div{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .15s}
.dwPanel .result{display:none;margin-top:18px}
.dwPanel .sectionHead{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin:2px 1px 11px}
.dwPanel .sectionHead h2{font-size:16px;margin:0}
.dwPanel .sectionHead span{font-size:10.5px;color:var(--muted)}
.dwPanel .kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
.dwPanel .kpi{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:15px;padding:13px 14px;box-shadow:0 8px 20px rgba(35,67,109,.045)}
.dwPanel .kpi:after{content:"";position:absolute;right:-15px;bottom:-20px;width:68px;height:68px;border-radius:50%;background:#f2f7ff}
.dwPanel .kpi .l{position:relative;z-index:1;font-size:9.7px;text-transform:uppercase;letter-spacing:.06em;font-weight:750;color:var(--muted);margin-bottom:6px}
.dwPanel .kpi .v{position:relative;z-index:1;font-size:20px;font-weight:900;letter-spacing:-.4px}
.dwPanel .good{color:var(--green)}
.dwPanel .bad{color:var(--red)}
.dwPanel .resultGrid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:12px}
.dwPanel .tableCard,.dwPanel .chartCard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 8px 20px rgba(35,67,109,.045)}
.dwPanel .titleRow{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:9px}
.dwPanel .titleRow h3{font-size:12.5px;margin:0}
.dwPanel .mini{font-size:9.7px;color:var(--muted)}
.dwPanel table{width:100%;border-collapse:collapse;font-size:10.8px}
.dwPanel th{text-align:left;background:#f5f8fc;color:#596a82;font-size:9px;text-transform:uppercase;letter-spacing:.4px;padding:8px;border-bottom:1px solid var(--line)}
.dwPanel td{padding:8px;border-bottom:1px solid #edf1f6;vertical-align:middle}
.dwPanel .right{text-align:right}
.dwPanel .statusTag{display:inline-block;padding:3px 6px;border-radius:6px;font-size:9.4px;font-weight:800}
.dwPanel .tagGood{background:var(--greenSoft);color:var(--green)}
.dwPanel .tagBad{background:var(--redSoft);color:var(--red)}
.dwPanel .tagBlue{background:var(--soft);color:var(--blue2)}
.dwPanel .bars{display:grid;gap:8px}
.dwPanel .barItem{display:grid;grid-template-columns:142px 1fr 56px;gap:8px;align-items:center;font-size:10px}
.dwPanel .barLabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dwPanel .miniBar{height:7px;border-radius:999px;background:#edf2f7;overflow:hidden}
.dwPanel .miniBar>i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:999px}
.dwPanel .barNum{text-align:right;font-weight:800}
.dwPanel .log{margin-top:12px;background:#0e1a2c;color:#d7e4f7;border:1px solid #1d2d46;border-radius:14px;padding:11px 13px;font:10.5px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;max-height:160px;overflow:auto;display:none;box-shadow:0 10px 28px rgba(7,19,37,.09)}
.dwPanel .footer{margin-top:17px;color:#8694a7;font-size:10.5px;text-align:center}
@media(max-width:980px){.dwPanel .uploadGrid,.dwPanel .resultGrid{grid-template-columns:1fr}
.dwPanel .kpis{grid-template-columns:repeat(3,1fr)}
.dwPanel .heroInner{align-items:flex-start}
.dwPanel .heroSide{min-width:200px}
.dwPanel .barItem{grid-template-columns:110px 1fr 48px}}
@media(max-width:680px){.dwPanel .wrap{padding:15px 12px 34px}
.dwPanel .hero{padding:21px 18px;border-radius:20px}
.dwPanel .heroInner{flex-direction:column}
.dwPanel .heroSide{width:100%;grid-template-columns:1fr 1fr}
.dwPanel .brand{align-items:flex-start}
.dwPanel .logo{width:48px;height:48px;border-radius:15px;flex:0 0 auto}
.dwPanel h1{font-size:23px}
.dwPanel .uploadGrid{gap:12px}
.dwPanel .card{border-radius:17px;padding:15px}
.dwPanel .kpis{grid-template-columns:repeat(2,1fr)}
.dwPanel .actionsPanel{align-items:flex-start;flex-direction:column}
.dwPanel .exportGoal{text-align:left}
.dwPanel .file{grid-template-columns:1fr}
.dwPanel .clientInput{width:100%}}



/* ---------- embedding overrides (not from the source) ----------
   The tool painted its own page background and centred itself in a
   viewport. Inside the app it is a panel on a page that already has a
   background and its own width, so those three rules are undone here. */
.dwPanel{min-height:0;background:none;margin:0}
.dwPanel .wrap{max-width:none;width:auto;margin:0;padding:0}