:root{
  --bg:#f6f3ec; --bg-image: radial-gradient(circle at 15% 0%, #eef0e2 0%, #f6f3ec 45%);
  --card:#ffffff; --text:#2a2721; --muted:#8a8270;
  --border:#e7e0d1; --accent:#3c6e4f; --accent-hover:#2f5a40; --accent-soft:#e5efe6;
  --amber:#b8752e; --amber-soft:#f7ecdd;
  --green:#3c6e4f; --green-soft:#e5efe6; --red:#a8492f; --red-soft:#f6e8e3;
  --choco:#7b4a2d; --tea:#4a7a8c;
  --tab-bg:#eee9dc;
  --shadow: 0 1px 2px rgba(43,38,25,0.04), 0 4px 14px rgba(43,38,25,0.06);
  --shadow-hover: 0 2px 4px rgba(43,38,25,0.06), 0 10px 24px rgba(43,38,25,0.10);
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --accent-grad: linear-gradient(135deg, color-mix(in srgb, var(--accent) 80%, white 20%), var(--accent-hover));
  --amber-grad: linear-gradient(135deg, color-mix(in srgb, var(--amber) 78%, white 22%), var(--amber));
}
*{box-sizing:border-box;}
html, body{ height:100%; }
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--bg) var(--bg-image); color:var(--text); padding:32px 28px;
  -webkit-font-smoothing:antialiased;
}
input, select, textarea{ user-select:text; }
.container{max-width:1100px; margin:0 auto;}

.header{display:flex; align-items:center; gap:14px; margin-bottom:22px;}
.header .icon{
  font-size:28px; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:var(--amber-grad); border-radius:var(--r-lg); flex:0 0 auto;
  box-shadow:0 3px 10px rgba(184,117,46,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
}
h1{ font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif; font-size:22px; margin:0 0 3px; font-weight:600; }
.sub{color:var(--muted); font-size:13px;}

.tabs{ display:inline-flex; gap:4px; margin-bottom:22px; flex-wrap:wrap; background:var(--tab-bg); padding:5px; border-radius:var(--r-lg); }
.tab-btn{ padding:9px 16px; border:none; border-radius:var(--r-sm); background:transparent; color:var(--muted); font-size:14px; cursor:pointer; font-weight:500; transition:all .16s var(--ease-spring); }
.tab-btn:hover{color:var(--text);}
.tab-btn.active{background:var(--card); color:var(--accent); box-shadow:var(--shadow); font-weight:600;}
.panel{display:none;}
.panel.active{display:block; animation: fadeIn .2s ease;}
@keyframes fadeIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; margin-bottom:18px; box-shadow:var(--shadow); }
.card h2{ font-size:15px; margin:0 0 16px; font-weight:600; display:flex; align-items:center; gap:8px; justify-content:space-between; }
label{font-size:12.5px; color:var(--muted); display:block; margin-bottom:5px; font-weight:500;}
input, select, textarea{
  width:100%; padding:10px 11px; border:1px solid var(--border); border-radius:var(--r-sm);
  font-size:14px; background:#fffdf9; color:var(--text); font-family:inherit;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.row{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
.row > div{flex:1; min-width:140px;}

button{font-family:inherit;}
button.primary{
  background:var(--accent-grad); color:#fff; border:none; padding:11px 20px;
  border-radius:var(--r-md); font-size:14px; cursor:pointer; font-weight:600;
  box-shadow:0 2px 8px rgba(60,110,79,0.28); transition:transform .16s var(--ease-spring), filter .15s ease;
}
button.primary:hover{ filter:brightness(1.06); transform:translateY(-1px); }
button.primary:disabled{ opacity:.5; cursor:not-allowed; }
button.secondary{
  background:#fff; color:var(--text); border:1px solid var(--border); padding:9px 15px;
  border-radius:var(--r-sm); font-size:13px; cursor:pointer; font-weight:500; transition:all .16s var(--ease-spring);
}
button.secondary:hover{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-hover);}
button.danger{
  color:var(--red); background:#fff; border:1px solid var(--border); padding:7px 12px;
  border-radius:var(--r-sm); cursor:pointer; font-size:12px; font-weight:500;
}
button.danger:hover{background:var(--red-soft); border-color:var(--red);}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{text-align:left; color:var(--muted); font-weight:600; font-size:12px; padding:8px 10px; border-bottom:1px solid var(--border);}
td{padding:10px; border-bottom:1px solid var(--border);}
tr:last-child td{border-bottom:none;}
tr:hover td{background:#fbfaf6;}

.badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600; }
.badge-draft{background:var(--tab-bg); color:var(--muted);}
.badge-in_assembly{background:var(--amber-soft); color:var(--amber);}
.badge-shipped{background:#e5eef2; color:var(--tea);}
.badge-calculated{background:var(--green-soft); color:var(--green);}
.badge-cancelled{background:var(--red-soft); color:var(--red);}

.item-row{display:flex; gap:10px; align-items:flex-end; margin-bottom:10px;}
.item-row > div{flex:1;}
.item-row .qty, .item-row .price{max-width:110px;}

.empty{color:var(--muted); font-size:13.5px; padding:20px 0; text-align:center;}
.error-text{color:var(--red); font-size:13px; margin-top:8px;}
.toast{
  position:fixed; bottom:24px; right:24px; background:var(--text); color:#fff; padding:12px 18px;
  border-radius:var(--r-md); font-size:13.5px; box-shadow:var(--shadow-hover); opacity:0; transform:translateY(8px);
  transition:all .25s var(--ease-spring); pointer-events:none; z-index:50;
}
.toast.show{opacity:1; transform:translateY(0);}

.login-wrap{max-width:360px; margin:12vh auto; text-align:center;}
.login-wrap .card{text-align:left;}