:root{
  --accent:#6d28d9;
  --text:#e8ecff;
  --muted:#aab2d5;

  --bg-main:#0b1020;
  --bg-card:#111a33;
  --bg-nav:rgba(8,12,26,0.85);

  --border-fields:rgba(255,255,255,0.12);
  --border-buttons:rgba(255,255,255,0.12);
  --border-nav:rgba(255,255,255,0.12);
  --border-card:rgba(255,255,255,0.12);

  --radius-fields:12px;
  --radius-buttons:12px;
  --radius-nav:12px;
  --radius-card:16px;

  --btn-bg:rgba(255,255,255,0.04);
  --btn-bg-hover:rgba(255,255,255,0.07);
  --btn-text:var(--text);

  --btn-primary-bg:var(--accent);
  --btn-primary-bg-hover:#7c3aed;
  --btn-primary-text:#ffffff;

  --badge-text:var(--text);
  --badge-font-size:13px;
  --badge-pad-x:12px;
  --badge-pad-y:8px;
}

*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg-main); color:var(--text);}

body.is-login-view{
  background:
    linear-gradient(rgba(63,25,77,0.58), rgba(63,25,77,0.58)),
    radial-gradient(circle at 20% 10%, rgba(255,183,198,0.25), transparent 50%),
    linear-gradient(130deg, #7d587e 0%, #3f2d50 55%, #1f1730 100%);
  min-height:100vh;
  overflow-x:hidden;
}

.topbar{position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 16px; background:var(--bg-nav); backdrop-filter: blur(10px); border-bottom:1px solid var(--border-nav);}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:0.3px; color:#282828}
.brand-logo{height:28px; width:auto; border-radius:8px}
.login-hero-logo{display:none; width:auto;}
.nav{display:flex; gap:10px}
.nav a{color:#565656; text-decoration:none; padding:8px 10px; border-radius:var(--radius-nav); border:1px solid transparent}
.nav a.active{color:#282828; font-weight: 600; border-color:var(--border-nav); background:rgba(255,255,255,0.04)}

.container{max-width:1180px; margin:16px auto; padding:0 16px 40px}

body.is-login-view .container{
  min-height:calc(100vh - 120px);
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:none;
  margin:0;
  padding:32px 16px;
}

body.is-login-view .topbar{
  background:#ffffff;
  border-bottom:0;
  justify-content:flex-start;
  align-items:center;
  flex-direction:column;
  gap:8px;
  min-height:120px;
  padding:8px 0 0;
  backdrop-filter:none;
}

body.is-login-view .brand{
  flex-direction:column;
  gap:0;
  text-align:center;
  color:#622f85;
  line-height:1;
  letter-spacing:0;
}

body.is-login-view .brand-logo{
  height:74px;
  display:block;
}

body.is-login-view #brandText{
  font-family:Georgia, "Times New Roman", serif;
  font-weight:500;
  display:none;
}

body.is-login-view #brandText::after{
  content:none;
}

body.is-login-view .topbar::after{
  content:"COURIER COST CALCULATOR";
  display:block;
  align-self:stretch;
  box-sizing:border-box;
  background:#3e4660;
  color:#f0f0f0;
  text-align:center;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size:16px;
  letter-spacing:1px;
  font-weight:500;
  padding:8px 16px;
}

body.is-login-view .nav,
body.is-login-view .topbar-right{
  display:none;
}

body.is-login-view .login-hero-logo{
  display:block;
  max-width:200px;
}

.card{background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--radius-card); padding:16px; box-shadow:0 10px 30px rgba(0,0,0,0.25)}

.row{display:flex; align-items:center; justify-content:space-between; gap:16px}
.topbar-right{display:flex; gap:8px; align-items:center}

label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}

input, select{width:100%; padding:10px 12px; border-radius:var(--radius-fields); border:1px solid var(--border-fields); background:rgba(0,0,0,0.2); color:var(--text); outline:none}
input:focus, select:focus{border-color:rgba(109,40,217,0.7); box-shadow:0 0 0 3px rgba(109,40,217,0.2)}

input[type="color"]{padding:6px 8px; height:42px}

.btn{padding:10px 12px; border-radius:var(--radius-buttons); border:1px solid var(--border-buttons); background:var(--btn-bg); color:var(--btn-text); cursor:pointer}
.btn:hover{background:var(--btn-bg-hover)}
.btn.primary{background:var(--btn-primary-bg); border-color:rgba(255,255,255,0.15); color:var(--btn-primary-text)}
.btn.primary:hover{background:var(--btn-primary-bg-hover)}

.muted{color:var(--muted)}
.hint{margin-top:10px; color:#ffb4b4}

.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.grid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.span2{grid-column: span 2}

.tableWrap{overflow:auto}
.table{width:100%; border-collapse:collapse; font-size:13px}
.table th,.table td{padding:10px 10px; border-bottom:1px solid var(--border-card); text-align:left; vertical-align:top}
.table th{color:var(--muted); font-weight:600}
.table tr:hover td{background:rgba(255,255,255,0.03)}

.kpi{font-size:16px; font-weight:700; padding:10px 12px; border-radius:var(--radius-fields); border:1px solid var(--border-fields); background:rgba(255,255,255,0.03)}
.kpi.big{font-size:20px}

.packs{display:flex; flex-direction:column; gap:12px}
.pack-card{border:1px solid var(--border-card); border-radius:var(--radius-card); padding:12px; background:rgba(255,255,255,0.02)}
.pack-header{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px}
.badge{padding:var(--badge-pad-y) var(--badge-pad-x); border-radius:999px; border:1px solid rgba(255,255,255,0.12); font-size:var(--badge-font-size); color:var(--badge-text); background:rgba(255,255,255,0.06); display:inline-flex; align-items:center; gap:6px; min-height:32px}

/* Dimension warnings */
input.warn{border-color:rgba(255,165,0,0.9) !important; background:rgba(255,165,0,0.12) !important}
input.danger{border-color:rgba(255,0,0,0.9) !important; background:rgba(255,0,0,0.12) !important}

.inline-controls{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.check{display:flex; align-items:center; gap:8px; margin:0; color:var(--text)}
.check input{width:auto}

.actions{display:flex; gap:8px; margin-top:12px}

.login-screen{
  width:100%;
  display:flex;
  justify-content:center;
}

.login-card{
  width:min(820px, 100%);
  padding:42px 64px 34px;
  border:3px solid transparent;
  border-radius:0;
  background:
    linear-gradient(#f4f4f4,#f4f4f4) padding-box,
    linear-gradient(90deg, #ff6b7b 0%, #ffd28f 100%) border-box;
  box-shadow:0 18px 40px rgba(0,0,0,0.28);
}

.login-card h2{
  margin:0 0 30px;
  text-align:center;
  color:#2a2b35;
  font-size:38px;
  font-weight:400;
}

.login-card input{
  border:3px solid rgba(72,74,88,0.55);
  border-radius:0;
  background:#ffffff;
  color:#20222d;
  min-height:54px;
  font-size:22px;
}

.login-card input:focus{
  border-color:#5e3e80;
  box-shadow:0 0 0 4px rgba(104,71,144,0.2);
}

.login-actions{
  justify-content:center;
  margin-top:26px;
}

.login-actions .btn{
  min-width:176px;
  min-height:50px;
  font-size:28px;
  text-transform:uppercase;
  border-radius:0;
  border:2px solid rgba(80,82,96,0.65);
}

.login-actions .btn.primary{
  background:linear-gradient(90deg, #ff5d6e 0%, #f8b074 100%);
  color:#fff;
}

.login-actions .btn.primary:hover{
  background:linear-gradient(90deg, #ff4f62 0%, #f7a768 100%);
}

.login-card .hint{
  text-align:center;
  margin-top:14px;
  font-size:16px;
  color:#e24343;
}

.modal{position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; padding:18px}
.modal-card{width:min(800px, 100%); background:var(--bg-card); border:1px solid var(--border-card); border-radius:var(--radius-card); padding:16px}
.columnsList{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px}
.columnsList label{display:flex; gap:10px; align-items:center; border:1px solid var(--border-card); padding:8px 10px; border-radius:var(--radius-fields); margin:0; color:var(--text)}
.columnsList input{width:auto}

/* Rules editor */
.rules{display:flex; flex-direction:column; gap:12px}
.ruleRow{border:1px solid var(--border-card); border-radius:var(--radius-card); padding:12px; background:rgba(255,255,255,0.02)}
.ruleTop{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.ruleTop .left{display:flex; gap:10px; align-items:center; flex-wrap:wrap; flex:1}
.ruleTop .right{display:flex; gap:8px; align-items:center}
.ruleIfThen{display:grid; grid-template-columns: 1fr; gap:10px; margin-top:10px}
.ruleIfThenRow{display:grid; grid-template-columns: 90px 160px 90px 1fr 120px 1fr; gap:8px; align-items:end}
.ruleIfThenRow small{color:var(--muted)}
.miniBtn{padding:8px 10px; border-radius:var(--radius-buttons); border:1px solid var(--border-buttons); background:var(--btn-bg); color:var(--btn-text); cursor:pointer}
.miniBtn:hover{background:var(--btn-bg-hover)}
.danger{border-color:rgba(255,80,80,0.35) !important}

@media (max-width: 980px){
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .columnsList{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .row{flex-direction:column; align-items:stretch}
  .grid2{grid-template-columns:1fr}

  body.is-login-view .topbar{min-height:92px; padding-top:6px}
  body.is-login-view .login-hero-logo{display:block; max-width:200px;}
  body.is-login-view .topbar::after{font-size:14px; padding:7px 12px}
  .login-card{padding:28px 20px 24px}
  .login-card h2{font-size:28px; margin-bottom:16px}
  .login-card input{min-height:48px; font-size:18px}
  .login-actions .btn{min-width:152px; min-height:46px; font-size:22px}
  .login-card .hint{font-size:14px}
}