/* ============================================================
   ВХОД / РЕГИСТРАЦИЯ И АДМИН-ПАНЕЛЬ
   Те же токены, что и на витрине (css/app.css)
   ============================================================ */

/* ============================ ВХОД ============================ */
.auth{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center; padding:24px 16px;
  overflow-y:auto;
  background:
    radial-gradient(60% 60% at 20% 10%, rgba(255,77,46,.20), transparent 62%),
    radial-gradient(50% 50% at 85% 85%, rgba(255,194,75,.10), transparent 60%),
    #08080a;
}
.auth.is-on{ display:flex; }
.auth__card{
  width:100%; max-width:420px; margin:auto;
  padding:30px 28px 24px; border-radius:26px;
  background:rgba(20,20,24,.86); border:1px solid var(--stroke-2);
  backdrop-filter:blur(40px) saturate(180%); -webkit-backdrop-filter:blur(40px) saturate(180%);
  box-shadow:0 40px 90px -24px rgba(0,0,0,.9);
  animation:authIn .4s var(--ease) both;
}
@keyframes authIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } }
.auth__logo{ display:flex; align-items:center; gap:9px; font-size:17px; font-weight:800; letter-spacing:-.035em; }
.auth__logo span{ font-size:26px; }
.auth__logo b{ color:var(--accent); }
.auth__t{ font-size:28px; margin-top:20px; }
.auth__s{ font-size:14.5px; color:var(--tx-2); line-height:1.5; margin-top:9px; }
.auth__s b{ color:var(--tx); font-weight:650; }
.auth__form{ display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.auth__err{
  font-size:13.5px; color:#ffb3ab; padding:10px 13px; border-radius:12px;
  background:rgba(255,69,58,.12); border:1px solid rgba(255,69,58,.3);
}
.auth__alt{ font-size:14px; color:var(--tx-2); text-align:center; margin-top:14px; }
.auth__alt button{ color:var(--accent); font-weight:600; font-size:14px; }
.auth__alt button:hover{ opacity:.75; }
.auth__note{ font-size:12px; color:var(--tx-3); text-align:center; margin-top:18px; line-height:1.45; }

/* поля форм (общие для входа и админки) */
.fld{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.fld__l{ font-size:12.5px; font-weight:650; color:var(--tx-3); text-transform:uppercase; letter-spacing:.05em; }
.fld input, .fld textarea, .fld select{
  width:100%; min-width:0; height:46px; padding:0 14px; border-radius:13px; font-size:15px; outline:none;
  background:var(--glass); border:1px solid var(--stroke); color:var(--tx);
  transition:border-color .18s, background .18s;
}
.fld textarea{ height:auto; padding:12px 14px; line-height:1.45; resize:vertical; font-family:inherit; }
.fld select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx-3) 50%),linear-gradient(135deg,var(--tx-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 21px, calc(100% - 12px) 21px; background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
  padding-right:34px;
}
.fld input:focus, .fld textarea:focus, .fld select:focus{ border-color:var(--accent); background:var(--glass-2); }
.fld--c input{ height:46px; padding:4px; cursor:pointer; }
.fld option{ background:#17171b; color:var(--tx); }

/* ============================ КАРКАС АДМИНКИ ============================ */
.hd__admin{
  flex:none; height:40px; padding:0 14px; border-radius:12px; white-space:nowrap;
  font-size:14.5px; font-weight:650;
  display:flex; align-items:center; gap:7px;
  background:var(--glass-2); border:1px solid var(--stroke-2);
  transition:.18s;
}
.hd__admin:hover{ background:rgba(255,255,255,.14); }
.hd__admin.is-on{ color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:transparent; }
.rolechip{
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:3px 7px; border-radius:7px; vertical-align:middle;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
}
body.is-admin .ft{ display:none; }

.a-shell{ display:grid; grid-template-columns:216px minmax(0,1fr); gap:24px; padding:28px 0 60px; align-items:start; }
.a-side{ position:sticky; top:calc(var(--hd) + 20px); display:flex; flex-direction:column; gap:3px; }
.a-nav{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:11px 13px; border-radius:12px; font-size:15px; font-weight:600; color:var(--tx-2);
  transition:.16s;
}
.a-nav span{ font-size:16px; width:20px; text-align:center; }
.a-nav:hover{ color:var(--tx); background:var(--glass); }
.a-nav.is-on{ color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 10px 24px -12px rgba(255,77,46,.9); }
.a-nav--exit{ margin-top:10px; color:var(--tx-3); }

.a-main{ min-width:0; display:flex; flex-direction:column; gap:18px; }
.a-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.a-h{ font-size:27px; }
.a-sub{ font-size:14px; color:var(--tx-3); margin-top:5px; line-height:1.5; }
.a-sub b{ color:var(--tx); }
.a-hint{ font-size:12.5px; color:var(--tx-3); line-height:1.5; }
.a-empty{
  padding:22px; border-radius:var(--r); text-align:center; font-size:14.5px; color:var(--tx-2); line-height:1.5;
  background:var(--glass); border:1px dashed var(--stroke-2);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}

/* ============================ ОБЗОР ============================ */
.a-kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(168px,1fr)); gap:12px; }
.a-kpi{ padding:16px 18px; border-radius:var(--r); background:var(--glass); border:1px solid var(--stroke); }
.a-kpi--hot{ background:linear-gradient(140deg, rgba(255,77,46,.22), rgba(255,138,61,.06)); border-color:rgba(255,138,61,.3); }
.a-kpi__t{ display:block; font-size:12.5px; color:var(--tx-3); font-weight:600; }
.a-kpi__v{ display:block; font-size:26px; font-weight:850; letter-spacing:-.03em; margin:5px 0 3px; font-variant-numeric:tabular-nums; }
.a-kpi__s{ display:block; font-size:12px; color:var(--tx-3); }

.a-grid2{ display:grid; grid-template-columns:1.25fr 1fr; gap:16px; align-items:start; }
.a-card{ padding:20px; border-radius:var(--r); background:var(--glass); border:1px solid var(--stroke); }
.a-card--danger{ border-color:rgba(255,69,58,.3); background:rgba(255,69,58,.05); }
.a-card__t{ font-size:17px; margin-bottom:14px; }

.a-chart{ display:flex; align-items:flex-end; gap:8px; height:180px; }
.a-bar{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:100%; }
.a-bar i{ display:block; width:100%; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,var(--accent),rgba(255,138,61,.35)); min-height:3px; }
.a-bar__v{ font-size:11px; color:var(--tx-3); font-variant-numeric:tabular-nums; }
.a-bar__l{ font-size:11.5px; color:var(--tx-3); }

.a-top{ display:flex; flex-direction:column; gap:9px; }
.a-top__r{ display:flex; align-items:center; gap:11px; font-size:14px; }
.a-top__r b{ width:22px; height:22px; flex:none; border-radius:7px; display:grid; place-items:center; font-size:11.5px; background:var(--glass-2); }
.a-top__r span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a-top__r i{ font-style:normal; color:var(--tx-3); font-size:13px; }

/* ============================ ТАБЛИЦЫ ============================ */
.a-bar2{ display:flex; gap:10px; flex-wrap:wrap; }
.a-inp{
  height:42px; padding:0 14px; border-radius:12px; font-size:14.5px; outline:none; min-width:0;
  background:var(--glass); border:1px solid var(--stroke); color:var(--tx);
}
.a-inp:focus{ border-color:var(--accent); }
.a-inp--s{ height:34px; font-size:13px; padding:0 10px; }
#pQ{ flex:1; min-width:180px; }
select.a-inp{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx-3) 50%),linear-gradient(135deg,var(--tx-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 19px, calc(100% - 10px) 19px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
select.a-inp--s{ background-position:calc(100% - 13px) 15px, calc(100% - 8px) 15px; }
.a-inp option{ background:#17171b; }

.a-tbl{ border-radius:var(--r); overflow:hidden; background:var(--glass); border:1px solid var(--stroke); }
.a-tr{
  display:flex; align-items:center; gap:14px; padding:11px 16px;
  border-bottom:.5px solid var(--stroke); font-size:14px; transition:background .15s;
}
.a-tr:last-child{ border-bottom:0; }
.a-tr:hover{ background:rgba(255,255,255,.04); }
.a-td{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.a-td--grow{ flex:1; min-width:0; }
.a-td--b{ font-weight:700; font-variant-numeric:tabular-nums; }
.a-td b{ font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a-td i{ font-style:normal; font-size:12px; color:var(--tx-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.a-tr--o .a-td:nth-child(3){ flex:1.4; font-size:12.5px; color:var(--tx-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.a-code{ font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing:.04em; font-size:13px; }

.a-thumb{
  width:44px; height:44px; flex:none; border-radius:12px; overflow:hidden; position:relative;
  display:grid; place-items:center; font-size:21px;
  background:linear-gradient(150deg,var(--c1,#333),var(--c2,#111));
}
.a-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.a-thumb--s{ background:var(--glass-2); font-size:16px; font-weight:700; }
.a-thumb__no{ font-style:normal; font-size:9.5px; color:var(--tx-3); text-transform:uppercase; letter-spacing:.06em; }
.a-photo__no{ font-size:32px; opacity:.55; }
.a-photo--sm .a-photo__box{ width:120px; }

.a-st{ font-style:normal; font-size:11px; font-weight:700; padding:4px 8px; border-radius:8px; white-space:nowrap; }
.a-st--3{ background:rgba(50,215,75,.15); color:var(--green); }
.a-st--2{ background:rgba(10,132,255,.15); color:#5aabff; }
.a-st--1{ background:rgba(255,194,75,.15); color:var(--gold); }
.a-st--0{ background:rgba(255,255,255,.10); color:var(--tx-2); }
.a-st---1{ background:rgba(255,69,58,.14); color:#ff8079; }

.a-acts{ display:flex; gap:4px; flex:none; }
.a-acts button{
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-size:14px;
  color:var(--tx-2); background:var(--glass-2); transition:.15s;
}
.a-acts button:hover{ color:var(--tx); background:rgba(255,255,255,.16); }

/* ============================ ФОРМЫ ============================ */
.a-form{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:24px; align-items:start; margin-top:20px; }
.a-fields{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.a-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.a-row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.a-photo{ display:flex; flex-direction:column; gap:12px; }
.a-photo__box{
  position:relative; overflow:hidden; aspect-ratio:1/1; border-radius:18px;
  display:grid; place-items:center; font-size:64px;
  background:linear-gradient(150deg,var(--c1),var(--c2)); border:1px solid var(--stroke);
}
.a-photo__box img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.a-photo__btns{ display:flex; flex-direction:column; gap:8px; }
.a-photo__btns .btn{ width:100%; cursor:pointer; }
.a-chk{ display:flex; flex-wrap:wrap; gap:8px; }
.a-chip{
  height:34px; padding:0 13px; border-radius:11px; font-size:13.5px; font-weight:600; color:var(--tx-2);
  background:var(--glass); border:1px solid var(--stroke); transition:.16s;
}
.a-chip:hover{ color:var(--tx); }
.a-chip.is-on{ color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:transparent; }
.a-formft{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.a-danger{ color:#ff8079; border-color:rgba(255,69,58,.3); }
.a-danger:hover{ background:rgba(255,69,58,.12); }
/* карточка заказа: адрес и состав видны сразу, без раскрытия */
.a-order{
  padding:14px 16px; border-radius:var(--r); margin-bottom:10px;
  background:var(--glass); border:1px solid var(--stroke);
}
.a-order__top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.a-order__where{
  margin-top:10px; padding:9px 12px; border-radius:11px; font-size:14px;
  background:rgba(255,138,61,.10); border:1px solid rgba(255,138,61,.22);
}
.a-order__where b{ font-weight:700; }
.a-order__note{ margin-top:8px; font-size:13.5px; color:var(--gold); line-height:1.45; }
.a-order__items{ display:flex; flex-direction:column; gap:3px; margin-top:10px; font-size:13.5px; color:var(--tx-2); }
.a-order__items i{ font-style:normal; color:var(--tx-3); }
.a-card--hot{ border-color:rgba(255,138,61,.35); background:rgba(255,138,61,.07); }
.a-ticket{ margin-top:12px; font-size:14.5px; line-height:1.55; white-space:pre-wrap; }
.a-td a{ color:var(--accent); }

.a-json{
  width:100%; height:260px; padding:14px; border-radius:14px; resize:vertical;
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:12px; line-height:1.5;
  background:rgba(0,0,0,.35); border:1px solid var(--stroke); color:var(--tx-2); outline:none;
}
.a-bar3{ height:8px; border-radius:5px; background:rgba(0,0,0,.35); overflow:hidden; margin-top:12px; }
.a-bar3 i{ display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,var(--green),var(--gold)); }

/* ============================ МОДАЛКА АДМИНКИ ============================ */
.amodal{
  position:fixed; inset:0; z-index:150; display:none; padding:24px 16px; overflow-y:auto;
  background:rgba(0,0,0,.66); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.amodal.is-on{ display:block; }
.amodal__box{
  position:relative; width:100%; max-width:920px; margin:auto;
  padding:26px; border-radius:24px;
  background:rgba(20,20,24,.96); border:1px solid var(--stroke-2);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.9);
  animation:authIn .3s var(--ease) both;
}
.amodal__x{ position:absolute; right:16px; top:16px; z-index:2; }

/* ============================ ПЛАНШЕТ / ТЕЛЕФОН ============================ */
@media (max-width:1100px){
  .a-grid2{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:820px){
  .a-shell{ grid-template-columns:minmax(0,1fr); gap:16px; padding:16px 0 40px; }
  .a-side{
    position:sticky; top:var(--hd); z-index:40; flex-direction:row; gap:6px;
    overflow-x:auto; scrollbar-width:none; margin:0 -14px; padding:10px 14px;
    background:var(--glass-hd);
    backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%);
  }
  .a-side::-webkit-scrollbar{ display:none; }
  .a-nav{ flex:none; padding:9px 13px; font-size:14px; }
  .a-nav span{ width:auto; }
  .a-h{ font-size:22px; }
  .a-kpis{ grid-template-columns:1fr 1fr; }
  .a-kpi__v{ font-size:21px; }

  .a-tr{ flex-wrap:wrap; gap:8px 12px; padding:12px 14px; }
  .a-td--grow{ flex:1 1 100%; order:-1; }
  .a-thumb{ order:-2; }
  .a-tr--o .a-td:nth-child(3){ flex:1 1 100%; white-space:normal; }
  .a-acts{ margin-left:auto; }

  .a-form{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .a-photo{ flex-direction:row; align-items:flex-start; }
  .a-photo__box{ width:130px; flex:none; }
  .a-photo__btns{ flex:1; }
  .a-row3{ grid-template-columns:1fr 1fr; }
  .amodal{ padding:0; }
  .amodal__box{ max-width:none; min-height:100dvh; border-radius:0; padding:20px 16px calc(30px + env(safe-area-inset-bottom,0px)); }
  .auth__card{ padding:26px 20px 20px; }
  .auth__t{ font-size:24px; }

  /* в шапке остаётся только шестерёнка — подпись прячем */
  .hd__admin{ width:38px; height:38px; padding:0; justify-content:center; font-size:16px; }
  .hd__admin span{ display:none; }
}
@media (max-width:420px){
  .a-row2, .a-row3{ grid-template-columns:1fr; }
}