/* Админка Zakir Import — использует токены из styles.css */

.adm-header {
  position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line);
}
.adm-header .wrap { display: flex; align-items: center; gap: 16px; height: 62px; }
.adm-header .wordmark { font-size: 18px; white-space: nowrap; }
.adm-header .tag { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); padding: 3px 8px; white-space: nowrap; }
.adm-header .sp { flex: 1; }
.adm-tabs { display: flex; gap: 4px; }
.adm-tab { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); padding: 8px 10px; border-bottom: 2px solid transparent; white-space: nowrap; }
@media (max-width: 720px) { .adm-header .tag { display: none; } .adm-header .wrap { gap: 10px; } .adm-tab { padding: 8px 7px; letter-spacing: .05em; } }
.adm-tab.on { color: var(--ink); border-color: var(--brass); }

.adm-main { max-width: 1080px; margin: 0 auto; padding: 30px 28px 80px; }
@media (max-width: 640px) { .adm-main { padding: 20px 16px 60px; } }

/* login */
.login-wrap { min-height: 82vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); padding: 34px 30px; box-shadow: var(--shadow-sm); }
.login-card .wordmark { font-size: 22px; margin-bottom: 4px; }
.login-card .sub { font-size: 12.5px; color: var(--ink-soft); letter-spacing: .04em; margin-bottom: 24px; }
.login-card .f-field { margin-bottom: 16px; }
.login-card .err { color: var(--danger); font-size: 13px; margin-bottom: 12px; min-height: 18px; }

/* toolbar */
.adm-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.adm-toolbar .search { flex: 1; min-width: 200px; max-width: 420px; }
.adm-count { font-size: 12px; color: var(--ink-faint); letter-spacing: .04em; }

/* product rows */
.rows { border: 1px solid var(--line); background: var(--surface); }
.row {
  display: grid; grid-template-columns: 54px 1fr 150px 130px 96px 150px; gap: 14px; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.row:last-child { border-bottom: 0; }
.row .thumb { width: 46px; height: 58px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }
.row .thumb.noimg { display: grid; place-items: center; color: var(--brass); opacity: .5; }
.row .nm { font-weight: 500; }
.row .sub { font-size: 12px; color: var(--ink-faint); }
.row .price { font-family: var(--serif); font-size: 15px; }
.row .st { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.row .st.ok { color: var(--ok); }
.row .st.no { color: var(--ink-faint); }
.row .st.opt { color: var(--brass-deep); }
.row .acts { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 760px) {
  .row { grid-template-columns: 46px 1fr auto; grid-template-areas: "t n a" "t p a"; row-gap: 2px; }
  .row .thumb { grid-area: t; } .row .nm-cell { grid-area: n; } .row .price { grid-area: p; }
  .row .flags-cell { display: none; } .row .acts { grid-area: a; flex-direction: column; }
}

/* editor drawer */
.drawer-back { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 50%, transparent); z-index: 90; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--paper); border-left: 1px solid var(--line); overflow-y: auto; z-index: 91; box-shadow: var(--shadow-lg); }
.drawer-in { padding: 26px 28px 60px; display: flex; flex-direction: column; gap: 16px; }
.drawer h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; }
.drawer .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.drawer .lab { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 6px; }
.drawer input[type=text], .drawer input[type=number], .drawer textarea, .drawer input:not([type]) {
  width: 100%; border: 1px solid var(--line); background: var(--surface); padding: 9px 11px; font-size: 14px; border-radius: 2px;
}
.drawer textarea { resize: vertical; }
.drawer .chk { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft); }

.uploader { border: 1px dashed var(--line); background: var(--surface); padding: 14px; text-align: center; }
.uploader.drag { border-color: var(--brass); background: color-mix(in srgb, var(--brass) 8%, var(--surface)); }
.uploader p { font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }
.ph-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ph-grid .ph { position: relative; width: 82px; height: 104px; border: 1px solid var(--line); overflow: hidden; background: var(--surface-2); }
.ph-grid .ph img { width: 100%; height: 100%; object-fit: cover; }
.ph-grid .ph .x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; background: rgba(0,0,0,.62); color: #fff; border-radius: 50%; font-size: 13px; display: grid; place-items: center; }
.ph-grid .ph.up { display: grid; place-items: center; color: var(--ink-faint); font-size: 11px; }

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

.settings-form { max-width: 620px; display: flex; flex-direction: column; gap: 16px; }
.settings-form fieldset { border: 1px solid var(--line); background: var(--surface); padding: 16px 18px; }
.settings-form legend { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); padding: 0 6px; }
.settings-form input { width: 100%; border: 1px solid var(--line); background: var(--paper); padding: 9px 11px; font-size: 14px; border-radius: 2px; }
.settings-form .lab { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); display: block; margin: 0 0 6px; }
.settings-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }