:root{color-scheme:dark;--bg:#0d100e;--panel:#171d18;--panel2:#1d251d;--line:#303b30;--text:#f3f6ef;--muted:#9eaa9f;--lime:#ccf432;--danger:#dd5f58;font:14px/1.45 Inter,system-ui,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:radial-gradient(circle at 95% 0,#28391844,transparent 500px),var(--bg);color:var(--text)}button,input,select,textarea,a.button{font:inherit}button,.button,.actions a{border:1px solid #3b4937;background:#202820;color:var(--text);padding:10px 13px;border-radius:11px;text-decoration:none;cursor:pointer}button:hover,.button:hover,.actions a:hover{border-color:#667d52;background:#283326}button:disabled{opacity:.45;cursor:not-allowed}.accent{background:var(--lime);border-color:var(--lime);color:#172006;font-weight:750}.danger{background:#7b302d;border-color:#a64641}.quiet{background:transparent;border:0;padding-left:0;color:var(--muted)}input,select,textarea{width:100%;background:#111612;border:1px solid #394638;color:var(--text);border-radius:10px;padding:11px}textarea{min-height:82px;resize:vertical}label{display:flex;flex-direction:column;gap:6px;color:#cbd4c9;font-size:12px}header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);background:#101411ed;position:sticky;top:0;z-index:20;backdrop-filter:blur(15px)}header .brand{font-size:24px;font-weight:850;color:#fff;text-decoration:none;letter-spacing:-1px}.brand span{color:var(--lime)}header>div{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:12px}header>div a{color:#d8e8c7}.access{min-height:calc(100vh - 72px);margin:0;padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.admin-shell{max-width:1440px;margin:auto;display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100vh - 72px)}aside{border-right:1px solid var(--line);padding:24px 16px}aside h2{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);padding:0 10px}aside nav{display:flex;flex-direction:column;gap:5px}aside nav button{text-align:left;border-color:transparent;background:transparent}aside nav button.active{background:#2a3824;border-color:#405434;color:#e9f8d7}main{padding:28px;min-width:0}main section{max-width:1160px;margin:auto}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px}.page-head h1{font-size:29px;letter-spacing:-.8px;margin:2px 0}.page-head p{color:var(--muted);margin:4px 0}.eyebrow{font-size:9px;color:var(--lime);letter-spacing:1.4px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:16px}.panel h3{margin-top:0}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:17px}.stat span{display:block;color:var(--muted);font-size:11px}.stat strong{display:block;font-size:24px;margin-top:5px}.actions,.inline,.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.toolbar{background:var(--panel);border:1px solid var(--line);padding:12px;border-radius:14px;margin-bottom:14px}.toolbar input[type=text],.toolbar>input:not([type]){flex:1;min-width:220px}.toolbar label{flex-direction:row;align-items:center}.toolbar input[type=checkbox],.check input{width:auto}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}.stack{display:flex;flex-direction:column;gap:13px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid button{align-self:end}.span-2{grid-column:1/-1}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:15px;background:var(--panel)}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid #293229;vertical-align:top}th{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);background:#131813}td{font-size:12px}tr:last-child td{border:0}tbody tr[data-id]{cursor:pointer}tbody tr[data-id]:hover{background:#222c21}.badge{display:inline-flex;padding:4px 7px;border-radius:20px;background:#2b3827;color:#d8ebc6;font-size:10px}.bad{background:#492724;color:#ffb7b2}.pages{display:flex;justify-content:center;gap:8px;margin:18px}.switch-list{display:flex;flex-direction:column;gap:7px;max-height:460px;overflow:auto}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid var(--line);border-radius:10px}.switch-row span{overflow-wrap:anywhere}.switch-row button{font-size:11px}.hint{color:var(--muted);font-size:11px}#admin-notice{min-height:22px;color:#e0f6ba;margin-bottom:4px}#admin-notice.error{color:#ffaaa5}dialog{width:min(720px,calc(100% - 24px));max-height:88vh;overflow:auto;background:#111612;color:var(--text);border:1px solid #445440;border-radius:18px;padding:24px}dialog::backdrop{background:#000a}.order-item{padding:10px 0;border-bottom:1px solid var(--line)}.event{font-size:11px;color:var(--muted);margin:4px 0}.check{flex-direction:row;align-items:center;align-self:end;min-height:42px}@media(max-width:850px){header{padding:0 15px}.admin-shell{display:block}aside{border:0;border-bottom:1px solid var(--line);padding:10px;overflow:auto}aside h2{display:none}aside nav{flex-direction:row;width:max-content}aside nav button{white-space:nowrap}main{padding:18px 13px}.stats{grid-template-columns:1fr 1fr}.two-cols,.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.page-head{align-items:center}.page-head h1{font-size:24px}}@media(max-width:430px){.stats{grid-template-columns:1fr}.page-head{display:block}.page-head>.button{display:inline-block;margin-top:10px}header #admin-role{display:none}}
.user-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}.user-summary>div{padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}.user-summary span{display:block;color:var(--muted);font-size:10px}.user-summary strong{display:block;margin-top:5px;font-size:17px}.user-meta p{margin:7px 0}#user-detail tr[data-order]{cursor:pointer}#user-detail tr[data-order]:hover{background:#222c21}@media(max-width:650px){.user-summary{grid-template-columns:1fr 1fr}}
.user-activity{list-style:none;margin:0 0 22px;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}.user-activity li{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:11px 13px;border-bottom:1px solid var(--line);font-size:12px}.user-activity li:last-child{border:0}.user-activity li>div{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}.user-activity b{font-weight:550}.activity-detail{color:#bbc9b7;overflow-wrap:anywhere}.user-activity time{flex-shrink:0;color:var(--muted);font-size:10px;white-space:nowrap}@media(max-width:600px){.user-activity li{flex-direction:column;gap:5px}}

.support-messages{display:flex;flex-direction:column;gap:10px;max-height:45vh;overflow:auto;margin:16px 0;padding:4px}.support-message{max-width:90%;padding:12px 15px;border:1px solid #394638;border-radius:14px;background:#171d18;align-self:flex-start;overflow-wrap:anywhere}.support-message.admin{background:#283524;align-self:flex-end}.support-message p{white-space:pre-wrap;margin:6px 0}.support-message small{color:#9eaa9f;font-size:10px}tr[data-support]{cursor:pointer}tr[data-support]:hover{background:#222c21}

.stat-link{text-align:left;width:100%;font:inherit}.stat-link:hover{border-color:var(--lime)}#carts-dialog{width:min(1100px,calc(100% - 24px))}tr[data-cart-user]{cursor:pointer}tr[data-cart-user]:hover{background:#222c21}

#users-pages{flex-wrap:wrap;align-items:center}#users-pages button[aria-current="page"]{opacity:1;border-color:var(--lime);color:var(--lime)}

.nav-count{float:right;margin-left:8px;padding:1px 7px;border-radius:12px;background:var(--lime);color:#172006;font-size:11px}.global-result{display:block;width:100%;text-align:left;margin:6px 0}.user-hub{margin:16px 0}.user-hub .actions{margin-bottom:16px}.user-hub details summary{cursor:pointer;font-weight:700}.user-hub details .table-wrap{margin-top:12px}.user-hub table{min-width:480px}.period-choice{max-width:300px;margin-bottom:20px}meter{width:180px;max-width:100%}#payment-history-pages,#campaign-pages{align-items:center;flex-wrap:wrap}#section-services .table-wrap{margin-bottom:18px}#global-search-form input{min-width:180px}#user-dialog{width:min(960px,calc(100% - 24px))}

.notification-previews{display:grid;grid-template-columns:1fr 1fr;gap:16px}.notification-previews article{border:1px solid #354333;border-radius:14px;padding:16px;overflow-wrap:anywhere}.notification-previews p,.admin-note p{white-space:pre-wrap;overflow-wrap:anywhere}.preview-site{background:#172017}.preview-telegram{background:#192b36}.notification-previews span{display:block;margin-top:16px;color:var(--lime)}#notification-preview,#finance-dialog{width:min(960px,calc(100% - 24px))}.admin-note{border-bottom:1px solid #354333;padding:12px 0}.user-notes textarea{min-height:90px}#problem-pages,#profit-pages{flex-wrap:wrap;align-items:center}@media(max-width:650px){.notification-previews{grid-template-columns:1fr}}

.provider-routing{grid-column:1/-1;border-top:1px solid #35432f;padding-top:18px}.provider-routing h2{font-size:18px;margin:0 0 8px}

#support-dialog .support-hours{margin:8px 0 12px;color:#91a08b;font-size:12px;line-height:1.5}

/* ---------- navigation, grouped ----------
   Eighteen sections in one flat list gave "Проблемные заказы" the same weight
   as "Журнал действий". Group them by what they are for, and put the counts
   that matter beside the section that answers them. */
.nav-group{margin-bottom:10px}
.nav-group h3{margin:0;padding:10px 10px 4px;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#7d8a7e;font-weight:700}
#admin-nav button{display:flex;align-items:center;gap:8px;width:100%;min-height:40px}
#admin-nav .nav-count{margin-left:auto;font-size:11px;font-weight:700;color:#9eaa9f}
/* A waiting customer reads louder than a tidy number. */
#admin-nav [data-section="problems"] .nav-count,
#admin-nav [data-section="support"] .nav-count{background:var(--danger);color:#160b0b;border-radius:999px;padding:1px 7px;min-width:18px;text-align:center}

/* ---------- the overview as a workbench ---------- */
.period-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.period-row button{min-height:40px;border-radius:999px;font-size:12.5px;font-weight:600}
.period-row button.active{background:var(--lime);border-color:var(--lime);color:#172006}

/* What needs doing, above any number. Hidden entirely when nothing waits. */
.attention h3{margin:0 0 12px;font-size:14px}
.attention-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.attn{display:flex;flex-direction:column;gap:7px;border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin:0}
.attn p{margin:0;display:flex;align-items:baseline;gap:8px}
.attn p b{font-size:23px;font-weight:800;letter-spacing:-.7px}
.attn p span{font-size:12.5px;font-weight:600}
.attn small{color:var(--muted);font-size:11.5px;line-height:1.4}
.attn button{align-self:flex-start;min-height:40px;font-size:12px}
.attn-bad{border-color:rgba(221,95,88,.45);background:rgba(221,95,88,.08)}
.attn-bad p b{color:#ff9b95}
.attn-warn{border-color:rgba(230,180,70,.4);background:rgba(230,180,70,.07)}
.attn-warn p b{color:#ffd480}

/* A number without its previous value says nothing about the shop. */
.stat i{display:block;margin-top:7px;font-size:11.5px;font-style:normal;font-weight:600}
.stat i.up{color:#b6e35a}
.stat i.down{color:#ff9b95}
.stat i.flat{color:var(--muted)}
.stat em{display:block;margin-top:3px;font-size:11px;font-style:normal;color:var(--muted)}
.stat-link{text-align:left;cursor:pointer}
.stat-link:hover{border-color:#667d52}

/* The screen used to stop below the tiles; put the day's work in that space. */
.overview-split{display:flex;flex-wrap:wrap;gap:16px;align-items:start}
.overview-split>.panel{flex:999 1 460px;min-width:0;margin:0}
.overview-side{flex:1 1 290px;min-width:0;display:flex;flex-direction:column;gap:16px}
.overview-side .panel{margin:0}
.panel-head{margin-bottom:12px;align-items:center}
.panel-head h3{margin:0}
#overview-orders tr[data-id]{cursor:pointer}
.quiet{min-height:40px}

@media(max-width:700px){
  .attention-grid{grid-template-columns:minmax(0,1fr)}
  .period-row button{flex:1 1 auto}
}

/* ---------- orders ----------
   The status select and the "только проблемные" checkbox gave no sense of what
   was currently shown. Chips do, and still drive those same controls. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.order-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chip{min-height:40px;border-radius:999px;padding:0 14px;font-size:12.5px;font-weight:600}
.chip b{margin-left:7px;opacity:.75}
.chip.active{background:#2a3824;border-color:#8bb356;color:#e9f8d7}
.chip-alert{border-color:rgba(221,95,88,.5);color:#ff9b95}
.chip-alert.active{background:rgba(221,95,88,.14);border-color:var(--danger);color:#ffb7b2}

/* How long an order has been sitting is the real queue order. */
td.age-warn{color:#f0dca6;font-weight:600}
td.age-bad{color:#ff9b95;font-weight:700}

/* The order opens beside the list, so you can work through the queue without
   the screen being covered each time. */
#order-dialog{
  /* Below the sticky header (z-index 20), which would otherwise paint over the
     panel's own close button. */
  position:fixed;top:72px;right:0;bottom:0;left:auto;z-index:15;
  width:min(420px,100%);max-height:none;height:auto;
  margin:0;border-radius:18px 0 0 18px;border-left:1px solid #445440;overflow:auto;
  box-shadow:-24px 0 60px #0009;
}
#order-dialog #order-close{
  position:sticky;top:0;z-index:1;background:#111612;width:100%;text-align:left;
  padding:4px 0 10px;margin:0 0 4px;
}
#order-dialog::backdrop{background:transparent}
body.order-open main{padding-right:calc(min(420px,100%) + 20px)}
@media(max-width:900px){
  #order-dialog{width:100%;border-radius:0;border-left:0;top:0;z-index:25}
  body.order-open main{padding-right:13px}
}

/* Provider health on the overview: a dot, a name, a word. */
.svc{display:flex;align-items:center;gap:9px;margin:0;padding:8px 0;border-top:1px solid #232c23;font-size:12.5px}
.svc:first-child{border-top:0}
.svc span{width:7px;height:7px;border-radius:999px;flex:none}
.svc small{margin-left:auto;color:var(--muted);font-size:11.5px}
.svc-ok span{background:#8bd450}
.svc-off span{background:#6b776c}
.svc-bad span{background:var(--danger)}
.svc-bad small{color:#ff9b95;font-weight:600}

/* Order status reads at a glance: done, waiting, closed, broken.
   Each tone differs in lightness as well as hue, so they stay apart for a
   reader who does not separate red from green. */
.badge-ok{background:#2b3827;color:#d8ebc6}
.badge-wait{background:#3a3524;color:#f0dca6}
.badge-off{background:#262c26;color:#c3ccc2}
.badge-bad{background:#492724;color:#ffb7b2}

/* ---------- the order card ----------
   It used to be a dump: a bold name line, a raw status code, items and history
   as loose text, and a 36-character supplier id running off the edge. Label
   every fact and give the card a head, a body and its actions. */
.od-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.od-head h2{margin:0;font-size:19px;letter-spacing:-.4px}
#order-when{margin:4px 0 14px}
#order-detail h3{margin:16px 0 4px;font-size:10px;letter-spacing:.9px;text-transform:uppercase;color:var(--muted);font-weight:700}
#order-detail h3:first-child{margin-top:0}
.od-row{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid #232c23;font-size:12.5px}
.od-row>span{flex:0 0 108px;color:var(--muted)}
.od-row>b{flex:1 1 auto;min-width:0;font-weight:600;overflow-wrap:anywhere}
.od-id{display:block;margin-top:3px;font:400 10.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);overflow-wrap:anywhere}
.od-state{display:inline-flex;padding:2px 7px;border-radius:999px;font-size:10.5px;font-weight:600}
.od-ok{background:#2b3827;color:#d8ebc6}
.od-wait{background:#3a3524;color:#f0dca6}
.od-bad{background:#492724;color:#ffb7b2}
.od-event{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:8px 0;border-top:1px solid #232c23;font-size:12px}
.od-event>span{flex:0 0 108px;color:var(--muted)}
.od-event>b{font-weight:600}
.od-event>small{flex:1 1 100%;color:var(--muted);line-height:1.45}
.od-links{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.od-links>*{width:100%;text-align:center;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#order-dialog #status-form{margin-top:16px}
#order-dialog #status-form button{min-height:44px}