/* =========================================================
   S45 JEANS CO. — PRODUCTION TRACKER
   Design language: factory workshop tag / denim patch.
   Indigo + brass rivet accent, dashed "stitch" borders,
   condensed display type for headings, mono for data/tags.
   ========================================================= */

:root{
  --indigo-950:#0f1524;
  --indigo-900:#161d2e;
  --indigo-850:#1c2740;
  --indigo-800:#233047;
  --indigo-700:#2e3f5c;
  --indigo-600:#3d5c7d;
  --indigo-500:#5680a3;

  --brass:#c9a068;
  --brass-light:#e7c589;
  --brass-dark:#9c7b40;
  --brass-ink:#3a2b10;

  --cream:#f3ede0;
  --paper:#fffdf9;
  --surface:#faf6ec;
  --ink:#20293a;
  --ink-soft:#657089;
  --line:#e3d8bd;

  --thread-red:#b5473c;
  --thread-red-bg:#fbeae7;
  --thread-green:#37795a;
  --thread-green-bg:#e6f3ec;
  --thread-blue:#2f5f9e;
  --thread-blue-bg:#e6eefa;
  --thread-amber:#a8791f;
  --thread-amber-bg:#faf1de;

  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;

  --shadow-card: 0 1px 2px rgba(15,20,32,.05), 0 4px 14px rgba(15,20,32,.06);
  --shadow-modal: 0 20px 60px rgba(8,11,20,.4);

  --font-display:'Oswald', 'Arial Narrow', sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  --nav-h:60px;
  --topbar-h:64px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  padding-bottom:24px;
}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; letter-spacing:.01em; margin:0;}
p{margin:0 0 8px;}
button{font-family:inherit;}
::selection{background:var(--brass-light);}

/* ===== Icon system ===== */
.icon{width:18px; height:18px; flex-shrink:0; display:inline-block; vertical-align:middle;}
.icon-sm{width:14px; height:14px;}
.icon-lg{width:26px; height:26px;}
[data-icon]{display:inline-flex; align-items:center; justify-content:center;}

/* ===== Topbar ===== */
.topbar{
  background:linear-gradient(180deg,var(--indigo-900),var(--indigo-950));
  color:var(--cream);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  height:var(--topbar-h);
  position:sticky;
  top:0;
  z-index:30;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.topbar-brand{display:flex; align-items:center; gap:11px; min-width:0;}
.logo-frame{background:var(--cream); border-radius:9px; padding:3px; flex-shrink:0; box-shadow:0 1px 4px rgba(0,0,0,.3); display:flex;}
.brand-logo{height:38px; width:auto; border-radius:6px; display:block;}
.brand-text h1{font-size:17px; color:var(--cream); line-height:1.15; white-space:nowrap;}
.brand-text span{font-size:10.5px; color:var(--brass-light); text-transform:uppercase; letter-spacing:.13em; font-family:var(--font-mono);}
.topbar-actions{display:flex; gap:8px; flex-shrink:0;}

/* ===== Buttons ===== */
.btn{
  border:none; cursor:pointer; border-radius:var(--radius-sm);
  padding:11px 16px; font-size:14px; font-weight:600;
  display:inline-flex; align-items:center; gap:7px;
  transition:transform .08s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
  min-height:44px;
}
.btn:active{transform:scale(.97);}
.btn-brass{background:var(--brass); color:var(--brass-ink);}
.btn-brass:hover{background:var(--brass-light);}
.btn-ghost{background:rgba(255,255,255,.08); color:var(--cream); border:1px solid rgba(255,255,255,.18);}
.btn-ghost:hover{background:rgba(255,255,255,.16);}
.card .btn-ghost{background:var(--indigo-900); color:var(--cream); border:1px solid var(--indigo-700);}
.card .btn-ghost:hover{background:var(--indigo-800);}
.btn-danger{background:var(--thread-red); color:#fff;}
.btn-danger:hover{background:#943a31;}
.btn-outline{background:transparent; color:var(--indigo-700); border:1.5px dashed var(--indigo-500);}
.btn-outline:hover{background:var(--indigo-700); color:#fff;}
.btn-sm{padding:9px 13px; font-size:13px; border-radius:8px; min-height:40px;}
.btn.hidden{display:none;}
.btn-icon-only{padding:10px; min-width:44px; min-height:44px; justify-content:center;}
.file-btn{cursor:pointer;}

/* ===== Tabs (top, tablet/desktop) ===== */
.tabbar{
  display:flex;
  background:var(--indigo-850);
  position:sticky;
  top:var(--topbar-h);
  z-index:29;
  border-bottom:3px dashed var(--brass-dark);
}
.tab-btn{
  flex:1 1 0;
  background:none; border:none; color:#aebada; cursor:pointer;
  padding:11px 8px; font-size:12.5px; font-weight:600; font-family:var(--font-body);
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:7px;
  border-bottom:3px solid transparent; margin-bottom:-3px;
}
.tab-btn.active{color:var(--brass-light); border-bottom-color:var(--brass); background:rgba(255,255,255,.03);}
.tab-btn:hover{color:#fff;}

/* ===== Layout ===== */
#app{max-width:1100px; margin:0 auto; padding:18px 16px 40px;}
.tab-panel{display:none;}
.tab-panel.active{display:block; animation:fadeIn .18s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:16px;
}
.panel-head h2{font-size:21px; color:var(--indigo-900);}
.head-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; width:100%; justify-content:space-between;}

.input{
  font-family:var(--font-body);
  border:1.5px solid var(--line);
  background:var(--paper);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  font-size:16px;
  color:var(--ink);
  min-height:44px;
}
.input:focus{outline:2px solid var(--indigo-500); outline-offset:1px; border-color:var(--indigo-500);}
.search-wrap{position:relative; flex:1 1 auto; min-width:150px; height:40px;}
.search-wrap .search-ico{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ink-soft); width:16px; height:16px; pointer-events:none;}
.search-input{width:100%; padding-left:34px;}

.hint{color:var(--ink-soft); font-size:12px;}

/* ===== Stat cards ===== */
.stats-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px; margin-bottom:18px;
}
.stat-card{
  background:var(--indigo-900); color:var(--cream); border-radius:var(--radius-md);
  padding:13px 14px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:8px;
}
.stat-card .stat-top{display:flex; align-items:center; justify-content:space-between;}
.stat-card .stat-ico{color:var(--brass); background:rgba(196,155,90,.15); border-radius:8px; padding:6px;}
.stat-card .num{font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--brass-light); line-height:1;}
.stat-card .label{font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:#aebada; font-family:var(--font-mono);}

.overdue-banner{
  display:flex; align-items:flex-start; gap:9px;
  background:var(--thread-red-bg); border:1.5px dashed var(--thread-red); color:#7a2e26;
  border-radius:var(--radius-md); padding:11px 14px; margin-bottom:16px; font-size:13px;
}
.overdue-banner .icon{color:var(--thread-red); margin-top:1px;}
.overdue-banner b{color:var(--thread-red);}

/* ===== Cards ===== */
.card{
  background:var(--paper); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); margin-bottom:16px; overflow:hidden;
  border:1px solid var(--line);
}
.card-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px dashed var(--line); gap:10px; flex-wrap:wrap;
}
.card-header h3{font-size:15.5px; color:var(--indigo-900);}
.card-body{padding:16px 18px;}
.danger-card{border-color:#f0d2cc;}
.actions-row{display:flex; gap:10px; flex-wrap:wrap;}

.table-wrap{overflow-x:auto;}
.data-table{width:100%; border-collapse:collapse; font-size:13px;}
.data-table th{
  text-align:left; padding:9px 12px; background:var(--indigo-900); color:var(--brass-light);
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  position:sticky; top:0;
}
.data-table td{padding:10px 12px; border-bottom:1px dashed var(--line); vertical-align:middle;}
.data-table tr:hover td{background:#f4ecd7;}
.data-table tr{cursor:pointer;}
.stage-cell{display:flex; flex-wrap:wrap; gap:4px;}

.empty-state{text-align:center; padding:30px 16px; color:var(--ink-soft);}
.empty-state.hidden{display:none;}
.empty-state .btn{margin-top:6px;}

/* ===== Lot / tag badge (signature element) ===== */
.lot-tag{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-weight:600; font-size:12px;
  background:var(--indigo-900); color:var(--brass-light);
  padding:4px 9px; border-radius:6px; border:1px dashed var(--brass);
  letter-spacing:.03em; white-space:nowrap;
}
.lot-tag .icon{width:12px; height:12px;}

/* ===== Card grid (entry cards) ===== */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:13px;}
.entry-card{
  background:var(--paper); border-radius:var(--radius-md); box-shadow:var(--shadow-card);
  border:1px dashed var(--line); padding:14px 15px; position:relative;
}
.entry-card .entry-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:8px;}
.entry-card .entry-title{font-family:var(--font-display); font-size:16px; color:var(--indigo-900); margin-top:5px;}
.entry-card .entry-sub{font-size:12px; color:var(--ink-soft); margin-top:2px;}
.entry-card .row{display:flex; justify-content:space-between; font-size:13px; padding:3px 0; gap:10px;}
.entry-card .row .k{color:var(--ink-soft);}
.entry-card .row .v{font-weight:600; text-align:right;}
.entry-card .thumb-row{display:flex; gap:8px; margin:10px 0;}
.entry-thumb{width:50px; height:50px; border-radius:8px; object-fit:cover; border:1px solid var(--line); cursor:pointer;}
.entry-actions{display:flex; gap:7px; margin-top:12px; flex-wrap:wrap;}
.entry-actions .btn{flex:0 0 auto;}

/* ===== Status pills ===== */
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
}
.pill .icon{width:12px; height:12px;}
.pill-cut{background:#eae3f2; color:#5b3d8a;}
.pill-print{background:var(--thread-amber-bg); color:var(--thread-amber);}
.pill-stitch{background:var(--thread-blue-bg); color:var(--thread-blue);}
.pill-done{background:var(--thread-green-bg); color:var(--thread-green);}
.pill-pending{background:var(--thread-red-bg); color:var(--thread-red);}
.pill-received{background:var(--thread-green-bg); color:var(--thread-green);}

/* ===== Parts chips ===== */
.parts-wrap{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0;}
.part-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:4px 9px;
  border-radius:7px; background:var(--surface); border:1px solid var(--line);
}
.part-chip.received{background:var(--thread-green-bg); border-color:#bcdcc9; color:var(--thread-green);}
.part-chip.pending{background:var(--thread-red-bg); border-color:#f0c6bf; color:var(--thread-red);}
.part-chip .dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0;}

/* ===== Forms ===== */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px;}
.form-grid.single{grid-template-columns:1fr;}
.field{display:flex; flex-direction:column; gap:5px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:11.5px; font-weight:700; color:var(--indigo-800); text-transform:uppercase; letter-spacing:.04em;}
.field .input, .field select, .field textarea{width:100%;}
textarea.input{resize:vertical; min-height:60px; font-family:var(--font-body);}

.computed-box{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--surface); border:1.5px dashed var(--brass); border-radius:var(--radius-sm);
  padding:10px 14px;
}
.computed-box .cb-label{font-size:12px; color:var(--ink-soft);}
.computed-box .cb-value{font-family:var(--font-display); font-size:22px; color:var(--indigo-900);}

.dyn-list{display:flex; flex-direction:column; gap:8px; margin-top:4px;}
.dyn-row{display:grid; gap:8px; align-items:center; grid-template-columns:1fr 84px auto;}
.dyn-row.row-part{grid-template-columns:1fr 1fr auto;}
.dyn-row-remove{background:var(--thread-red-bg); color:var(--thread-red); border:none; border-radius:8px; width:44px; height:44px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.dyn-add-btn{align-self:flex-start; margin-top:2px;}
.check-wrap{display:flex; align-items:center; gap:6px; font-size:12px;}
.check-wrap input[type="checkbox"]{width:18px; height:18px; flex-shrink:0;}
.check-wrap .input{flex:1;}

.completion-box{
  border:1.5px dashed var(--thread-green); background:var(--thread-green-bg); border-radius:var(--radius-md);
  padding:12px 14px; display:flex; flex-direction:column; gap:8px;
}
.completion-box .cline{display:flex; align-items:center; gap:9px;}
.completion-box .cline input[type="checkbox"]{width:20px; height:20px;}
.completion-box label{font-weight:700; color:var(--thread-green); font-size:13.5px;}

.photo-drop{
  border:2px dashed var(--brass); border-radius:var(--radius-md); padding:16px; text-align:center;
  background:var(--surface); cursor:pointer; position:relative;
}
.photo-drop .ph-inner{display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--ink-soft);}
.photo-drop .ph-inner .icon{color:var(--brass-dark);}
.photo-drop img{max-width:100%; max-height:160px; border-radius:8px; margin-top:8px;}
.photo-drop input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.photo-drop .ph-label{font-size:12.5px;}

.form-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px; border-top:1px dashed var(--line); padding-top:14px;}

/* ===== Modal ===== */
.modal-root{position:fixed; inset:0; z-index:100; display:flex; align-items:flex-end; justify-content:center;}
.modal-root.hidden{display:none;}
.modal-backdrop{position:absolute; inset:0; background:rgba(12,16,26,.55); backdrop-filter:blur(1px);}
.modal{
  position:relative; background:var(--paper); width:100%; max-width:640px; max-height:92vh;
  border-radius:18px 18px 0 0; box-shadow:var(--shadow-modal); overflow:hidden;
  display:flex; flex-direction:column; animation:slideUp .2s ease;
}
@media (min-width:720px){
  .modal-root{align-items:center;}
  .modal{border-radius:16px; max-height:88vh;}
}
@keyframes slideUp{from{transform:translateY(30px); opacity:.4;} to{transform:translateY(0); opacity:1;}}
.modal-header{
  display:flex; align-items:center; justify-content:space-between; padding:15px 18px;
  background:var(--indigo-900); color:var(--cream); flex-shrink:0;
}
.modal-header h3{color:var(--cream); font-size:16.5px;}
.modal-close{background:rgba(255,255,255,.1); border:none; color:var(--cream); width:40px; height:40px; border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;}
.modal-body{padding:18px 18px 22px; overflow-y:auto; -webkit-overflow-scrolling:touch;}

/* ===== Image viewer ===== */
.img-viewer{position:fixed; inset:0; background:rgba(10,12,20,.9); z-index:200; display:flex; align-items:center; justify-content:center;}
.img-viewer.hidden{display:none;}
.img-viewer img{max-width:92vw; max-height:88vh; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.5);}
.img-viewer-close{position:absolute; top:18px; right:18px; background:rgba(255,255,255,.12); color:#fff; border:none; width:44px; height:44px; border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}

/* ===== Toast ===== */
.toast-root{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:300; display:flex; flex-direction:column; gap:8px; align-items:center; width:100%; padding:0 16px;}
.toast{
  background:var(--indigo-900); color:var(--cream); padding:10px 16px; border-radius:999px;
  font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.3); border:1px solid var(--brass-dark);
  animation:toastIn .18s ease; display:flex; align-items:center; gap:8px; max-width:100%;
}
.toast .icon{color:var(--brass-light); flex-shrink:0;}
.toast.error{border-color:var(--thread-red); background:#4a2320;}
.toast.error .icon{color:#f0aca4;}
@keyframes toastIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* ===== Jobber cards ===== */
.jobber-card{background:var(--paper); border-radius:var(--radius-md); border:1px dashed var(--line); box-shadow:var(--shadow-card); padding:15px;}
.jobber-card .jname-row{display:flex; align-items:center; gap:9px;}
.jobber-card .javatar{background:var(--indigo-900); color:var(--brass-light); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.jobber-card .jname{font-family:var(--font-display); font-size:17px; color:var(--indigo-900);}
.jobber-card .jmeta{font-size:11.5px; color:var(--ink-soft); margin:4px 0 8px 43px;}
.holding-item{background:var(--surface); border-radius:9px; padding:8px 10px; margin-top:8px; font-size:12.5px;}
.holding-item .hi-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; gap:8px;}
.holding-item .days{font-family:var(--font-mono); font-weight:600; display:flex; align-items:center; gap:4px;}
.holding-item .days.overdue{color:var(--thread-red);}
.all-clear{display:flex; align-items:center; gap:7px; color:var(--thread-green); font-size:12.5px; margin-top:8px;}

/* ===== Lock screen ===== */
.lock-screen{
  position:fixed; inset:0; z-index:500; padding:20px;
  background:linear-gradient(160deg,var(--indigo-950),var(--indigo-800));
  display:flex; align-items:center; justify-content:center;
}
.lock-card{
  background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow-modal);
  padding:34px 26px; max-width:360px; width:100%; text-align:center;
  border:1.5px dashed var(--brass);
}
.lock-logo{margin:0 auto 14px; padding:5px; display:inline-flex;}
.lock-logo-img{height:40px; width:auto; border-radius:5px; display:block;}
.lock-card h2{color:var(--indigo-900); font-size:21px; margin-bottom:6px;}
.lock-card .hint{margin-bottom:20px;}
.lock-input-wrap{position:relative; margin-bottom:8px;}
.lock-input-wrap .input{width:100%; padding-right:50px; text-align:left;}
.pw-toggle{
  position:absolute; right:2px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--ink-soft);
  padding:10px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
}
.lock-error{color:var(--thread-red); font-size:12.5px; margin:2px 0 8px; text-align:left;}
.lock-submit{width:100%; justify-content:center; margin-top:8px;}
.lock-card.shake{animation:lockShake .35s;}
@keyframes lockShake{
  10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(4px);}
  30%,50%,70%{transform:translateX(-6px);} 40%,60%{transform:translateX(6px);}
}

/* ===== Misc ===== */
.hidden{display:none !important;}
.detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin:12px 0;}
.detail-grid .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-family:var(--font-mono);}
.detail-grid .v{font-size:14px; font-weight:600; margin-bottom:6px;}
.timeline{border-left:2px dashed var(--brass); margin:14px 0 0 8px; padding-left:16px;}
.timeline-item{margin-bottom:14px; position:relative;}
.timeline-item::before{content:""; position:absolute; left:-21px; top:3px; width:9px; height:9px; border-radius:50%; background:var(--brass);}
.timeline-item h4{font-size:13.5px; color:var(--indigo-900); margin-bottom:2px; display:flex; align-items:center; gap:6px;}
.timeline-item p{font-size:12.5px; color:var(--ink-soft);}

/* ===== Mobile: bottom navigation ===== */
@media (max-width:720px){
  body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px);}
  .tabbar{
    position:fixed; top:auto; bottom:0; left:0; right:0; height:var(--nav-h);
    padding-bottom:env(safe-area-inset-bottom);
    border-bottom:none; border-top:3px dashed var(--brass-dark);
    box-shadow:0 -4px 16px rgba(0,0,0,.18);
  }
  .tab-btn{flex-direction:column; gap:2px; padding:8px 4px 6px; font-size:10.5px; border-bottom:none; margin-bottom:0; border-top:3px solid transparent; margin-top:-3px;}
  .tab-btn.active{border-top-color:var(--brass); border-bottom-color:transparent;}
  .tab-ico .icon{width:20px; height:20px;}
  #app{padding-top:14px;}
}

@media (max-width:640px){
  .form-grid{grid-template-columns:1fr;}
  .brand-text h1{font-size:15px;}
  .brand-text span{font-size:9.5px;}
  .head-actions{flex-direction:column; align-items:stretch;}
  .head-actions .btn{width:100%; justify-content:center;}
  .panel-head h2{font-size:19px;}

  /* Card action buttons: stretch to fill the row so they're easy to tap,
     instead of small text-width buttons crammed together. */
  .entry-actions{gap:8px;}
  .entry-actions .btn{flex:1 1 0; justify-content:center; min-width:0; padding-left:8px; padding-right:8px;}
  .entry-actions .btn .btn-label, .entry-actions .btn{overflow:hidden; text-overflow:ellipsis;}

  .entry-card{padding:16px 16px;}
  .entry-card .entry-title{font-size:17px;}
  .entry-card .row{font-size:14px; padding:4px 0;}
  .part-chip, .pill{font-size:12.5px; padding:5px 11px;}

  /* Bigger checkboxes and comfortable spacing in dynamic rows on touch screens */
  .check-wrap input[type="checkbox"]{width:22px; height:22px;}
  .completion-box .cline input[type="checkbox"]{width:24px; height:24px;}
  .dyn-row{gap:10px;}
  .dyn-row.row-part{display:flex; flex-wrap:wrap; gap:8px;}
  .dyn-row.row-part .dr-name{flex:1 1 100%;}
  .dyn-row.row-part .check-wrap{flex:1 1 auto; min-width:0;}
  .dyn-row.row-part .dyn-row-remove{flex:0 0 44px;}
}

@media (max-width:380px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
}