:root {
--color-primary: #0f766e;
--color-primary-dark: #115e59;
--color-primary-light: #ccfbf1;
--color-bg: #f1f5f9;
--color-surface: #ffffff;
--color-text: #0f172a;
--color-muted: #64748b;
--color-border: #cbd5e1;
--color-success: #10b981;
--color-warning: #f59e0b;
--color-danger: #ef4444;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
--nav-height: 68px;
}

⚬ {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}

body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background-color: var(--color-bg);
color: var(--color-text);
min-height: 100dvh;
display: flex;
flex-direction: column;
}

.app-container {
width: 100%;
min-height: 100dvh;
display: flex;
flex-direction: column;
background-color: var(--color-bg);
}

.app-header {
background-color: var(--color-primary);
color: #ffffff;
padding: 14px 20px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 30;
box-shadow: var(--shadow);
gap: 12px;
}

.app-header h1 {
font-size: 1.15rem;
font-weight: 700;
}

.header-sub {
font-size: 0.78rem;
opacity: 0.9;
margin-top: 2px;
}

.status-badge {
font-size: 0.75rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
padding: 6px 12px;
border-radius: 999px;
white-space: nowrap;
}

.app-main {
flex: 1;
width: 100%;
max-width: 1024px;
margin: 0 auto;
padding: 16px;
padding-bottom: calc(var(--nav-height) + 28px);
}

.view {
display: none;
}

.view.active {
display: block;
}

.section-title {
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-muted);
font-weight: 700;
margin: 20px 0 10px 0;
}

.section-title:first-child {
margin-top: 4px;
}

.card {
background: var(--color-surface);
border-radius: var(--radius-lg);
padding: 20px;
border: 1px solid var(--color-border);
box-shadow: var(--shadow);
margin-bottom: 16px;
}

.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
gap: 12px;
flex-wrap: wrap;
}

.card-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--color-text);
}

.card-subtitle {
font-size: 0.85rem;
color: var(--color-muted);
margin-top: 2px;
}

.grid-metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
gap: 12px;
margin-bottom: 16px;
}

.metric-box {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 16px;
box-shadow: var(--shadow);
}

.metric-value {
font-size: 1.65rem;
font-weight: 800;
color: var(--color-primary);
margin-top: 4px;
}

.metric-label {
font-size: 0.8rem;
color: var(--color-muted);
font-weight: 600;
}

.mode-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-bottom: 18px;
}

.mode-card {
background: var(--color-surface);
border: 2px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 16px;
cursor: pointer;
transition: all 0.15s ease;
text-align: left;
}

.mode-card.active {
border-color: var(--color-primary);
background: var(--color-primary-light);
}

.mode-card h3 {
font-size: 0.98rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 4px;
}

.mode-card p {
font-size: 0.82rem;
color: var(--color-muted);
}

.form-group {
display: block;
margin-bottom: 16px;
}

.form-label {
display: block;
font-size: 0.88rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 6px;
}

.form-input {
display: block;
width: 100%;
padding: 13px 14px;
font-size: 1rem;
font-family: inherit;
color: var(--color-text);
background-color: #f8fafc;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
}

.form-input:focus {
outline: none;
border-color: var(--color-primary);
background-color: #ffffff;
}

.form-input.alert-high {
border-color: var(--color-danger);
background-color: #fef2f2;
}

.clinical-alert-banner {
display: none;
padding: 12px 14px;
border-radius: var(--radius-md);
background: #fef2f2;
border: 1px solid #fecaca;
color: #991b1b;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 14px;
}

.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 14px 18px;
background-color: var(--color-primary);
color: #ffffff;
font-size: 0.98rem;
font-weight: 700;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
text-decoration: none;
}

.btn-primary:active {
background-color: var(--color-primary-dark);
}

.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12px 16px;
background-color: #e2e8f0;
color: var(--color-text);
font-size: 0.92rem;
font-weight: 600;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
text-decoration: none;
}

.btn-sm {
width: auto;
padding: 8px 14px;
font-size: 0.82rem;
}

.tag {
display: inline-block;
padding: 3px 9px;
font-size: 0.72rem;
font-weight: 700;
border-radius: 999px;
background: var(--color-primary-light);
color: var(--color-primary-dark);
}

.tag.non-patient {
background: #fef3c7;
color: #92400e;
}

.register-item,
.patient-item {
padding: 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-bottom: 10px;
background: var(--color-surface);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}

.table-wrap {
width: 100%;
overflow-x: auto;
}

table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}

th, td {
text-align: left;
padding: 10px 8px;
border-bottom: 1px solid var(--color-border);
}

th {
color: var(--color-muted);
font-weight: 700;
background: #f8fafc;
}

.toast-banner {
position: fixed;
top: 72px;
right: 20px;
left: 20px;
max-width: 420px;
margin: 0 auto;
background: #0f172a;
color: #ffffff;
padding: 14px 18px;
border-radius: var(--radius-md);
font-size: 0.9rem;
font-weight: 600;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
z-index: 100;
display: none;
}

.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--nav-height);
background: var(--color-surface);
border-top: 1px solid var(--color-border);
display: flex;
justify-content: space-around;
align-items: center;
z-index: 40;
}

.nav-btn {
background: none;
border: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25%;
height: 100%;
color: var(--color-muted);
cursor: pointer;
font-size: 0.72rem;
font-weight: 600;
gap: 4px;
}

.nav-btn.active {
color: var(--color-primary);
}

.nav-icon {
width: 22px;
height: 22px;
fill: currentColor;
}