* {
 box-sizing: border-box;
}

html {
 margin: 0;
 padding: 0;
 background: #FAFAF8;
 color: #1A1A1A;
 font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 -webkit-text-size-adjust: 100%;
}

body {
 margin: 0;
 padding: 0;
 background: #FAFAF8;
 color: #1A1A1A;
 min-height: 100vh;
}

button, input, select {
 font: inherit;
}

button {
 cursor: pointer;
 border: none;
 background: none;
 color: inherit;
}

img {
 display: block;
 max-width: 100%;
}

.hidden {
 display: none !important;
}

.login-screen {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 24px;
 background: #FAFAF8;
}

.login-card {
 width: 100%;
 max-width: 360px;
 background: #FFFFFF;
 border: 1px solid #E8E4DC;
 border-radius: 20px;
 padding: 28px 24px;
}

.login-logo {
 width: 72px;
 height: 72px;
 margin: 0 auto 16px auto;
 border-radius: 16px;
 overflow: hidden;
}

.login-title {
 margin: 0 0 24px 0;
 text-align: center;
 font-size: 24px;
 font-weight: 700;
 color: #1A1A1A;
}

.pin-display {
 display: flex;
 justify-content: center;
 gap: 12px;
 margin-bottom: 28px;
}

.pin-dot {
 width: 14px;
 height: 14px;
 border-radius: 50%;
 background: #E8E4DC;
}

.pin-dot.filled {
 background: #1A1A1A;
}

.pin-pad {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 12px;
}

.pin-btn {
 height: 56px;
 border-radius: 14px;
 background: #FFFFFF;
 border: 1px solid #E8E4DC;
 font-size: 18px;
 font-weight: 600;
 color: #1A1A1A;
}

.pin-btn:active {
 background: #F1EEE8;
}

.pin-action-btn {
 color: #6B6560;
 font-size: 14px;
}

.submit-btn {
 width: 100%;
 margin-top: 18px;
 height: 52px;
 border-radius: 14px;
 background: #1A1A1A;
 color: #FFFFFF;
 font-size: 16px;
 font-weight: 600;
}

.submit-btn:active {
 opacity: 0.9;
}

.app {
 min-height: 100vh;
 background: #FAFAF8;
 padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

.topbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 18px 18px 14px 18px;
 background: #FFFFFF;
 border-bottom: 1px solid #E8E4DC;
}

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

.topbar-logo {
 width: 44px;
 height: 44px;
 border-radius: 12px;
 overflow: hidden;
 background: #FFFFFF;
 border: 1px solid #E8E4DC;
}

.topbar-info {
 display: flex;
 flex-direction: column;
}

.topbar-title {
 margin: 0;
 font-size: 18px;
 font-weight: 700;
 color: #1A1A1A;
}

.topbar-date {
 margin-top: 2px;
 font-size: 13px;
 color: #6B6560;
}

.topbar-right {
 display: flex;
 align-items: center;
}

.alerts-btn {
 display: flex;
 align-items: center;
 gap: 8px;
 background: #FFFFFF;
 border: 1px solid #E8E4DC;
 border-radius: 12px;
 padding: 10px 14px;
 font-size: 14px;
 font-weight: 600;
}

.alert-count {
 min-width: 22px;
 height: 22px;
 border-radius: 999px;
 background: #C0392B;
 color: #FFFFFF;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 12px;
 font-weight: 700;
}

.content {
 padding: 18px 18px 24px 18px;
}

.section {
 display: none;
}

.active-section {
 display: block;
}

.section-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 18px;
}

.section-header h2 {
 margin: 0;
 font-size: 22px;
 font-weight: 700;
}

.card-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 12px;
 margin-bottom: 18px;
}

.card {
 background: #FFFFFF;
 border: 1px solid #E8E4DC;
 border-radius: 16px;
 padding: 16px;
 margin-bottom: 14px;
}

.card-label {
 font-size: 13px;
 color: #6B6560;
 margin-bottom: 8px;
}

.card-value {
 font-size: 24px;
 font-weight: 700;
 color: #1A1A1A;
}

.card-title {
 font-size: 16px;
 font-weight: 700;
 margin-bottom: 12px;
}

.list-container {
 background: #FFFFFF;
 border: 1px solid #E8E4DC;
 border-radius: 16px;
 padding: 16px;
 color: #6B6560;
 line-height: 1.5;
}

.primary-btn {
 min-height: 44px;
 padding: 0 16px;
 border-radius: 12px;
 background: #1A1A1A;
 color: #FFFFFF;
 font-size: 14px;
 font-weight: 600;
}

.primary-btn:active {
 opacity: 0.9;
}

.full-btn {
 width: 100%;
 margin-top: 18px;
}

.crm-company-list {
 display: flex;
 gap: 10px;
 overflow-x: auto;
 padding-bottom: 12px;
 margin-bottom: 16px;
 -webkit-overflow-scrolling: touch;
}

.crm-company-list::-webkit-scrollbar {
 display: none;
}

.crm-company-btn {
 flex: 0 0 auto;
 padding: 10px 14px;
 border-radius: 12px;
 background: #FFFFFF;
 border: 1px solid #E8E4DC;
 color: #1A1A1A;
 font-size: 14px;
 font-weight: 600;
}

.crm-company-btn:active {
 background: #F1EEE8;
}

.bottom-nav {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 background: #FFFFFF;
 border-top: 1px solid #E8E4DC;
 padding-bottom: env(safe-area-inset-bottom);
}

.nav-btn {
 min-height: 64px;
 padding: 10px 4px;
 font-size: 12px;
 font-weight: 600;
 color: #6B6560;
}

.active-nav {
 color: #1A1A1A;
}

.modal {
 position: fixed;
 inset: 0;
 background: rgba(26, 26, 26, 0.35);
 display: flex;
 align-items: flex-end;
 justify-content: center;
}

.modal-card {
 width: 100%;
 max-width: 480px;
 background: #FFFFFF;
 border-radius: 20px 20px 0 0;
 border: 1px solid #E8E4DC;
 padding: 20px;
 padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

.modal-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 18px;
}

.modal-header h3 {
 margin: 0;
 font-size: 18px;
 font-weight: 700;
}

.modal-body {
 display: flex;
 flex-direction: column;
}

.modal-close-btn {
 color: #8B7355;
 font-size: 14px;
 font-weight: 600;
}

.field-label {
 display: block;
 margin-bottom: 8px;
 font-size: 14px;
 font-weight: 600;
 color: #1A1A1A;
}

.field-input {
 width: 100%;
 min-height: 46px;
 margin-bottom: 16px;
 border-radius: 12px;
 border: 1px solid #E8E4DC;
 background: #FFFFFF;
 padding: 0 14px;
 color: #1A1A1A;
}

.field-input:focus {
 outline: none;
 border-color: #8B7355;
}

.toast {
 position: fixed;
 left: 18px;
 right: 18px;
 bottom: calc(92px + env(safe-area-inset-bottom));
 background: #1A1A1A;
 color: #FFFFFF;
 padding: 14px 16px;
 border-radius: 14px;
 text-align: center;
 font-size: 14px;
 font-weight: 600;
}