:root { --bg:#f8f6f1; --surface:#fff; --ink:#252c31; --muted:#68747c; --line:#dce1e2; --green:#216657; --danger:#ad3434; font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; background:var(--bg); } button,input { font:inherit; } button { cursor:pointer; border:0; border-radius:7px; padding:10px 15px; color:#fff; background:var(--green); font-weight:600; } button:hover { filter:brightness(.94); } input { width:100%; border:1px solid var(--line); border-radius:7px; padding:10px 11px; background:#fff; } input:focus { outline:2px solid #8dc7b9; border-color:var(--green); } .muted,small { color:var(--muted); } .brand { display:flex; align-items:center; gap:10px; } .brand b,.brand small { display:block; } .brand-mark { color:var(--green); font-size:25px; } .auth-page { min-height:100vh; display:grid; place-items:center; padding:20px; } .auth-card,.card { background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:0 2px 12px #1d2c3010; } .auth-card { width:min(100%,390px); padding:28px; } .auth-card h1 { margin:28px 0 5px; } .form-stack { display:grid; gap:15px; margin-top:22px; } .form-stack label { display:grid; gap:6px; font-size:14px; font-weight:600; } .flash { margin:18px 0; border-radius:7px; padding:10px 12px; font-size:14px; } .flash-error { color:#7f1d1d; background:#fee2e2; border:1px solid #fecaca; } .flash-success { color:#14532d; background:#dcfce7; border:1px solid #bbf7d0; } .app-shell { min-height:100vh; display:flex; } aside { position:fixed; inset:0 auto 0 0; width:256px; padding:20px; background:#fff; border-right:1px solid var(--line); } nav { display:grid; gap:3px; margin-top:25px; } nav a { border-radius:7px; padding:10px 12px; color:var(--ink); text-decoration:none; font-size:14px; } nav a:hover { background:#edf4f2; color:var(--green); } .app-main { margin-left:256px; flex:1; min-width:0; } header { height:64px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid var(--line); background:#fffffff0; } header span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:var(--muted); } .button-secondary { padding:8px 12px; color:var(--ink); background:#fff; border:1px solid var(--line); } .app-main main { padding:25px; } .app-main h1 { margin:0 0 22px; font-size:28px; } .card { padding:20px; } .card h2 { margin-top:0; }
.page-intro { margin:-12px 0 22px; color:var(--muted); font-size:14px; } .app-main main { display:grid; gap:20px; } .app-main main h1 { margin:0; } .card h2 { margin:0 0 16px; font-size:17px; } .form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:end; } .form-grid-products { grid-template-columns:repeat(4,minmax(0,1fr)); } .form-grid label { display:grid; gap:6px; color:var(--muted); font-size:13px; font-weight:600; } select,textarea { width:100%; border:1px solid var(--line); border-radius:7px; padding:10px 11px; background:#fff; font:inherit; } textarea { min-height:42px; resize:vertical; } select:focus,textarea:focus { outline:2px solid #8dc7b9; border-color:var(--green); } .checkbox { display:flex!important; align-items:center; gap:8px; height:42px; color:var(--ink)!important; } .checkbox input { width:auto; } .form-action { display:flex; align-items:end; min-height:42px; } .table-wrap { overflow:auto; margin:0 -20px -20px; } table { width:100%; min-width:780px; border-collapse:collapse; font-size:14px; } th { padding:11px 14px; color:var(--muted); background:#f0f3f2; font-size:11px; text-align:left; text-transform:uppercase; letter-spacing:.03em; } td { padding:12px 14px; border-top:1px solid var(--line); vertical-align:top; } .is-inactive { opacity:.55; } .inline-form { margin:0; } .button-danger { padding:7px 10px; background:var(--danger); font-size:12px; }
.edit-form { display:grid; gap:9px; width:280px; margin:10px 0; } .edit-form label { display:grid; gap:4px; color:var(--muted); font-size:12px; font-weight:600; } details summary { cursor:pointer; color:var(--green); font-size:13px; font-weight:600; } details .inline-form { margin-top:10px; }
.stock-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,.9fr); gap:20px; } .stack { display:grid; gap:20px; } .filter-form { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; align-items:end; margin-bottom:18px; } .filter-form label { display:grid; gap:6px; color:var(--muted); font-size:13px; font-weight:600; } .movement-table { min-width:1100px; }
.page-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; } .page-title-row .page-intro { margin:0; } .button-link { display:inline-flex; align-items:center; justify-content:center; padding:10px 15px; border-radius:7px; background:var(--green); color:#fff; text-decoration:none; font-size:14px; font-weight:600; } .shipment-form { display:grid; gap:18px; } .shipment-form h3 { margin:0; font-size:16px; } .shipment-lines { display:grid; gap:10px; } .shipment-line { display:grid; grid-template-columns:1fr 1fr 160px; gap:10px; padding:10px; border:1px solid var(--line); border-radius:7px; } .details-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .details-grid div { display:grid; gap:4px; font-size:14px; } .details-grid b { font-size:12px; color:var(--muted); }
.hero { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:22px; border:1px solid var(--line); border-radius:10px; background:#fff; } .hero span { color:var(--green); font-size:14px; font-weight:700; } .hero h2 { margin:4px 0; font-size:28px; } .hero p { margin:0; color:var(--muted); font-size:14px; } .hero>div:last-child { display:flex; gap:8px; flex-wrap:wrap; } .stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } .stat-card { display:grid; gap:8px; } .stat-card span,.stat-card small { color:var(--muted); font-size:13px; } .stat-card b { font-size:28px; } .dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } .group-title { margin:16px 0 7px; font-size:14px; } .stock-list,.activity-list { display:grid; gap:7px; } .stock-list div { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); padding:7px 0; font-size:14px; } .stock-list small { display:block; color:var(--muted); } .stock-alert { color:var(--danger); } .activity-list div { display:grid; gap:4px; border:1px solid var(--line); border-radius:7px; padding:10px; font-size:14px; } .activity-list span { color:var(--muted); }
.investments-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:20px; } .investments-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .investments-filter { grid-template-columns:repeat(3,minmax(0,1fr)); } .shares-list { display:grid; gap:16px; } .share-item { display:grid; gap:7px; } .share-item>div:first-child { display:flex; justify-content:space-between; gap:10px; font-size:14px; } .share-item span { color:var(--muted); white-space:nowrap; } .share-bar { height:10px; overflow:hidden; border-radius:999px; background:#e6efec; } .share-bar i { display:block; height:100%; border-radius:inherit; background:var(--green); }
.logs-filter { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px) { .form-grid,.form-grid-products { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .stock-grid { grid-template-columns:1fr; } .filter-form { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-grid { grid-template-columns:1fr; } }
@media (max-width:900px) { .investments-grid { grid-template-columns:1fr; } }
@media (max-width:720px) { .app-shell { display:block; } aside { position:static; width:auto; padding:14px; } nav { display:flex; overflow:auto; margin-top:12px; } nav a { white-space:nowrap; } .app-main { margin-left:0; } header { padding:0 15px; } .app-main main { padding:18px 15px; } .form-grid,.form-grid-products,.filter-form,.shipment-line,.details-grid { grid-template-columns:1fr; } .page-title-row,.hero { align-items:flex-start; flex-direction:column; } .stat-grid { grid-template-columns:1fr; } }