:root { --blue:#2563eb; --blue-dark:#173d9d; --navy:#0b1d42; --bg:#f4f7fc; --line:#e4eaf4; --muted:#66758f; --danger:#d13c52; --success:#14834f; --shadow:0 12px 32px rgba(19,48,107,.09); }
#utility-entry { display:none; }
.app-footer > div:nth-child(2) { display:none; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:radial-gradient(circle at 78% -10%,#dbeafe 0,transparent 28%),var(--bg); color:#15233b; font:15px/1.45 Inter,system-ui,-apple-system,"Segoe UI",sans-serif; } button,input { font:inherit; } button { cursor:pointer; border:0; } input { transition:.18s ease; }
.login { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 20% 10%,#3978ef 0,transparent 29%),linear-gradient(135deg,#091735,#1745a8); }.login-card { background:#fff; width:min(430px,100%); padding:38px; border-radius:22px; box-shadow:0 25px 70px #00184777; }.brand { display:flex; align-items:center; gap:12px; font-weight:800; color:var(--navy); font-size:23px; letter-spacing:-.4px; }.brand small { display:block; margin-top:1px; color:#91a0b8; font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }.logo { display:grid; place-items:center; width:39px;height:39px;border-radius:12px;color:#fff;background:linear-gradient(145deg,#3b82f6,#1d4ed8); box-shadow:0 6px 14px #2563eb55; }.sub { color:var(--muted); margin:9px 0 26px; }
label { display:block; font-weight:650; margin:16px 0 7px; } input { width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:10px; background:#fff; color:#15233b; } input:focus { outline:3px solid #bfdbfe; border-color:var(--blue); }.primary { background:linear-gradient(135deg,#2563eb,#1946b7); color:#fff; border-radius:10px; padding:13px 16px; font-weight:750; width:100%; margin-top:24px; box-shadow:0 8px 16px #2563eb44; }.hint { color:var(--muted); font-size:12px; margin-top:19px; }
.shell { min-height:100vh; display:grid; grid-template-columns:250px minmax(0,1fr); }.side { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; color:#cbd9f9; background:linear-gradient(180deg,#0c214a,#0a1633); padding:28px 15px; box-shadow:6px 0 25px #0b1d4224; }.side .brand { color:#fff; margin:0 9px 34px; font-size:20px; }.side .logo { width:38px;height:38px; background:linear-gradient(145deg,#4c91ff,#2361df); }.nav { display:flex; align-items:center; gap:12px; width:100%; text-align:left; color:inherit; background:transparent; padding:12px 13px; border-radius:10px; margin:3px 0; text-decoration:none; font-weight:600; transition:background .16s,color .16s,transform .16s; }.nav:hover { background:#ffffff13; color:#fff; transform:translateX(2px); }.nav.active { color:#fff; background:linear-gradient(90deg,#3376ed,#2d66cf); box-shadow:0 8px 20px #00000028; }.nav-icon { display:grid; place-items:center; width:20px; font-size:19px; line-height:1; }.nav.out { margin-top:auto; color:#f8c2c8; }.content { padding:34px clamp(18px,4vw,52px); max-width:1300px; width:100%; margin:0 auto; }.top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; }.top h1 { margin:0; font-size:30px; letter-spacing:-.8px; }.profile { display:inline-flex; margin-top:6px; padding:4px 9px; border-radius:999px; background:#e9f0ff; color:#47618c; font-size:12px; font-weight:700; }
.grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:20px 0; }.card,.panel { background:#fff; border:1px solid #edf1f7; border-radius:16px; box-shadow:var(--shadow); }.card { position:relative; overflow:hidden; padding:21px; }.card::after { content:""; position:absolute; width:75px;height:75px; right:-24px;bottom:-31px;border-radius:50%;background:#dbeafe; }.card:nth-child(2)::after { background:#dcfce7; }.card:nth-child(3)::after { background:#fef3c7; }.card:nth-child(4)::after { background:#f3e8ff; }.metric { color:var(--muted); font-size:13px; font-weight:700; }.number { position:relative; z-index:1; font-size:35px; line-height:1.1; font-weight:820; letter-spacing:-1.5px; margin-top:8px; }.panel { padding:22px; margin-top:18px; }.panel h2 { margin:0 0 6px; font-size:19px; letter-spacing:-.25px; }.toolbar { display:flex; gap:10px; margin-top:17px; }.toolbar input { flex:1; }.action { min-width:125px; padding:11px 15px; border-radius:10px; font-weight:750; background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; box-shadow:0 6px 13px #2563eb33; transition:transform .16s,box-shadow .16s; }.action:hover { transform:translateY(-1px); box-shadow:0 9px 18px #2563eb44; }.action:disabled { cursor:not-allowed; opacity:.48; box-shadow:none; transform:none; }.action.secondary { background:#eaf1ff; color:#245bc8; box-shadow:none; }.action.danger { background:var(--danger); }.notice { border-left:4px solid #f3a61d; background:#fff9e8; color:#735119; padding:13px; margin-top:17px; border-radius:8px; }.result { margin-top:17px; padding:15px; background:#f7faff; border:1px solid #d9e8ff; border-radius:10px; white-space:pre-wrap; overflow:auto; }.hidden { display:none; }.status { margin:13px 0 0; color:var(--muted); font-size:14px; font-weight:600; }.ok { color:var(--success); }.err { color:var(--danger); } .settings { max-width:600px; }.small { color:var(--muted); font-size:13px; } .row { display:flex; gap:10px; align-items:center; margin-top:16px; }.row .action { width:auto; }
.summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 24px; white-space:normal; }.summary div { display:grid; gap:3px; }.summary span { font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.35px; }.summary strong { font-weight:700; overflow-wrap:anywhere; }.summary div:last-child:nth-child(odd) { grid-column:1/-1; }.success-result { color:var(--success); font-weight:800; font-size:20px; white-space:normal; }.app-footer { margin:44px 0 6px; padding:16px; border:1px solid #e5ebf5; border-radius:11px; background:#f8fafc; color:#76849a; text-align:center; font-size:12px; line-height:1.65; }.report-filter label { margin:0; color:var(--muted); font-size:13px; }.report-filter label input { margin-top:4px; }.report-table { margin-top:18px; border:1px solid var(--line); border-radius:10px; overflow:auto; }.report-table>div { min-width:680px; display:grid; grid-template-columns:110px 100px 1.5fr 1.5fr 80px; gap:12px; padding:11px 13px; border-bottom:1px solid var(--line); }.report-table>div:last-child { border-bottom:0; }.report-table .report-head { background:#edf3ff; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; }.camera-preview { display:block; width:min(420px,100%); max-height:280px; object-fit:cover; border-radius:12px; margin-top:14px; background:#102a52; }
.shelf-input { max-width:330px; margin:14px 0 4px; color:#315481; font-size:13px; }.shelf-input input { margin-top:5px; border-color:#b8d3ff; background:#f8fbff; }.dark .shelf-input { color:#bbd2fa; }.dark .shelf-input input { background:#111d33; border-color:#36517d; }
@media (max-width:930px) { .grid { grid-template-columns:repeat(2,1fr); } }.external { color:#c8d8ff; } @media (max-width:720px) { .shell { grid-template-columns:1fr; }.side { position:static; height:auto; padding:11px; flex-direction:row; overflow:auto; align-items:center; gap:4px; }.side .brand { flex:0 0 auto; margin:0 8px 0 0; font-size:16px; }.side .brand small { display:none; }.side .logo { width:31px;height:31px; }.nav { flex:0 0 auto; width:auto; padding:9px 10px; white-space:nowrap; }.nav.out { margin:0; }.content { padding:23px 14px; }.top { margin-bottom:17px; }.top h1 { font-size:26px; }.grid { grid-template-columns:1fr 1fr; gap:10px; }.card { padding:16px; }.number { font-size:29px; }.toolbar { flex-wrap:wrap; }.toolbar input { min-width:100%; }.action { flex:1; }.summary { grid-template-columns:1fr; }.summary div:last-child:nth-child(odd) { grid-column:auto; } }

/* Private utility admin: a report filter needs more room than the normal login card. */
.login-card:has(#admin-content) { width:min(1080px,100%); padding:32px; }
.login-card:has(#admin-content) > .toolbar { flex-wrap:wrap; align-items:center; }
.login-card:has(#admin-content) .report-filter { align-items:flex-end; flex-wrap:wrap; }
.login-card:has(#admin-content) .report-filter label { flex:1 1 150px; min-width:145px; margin:0; }
.login-card:has(#admin-content) .report-filter input,
.login-card:has(#admin-content) .report-filter select { width:100%; }
.login-card:has(#admin-content) .report-filter .action { flex:0 0 auto; }
.login-card:has(#admin-content) .pending-row .toolbar { margin:0; flex-wrap:wrap; }
.util-photo-view { margin-top:9px; }
.util-photo-view img { display:block; max-width:min(420px,100%); max-height:330px; object-fit:contain; border-radius:10px; border:1px solid #dbe5f5; }
@media (max-width:720px) {
  .login-card:has(#admin-content) { padding:24px; }
  .login-card:has(#admin-content) .report-filter label { flex-basis:100%; }
  .login-card:has(#admin-content) .report-filter .action { width:100%; }
}

/* Utility admin workspace */
.login:has(#admin-content) {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  align-items:start;
  padding:clamp(44px,8vh,104px) 24px;
  background:
    radial-gradient(circle at 12% 12%, #d8e9ff 0, transparent 27%),
    radial-gradient(circle at 90% 90%, #d7e6ff 0, transparent 30%),
    linear-gradient(135deg,#edf5ff 0%,#dbeaff 48%,#f5f8ff 100%);
}
.login:has(#admin-content)::before,
.login:has(#admin-content)::after {
  content:"";
  position:absolute;
  z-index:0;
  width:clamp(260px,27vw,460px);
  aspect-ratio:1;
  border-radius:48% 52% 62% 38% / 48% 42% 58% 52%;
  filter:blur(3px);
  opacity:.6;
  animation:admin-float 13s ease-in-out infinite alternate;
}
.login:has(#admin-content)::before {
  top:8%; left:-8%;
  background:linear-gradient(135deg,#9ec5ff,#c8dbff 65%,#b9f0e1);
}
.login:has(#admin-content)::after {
  right:-9%; bottom:4%;
  background:linear-gradient(135deg,#c4d6ff,#c7edff 55%,#efe1ff);
  animation-delay:-6s;
  animation-duration:16s;
}
.login-card:has(#admin-content) {
  position:relative;
  z-index:1;
  overflow:hidden;
  width:min(1320px,100%);
  padding:clamp(34px,3.2vw,48px);
  border:1px solid rgba(255,255,255,.74);
  border-radius:26px;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,249,255,.96));
  box-shadow:0 30px 80px rgba(3,18,58,.4);
}
.login-card:has(#admin-content)::before {
  content:"";
  position:absolute;
  top:-130px; right:-100px;
  width:310px; height:310px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(88,142,255,.18),rgba(88,142,255,0) 70%);
  pointer-events:none;
}
.login-card:has(#admin-content) .brand { font-size:25px; }
.login-card:has(#admin-content) .sub { margin:7px 0 23px; }
.login-card:has(#admin-content) > .toolbar {
  position:relative;
  z-index:1;
  display:inline-flex;
  gap:7px;
  margin:0 0 22px;
  padding:5px;
  border:1px solid #e1e9f7;
  border-radius:13px;
  background:#f4f7fd;
}
.login-card:has(#admin-content) > .toolbar .action {
  min-width:124px;
  padding:10px 16px;
  border-radius:9px;
  box-shadow:none;
}
.login-card:has(#admin-content) > .toolbar .action.secondary { background:transparent; }
.login-card:has(#admin-content) > .toolbar .action.secondary:hover { background:#e8efff; transform:none; }
#admin-content { position:relative; z-index:1; }
.login-card:has(#admin-content) .panel {
  margin-top:0;
  padding:25px;
  border-radius:18px;
  border-color:#e0e9f8;
  background:rgba(255,255,255,.82);
  box-shadow:0 13px 32px rgba(23,57,112,.08);
}
.login-card:has(#admin-content) .panel h2 { font-size:20px; }
.login-card:has(#admin-content) .report-filter {
  display:grid;
  grid-template-columns:1.15fr 1.1fr .95fr .95fr auto;
  gap:12px;
  padding:17px;
  margin:17px 0 0;
  border:1px solid #e2eaf8;
  border-radius:14px;
  background:linear-gradient(135deg,#f9fbff,#f1f6ff);
}
.login-card:has(#admin-content) .report-filter label {
  display:grid;
  gap:6px;
  min-width:0;
  color:#647492;
  font-size:12px;
  font-weight:800;
  letter-spacing:.15px;
}
.login-card:has(#admin-content) .report-filter input,
.login-card:has(#admin-content) .report-filter select {
  height:45px;
  margin:0;
  padding:0 12px;
  border:1px solid #d6e1f2;
  border-radius:10px;
  outline:none;
  color:#203454;
  background:#fff;
  box-shadow:inset 0 1px 1px rgba(19,47,93,.03);
}
.login-card:has(#admin-content) .report-filter select { appearance:auto; }
.login-card:has(#admin-content) .report-filter input:focus,
.login-card:has(#admin-content) .report-filter select:focus { border-color:#5a8bf0; box-shadow:0 0 0 3px #dbeafe; }
.login-card:has(#admin-content) .report-filter .action { align-self:end; min-height:45px; padding:10px 20px; }
#report-list { min-height:72px; margin-top:16px; }
#report-list:not(:has(.pending-row)) {
  display:grid;
  place-items:center start;
  padding:17px 18px;
  border:1px dashed #ccd9ef;
  border-radius:12px;
  background:#fbfdff;
}
#report-list:not(:has(.pending-row)) .small { margin:0; }
.login-card:has(#admin-content) .pending-row {
  padding:15px 4px;
  border-color:#e6edf8;
}
.login-card:has(#admin-content) .pending-row strong { color:#1a3159; }
.login-card:has(#admin-content) .pending-row .action.secondary { border:1px solid #d4e0f3; background:#f5f8ff; }
.camera-stop { min-width:auto; margin-top:8px; padding:8px 12px; }
#camera-box { width:min(520px,100%); }
#camera-box video { width:100% !important; max-height:330px; object-fit:cover; border-radius:12px; background:#102a52; }
#camera-box img { max-width:100%; }
.report-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.report-metrics .number small { font-size:15px; letter-spacing:0; color:var(--muted); }
@media (max-width:820px) { .report-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.inventory-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.inventory-list { margin-top:14px; border-top:1px solid var(--line); }
.inventory-row { display:flex; align-items:center; gap:13px; padding:13px 5px; border-bottom:1px solid var(--line); transition:background .18s ease,border-color .18s ease; }
.inventory-row > div { display:grid; gap:2px; min-width:0; flex:1; }.inventory-row span,.inventory-row small { color:var(--muted); font-size:12px; overflow-wrap:anywhere; }.inventory-row b { padding:5px 9px; border-radius:999px; background:#eef2f8; color:#64748b; font-size:12px; white-space:nowrap; }.inventory-mark { display:grid; place-items:center; flex:0 0 auto; width:28px; height:28px; border:1px solid #cbd7e9; border-radius:50%; color:#8291a7; font-weight:850; }.inventory-row.checked { margin:3px -7px; padding:13px 12px; border-color:#bceccd; border-radius:11px; background:#effcf4; }.inventory-row.checked .inventory-mark { border-color:#35bd70; background:#22c55e; color:#fff; }.inventory-row.checked b { background:#d9f9e5; color:#147445; }.inventory-unknown { margin-top:18px; padding:14px 16px; border:1px solid #ffd1d8; border-radius:12px; background:#fff4f5; color:#a12b3d; }.inventory-unknown p { margin:5px 0 0; overflow-wrap:anywhere; }
@media (max-width:820px) { .inventory-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { .inventory-row { align-items:flex-start; }.inventory-row b { font-size:10px; }.inventory-metrics .number { font-size:27px; } }
@keyframes admin-float {
  0% { transform:translate3d(0,0,0) rotate(-4deg) scale(1); }
  100% { transform:translate3d(70px,42px,0) rotate(9deg) scale(1.12); }
}
@media (prefers-reduced-motion:reduce) {
  .login:has(#admin-content)::before,
  .login:has(#admin-content)::after { animation:none; }
}
@media (max-width:830px) {
  .login-card:has(#admin-content) .report-filter { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .login-card:has(#admin-content) .report-filter .action { grid-column:1/-1; width:100%; }
}
@media (max-width:560px) {
  .login:has(#admin-content) { padding:26px 13px; }
  .login-card:has(#admin-content) { padding:22px 17px; border-radius:20px; }
  .login-card:has(#admin-content) .brand { font-size:20px; }
  .login-card:has(#admin-content) > .toolbar { display:grid; width:100%; grid-template-columns:1fr 1fr; }
  .login-card:has(#admin-content) > .toolbar .action:last-child { grid-column:1/-1; }
  .login-card:has(#admin-content) .panel { padding:18px; }
  .login-card:has(#admin-content) .report-filter { grid-template-columns:1fr; padding:13px; }
  .login-card:has(#admin-content) .report-filter .action { grid-column:auto; }
}
.api-state { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border:1px solid #ccefdc; border-radius:999px; background:#f0fdf5; color:#168351; font-size:12px; font-weight:750; }.api-state i { width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px #bbf7d0; }.quick-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }.quick-actions button { display:flex; align-items:center; justify-content:center; gap:9px; padding:14px; border:1px solid #e4ebf7; border-radius:13px; background:#fff; color:#29436f; font-weight:750; box-shadow:0 6px 18px #183c7720; transition:.16s ease; }.quick-actions button:hover { transform:translateY(-2px); color:#1555cd; border-color:#b9d2ff; }.quick-actions span { display:grid; place-items:center; width:25px;height:25px;border-radius:8px;background:#e9f1ff;color:#2563eb;font-size:18px; }.last-activity { display:flex; align-items:center; gap:13px; margin-top:18px; padding:16px 18px; border:1px solid #e4ebf5; border-radius:14px; background:#fff; box-shadow:0 8px 24px #193d7420; }.last-activity div { display:grid; gap:2px; }.last-activity small,.last-activity span { color:var(--muted); font-size:12px; }.last-activity strong { font-size:15px; }.activity-mark { display:grid; place-items:center; flex:0 0 auto; width:38px;height:38px;border-radius:12px;background:#eaf1ff;color:#2563eb;font-size:22px;font-weight:800; }.issue-mark { background:#dcfce7;color:#14834f; }.receive-mark { background:#eaf1ff;color:#2563eb; }.empty-activity { opacity:.75; }
.top-tools { display:flex; align-items:center; gap:10px; }.theme-toggle { padding:8px 11px; border:1px solid #dce5f1; border-radius:999px; background:#fff; color:#465a7c; font-size:12px; font-weight:750; }.section-title { display:flex; align-items:center; justify-content:space-between; gap:16px; }.section-title p { margin:2px 0 0; }.pending-search { display:flex; gap:8px; align-items:center; }.pending-search input { width:220px; padding:9px 10px; }.pending-search .action { min-width:auto; padding:9px 12px; }.pending-list { margin-top:14px; border-top:1px solid var(--line); }.pending-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 4px; border-bottom:1px solid var(--line); }.pending-row div { display:grid; gap:2px; }.pending-row span { color:var(--muted); font-size:12px; }.pending-row b { padding:5px 8px; border-radius:7px; background:#eaf1ff; color:#245bc8; font-size:12px; white-space:nowrap; }
.tracking-panel { border-color:#d8e6ff; background:linear-gradient(120deg,rgba(255,255,255,.88),rgba(237,246,255,.82)); }.tracking-result { min-height:45px; margin-top:14px; padding:13px 15px; border:1px dashed #bfd5f7; border-radius:11px; background:rgba(255,255,255,.56); }.tracking-result .summary { margin:0; }.dark .tracking-panel { background:linear-gradient(120deg,rgba(24,35,59,.96),rgba(22,46,78,.9)); border-color:#34517e; }.dark .tracking-result { border-color:#3b5885; background:rgba(11,23,43,.35); }
.phone-search-panel { border-color:#d9e9ff; }.phone-results { margin-top:14px; }.phone-parcel { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 3px; border-top:1px solid var(--line); }.phone-parcel div { display:grid; gap:3px; min-width:0; }.phone-parcel strong { overflow-wrap:anywhere; }.phone-parcel span,.phone-parcel small { color:var(--muted); font-size:12px; }.phone-parcel .action { min-width:auto; flex:0 0 auto; padding:9px 12px; }.dark .phone-search-panel { border-color:#35517d; }
.bulk-issue-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:10px; background:#edf7ff; color:#346187; font-size:13px; font-weight:700; }.bulk-issue-bar .action { min-width:175px; padding:9px 12px; }.issue-check { display:grid; place-items:center; width:21px; height:21px; margin:0; flex:0 0 auto; }.issue-check input { width:18px; height:18px; padding:0; accent-color:var(--blue); }.dark .bulk-issue-bar { background:#1d3558; color:#c7dcff; }
.report-types { display:flex; align-items:center; gap:11px; padding-top:19px; white-space:nowrap; }.report-types label { margin:0; color:#4d6284; font-size:13px; font-weight:700; }.report-types input { width:auto; padding:0; accent-color:var(--blue); }.report-table.operations>div { min-width:950px; grid-template-columns:150px 95px 1.35fr 1.15fr 1.3fr 1.1fr 80px; }.report-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }.dark .report-types label { color:#c5d5ef; } @media (max-width:720px) { .report-types { width:100%; padding-top:0; }.report-filter .action { flex:1 1 45%; }.report-metrics { grid-template-columns:repeat(3,1fr); }.report-metrics .card { padding:13px; }.report-metrics .number { font-size:26px; } }
.report-search { margin-top:14px; }.report-search input { max-width:480px; border-color:#c7d9f5; background:#fbfdff; }.report-search input:disabled { opacity:.58; cursor:not-allowed; }.dark .report-search input { background:#111d33; border-color:#36517d; }
.page-heading { display:flex; align-items:center; gap:12px; }.shop-logo { display:grid; place-items:center; flex:0 0 auto; width:43px; height:43px; border-radius:13px; background-color:#2563eb; background-size:cover; background-position:center; color:#fff; font-weight:850; font-size:21px; box-shadow:0 7px 16px #2563eb44; }
.operation-animation { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:24px; pointer-events:none; opacity:0; background:rgba(8,24,50,.12); transition:opacity .24s ease; }.operation-animation.show { opacity:1; }.operation-animation-card { position:relative; z-index:2; min-width:min(340px,100%); display:grid; justify-items:center; gap:10px; padding:30px 38px; border:1px solid rgba(255,255,255,.72); border-radius:24px; color:#fff; text-align:center; background:linear-gradient(135deg,rgba(21,135,80,.96),rgba(28,181,111,.93)); box-shadow:0 25px 70px rgba(11,70,48,.38); transform:translateY(15px) scale(.92); transition:transform .34s cubic-bezier(.2,1.35,.4,1); backdrop-filter:blur(18px); }.operation-animation.show .operation-animation-card { transform:translateY(0) scale(1); }.operation-animation.duplicate .operation-animation-card { background:linear-gradient(135deg,rgba(213,125,28,.96),rgba(239,166,42,.93)); box-shadow:0 25px 70px rgba(113,67,10,.34); }.operation-animation-icon { display:grid; place-items:center; width:58px; height:58px; border:3px solid rgba(255,255,255,.9); border-radius:50%; font-size:34px; font-weight:800; animation:success-pop .62s cubic-bezier(.2,1.55,.5,1) both; }.operation-animation-card strong { font-size:25px; letter-spacing:-.45px; }.operation-animation-card small { max-width:290px; color:rgba(255,255,255,.88); font-size:13px; }.success-burst { position:absolute; width:300px; height:300px; }.success-burst i { position:absolute; top:50%; left:50%; width:8px; height:16px; border-radius:9px; background:#fff; opacity:0; transform:rotate(calc(var(--n) * 20deg)) translateY(-72px); animation:burst .78s ease-out .14s both; }.operation-animation.duplicate .success-burst i { background:#fff5cf; } @keyframes success-pop { 0% { transform:scale(.3) rotate(-18deg); } 100% { transform:scale(1) rotate(0); } } @keyframes burst { 0% { opacity:0; transform:rotate(calc(var(--n) * 20deg)) translateY(-10px) scale(.4); } 35% { opacity:1; } 100% { opacity:0; transform:rotate(calc(var(--n) * 20deg)) translateY(-132px) scale(1); } }
.dark body { --bg:#10182b; --line:#2b3852; --muted:#9dacc4; color:#e9effb; background:radial-gradient(circle at 78% -10%,#243d72 0,transparent 28%),#10182b; }.dark .side { background:linear-gradient(180deg,#08132b,#060d20); }.dark .panel,.dark .card,.dark .last-activity,.dark .quick-actions button,.dark .theme-toggle { background:#18233b; border-color:#2a3955; color:#e8eef9; box-shadow:none; }.dark input { background:#111a2d; border-color:#30405e; color:#eef4ff; }.dark .card::after { opacity:.22; }.dark .profile { background:#26395b; color:#d5e3ff; }.dark .app-footer,.dark .result { background:#141f34; border-color:#2b3955; color:#aebbd0; }.dark .quick-actions span,.dark .pending-row b { background:#263b63; color:#bcd6ff; }.dark .theme-toggle { color:#d1dcef; }.dark .report-table .report-head { background:#223453; }.dark .pending-list { border-color:#2b3955; }
.season-scene { pointer-events:none; position:fixed; z-index:-1; inset:0; overflow:hidden; }.season-scene::before,.season-scene::after { content:""; position:absolute; border-radius:50%; filter:blur(2px); opacity:.5; }.season-scene::before { width:360px;height:360px;top:10%;right:-90px; }.season-scene::after { width:280px;height:280px;bottom:-100px;left:15%; }.season-scene i { position:absolute; width:9px;height:9px; left:calc((var(--i) * 13.7%) - 3%); top:calc((var(--i) * 7.9%) - 9%); opacity:.55; animation:season-fall calc(7s + var(--i) * .22s) linear infinite; animation-delay:calc(var(--i) * -.42s); }.panel,.card,.last-activity,.quick-actions button { backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); background:rgba(255,255,255,.78); }.app-footer { backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); background:rgba(248,250,252,.76); }
html[data-season="winter"] .season-scene { background:linear-gradient(135deg,#dcecff99,#b9d3f044 55%,#f6fbff88); } html[data-season="winter"] .season-scene::before { background:#d8edff; } html[data-season="winter"] .season-scene::after { background:#9ec5eb; } html[data-season="winter"] .season-scene i { border-radius:50%; background:#fff; box-shadow:0 0 8px #fff; }
html[data-season="spring"] .season-scene { background:linear-gradient(135deg,#e5f9e888,#d2f0d955 56%,#fff1f688); } html[data-season="spring"] .season-scene::before { background:#c2f0c7; } html[data-season="spring"] .season-scene::after { background:#ffd4e3; } html[data-season="spring"] .season-scene i { width:7px;height:11px;border-radius:70% 0 70% 0;background:#ff9fc2; transform:rotate(30deg); }
html[data-season="summer"] .season-scene { background:linear-gradient(135deg,#d8f5ea88,#d1ebff55 55%,#fff7c488); } html[data-season="summer"] .season-scene::before { background:#a8e3c1; } html[data-season="summer"] .season-scene::after { background:#ffe394; } html[data-season="summer"] .season-scene i { width:8px;height:13px;border-radius:80% 0 80% 0;background:#6fc987; transform:rotate(38deg); }
html[data-season="autumn"] .season-scene { background:linear-gradient(135deg,#ffe4be88,#fed3a555 55%,#f7d7d488); } html[data-season="autumn"] .season-scene::before { background:#ffc477; } html[data-season="autumn"] .season-scene::after { background:#d98448; } html[data-season="autumn"] .season-scene i { width:9px;height:13px;border-radius:80% 0 80% 0;background:#dc7b33; transform:rotate(38deg); }
@keyframes season-fall { from { translate:0 -20px; rotate:0deg; } to { translate:80px 108vh; rotate:420deg; } }
.export-dialog-backdrop { position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:18px;background:#0a1730a8;backdrop-filter:blur(7px);animation:dialog-in .16s ease-out; }.export-dialog { position:relative;width:min(530px,100%);padding:28px;border:1px solid #d8e5f8;border-radius:20px;background:linear-gradient(145deg,#fff,#f4f8ff);box-shadow:0 22px 70px #06142e70;text-align:center; }.export-dialog h2 { margin:8px 0 6px;color:#1b335d;font-size:23px; }.export-dialog p { margin:0 auto 22px;max-width:390px;color:#657695;font-size:13px;line-height:1.5; }.dialog-icon { display:grid;place-items:center;width:48px;height:48px;margin:auto;border-radius:15px;background:#e7f0ff;color:#2360d5;font-size:26px;font-weight:800; }.dialog-close { position:absolute;right:12px;top:10px;width:31px;height:31px;border-radius:9px;background:transparent;color:#6d7d96;font-size:25px;line-height:1; }.dialog-close:hover { background:#e9eff9; }.export-options { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }.export-options button { display:grid;gap:5px;min-height:94px;padding:12px 8px;border:1px solid #d9e5f8;border-radius:13px;background:#fff;color:#31537e;transition:.16s ease; }.export-options button:hover:not(:disabled) { transform:translateY(-2px);border-color:#8eb5fa;box-shadow:0 9px 18px #2d62b526;color:#1658cb; }.export-options b { font-size:17px; }.export-options span { color:#71809a;font-size:11px;line-height:1.3; }.export-options button:disabled { cursor:wait;opacity:.7; }.dark .export-dialog { background:linear-gradient(145deg,#192842,#101c31);border-color:#334968; }.dark .export-dialog h2 { color:#ecf3ff; }.dark .export-dialog p,.dark .export-options span { color:#aabbd5; }.dark .export-options button { background:#14233b;border-color:#334d70;color:#d9e8ff; }.dark .dialog-close { color:#c3d1e6; }.dark .dialog-close:hover { background:#263b5a; } @keyframes dialog-in { from { opacity:0;transform:scale(.97); } to { opacity:1;transform:scale(1); } } @media (max-width:520px) { .export-options { grid-template-columns:1fr; }.export-options button { min-height:62px;grid-template-columns:62px 1fr;text-align:left;align-items:center; }.export-options span { grid-column:2; } }

/* Operational states and scanning workflow */
.status.ok { display:flex; align-items:center; gap:7px; color:#16834f; }.status.ok::before { content:'✓'; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#dcfce7; color:#15803d; font-weight:900; }.status.err { display:flex; align-items:center; gap:7px; padding:9px 11px; border-radius:9px; background:#fff4f5; color:#c12d43; }.status.err::before { content:'!'; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#fee2e2; color:#dc2626; font-weight:900; }.api-state.offline,.api-state.expired { border-color:#fde3a8; background:#fff8e5; color:#a2670c; }.api-state.offline i,.api-state.expired i { background:#f59e0b; box-shadow:0 0 0 4px #fdebbf; }.api-state.expired { border-color:#ffd3d8; background:#fff3f4; color:#bd3343; }.api-state.expired i { background:#ef4444; box-shadow:0 0 0 4px #ffdadd; }
.report-periods { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }.report-periods button { padding:7px 12px; border:1px solid #d8e4f6; border-radius:999px; background:#f7faff; color:#466184; font-size:12px; font-weight:750; }.report-periods button:hover,.report-periods button.active { border-color:#89b1fa; background:#e7f0ff; color:#1d57c7; }
.receive-queue { display:grid; gap:7px; margin:14px 0; }.queue-item { display:grid; grid-template-columns:minmax(130px,1fr) minmax(120px,1.3fr) auto auto; align-items:center; gap:10px; padding:10px 12px; border:1px solid #e2ebf8; border-radius:11px; background:#fbfdff; }.queue-item strong { color:#1c3766; overflow-wrap:anywhere; }.queue-item span { color:#657694; font-size:13px; overflow-wrap:anywhere; }.queue-item em { padding:5px 8px; border-radius:999px; background:#e8f0ff; color:#2859b8; font-style:normal; font-size:12px; font-weight:750; white-space:nowrap; }.queue-item b { padding:5px 8px; border-radius:999px; background:#fff4d6; color:#9a6700; font-size:11px; white-space:nowrap; }
.bag-progress { display:flex; align-items:center; gap:16px; margin:16px 0 6px; padding:15px; border:1px solid #d9e8fb; border-radius:14px; background:linear-gradient(120deg,#f6faff,#eefbf4); }.bag-progress strong { color:#20375f; }.bag-progress p { margin:4px 0 0; color:#687b99; font-size:13px; }.bag-ring { --progress:0deg; display:grid; place-items:center; flex:0 0 auto; width:94px; height:94px; border-radius:50%; background:conic-gradient(#3168e8 var(--progress),#e7eef8 0); }.bag-ring::before { content:''; position:absolute; width:76px; height:76px; border-radius:50%; background:#fff; }.bag-ring span { position:relative; color:#254571; font-size:17px; font-weight:850; }.bag-ring.complete { background:conic-gradient(#22a965 var(--progress),#e7f7ed 0); }.bag-progress:has(.bag-ring.complete) { border-color:#bce8ce; background:#f1fcf5; }
.issue-confirm-backdrop { position:fixed; z-index:1100; inset:0; display:grid; place-items:center; padding:18px; background:#07152c99; backdrop-filter:blur(6px); animation:dialog-in .16s ease-out; }.issue-confirm { width:min(420px,100%); padding:28px; border:1px solid #d5e4fb; border-radius:22px; background:linear-gradient(145deg,#fff,#f4f8ff); box-shadow:0 25px 80px #07152c80; text-align:center; }.issue-confirm-icon { display:grid; place-items:center; width:54px; height:54px; margin:auto; border-radius:17px; background:#dcfce7; color:#16834f; font-size:28px; font-weight:900; }.issue-confirm h2 { margin:12px 0 18px; color:#1e3356; }.issue-confirm-data { display:grid; grid-template-columns:110px 1fr; gap:8px 12px; padding:14px; border-radius:13px; background:#f7faff; text-align:left; }.issue-confirm-data span { color:#70809a; font-size:12px; font-weight:700; }.issue-confirm-data strong { color:#233b64; overflow-wrap:anywhere; }.issue-confirm-actions { display:flex; justify-content:center; gap:10px; margin-top:18px; }.issue-confirm-actions .action { min-width:150px; }.dark .issue-confirm { background:#172640; border-color:#344c70; }.dark .issue-confirm h2,.dark .issue-confirm-data strong { color:#edf3ff; }.dark .issue-confirm-data { background:#111f36; }.dark .bag-progress { background:#162a42; border-color:#345478; }.dark .bag-progress strong { color:#e8f1ff; }.dark .bag-ring::before { background:#16233b; }.dark .bag-ring span { color:#d9e8ff; }
@media (max-width:700px) { .queue-item { grid-template-columns:1fr auto; }.queue-item span { grid-column:1/-1; grid-row:2; }.queue-item em { grid-column:1; grid-row:3; justify-self:start; }.queue-item b { grid-column:2; grid-row:3; }.issue-confirm-actions { flex-direction:column-reverse; }.issue-confirm-actions .action { width:100%; }.bag-progress { align-items:flex-start; } }
.issue-photo-qr { border-color:#d9e7fc; }.issue-photo-grid { display:grid; grid-template-columns:220px minmax(0,1fr); gap:18px; align-items:center; margin-top:16px; }.issue-photo-grid > div:first-child { display:grid; justify-items:center; gap:7px; }.issue-photo-grid img { max-width:210px; border-radius:13px; }.issue-photo-grid small { color:#71809a; font-size:12px; }.issue-photo-preview { display:grid; min-height:210px; place-items:center; align-content:center; gap:9px; padding:14px; border:1px dashed #c9daf3; border-radius:14px; background:#f9fbff; color:#71809a; text-align:center; }.issue-photo-preview img { max-width:100%; max-height:220px; object-fit:contain; }.issue-photo-preview strong { color:#16834f; font-size:16px; }.issue-photo-preview span { color:#5e708d; font-size:12px; }.photo-state { padding:6px 10px; border-radius:999px; background:#eef2f8; color:#687890; font-size:12px; font-weight:750; white-space:nowrap; }.photo-state.waiting { background:#fff4d8; color:#98650d; }.photo-state.received { background:#dcfce7; color:#16834f; }.photo-state.error { background:#fff0f1; color:#c23348; }.issue-phone { min-height:100vh; }.issue-phone .login-card { width:min(460px,100%); }.issue-phone-data { display:grid; grid-template-columns:110px 1fr; gap:9px 12px; margin:16px 0; padding:15px; border-radius:14px; background:#f7faff; text-align:left; }.issue-phone-data span { color:#71809a; font-size:12px; font-weight:750; }.issue-phone-data strong { overflow-wrap:anywhere; color:#20385f; }.photo-capture { display:grid; gap:7px; margin:14px 0; padding:14px; border:1px dashed #9ebcf2; border-radius:13px; background:#f8fbff; color:#315782; font-weight:750; }.photo-capture input { padding:0; border:0; background:transparent; }.issue-phone-preview { width:100%; max-height:340px; object-fit:contain; margin:8px 0; border-radius:13px; }.issue-phone-preview.sent { opacity:.8; }.dark .issue-photo-preview,.dark .photo-capture,.dark .issue-phone-data { background:#13233c; border-color:#385578; }.dark .issue-phone-data strong { color:#ecf3ff; }
@media (max-width:620px) { .issue-photo-grid { grid-template-columns:1fr; }.issue-photo-grid > div:first-child { order:2; }.issue-photo-preview { min-height:170px; }.issue-photo-qr .section-title { align-items:flex-start; }.issue-photo-qr .toolbar { flex-wrap:wrap; }.issue-photo-qr .toolbar .action { flex:1 1 160px; } }

/* Фото выдачи: на телефоне оно всегда остаётся внутри карточки. */
.issue-phone-preview { display:block; box-sizing:border-box; width:100%; max-width:100%; height:clamp(180px,36vh,340px); max-height:340px; object-fit:contain; margin:8px 0; border-radius:13px; background:#0d1d36; }
@media (max-width:620px) {
  .issue-phone { min-height:100dvh; align-items:flex-start; overflow:auto; padding:12px; box-sizing:border-box; }
  .issue-phone .login-card { width:100%; max-width:460px; margin:0 auto 16px; padding:17px; border-radius:18px; box-sizing:border-box; }
  .issue-phone .brand { font-size:19px; }
  .issue-phone-data { grid-template-columns:86px minmax(0,1fr); gap:7px 9px; margin:12px 0; padding:12px; }
  .photo-capture { margin:12px 0; padding:12px; }
  .issue-phone #issue-phone-preview:not(.hidden) { display:block !important; width:100% !important; max-width:100% !important; height:34vh !important; min-height:180px; max-height:270px !important; object-fit:contain !important; }
  .issue-phone .primary { min-height:46px; }
}

/* На ПК QR и фото находятся рядом с карточкой выбранной посылки. */
@media (min-width:1051px) {
  .panel:has(#issue-photo-qr-panel) { display:grid; grid-template-columns:minmax(0,1fr) 320px; column-gap:18px; align-items:start; }
  .panel:has(#issue-photo-qr-panel) > :not(#issue-photo-qr-panel) { grid-column:1; }
  .panel:has(#issue-photo-qr-panel) > #op-result { grid-row:5; }
  .panel:has(#issue-photo-qr-panel) > #issue-photo-qr-panel { grid-column:2; grid-row:5; width:auto; min-width:0; margin:0; padding:16px; align-self:start; box-shadow:none; }
  .panel:has(#issue-photo-qr-panel) > #issue-photo-qr-panel .section-title { display:block; }
  .panel:has(#issue-photo-qr-panel) > #issue-photo-qr-panel .section-title h2 { font-size:16px; }
  .panel:has(#issue-photo-qr-panel) > #issue-photo-qr-panel .section-title .photo-state { display:inline-block; margin-top:8px; }
  .panel:has(#issue-photo-qr-panel) > #issue-photo-qr-panel .issue-photo-grid { grid-template-columns:1fr; gap:12px; margin-top:12px; }
  .panel:has(#issue-photo-qr-panel) > #issue-photo-qr-panel .issue-photo-grid > div:first-child { order:2; }
  .panel:has(#issue-photo-qr-panel) > #issue-photo-qr-panel .issue-photo-grid img { max-width:165px; }
  .panel:has(#issue-photo-qr-panel) > #issue-photo-qr-panel .issue-photo-preview { min-height:160px; padding:10px; }
  .panel:has(#issue-photo-qr-panel) > #issue-photo-qr-panel .issue-photo-preview img { max-height:180px; }
  .panel:has(#issue-photo-qr-panel) > #issue-photo-qr-panel .toolbar { margin-top:12px; }
  .panel:has(#issue-photo-qr-panel) > #issue-photo-qr-panel .action { min-width:0; }
}

/* Страница «Опции». */
.options-intro { margin:4px 0 18px; }.options-intro h2 { margin:0 0 6px; font-size:20px; color:#1d335b; }
.options-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.option-card { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:16px; min-height:176px; padding:24px; border:1px solid #dce9fb; border-radius:20px; background:linear-gradient(135deg,#fff,#f5f9ff); color:#1c3155; text-align:left; box-shadow:var(--shadow); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.option-card:hover { transform:translateY(-3px); border-color:#87adf5; box-shadow:0 17px 33px #2459aa20; }.option-card > span:nth-child(2) { display:grid; gap:6px; }.option-card strong { font-size:20px; }.option-card small { color:#6a7c99; font-size:13px; line-height:1.5; }.option-card b { grid-column:2; color:#2760d2; font-size:13px; }.option-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:17px; background:linear-gradient(145deg,#e8f1ff,#ccdcff); color:#255de0; font-size:27px; box-shadow:inset 0 1px #fff; }.option-icon.recycle { background:linear-gradient(145deg,#ddfbea,#c9f3dc); color:#16834f; }
.dark .options-intro h2,.dark .option-card { color:#edf3ff; }.dark .option-card { border-color:#365174; background:linear-gradient(135deg,#142540,#102039); }.dark .option-card small { color:#a7bad7; }
@media (max-width:720px) { .options-grid { grid-template-columns:1fr; gap:12px; }.option-card { min-height:0; padding:19px; }.option-card strong { font-size:18px; } }

/* Инструкции для сотрудников ПВЗ. */
.option-icon.guide { background:linear-gradient(145deg,#fff1c8,#ffe2a1); color:#9b6500; font-weight:900; }
.instructions-head { display:flex; align-items:flex-start; gap:16px; margin:4px 0 18px; }.instructions-head .action { min-width:auto; flex:0 0 auto; }.instructions-head h2 { margin:0 0 5px; color:#1d335b; }.instructions-head p { margin:0; }
.instructions-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.instruction-card { display:grid; grid-template-columns:48px minmax(0,1fr); gap:14px; padding:19px; border:1px solid #dfebfb; border-radius:17px; background:linear-gradient(145deg,#fff,#f7faff); box-shadow:0 9px 24px #143b7b10; }.instruction-card>span { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:#e8f0ff; color:#235dd8; font-size:22px; font-weight:850; }.instruction-card:nth-child(2)>span { background:#dcfce7; color:#16834f; }.instruction-card:nth-child(3)>span { background:#fff2d4; color:#aa6900; }.instruction-card:nth-child(6)>span { background:#e2f8ea; color:#16834f; }.instruction-card h3 { margin:2px 0 8px; font-size:17px; color:#1d335b; }.instruction-card ol { margin:0; padding-left:18px; color:#526985; font-size:13px; line-height:1.65; }.instruction-card li+li { margin-top:3px; }.instruction-warning { grid-column:1/-1; padding:17px 19px; border-left:4px solid #e6a719; border-radius:12px; background:#fff9e9; color:#74521c; }.instruction-warning p { margin:5px 0 0; font-size:13px; }.dark .instructions-head h2,.dark .instruction-card h3 { color:#edf3ff; }.dark .instruction-card { border-color:#365174; background:#142540; }.dark .instruction-card ol { color:#b6c9e4; }.dark .instruction-warning { background:#3a2b12; color:#ffe5aa; }
@media (max-width:720px) { .instructions-head { display:grid; }.instructions-grid { grid-template-columns:1fr; gap:12px; }.instruction-card { padding:16px; }.instruction-warning { grid-column:auto; } }

/* Компактный просмотр посылок в админке утиль-сбора. */
.util-report-items { display:grid; gap:8px; margin-top:16px; }.util-report-row { display:grid; grid-template-columns:minmax(180px,1fr) 132px auto; align-items:center; gap:14px; min-height:76px; padding:11px 12px; border:1px solid #e0e9f6; border-radius:12px; background:#fbfdff; }.util-item-main { display:grid; gap:4px; min-width:0; }.util-item-main strong { overflow-wrap:anywhere; color:#19325b; font-size:15px; }.util-item-main span,.util-item-photo span { color:#70819b; font-size:12px; }.util-item-photo { display:grid; place-items:center; min-height:48px; overflow:hidden; border:1px dashed #cbdaf0; border-radius:9px; background:#f4f8ff; text-align:center; }.util-item-photo img { display:block; width:100%; height:90px; object-fit:cover; }.util-item-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }.util-item-actions .action { min-width:0; padding:8px 10px; font-size:12px; box-shadow:none; }.dark .util-report-row { border-color:#375274; background:#14253f; }.dark .util-item-main strong { color:#edf3ff; }.dark .util-item-photo { border-color:#41618a; background:#102039; }.dark .util-item-main span,.dark .util-item-photo span { color:#aec1dd; }
@media (max-width:720px) { .util-report-row { grid-template-columns:1fr auto; gap:10px; }.util-item-photo { grid-column:1/-1; min-height:42px; }.util-item-photo img { height:150px; object-fit:contain; }.util-item-actions { grid-column:1/-1; justify-content:flex-start; }.util-item-actions .action { flex:1 1 30%; } }

/* Временная страница главного управляющего модуля. */
.control-hub { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(circle at 18% 16%,#5d8cff 0,transparent 28%),radial-gradient(circle at 84% 75%,#55d3b2 0,transparent 27%),linear-gradient(135deg,#071737,#152c6b); }.control-hub::before,.control-hub::after { content:""; position:absolute; z-index:-1; width:440px; aspect-ratio:1; border:1px solid #91b7ff55; border-radius:50%; animation:control-float 11s ease-in-out infinite alternate; }.control-hub::before { top:-170px; right:-120px; }.control-hub::after { bottom:-220px; left:-150px; animation-delay:-5s; }.control-hub-card { position:relative; width:min(580px,100%); overflow:hidden; padding:52px; border:1px solid #ffffff55; border-radius:30px; color:#f5f9ff; text-align:center; background:linear-gradient(145deg,#ffffff24,#c8dcff15); box-shadow:0 30px 90px #020b2877; backdrop-filter:blur(20px); }.control-mark { display:grid; place-items:center; width:68px; height:68px; margin:0 auto 17px; border-radius:21px; background:linear-gradient(145deg,#77a8ff,#4b67f1); box-shadow:0 12px 30px #0a2d9688; font-size:32px; }.control-eyebrow { margin:0; color:#c7dcff; font-size:11px; font-weight:850; letter-spacing:1.1px; }.control-hub-card h1 { margin:12px 0 9px; font-size:34px; letter-spacing:-.8px; }.control-hub-card>p:not(.control-eyebrow) { max-width:410px; margin:0 auto; color:#d5e3ff; line-height:1.6; }.control-progress { display:grid; gap:9px; margin:28px auto; color:#d9e7ff; font-size:13px; font-weight:700; }.control-progress i { display:block; height:7px; overflow:hidden; border-radius:999px; background:#ffffff26; }.control-progress i::after { content:""; display:block; width:42%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#74d8ff,#a5a7ff); animation:control-progress 2.3s ease-in-out infinite; }.control-hub-card .action { min-width:180px; }.control-orbit { position:absolute; border:1px solid #b8d4ff50; border-radius:50%; pointer-events:none; }.orbit-one { width:210px; height:210px; top:-110px; left:-92px; animation:control-spin 18s linear infinite; }.orbit-two { width:130px; height:130px; right:-55px; bottom:-65px; animation:control-spin 12s linear infinite reverse; } @keyframes control-float { to { transform:translateY(36px) translateX(-20px) scale(1.08); } } @keyframes control-spin { to { transform:rotate(360deg); } } @keyframes control-progress { 0%,100% { transform:translateX(-60%); } 50% { transform:translateX(150%); } } @media (max-width:620px) { .control-hub-card { padding:38px 24px; border-radius:24px; }.control-hub-card h1 { font-size:27px; } }