/* ДРОП - веб-админка. Сетка по макету 1440x900 (контент 1440x832 под шапкой браузера). */
:root {
  --accent: #1452fe; --link: #1a55f5; --text: #111; --hint: #8b8b90; --line: #ececee;
  --bg: #f3f3f2; --card: #fff; --green: #17872f;
  --font: 'Inter Tight', 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --emoji: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; min-height: 100vh; }
button, input { font: inherit; color: inherit; border: 0; background: none; outline: none; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; }
.ic { width: 24px; height: 24px; display: block; flex: none; }
.emoji { font-family: var(--emoji); font-weight: 400; }

/* боковое меню */
.side { position: fixed; left: 0; top: 0; bottom: 0; width: 196px; background: #fff; border-right: 1px solid #ececec; padding: 17px 6px 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; padding-left: 12px; height: 42px; }
.brand__logo { width: 44px; height: 42px; border-radius: 10px; background: var(--accent); display: grid; place-items: center; --logo-bg: var(--accent); }
.brand__logo .ic { width: 34px; height: 34px; }
.brand b { font-size: 16.5px; font-weight: 800; line-height: 19px; letter-spacing: -.2px; }
.brand small { display: block; font-size: 12px; font-weight: 400; color: #a0a0a5; line-height: 15px; letter-spacing: 0; }
.snav { margin-top: 20px; display: flex; flex-direction: column; gap: 4px; }
.snav a { height: 36px; border-radius: 8px; display: flex; align-items: center; gap: 13px; padding-left: 12px; font-size: 14px; color: #232328; letter-spacing: -.15px; position: relative; }
.snav a .ic { width: 21px; height: 21px; color: #2a2a2e; }
.snav a:hover { background: #f5f6f8; }
.snav a.on { background: #e8effd; color: var(--accent); font-weight: 600; }
.snav a.on .ic { color: var(--accent); }
.snav .badge { position: absolute; right: 13px; min-width: 22px; height: 20px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.live { position: absolute; left: 11px; right: 10px; top: 477px; height: 52px; border-radius: 8px; background: #ebf8ed; padding: 9px 0 0 33px; }
.live b { display: block; position: relative; font-size: 13.5px; font-weight: 500; color: #14702a; letter-spacing: -.15px; line-height: 17px; }
.live b i { position: absolute; left: -19px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #22a447; }
.live small { display: block; font-size: 11.5px; color: #85858a; margin-top: 3px; letter-spacing: -.1px; }
.owner { position: absolute; left: 16px; bottom: 24px; display: grid; grid-template-columns: 46px auto; column-gap: 13px; align-items: center; }
.owner img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; grid-row: span 2; }
.owner b { font-size: 13.5px; font-weight: 700; align-self: end; letter-spacing: -.15px; }
.owner small { font-size: 11.5px; color: #a0a0a5; align-self: start; }

/* основная колонка */
.main { margin-left: 196px; padding: 14px 19px 13px 20px; min-width: 980px; }
.top { display: flex; align-items: center; height: 38px; }
.top h1 { font-size: 26.5px; font-weight: 800; letter-spacing: -.6px; }
.top .date { font-size: 15.5px; color: #8d8d92; margin-left: 15px; white-space: nowrap; margin-top: 3px; letter-spacing: -.15px; }
.srch { margin-left: auto; width: 398px; height: 31px; border-radius: 9px; background: #fff; border: 1px solid #e3e3e6; display: flex; align-items: center; gap: 9px; padding: 0 6px 0 14px; color: #9a9aa0; }
.srch .ic { width: 16px; height: 16px; color: #55555a; }
.srch input { flex: 1; font-size: 13px; letter-spacing: -.1px; color: var(--text); }
.srch input::placeholder { color: #9a9aa0; }
.srch kbd { font-family: inherit; font-size: 12px; background: #f0f0f2; border-radius: 5px; padding: 2px 6px; color: #6c6c70; }
.per { margin-left: 42px; height: 31px; border-radius: 8px; background: #fff; border: 1px solid #e3e3e6; display: flex; padding: 2px; }
.per button { height: 25px; padding: 0; width: 73px; border-radius: 6px; font-size: 13px; font-weight: 500; letter-spacing: -.1px; }
.per button:nth-child(2) { width: 67px; }
.per button:nth-child(3) { width: 83px; }
.per button.on { background: #0b0b0b; color: #fff; }
.bell { margin-left: 25px; position: relative; width: 24px; height: 24px; color: #222; }
.bell .ic { width: 23px; height: 23px; }
.bell i { position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 1.5px solid var(--bg); }
.newbtn { margin-left: 26px; width: 159px; height: 38px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; letter-spacing: -.1px; }
.newbtn .ic { width: 18px; height: 18px; stroke-width: 2; }

.launch { position: relative; margin-top: 16px; height: 38px; border-radius: 8px; background: linear-gradient(90deg, #edf3fe, #e5eefe); display: flex; align-items: center; padding: 0 11px 0 18px; color: #1a4fd6; }
.launch .emoji { font-size: 20px; margin-right: 10px; }
.launch > b { font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
.launch__prog { margin-left: 0; position: absolute; left: 522px; width: 205px; }
.launch__prog small { display: block; font-size: 11px; letter-spacing: -.1px; line-height: 13px; }
.launch__prog i { display: block; height: 7px; border-radius: 4px; background: #d9e3fb; margin-top: 3px; overflow: hidden; }
.launch__prog i::after { content: ''; display: block; height: 100%; width: var(--p); background: var(--accent); border-radius: 4px; }
.launch__links { margin-left: auto; display: flex; gap: 24px; font-size: 11.5px; font-weight: 500; letter-spacing: -.15px; }
.launch__links a { display: flex; align-items: center; }
.launch__links .ic { width: 11px; height: 11px; stroke-width: 2.4; margin-left: 2px; }

.card { background: var(--card); border-radius: 10px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 13px; }
.stat { height: 101px; position: relative; padding: 13px 0 0 55px; }
.stat > .ic { position: absolute; left: 14px; top: 18px; width: 25px; height: 25px; color: #1d1d1f; }
.stat small { font-size: 12px; color: #8f8f94; display: block; letter-spacing: -.1px; line-height: 15px; }
.stat b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.9px; line-height: 40px; margin-top: 4px; }
.stat span { font-size: 12px; color: #9a9a9f; display: block; letter-spacing: -.1px; margin-top: 3px; }

.row2 { display: grid; grid-template-columns: 1fr 365px; gap: 9px; margin-top: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 329px; gap: 9px; margin-top: 11px; }
.row4 { display: grid; grid-template-columns: 461fr 338fr 388fr; gap: 9px; margin-top: 10px; }
.card h2 { font-size: 17.5px; font-weight: 800; letter-spacing: -.4px; line-height: 22px; }
.chart { height: 189px; padding: 11px 14px 0; position: relative; }
.chart svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.chart text { font-family: var(--font); }
.chart .tip { position: absolute; padding: 6px 9px; background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.08); font-size: 10.5px; color: #9a9aa0; line-height: 13px; }
.chart .tip b { display: block; color: #111; font-size: 12px; font-weight: 700; line-height: 15px; }
.chart__note { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 11px; color: #a2a2a7; letter-spacing: -.1px; }
.funnel { height: 189px; padding: 13px 20px 0 14px; }
.funnel ul { list-style: none; margin-top: 12px; }
.funnel li { display: flex; align-items: center; height: 31px; font-size: 12.5px; letter-spacing: -.15px; color: #2a2a2e; }
.funnel li span { width: 164px; flex: none; white-space: nowrap; }
.funnel li i { display: block; height: 16px; border-radius: 3px; background: #2457f5; }
.orders { height: 216px; padding: 10px 11px 0 12px; }
.orders h2 { padding-left: 2px; display: flex; justify-content: space-between; align-items: center; }
.orders h2 a { font-size: 12.5px; font-weight: 500; color: var(--link); letter-spacing: -.1px; display: flex; align-items: center; gap: 5px; margin-right: 5px; }
.orders h2 a .ic { width: 15px; height: 15px; }
.tbl { margin-top: 8px; border: 1px solid #ededf0; border-radius: 8px; height: 166px; overflow: hidden; position: relative; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 12px; letter-spacing: -.1px; }
.tbl th { text-align: left; font-weight: 400; color: #8f8f94; font-size: 11px; height: 28px; padding-top: 2px; }
.tbl td { height: 32px; white-space: nowrap; }
.tbl tr.hl td { background: #e8f0fd; }
.tbl tr + tr td { border-top: 1px solid #f0f0f2; }
.tbl tr.muted td { color: #6d6d72; }
.tbl th:first-child, .tbl td:first-child { padding-left: 9px; }
.tbl .id { color: #1d40c8; }
.tbl tr.muted .id { color: #6d6d72; }
.tbl .sum { font-weight: 700; color: #111 !important; }
.tbl .st { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 10px; font-size: 11.5px; background: var(--accent); color: #fff; }
.tbl .st.test { background: #e6e7ea; color: #55555a; padding: 0 10px; }
.tbl .st.work { background: #fff1d6; color: #b46a00; }
.tbl .st.done { background: #e3f6e6; color: var(--green); }
.tbl .first { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 10px; background: #e3ecfd; color: #3a5bb8; font-size: 11px; }
.tbl .empty { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 11.5px; color: #a2a2a7; }
.tbl .empty .ic { width: 26px; height: 26px; margin: 0 auto 6px; color: #9a9aa0; }
.cat { height: 216px; padding: 10px 10px 0 13px; }
.cat h2 small { font-size: 12.5px; font-weight: 400; color: #8f8f94; letter-spacing: -.1px; margin-left: 10px; }
.cat__grid { display: grid; grid-template-columns: 149px 152px; gap: 4px; margin-top: 6px; }
.cat__grid img { width: 100%; height: 73px; border-radius: 5px; object-fit: cover; }
.cat p { font-size: 12.5px; color: #3a3a3e; margin-top: 8px; letter-spacing: -.15px; }
.coll { height: 163px; padding: 9px 14px 0; display: grid; grid-template-columns: 199px 1fr; grid-template-rows: 22px 1fr; column-gap: 10px; }
.coll h2 { grid-column: 1 / -1; }
.coll img { width: 199px; height: 114px; border-radius: 6px; object-fit: cover; margin-top: 8px; margin-left: -3px; }
.coll__meta { padding-top: 15px; font-size: 11px; color: #a2a2a7; letter-spacing: -.1px; }
.coll__meta i { display: block; height: 6px; border-radius: 3px; background: #f0f0f2; margin: 29px 2px 0 0; overflow: hidden; }
.coll__meta i::after { content: ''; display: block; height: 100%; width: max(3px, var(--p)); background: var(--accent); }
.coll__meta span { display: block; margin-top: 11px; font-size: 12px; color: #8f8f94; }
.chk { height: 163px; padding: 9px 14px 0 21px; }
.chk ul { list-style: none; margin-top: 2px; }
.chk li { display: flex; align-items: center; gap: 12px; height: 19.8px; font-size: 12.5px; letter-spacing: -.15px; color: #2a2a2e; }
.chk li .ok { width: 15px; height: 15px; border-radius: 50%; background: #1f8f3a; color: #fff; display: grid; place-items: center; margin-left: 2px; }
.chk li .ok .ic { width: 10px; height: 10px; stroke-width: 3.2; }
.chk li .no { width: 15px; height: 15px; border-radius: 50%; border: 1.3px solid #8e8e93; margin-left: 2px; }
.mail { height: 163px; padding: 10px 21px 0 17px; text-align: center; }
.mail h2 { text-align: left; }
.mail .ic { width: 25px; height: 25px; margin: 6px auto 0; color: #111; }
.mail b { display: block; font-size: 12.5px; font-weight: 600; margin-top: 7px; letter-spacing: -.15px; }
.mail p { font-size: 11px; color: #a2a2a7; margin-top: 5px; letter-spacing: -.1px; }
.mail button { width: 100%; height: 32px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 500; margin-top: 12px; letter-spacing: -.1px; }
.toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 20px); background: rgba(20,20,20,.92); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 14px; opacity: 0; transition: .25s; pointer-events: none; z-index: 50; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.flash { animation: flash 1.2s; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px rgba(20,82,254,.35); } 100% { box-shadow: 0 0 0 0 rgba(20,82,254,0); } }

@media (max-width: 1100px) {
  .side { position: static; width: auto; height: auto; padding-bottom: 10px; }
  .snav { flex-direction: row; flex-wrap: wrap; }
  .live, .owner { display: none; }
  .main { margin-left: 0; min-width: 0; }
  .row2, .row3, .row4, .stats { grid-template-columns: 1fr; }
  .top { flex-wrap: wrap; height: auto; gap: 10px; }
  .srch, .per, .bell, .newbtn { margin-left: 0; }
  .launch { height: auto; flex-wrap: wrap; gap: 8px; padding: 10px; }
  .launch__prog { margin-left: 0; position: static; }
  .tbl { overflow-x: auto; height: auto; padding-bottom: 70px; }
}