body { min-height: 100dvh; background:linear-gradient(180deg,#e8efec,#f6f8f7); }
.login { min-height: 100dvh; padding: 22px 20px 30px; display: grid; align-content: start; gap: 10px; background: radial-gradient(720px 390px at 50% -4%,#15725f,#15342d 55%,#0a1d19 100%); color: #fff; overflow:hidden; }
.finance-hero { position:relative; height:218px; margin:-2px -2px 8px; perspective:900px; transform-style:preserve-3d; }
.scene3d-canvas { position:absolute; inset:-8px -10px -4px; width:calc(100% + 20px); height:calc(100% + 12px); z-index:3; filter:drop-shadow(0 24px 22px rgba(0,0,0,.32)); }
.scene3d-canvas ~ .ledger-stack, .scene3d-canvas ~ .finance-phone, .scene3d-canvas ~ .coin { display:none; }
.ledger-stack { position:absolute; left:22px; bottom:24px; width:154px; height:95px; transform:rotateX(57deg) rotateZ(-14deg); }
.ledger-stack i { position:absolute; inset:0; border-radius:14px; background:linear-gradient(145deg,#eef7f4,#92b0a8); border:1px solid rgba(255,255,255,.55); box-shadow:0 15px 22px rgba(0,0,0,.32),inset 0 2px #fff; }.ledger-stack i:nth-child(1){transform:translateZ(0)}.ledger-stack i:nth-child(2){transform:translate(9px,-12px) translateZ(12px);background:linear-gradient(145deg,#ff914e,#dd5315)}.ledger-stack i:nth-child(3){transform:translate(18px,-24px) translateZ(24px);background:linear-gradient(145deg,#e8f5f1,#4f927f)}
.ledger-stack i::before { content:""; position:absolute; left:16px; right:16px; top:20px; height:7px; border-radius:5px; background:rgba(5,63,52,.35); box-shadow:0 17px rgba(5,63,52,.18),0 34px rgba(5,63,52,.18); }
.finance-phone { position:absolute; right:42px; top:16px; width:112px; height:181px; padding:8px; border-radius:24px; transform:rotateY(-16deg) rotateZ(5deg); background:linear-gradient(135deg,#eff5f2,#7b918b 70%,#3f504c); box-shadow:20px 26px 34px rgba(0,0,0,.4),inset 2px 2px 3px #fff; }
.finance-phone::before { content:""; position:absolute; width:36px; height:5px; left:38px; top:7px; border-radius:5px; background:#34433f; z-index:2; }
.phone-screen { height:100%; border-radius:18px; display:grid; align-content:center; justify-items:center; gap:9px; color:#fff; background:radial-gradient(circle at 50% 34%,#1aae8c,#076451 55%,#04382f); box-shadow:inset 0 0 20px rgba(0,0,0,.35); }.phone-screen b{font-size:50px;text-shadow:0 7px 12px rgba(0,0,0,.25)}.phone-screen span{font-size:12px;font-weight:800;letter-spacing:.12em}
.coin { position:absolute; display:grid; place-items:center; border-radius:50%; color:#7d5300; font-weight:900; background:linear-gradient(135deg,#fff2a7,#e4a91a 55%,#9d6500); border:3px solid #ffd85f; box-shadow:7px 12px 15px rgba(0,0,0,.32),inset 3px 3px 5px rgba(255,255,255,.75); }.coin.c1{width:48px;height:48px;left:50%;top:21px}.coin.c2{width:36px;height:36px;left:42%;top:83px;transform:rotateY(35deg)}.coin.c3{width:29px;height:29px;right:15px;bottom:30px;transform:rotateX(40deg)}
.login .mark { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(145deg,#14a084,#08745f); color: #fff; font-weight: 900; font-size: 22px; box-shadow:0 7px 0 #033c33,0 15px 24px rgba(0,0,0,.28); }
.login h1 { margin: 8px 0 0; font-size: 30px; }
.login p { margin: 0 0 18px; opacity: .92; }
.login form { display: grid; gap: 12px; background: linear-gradient(145deg,#fff,#edf3f0); padding: 18px; border-radius: 22px; color: var(--ink); box-shadow:0 14px 0 #c5d1cd,0 28px 45px rgba(0,0,0,.29),inset 0 1px #fff; }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.quick button { border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07)); color: #fff; box-shadow:0 6px 12px rgba(0,0,0,.16); }
.app { min-height: 100dvh; }
.top { position:sticky; top:0; z-index:5; display: flex; justify-content: space-between; align-items: center; padding: calc(14px + env(safe-area-inset-top)) 16px 13px; background: linear-gradient(145deg,#14312b,#071d19); color: #fff; box-shadow:0 10px 24px rgba(17,45,36,.24); }
.top span { display: block; font-size: 12px; opacity: .9; }
.mini { min-height: 36px; border: 0; border-radius: 11px; padding: 0 12px; font-weight: 750; background: linear-gradient(180deg,#fff,#e8efec); color: var(--brand); box-shadow:0 5px 0 #bdc8c4,0 8px 14px rgba(0,0,0,.19); }
.tabs { position:sticky; top:67px; z-index:4; display: grid; grid-template-columns: repeat(5, 1fr); gap:4px; background: linear-gradient(180deg,#fff,#edf2ef); border:0; padding:7px; box-shadow:0 7px 18px rgba(20,47,38,.13); }
.tabs button { border: 0; background: transparent; color: var(--muted); font-weight: 700; min-height: 46px; }
.tabs button.active { color: #fff; border-radius:11px; background:linear-gradient(145deg,#129078,#07604f); box-shadow:0 5px 0 #034237,0 8px 13px rgba(5,84,69,.22); }
.page { padding: 14px; display: grid; gap: 10px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar input { flex: 1; min-width: 220px; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: #fff; font: inherit; }
.toolbar .btn { min-height: 40px; padding: 0 14px; }
.stat small { display: block; color: var(--muted); margin-top: 5px; }
.orders-table-wrap { overflow: auto; background: var(--card); border-radius: 12px; border: 1px solid var(--line); }
.orders-table { border-collapse: collapse; width: 100%; min-width: 980px; font-size: 13px; }
.orders-table th { background: #f5f7f6; color: var(--muted); font-weight: 700; text-align: left; white-space: nowrap; }
.orders-table th, .orders-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.orders-table td:first-child { min-width: 220px; }
.orders-table td small { display: block; color: var(--muted); margin-top: 4px; }
.row-actions { white-space: nowrap; }
.mini-action { border: 1px solid #cfe2dc; color: var(--brand); background: #fff; border-radius: 7px; padding: 6px 8px; margin-right: 4px; cursor: pointer; }
.mini-action.danger { border-color: #f0c5bf; color: #b64336; }
.diff { color: #b64336; font-weight: 700; }
.mobile-orders { display: none; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: linear-gradient(145deg,#fff,#edf3f0); border-radius: 16px; padding: 12px; box-shadow:0 7px 0 #ccd7d3,0 14px 22px rgba(20,48,39,.1); }
.stat b { display: block; font-size: 20px; }
.stat span { color: var(--muted); font-size: 12px; }
.card { background: linear-gradient(145deg,#fff,#eef3f1); border-radius: 17px; padding: 13px; display: grid; gap: 6px; box-shadow:0 7px 0 #ced8d4,0 14px 22px rgba(20,48,39,.1); }
.row { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.addr { color: var(--muted); font-size: 12px; }
.actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.import-panel { background: linear-gradient(145deg,#fff,#edf3f0); border-radius: 18px; padding: 16px; display: grid; gap: 12px; box-shadow:0 8px 0 #cad5d1,0 16px 25px rgba(20,48,39,.11); }
.import-panel h2 { margin: 0; font-size: 18px; }
.import-panel p { margin: 0; color: var(--muted); font-size: 13px; }
.import-panel input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; background: #fff; font: inherit; }
.import-preview { overflow: auto; max-height: 360px; border: 1px solid var(--line); border-radius: 10px; }
.import-preview table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 12px; }
.import-preview th, .import-preview td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; }
.import-result { background: #edf7f3; color: #0f6b56; border-radius: 10px; padding: 12px; }
@media (min-width: 900px) { .page { max-width: 980px; margin: 0 auto; } .stats { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 899px) { .orders-table-wrap { display: none; } .mobile-orders { display: grid; gap: 10px; } }
@media (min-width: 1200px) { .page { max-width: 1280px; } }