: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); }
* { 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; } }
.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; } }