@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Noto+Serif:wght@600;700&display=swap');

:root { --bg:#faf7f0; --surface:#fffdf8; --white:#fff; --ink:#1b2338; --muted:#5a6273; --border:#e7e1d4; --primary:#1f3a5f; --primary-soft:#e8edf4; --accent:#c8573c; --ok:#1e5b3a; --ok-bg:#e6f1ea; --warn:#7a5200; --warn-bg:#fbf0d9; --ship:#4a2f78; --shadow:0 8px 28px rgba(29,36,54,.08); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 'Be Vietnam Pro',system-ui,sans-serif; }
button,input,select,textarea { font:inherit; } button { cursor:pointer; }
.login { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(135deg,#e8edf4,#faf7f0 55%,#f7e9e3); }
.login-card { width:min(100%,420px); background:var(--surface); padding:36px; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); }
h1,h2,h3 { font-family:'Noto Serif',serif; margin:0 0 8px; letter-spacing:-.02em; } h1 { font-size:29px; } h2 { font-size:24px; } h3 { font-size:16px; }
.muted { color:var(--muted); } .error { color:#8e3420; background:#f7e9e3; border:1px solid #e8b7a6; padding:10px 12px; border-radius:8px; }
.shell { display:grid; grid-template-columns:246px minmax(0,1fr); min-height:100vh; }
.sidebar { background:var(--surface); border-right:1px solid var(--border); padding:22px 14px; display:flex; flex-direction:column; gap:16px; }
.brand { padding:0 10px; } .brand strong { display:block; font-family:'Noto Serif',serif; font-size:18px; } .brand small { color:var(--muted); }
.nav { display:grid; gap:3px; } .nav button { border:0; background:transparent; color:var(--ink); text-align:left; padding:10px 12px; border-radius:8px; min-height:42px; }
.nav button:hover,.nav button.active { background:var(--primary-soft); color:var(--primary); font-weight:600; } .nav .symbol { display:inline-block; width:23px; }
.sidebar-foot { margin-top:auto; padding:8px 10px; color:var(--muted); font-size:12px; }
.content { max-width:1420px; width:100%; margin:0 auto; padding:34px 42px 64px; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:24px; }.page-head p { margin:4px 0 0; color:var(--muted); }
.grid { display:grid; gap:16px; }.cards { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:22px; }.two { grid-template-columns:repeat(2,minmax(0,1fr)); }.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:18px; box-shadow:0 1px 2px rgba(29,36,54,.03); }.metric .label { color:var(--muted); font-size:12px; }.metric .value { font-size:25px; font-weight:700; margin-top:5px; font-variant-numeric:tabular-nums; }.metric.positive .value { color:var(--ok); }.metric.alert .value { color:var(--accent); }
.panel { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:18px; }.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.form-grid.two-col { grid-template-columns:repeat(2,minmax(0,1fr)); }.form-grid .full { grid-column:1/-1; }
label { display:grid; gap:5px; color:#3a4254; font-size:12px; font-weight:600; }input,select,textarea { width:100%; min-height:40px; border:1px solid #b9b4aa; background:#fffdf8; color:var(--ink); border-radius:7px; padding:8px 10px; }textarea { min-height:76px; resize:vertical; }input:focus,select:focus,textarea:focus { outline:3px solid #e3eaf3; border-color:var(--primary); }
.actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }.btn { border:1px solid transparent; background:var(--primary); color:white; border-radius:7px; min-height:40px; padding:8px 13px; font-weight:600; }.btn:hover { filter:brightness(.92); }.btn.secondary { background:var(--white); color:var(--primary); border-color:#b7c5d7; }.btn.danger { background:var(--accent); }.btn.small { min-height:31px; padding:4px 8px; font-size:12px; }.btn[disabled] { cursor:not-allowed; opacity:.55; }
table { width:100%; border-collapse:collapse; }th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; text-align:left; padding:9px 8px; border-bottom:1px solid var(--border); }td { padding:10px 8px; border-bottom:1px solid #f0ede6; vertical-align:top; }.amount { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }.income { color:var(--ok); font-weight:600; }.expense { color:#8e3420; font-weight:600; }.truncate { max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badge { display:inline-flex; align-items:center; gap:4px; border-radius:99px; padding:3px 8px; font-size:11px; font-weight:600; white-space:nowrap; background:var(--primary-soft); color:var(--primary); }.badge.ok { background:var(--ok-bg); color:var(--ok); }.badge.wait { background:var(--warn-bg); color:var(--warn); }.badge.ship { background:#f1ecf7; color:var(--ship); }.badge.danger { background:#f7e9e3; color:#8e3420; }
.empty { color:var(--muted); text-align:center; padding:28px; border:1px dashed var(--border); border-radius:9px; }.notice { padding:10px 12px; background:var(--primary-soft); color:var(--primary); border-radius:8px; margin:0 0 14px; }.notice.warn { color:var(--warn); background:var(--warn-bg); }.table-wrap { overflow:auto; }.file-input { border:1px dashed #948f83; padding:14px; border-radius:8px; background:#fffdf8; }.check-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:240px; overflow:auto; padding:4px; }.check-item { display:flex; gap:8px; align-items:center; border:1px solid var(--border); padding:8px; border-radius:7px; }.check-item input { width:auto; min-height:auto; }.loading { padding:32px; color:var(--muted); }
@media (max-width:1000px) { .cards,.three { grid-template-columns:repeat(2,minmax(0,1fr)); }.form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.content { padding:26px 22px 78px; } }
@media (max-width:720px) { .shell { display:block; }.sidebar { position:fixed; z-index:5; bottom:0; left:0; right:0; height:62px; padding:5px 4px; border-right:0; border-top:1px solid var(--border); flex-direction:row; background:rgba(255,253,248,.97); }.brand,.sidebar-foot { display:none; }.nav { width:100%; grid-template-columns:repeat(5,1fr); gap:1px; }.nav button { min-width:0; padding:5px 2px; text-align:center; font-size:10px; overflow:hidden; white-space:nowrap; }.nav button:nth-child(n+6) { display:none; }.nav .symbol { display:block; width:auto; font-size:17px; }.content { padding:22px 14px 84px; }.cards,.two,.three,.form-grid,.form-grid.two-col { grid-template-columns:1fr; }.page-head { display:block; }.page-head .actions { margin-top:12px; }.panel { padding:15px; }th:nth-child(4),td:nth-child(4),th:nth-child(5),td:nth-child(5) { display:none; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }