:root{
  --bg:#0b1220;
  --panel:#0f1a2e;
  --text:#e7eefc;
  --muted:#9db0d0;
  --line:#213455;
}

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

.topbar{
  position:sticky; top:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px;
  background:rgba(15,26,46,.9);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(8px);
}

.brand{ font-weight:700; letter-spacing:.3px; }
.nav a{
  color:var(--muted);
  text-decoration:none;
  margin-left:12px;
}
.nav a:hover{ color:var(--text); }

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

.h1{ margin: 18px 0 14px; font-size: 26px; }
.h2{ margin: 18px 0 10px; font-size: 18px; color: var(--muted); }

/* --- layout --- */
.layout{
  display:flex;
  min-height:100vh;
}

.sidebar{
  width: 320px;
  padding: 18px;
  background: rgba(0,0,0,.25);
  border-right: 1px solid rgba(255,255,255,.08);
}

.content{
  flex:1;
  padding: 24px 20px;
}

/* --- sidebar cards --- */
.sb-title{
  font-size: 18px;
  font-weight: 800;
  margin: 2px 0 14px;
}

.sb-btn{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 14px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: inherit;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  margin-bottom: 10px;
}

.sb-btn:hover{
  background: rgba(255,255,255,.07);
}

.sb-emoji{
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 18px;
}

.sb-main{
  font-weight: 800;
  font-size: 14px;
  line-height: 1.1;
}

.sb-sub{
  font-size: 12px;
  opacity: .8;
  margin-top: 3px;
}

.sb-note{
  margin-top: 12px;
  font-size: 12px;
  opacity: .8;
}

/* mobile */
@media (max-width: 900px){
  .layout{ flex-direction: column; }
  .sidebar{ width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
}

.sb-btn.active{
  border-color: rgba(120,180,255,.55);
  background: rgba(120,180,255,.12);
  box-shadow: 0 0 0 2px rgba(120,180,255,.10) inset;
}

.sb-btn.active .sb-main{
  color: #cfe6ff;
}

.page-title{
  font-size: 28px;
  font-weight: 900;
  margin: 6px 0 18px;
}

.panel{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
}

.panel-title{
  font-weight: 800;
  margin-bottom: 10px;
  opacity: .95;
}

.form-row{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.input{
  flex: 1;
  min-width: 260px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: inherit;
  outline: none;
}

.input:focus{
  border-color: rgba(120,180,255,.55);
  box-shadow: 0 0 0 3px rgba(120,180,255,.12);
}

.input-sm{
  flex: 0 0 160px;
  min-width: 160px;
}

.checkbox{
  display:flex;
  align-items:center;
  gap: 8px;
  opacity: .9;
  font-size: 13px;
}

.btn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor: pointer;
  font-weight: 700;
}

.btn:hover{ background: rgba(255,255,255,.10); }

.btn-primary{
  border-color: rgba(120,180,255,.55);
  background: rgba(120,180,255,.16);
}

.btn-danger{
  border-color: rgba(255,120,120,.45);
  background: rgba(255,120,120,.12);
}

.table-wrap{
  max-height: 68vh;
  overflow:auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
}

.table{
  width: 100%;
  border-collapse: collapse;
  background: rgba(0,0,0,.18);
}

.table thead th{
  position: sticky;
  top: 0;
  background: rgba(15,25,45,.95);
  backdrop-filter: blur(6px);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-size: 13px;
}

.table td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  vertical-align: middle;
}

.table tr:hover{
  background: rgba(255,255,255,.04);
}

.muted{ opacity: .75; }
.price{ font-weight: 900; }

/* --- Quick links (sidebar) --- */
.sidebar a,
.sidebar a:visited,
.sidebar a:hover,
.sidebar a:active {
  color: inherit;
  text-decoration: none;
}

.quick-links {
  display: grid;
  gap: 12px;
}

.quick-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.06);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.quick-link:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.085);
  border-color: rgba(255,255,255,0.14);
}

.quick-link .icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  flex: 0 0 36px;
}

.quick-link .txt {
  line-height: 1.15;
}

.quick-link .title {
  font-weight: 800;
  font-size: 16px;
  color: #eaf2ff;
}

.quick-link .sub {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(234,242,255,0.75);
}

/* ===== Quick links (sidebar) - кнопочный стиль + активная подсветка ===== */

.sidebar a,
.sidebar a:visited,
.sidebar a:hover,
.sidebar a:active {
  color: inherit;
  text-decoration: none;
}

.quick-links { display: grid; gap: 12px; }

/* сама кнопка */
.quick-link{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top: 15px;

  padding: 14px 14px;
  border-radius: 16px;

  /* "кнопка" */
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 10px 28px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.10);

  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.quick-link:hover{
  transform: translateY(-1px);
  border-color: rgba(120,190,255,.28);
  background: linear-gradient(180deg, rgba(120,190,255,.16), rgba(255,255,255,.06));
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* иконка слева */
.quick-link .icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:grid;
  place-items:center;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  flex: 0 0 38px;
}

/* текст */
.quick-link .title{
  font-weight: 850;
  font-size: 16px;
  color: #eaf2ff;
  line-height: 1.05;
}
.quick-link .sub{
  margin-top: 5px;
  font-size: 13px;
  color: rgba(234,242,255,.72);
}

/* ===== АКТИВНАЯ КНОПКА (подсветка текущей страницы) ===== */
.quick-link.is-active{
  border-color: rgba(120,190,255,.55);
  background: linear-gradient(180deg, rgba(120,190,255,.22), rgba(255,255,255,.07));
  box-shadow:
    0 14px 36px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.14);
  position: relative;
}

.quick-link.is-active::before{
  content:"";
  position:absolute;
  left:-1px; top:-1px; bottom:-1px;
  width: 5px;
  border-radius: 16px 0 0 16px;
  background: rgba(120,190,255,.85);
  box-shadow: 0 0 18px rgba(120,190,255,.45);
}

/* === ORDER LOOK (clean SaaS) === */
.order-wrap{ max-width: 860px; margin: 0 auto; }

.order-top{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px; margin: 8px 0 14px;
}
.order-title{
  font-size:34px; font-weight:900; letter-spacing:.2px;
}
.order-sub{ color: var(--muted); margin-top:6px; }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-size:13px; color: var(--muted);
}

.pill b{ color:#fff; font-weight:800; }

.pill-new{ border-color: rgba(255,90,90,.45); background: rgba(255,90,90,.12); }
.pill-prog{ border-color: rgba(60,220,140,.45); background: rgba(60,220,140,.12); }
.pill-done{ border-color: rgba(160,160,160,.35); background: rgba(160,160,160,.10); }

.grid2{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:14px;
}
@media (max-width: 900px){ .grid2{ grid-template-columns:1fr; } }

.box{
  border-radius:18px;
  padding:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(15,25,45,.35);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.box h3{ margin:0 0 10px; font-size:16px; }
.kv{ display:grid; grid-template-columns: 120px 1fr; gap:8px 12px; color: var(--muted); }
.kv b{ color:#fff; font-weight:800; }

.items{ margin:0; padding-left:18px; color: var(--muted); }
.items li{ padding:5px 0; }

.total{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:12px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.total .sum{ font-size:22px; font-weight:900; color:#fff; }

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

.actions a{
  text-decoration: none;
}
.btn2{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:#fff;
  padding:11px 16px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn2:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); }
.btn2:active{ transform: translateY(0); }

.btn-accept{ background: rgba(60,130,255,.22); border-color: rgba(60,130,255,.35); }
.btn-done{ background: rgba(60,220,140,.20); border-color: rgba(60,220,140,.35); }

.timer{
  font-variant-numeric: tabular-nums;
}

.overdue{
  animation: pulseRed 1s infinite;
  border-color: rgba(255,90,90,.45) !important;
}
@keyframes pulseRed{
  0%{ box-shadow: 0 0 0 rgba(255,90,90,0); }
  50%{ box-shadow: 0 0 26px rgba(255,90,90,.22); }
  100%{ box-shadow: 0 0 0 rgba(255,90,90,0); }
}

.order-card{

  max-width:650px;

  background: rgba(20,30,50,.6);

  border:1px solid rgba(255,255,255,.08);

  border-radius:18px;

  padding:22px;

  box-shadow:0 10px 30px rgba(0,0,0,.25);

}

.order-title{

  font-size:32px;

  font-weight:800;

  margin-bottom:14px;

}

.order-info{

  line-height:1.8;

  color:var(--muted);

}

.order-info b{

  color:white;

}

.order-section{

  margin-top:18px;

}

.order-section h3{

  margin-bottom:8px;

}

.order-total{

  font-size:22px;

  font-weight:800;

  margin-top:8px;

}

.order-buttons{

  margin-top:18px;

  display:flex;

  gap:10px;

}

.btn-accept{

  background:#3a7cff;

}

.btn-done{

  background:#2ecc71;

}

.btn-accept,.btn-done{

  padding:10px 18px;

  border-radius:10px;

  border:none;

  font-weight:600;

  cursor:pointer;

}

.order-page{

max-width:700px;
margin:auto;

}

.back-btn{

display:inline-block;

margin-bottom:20px;

padding:10px 16px;

border-radius:10px;

background:#1f2a3c;

border:1px solid rgba(255,255,255,.1);

text-decoration:none;

color:white;

transition:.2s;

}

.back-btn:hover{

background:#2b3b55;

}

.order-card{

background:rgba(20,30,50,.6);

border:1px solid rgba(255,255,255,.08);

border-radius:18px;

padding:24px;

box-shadow:0 10px 30px rgba(0,0,0,.25);

}

.order-title{

font-size:32px;

font-weight:800;

margin-bottom:16px;

}

.order-info{

line-height:1.8;

color:#cfd8e3;

margin-bottom:18px;

}

.order-section{

margin-top:16px;

}

.order-section h3{

margin-bottom:6px;

}

.order-total{

font-size:22px;

font-weight:800;

margin-top:8px;

}

.order-buttons{

display:flex;

gap:12px;

margin-top:18px;

}

.btn{

border:none;

border-radius:10px;

padding:12px 20px;

font-weight:700;

cursor:pointer;

font-size:15px;

transition:.2s;

}

.btn-accept{

background:#3a7cff;

color:white;

}

.btn-accept:hover{

background:#4d8dff;

}

.btn-done{

background:#2ecc71;

color:white;

}

.btn-done:hover{

background:#39d47c;

}

.order-time{

font-weight:700;

font-size:18px;

color:#9bd3ff;

}

.overdue{

color:#ff5c5c;

}


.manual-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:16px;
  align-items:start;
  margin-top:16px;
}

@media (max-width: 900px){
  .manual-layout{
    grid-template-columns: 1fr;
  }
}

.manual-left,
.manual-right,
.manual-cart-box{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:16px;
}

.manual-panel-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:12px;
}

.manual-categories{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.manual-category-btn{
  display:block;
  padding:12px 14px;
  border-radius:12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: inherit;
  text-decoration:none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.manual-category-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.05);
}

.manual-category-btn-active{
  border-color: rgba(120,190,255,.6);
  box-shadow: 0 0 0 1px rgba(120,190,255,.2) inset;
}

.manual-back-btn{
  text-decoration:none;
}

.manual-table{
  width:100%;
  border-collapse:collapse;
}

.manual-table th,
.manual-table td{
  padding:12px 10px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  text-align:left;
  vertical-align:middle;
}

.manual-table th{
  color: var(--muted);
  font-weight:600;
}

.manual-add-form{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
}

.qty{
  width:38px;
  height: 38px;
  text-align: center;
  background:rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;
  color:white;
  padding-top: 5px;
}

.btn-plus,
.btn-minus{
  width:38px;
  height:38px;
  border:none;
  border-radius:10px;
  background:rgba(120,190,255,.6);
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

.manual-cart-box{
  margin-top:16px;
}

.manual-cart-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.manual-cart-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.manual-cart-total{
  margin-top:14px;
  font-size:18px;
  font-weight:800;
}

.manual-cart-actions{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

/* убрать стрелочки number input */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}


.manual-cart-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.manual-minus-form{
  margin:0;
}


.manual-done-form{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.manual-payment-select{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;
  border-radius:10px;
  padding:10px 12px;
}

.manual-payment-select option{
  background-color: var(--line);
  color:#fff;
  border: none;
  display: flex;
}


.manual-payment-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;

  border-radius:10px;
  padding:10px 36px 10px 14px;

  font-size:14px;
  cursor:pointer;

  position:relative;
}

/* стрелочка */
.manual-payment-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
}

/* hover */
.manual-payment-select:hover{
  border-color: rgba(120,190,255,.6);
}

/* focus */
.manual-payment-select:focus{
  outline:none;
  border-color:rgba(120,190,255,.6);
  box-shadow:0 0 0 1px rgba(58,124,255,.4);
}


.manual-right{
  display:flex;
  flex-direction:column;
  min-height:0;
}

.manual-table-wrap{
  max-height:65vh;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;
}

.manual-table-wrap::-webkit-scrollbar{
  width:8px;
}

.manual-table-wrap::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.18);
  border-radius:10px;
}

.manual-table-wrap::-webkit-scrollbar-track{
  background:transparent;
}

/* тёмный скролл */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0f172a;
}

::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: #475569;
}