* { box-sizing: border-box; }

:root { --bg:#f4f7fb; --panel:#ffffff; --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --dark:#07111f; --dark2:#0f1b2d; --green:#16a34a; --green-soft:#dcfce7; --red:#dc2626; --red-soft:#fee2e2; --orange:#d97706; --orange-soft:#fef3c7; --shadow:0 14px 35px rgba(15,23,42,0.08); }

body { margin:0; font-family:'Inter', Arial, sans-serif; background:var(--bg); color:var(--ink); }

a { color:inherit; }

.app-shell { min-height:100vh; display:grid; grid-template-columns:280px 1fr; }

.sidebar { background:linear-gradient(180deg, #07111f 0%, #0f1b2d 100%); color:white; padding:24px; display:flex; flex-direction:column; justify-content:space-between; position:sticky; top:0; height:100vh; }

.brand-block { display:flex; gap:14px; align-items:center; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,0.10); }

.brand-icon { width:60px; height:60px; border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:white; padding:4px; box-shadow:0 10px 25px rgba(0,0,0,0.18); }

.brand-icon img { width:100%; height:100%; object-fit:contain; }

.brand-block h1 { margin:0; font-size:20px; letter-spacing:-0.03em; }

.brand-block span { color:#9ca3af; font-size:13px; }

.sidebar-nav { display:flex; flex-direction:column; gap:8px; margin-top:28px; }

.sidebar-nav a { text-decoration:none; color:#d1d5db; padding:13px 15px; border-radius:12px; font-weight:600; transition:0.2s; }

.sidebar-nav a:hover { background:rgba(255,255,255,0.09); color:white; transform:translateX(3px); }

.sidebar-bottom { display:flex; flex-direction:column; gap:14px; }

.user-card { display:flex; gap:12px; align-items:center; padding:14px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.10); border-radius:16px; }

.user-avatar { width:40px; height:40px; border-radius:999px; background:#16a34a; display:flex; align-items:center; justify-content:center; font-weight:800; }

.user-meta { display:flex; flex-direction:column; min-width:0; }

.user-meta strong { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.user-meta span { font-size:12px; color:#9ca3af; }

.logout-btn { display:block; text-align:center; text-decoration:none; padding:12px; border-radius:12px; background:rgba(255,255,255,0.08); color:#e5e7eb; font-weight:700; }

.logout-btn:hover { background:#dc2626; color:white; }

.main-panel { min-width:0; }

.topbar { background:rgba(255,255,255,0.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding:22px 36px; position:sticky; top:0; z-index:20; }

.topbar h2 { margin:0; font-size:20px; letter-spacing:-0.02em; }

.topbar p { margin:4px 0 0 0; color:var(--muted); font-size:14px; }

.page-content { padding:34px 38px 60px; max-width:1500px; }

.public-shell { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:30px; background:radial-gradient(circle at top left, #dcfce7, transparent 35%), linear-gradient(135deg, #07111f, #111827); }

.card, .record-section, .dash-panel, .soft-card, .side-panel { background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:26px; box-shadow:var(--shadow); }

.page-header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }

.page-header h1 { margin:0 0 6px 0; font-size:32px; letter-spacing:-0.04em; }

.page-header p { margin:0; color:var(--muted); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; padding:12px 18px; background:var(--green); color:white; text-decoration:none; border:none; border-radius:12px; cursor:pointer; font-weight:800; font-size:14px; transition:0.2s; box-shadow:0 8px 18px rgba(22,163,74,0.22); }

.btn:hover { background:#15803d; transform:translateY(-1px); }

.btn-outline { background:white; color:var(--ink); border:1px solid var(--line); box-shadow:none; }

.btn-outline:hover { background:#f9fafb; color:var(--green); }

label { display:block; margin-top:18px; margin-bottom:8px; font-weight:700; color:#374151; font-size:14px; }

input, select, textarea { width:100%; padding:13px 14px; border:1px solid #dbe1ea; border-radius:12px; font-size:15px; background:white; font-family:'Inter', Arial, sans-serif; outline:none; transition:0.2s; }

input:focus, select:focus, textarea:focus { border-color:var(--green); box-shadow:0 0 0 4px rgba(22,163,74,0.12); }

textarea { min-height:130px; resize:vertical; }

.form-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 22px; }

.form-grid .btn { grid-column:span 2; width:max-content; }

.table-card { margin-top:24px; overflow-x:auto; }

.flash-message { background:var(--green-soft); color:#166534; border:1px solid #86efac; padding:14px 16px; border-radius:14px; margin-bottom:18px; font-weight:700; }

.record-list { display:flex; flex-direction:column; gap:16px; }

.record-section h2 { margin:0 0 16px 0; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:20px; }

.record-section p { margin:10px 0; color:#374151; }

.employee-list { display:flex; flex-direction:column; gap:12px; margin-top:18px; }

.employee-bubble { background:#f9fafb; border:1px solid var(--line); border-radius:16px; padding:18px 22px; cursor:pointer; transition:0.2s; border-left:6px solid var(--green); }

.employee-bubble:hover { background:white; transform:translateX(4px); box-shadow:0 10px 25px rgba(15,23,42,0.08); }

.equipment-good { border-left:6px solid var(--green); }

.equipment-bad { border-left:6px solid var(--red); }

.autocomplete-wrapper { position:relative; }

.suggestions-box { display:none; position:absolute; top:58px; left:0; right:0; background:white; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); z-index:1000; overflow:hidden; }

.suggestion-item { padding:14px 16px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #eef2f7; }

.suggestion-item:hover { background:var(--green-soft); }

.suggestion-item span { color:var(--muted); font-size:14px; }

.clear-banner { padding:20px; border-radius:18px; margin-bottom:24px; font-size:24px; font-weight:900; text-align:center; box-shadow:var(--shadow); }

.clear-green { background:var(--green-soft); color:#166534; border:2px solid var(--green); }

.clear-red { background:var(--red-soft); color:#991b1b; border:2px solid var(--red); }

.compliance-checklist { margin-top:20px; display:flex; flex-direction:column; gap:10px; }

.compliance-item { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-radius:14px; border:1px solid var(--line); }

.compliance-good { background:var(--green-soft); border-left:6px solid var(--green); }

.compliance-bad { background:var(--red-soft); border-left:6px solid var(--red); }

.compliance-left { display:flex; align-items:center; gap:12px; }

.check-icon { color:var(--green); font-size:22px; font-weight:900; }

.x-icon { color:var(--red); font-size:22px; font-weight:900; }

.compliance-right { display:flex; align-items:center; gap:14px; font-weight:800; }

.mini-link { color:var(--ink); text-decoration:underline; font-size:14px; }

.alert-card, .feed-alert { background:white; border:1px solid var(--line); border-radius:18px; padding:18px 20px; display:flex; justify-content:space-between; align-items:center; gap:18px; box-shadow:0 8px 20px rgba(15,23,42,0.06); }

.alert-critical, .feed-critical { border-left:7px solid var(--red); }

.alert-warning, .feed-warning { border-left:7px solid var(--orange); }

.alert-main, .feed-left { display:flex; align-items:center; gap:18px; }

.alert-severity, .feed-badge { min-width:88px; text-align:center; padding:8px 10px; border-radius:999px; background:#111827; color:white; font-size:12px; font-weight:900; text-transform:uppercase; }

.alert-content h3, .feed-alert h3 { margin:0 0 5px 0; }

.alert-content p, .feed-alert p { margin:0 0 5px 0; color:#374151; }

.alert-content span, .feed-alert small { color:var(--muted); font-size:13px; }

.alert-btn { margin-top:0; white-space:nowrap; }

.dash-shell { max-width:1450px; margin:0 auto; }

.dash-title-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }

.dash-title-row h1 { margin:0 0 6px 0; font-size:34px; letter-spacing:-0.045em; }

.dash-title-row p { margin:0; color:var(--muted); }

.dash-status-bar { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-bottom:28px; }

.dash-stat { text-decoration:none; color:inherit; }

.dash-stat:hover { transform:translateY(-2px); box-shadow:0 18px 40px rgba(15,23,42,0.12); }

.dash-stat { background:white; border-radius:18px; padding:20px 22px; display:flex; justify-content:space-between; align-items:center; box-shadow:var(--shadow); border:1px solid var(--line); }

.dash-stat span { font-size:13px; font-weight:800; text-transform:uppercase; color:var(--muted); }

.dash-stat strong { font-size:28px; }

.dash-stat.danger { border-left:6px solid var(--red); }

.dash-stat.warning { border-left:6px solid var(--orange); }

.dash-stat.dark { border-left:6px solid #111827; }

.dash-stat.good { border-left:6px solid var(--green); }

.dash-main-grid { display:grid; grid-template-columns:minmax(0,2fr) 420px; gap:24px; align-items:start; }

.dash-side-stack { display:flex; flex-direction:column; gap:24px; }

.panel-header { margin-bottom:18px; }

.panel-header h2 { margin:0 0 5px 0; }

.panel-header p { margin:0; color:var(--muted); font-size:14px; }

.alert-feed { display:flex; flex-direction:column; gap:14px; }

.empty-state { background:#f9fafb; border-radius:16px; padding:30px; text-align:center; color:var(--muted); }

.empty-state h3 { color:var(--ink); margin-top:0; }

.side-list { display:flex; flex-direction:column; gap:10px; }

.side-row { text-decoration:none; color:var(--ink); display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-radius:14px; background:#f9fafb; border:1px solid var(--line); }

.side-row:hover { background:var(--red-soft); }

.side-row strong { background:var(--red); color:white; min-width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:999px; }

.good-box { padding:16px; border-radius:14px; background:var(--green-soft); color:#166534; font-weight:800; }

.quick-actions { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }

.quick-actions a { text-decoration:none; color:var(--ink); background:#f9fafb; border:1px solid var(--line); padding:14px; border-radius:14px; font-weight:800; text-align:center; transition:0.2s; }

.quick-actions a:hover { background:var(--green-soft); color:#166534; }

.document-row { padding:14px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }

.document-left p { margin:5px 0 0 0; color:var(--muted); }

.doc-btn { margin-top:0; }

.mini-status { padding:4px 10px; border-radius:999px; font-size:12px; font-weight:800; margin-left:10px; }

.good-mini { background:var(--green-soft); color:#166534; }

.bad-mini { background:var(--red-soft); color:#991b1b; }

@media (max-width: 1050px) { .app-shell { grid-template-columns:1fr; } .sidebar { position:relative; height:auto; } .dash-main-grid { grid-template-columns:1fr; } .dash-status-bar { grid-template-columns:repeat(2,1fr); } .form-grid { grid-template-columns:1fr; } .form-grid .btn { grid-column:span 1; } }

@media (max-width: 700px) { .page-content { padding:22px 18px 40px; } .topbar { padding:18px; } .page-header { flex-direction:column; align-items:flex-start; } .dash-status-bar { grid-template-columns:1fr; } .alert-card, .feed-alert { flex-direction:column; align-items:flex-start; } .quick-actions { grid-template-columns:1fr; } }

.marketing-page { width:100%; max-width:1300px; color:white; }

.marketing-nav { width:100%; display:flex; justify-content:space-between; align-items:center; margin-bottom:70px; }

.marketing-brand { display:flex; align-items:center; gap:14px; font-size:22px; font-weight:900; }

.marketing-brand img { width:54px; height:54px; object-fit:contain; background:white; border-radius:14px; padding:4px; }

.hero-section { display:grid; grid-template-columns:1.2fr 0.8fr; gap:50px; align-items:center; }

.hero-text h1 { font-size:64px; line-height:1.02; margin:0 0 24px 0; letter-spacing:-0.06em; }

.hero-text p { font-size:20px; line-height:1.6; color:#d1d5db; max-width:760px; }

.hero-buttons { display:flex; gap:16px; margin-top:30px; }

.hero-card { background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.18); border-radius:28px; padding:30px; backdrop-filter:blur(18px); box-shadow:0 30px 80px rgba(0,0,0,0.28); }

.hero-card h2 { margin-top:0; }

.hero-stat { display:flex; justify-content:space-between; align-items:center; background:white; color:#111827; border-radius:18px; padding:18px 20px; margin-top:16px; border-left:7px solid #16a34a; }

.hero-stat span { font-weight:800; color:#4b5563; }

.hero-stat strong { font-size:30px; }

.hero-stat.red { border-left-color:#dc2626; }

.hero-stat.green { border-left-color:#16a34a; }

.hero-stat.orange { border-left-color:#d97706; }

.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:70px; }

.feature-card { background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.16); border-radius:22px; padding:24px; backdrop-filter:blur(12px); }

.feature-card h3 { margin-top:0; }

.feature-card p { color:#d1d5db; line-height:1.5; }

@media (max-width: 950px) {
    .hero-section { grid-template-columns:1fr; }
    .feature-grid { grid-template-columns:1fr 1fr; }
    .hero-text h1 { font-size:46px; }
}

@media (max-width: 600px) {
    .feature-grid { grid-template-columns:1fr; }
    .hero-buttons { flex-direction:column; }
}

.top-banner-wrapper { width:100%; display:flex; justify-content:center; margin-bottom:40px; }

.top-banner-image { width:100%; max-width:1700px; border-radius:26px; box-shadow:0 30px 80px rgba(0,0,0,0.28); object-fit:cover; }

.top-banner-wrapper { width:100%; display:flex; justify-content:center; margin-bottom:40px; position:relative; }

.banner-button-row { position:absolute; top:26px; right:34px; display:flex; gap:14px; z-index:10; }

.banner-login-btn { background:#2563eb; color:white; text-decoration:none; padding:12px 22px; border-radius:12px; font-weight:800; box-shadow:0 10px 25px rgba(37,99,235,0.30); transition:0.2s; }

.banner-login-btn:hover { background:#1d4ed8; transform:translateY(-2px); }

.banner-info-btn { background:white; color:#111827; text-decoration:none; padding:12px 22px; border-radius:12px; font-weight:800; border:1px solid #d1d5db; transition:0.2s; }

.banner-info-btn:hover { background:#f3f4f6; transform:translateY(-2px); }

.top-banner-image { width:100%; max-width:1700px; border-radius:26px; box-shadow:0 30px 80px rgba(0,0,0,0.28); object-fit:cover; }

.auth-card h1 { color:#ffffff; }

.auth-card p { color:#cbd5e1; }