:root { --bg:#f4f6f8; --ink:#1b1f23; --muted:#6b7280; --brand:#0f766e; --card:#ffffff; --border:#e5e7eb; }
* { box-sizing: border-box; }
body { margin:0; font-family: Arial, sans-serif; background:var(--bg); color:var(--ink); }
header { background:#0b3d3a; color:#fff; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; box-shadow:0 2px 10px rgba(0,0,0,0.08); }
header a { color:#fff; text-decoration:none; margin-right:12px; }
body.nav-open { overflow:hidden; }
.mobile-nav-toggle { display:none; }
.mobile-nav-overlay { position:fixed; inset:0; background:rgba(15,23,42,0.45); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:1190; }
main { padding:24px; max-width:1100px; margin:0 auto; }
main.main-wide { max-width:100%; margin:0; padding:0; }
.app-layout { --sidebar-width:280px; --content-max:1200px; display:grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); gap:24px; align-items:start; padding:24px; }
.app-sidebar { position: sticky; top: 84px; align-self:start; }
.app-sidebar .app-nav-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.app-sidebar .app-nav-title { font-weight:700; font-size:15px; }
.app-sidebar .app-nav-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:10px; border-top:1px solid var(--border); }
.app-sidebar .app-nav-actions .btn { height:30px; padding:0 10px; font-size:12px; }
.app-sidebar .app-nav-group { margin-top:10px; }
.app-sidebar .app-nav-group h4 { margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.app-sidebar .app-nav-sub { font-size:12px; color:var(--muted); margin:4px 0; }
.app-sidebar .app-nav-links { list-style:none; padding:0; margin:0; }
.app-sidebar .app-nav-links li { margin:4px 0; display:flex; align-items:center; gap:8px; }
.app-sidebar .app-nav-links a { color:var(--brand); text-decoration:none; display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:6px; }
.app-sidebar .app-nav-links a:hover { background:#f1f5f9; }
.app-sidebar .app-nav-icon { width:16px; height:16px; border-radius:4px; flex:0 0 auto; }
.app-content { max-width:var(--content-max); margin:0; width:100%; }
main.main-wide .app-content { max-width:none; }
@media (max-width: 900px) {
    .app-layout { grid-template-columns: 1fr; padding:16px; }
    .app-content { max-width:none; }
    .mobile-nav-toggle { display:inline-flex; }
    .mobile-nav-overlay { display:block; }
    .app-sidebar { position:fixed; left:0; top:0; bottom:0; width:80vw; max-width:320px; transform:translateX(-110%); transition:transform .2s ease; background:var(--card); z-index:1200; box-shadow:0 12px 40px rgba(0,0,0,0.2); padding:16px; overflow:auto; }
    body.nav-open .app-sidebar { transform:translateX(0); }
    body.nav-open .mobile-nav-overlay { opacity:1; pointer-events:auto; }
}
.card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:16px; margin-bottom:16px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px; }
.muted { color:var(--muted); }
.btn { display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 12px; text-align:center; border-radius:6px; border:1px solid var(--border); background:#fff; color:#111; text-decoration:none; }
.btn-equal { min-width:110px; }
.btn-primary { background:var(--brand); color:#fff; border-color:var(--brand); }
table { width:100%; border-collapse:separate; border-spacing:0 14px; border:none; background:transparent; }
th, td { padding:8px 10px; text-align:left; }
thead th { background:#f8fafc; font-weight:600; border:1px solid var(--border); }
thead th:first-child { border-top-left-radius:10px; border-bottom-left-radius:10px; }
thead th:last-child { border-top-right-radius:10px; border-bottom-right-radius:10px; }
tbody td { background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
tbody td:first-child { border-left:1px solid var(--border); border-top-left-radius:10px; border-bottom-left-radius:10px; }
tbody td:last-child { border-right:1px solid var(--border); border-top-right-radius:10px; border-bottom-right-radius:10px; }
label { display:block; margin:8px 0 4px; }
.checkbox-inline { display:flex; align-items:center; gap:8px; margin:10px 0; }
.checkbox-inline input { width:auto; }
input, select, textarea { width:100%; padding:8px; border:1px solid var(--border); border-radius:6px; }
.inline { display:flex; gap:12px; }
.inline > div { flex:1; }
.inline-zip-city > div:first-child { flex:0 0 20%; }
.inline-zip-city > div:last-child { flex:0 0 80%; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; background:#e2e8f0; font-size:12px; }
.badge-blue { background:#dbeafe; color:#1e3a8a; }
.badge-green { background:#dcfce7; color:#166534; }
.badge-yellow { background:#fef9c3; color:#854d0e; }
.badge-red { background:#fee2e2; color:#991b1b; }
.right { text-align:right; }
.notice { padding:10px 12px; background:#ecfeff; border:1px solid #a5f3fc; border-radius:8px; }
.notice-error { background:#fee2e2; border-color:#fecaca; }
nav .active { text-decoration: underline; }
.nav-group { position: relative; display: inline-block; }
.nav-group > a { display:inline-block; }
.nav-menu { display:none; position:absolute; right:0; top:100%; background:#0b3d3a; border:1px solid rgba(255,255,255,0.2); border-radius:8px; padding:8px; min-width:180px; z-index:50; }
.nav-menu a { display:block; margin:4px 0; }
.nav-group:hover .nav-menu, .nav-group:focus-within .nav-menu { display:block; }