html { font-size:16px; position:relative; min-height:100%; }
:root { --ink:#17233d; --muted:#6d7890; --line:#e9edf5; --surface:#fff; --page:#f5f7fb; --primary:#5367f2; --teal:#0f766e; }
body { margin:0 0 70px; background:var(--page); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.navbar { background:rgba(255,255,255,.96)!important; backdrop-filter:blur(12px); }
.navbar-brand { color:var(--ink)!important; font-weight:800; letter-spacing:-.02em; }
.app-page,.salary-page { max-width:1040px; margin:0 auto; padding:10px 0 28px; }
.page-hero,.salary-hero { position:relative; overflow:hidden; display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:170px; padding:30px 34px; margin-bottom:20px; border-radius:26px; color:#fff; box-shadow:0 18px 42px rgba(37,52,92,.14); }
.page-hero--teal { background:linear-gradient(135deg,#0f766e,#0d9488); }
.page-hero--purple { background:linear-gradient(135deg,#6d28d9,#9333ea); }
.salary-hero { background:linear-gradient(125deg,#4258d8,#6b5ce7 58%,#9f69eb); }
.salary-hero:after { content:""; position:absolute; width:260px; height:260px; right:-70px; bottom:-150px; border:36px solid rgba(255,255,255,.12); border-radius:50%; }
.page-hero>div,.salary-hero>div { position:relative; z-index:1; }
.page-hero h1,.salary-hero h1 { margin:4px 0 8px; font-size:clamp(1.8rem,4vw,2.55rem); letter-spacing:-.04em; }
.eyebrow { margin:0 0 6px; color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.page-hero .eyebrow,.salary-hero .eyebrow { color:rgba(255,255,255,.78); }
.hero-copy { max-width:520px; margin:10px 0 0; color:rgba(255,255,255,.86); line-height:1.45; }
.hero-mark { display:grid; place-items:center; width:72px; height:72px; flex:0 0 72px; border:1px solid rgba(255,255,255,.3); border-radius:22px; color:#fff; background:rgba(255,255,255,.14); font-size:1.5rem; font-weight:900; }
.salary-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:-31px 18px 22px; position:relative; z-index:2; }
.summary-card { display:flex; align-items:center; gap:12px; min-height:86px; padding:16px; border:1px solid rgba(255,255,255,.8); border-radius:18px; background:#fff; box-shadow:0 12px 28px rgba(33,44,86,.1); }
.summary-card span:not(.summary-icon) { display:block; color:var(--muted); font-size:.78rem; }.summary-card strong { display:block; margin-top:3px; font-size:1.05rem; }
.summary-icon,.mini-summary-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:13px; font-size:1.35rem; font-weight:800; }
.summary-card--blue .summary-icon,.mini-summary-icon--blue { color:#465ce8; background:#eef0ff; }.summary-card--green .summary-icon,.mini-summary-icon--green { color:#159a72; background:#e6faf3; }.summary-card--purple .summary-icon { color:#8b4fd3; background:#f3eaff; }
.salary-panel { margin-top:18px; padding:24px; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:0 8px 26px rgba(37,52,92,.05); }
.panel-heading,.schedule-day-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }.panel-heading { margin-bottom:18px; }.panel-heading h2,.schedule-day-heading h2 { margin:0; font-size:1.25rem; letter-spacing:-.025em; }
.record-count { padding:7px 11px; border-radius:999px; color:var(--primary); background:#eef0ff; font-size:.75rem; font-weight:800; white-space:nowrap; }
.salary-table { width:100%; border-collapse:collapse; }.salary-table th { padding:11px 14px; color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-align:left; text-transform:uppercase; border-bottom:1px solid var(--line); }.salary-table td { padding:16px 14px; border-bottom:1px solid var(--line); color:#35405a; }.salary-table tbody tr:last-child td { border-bottom:0; }.salary-table tbody tr:hover { background:#fafbff; }
.amount-cell { text-align:right!important; font-weight:800; color:var(--ink)!important; }.date-badge { display:inline-block; min-width:48px; padding:6px 8px; border-radius:9px; color:#4258d8; background:#eef0ff; font-weight:800; text-align:center; }.date-year { margin-left:8px; color:var(--muted); font-size:.8rem; }
.balance-panel { margin-bottom:24px; }.balance-list { margin:0; }.balance-list>div { display:flex; justify-content:space-between; gap:20px; padding:13px 0; border-bottom:1px solid var(--line); }.balance-list dt,.balance-list dd { margin:0; }.balance-list dt { color:var(--muted); }.balance-list dd { font-weight:800; }.balance-list .negative { color:#d15b6b; }.balance-list .debt-value { color:#d87d30; }.balance-total { margin:5px -10px; padding:15px 10px!important; border:0!important; border-radius:12px; color:#3247bb; background:#eef0ff; }
.mini-summary { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:20px; }.mini-summary article { display:flex; align-items:center; gap:13px; padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 12px 28px rgba(33,44,86,.07); }.mini-summary article div span { display:block; color:var(--muted); font-size:.8rem; }.mini-summary strong { display:block; margin-top:4px; font-size:1.15rem; }
.schedule-list { display:grid; gap:18px; }.schedule-day { overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:0 8px 26px rgba(37,52,92,.05); }.schedule-day-heading { padding:22px 24px 17px; border-bottom:1px solid var(--line); }.schedule-day-heading h2 { margin-top:4px; }.schedule-items { padding:8px 24px; }.schedule-item { display:grid; grid-template-columns:115px minmax(0,1fr) 155px; align-items:center; gap:22px; padding:17px 0; border-bottom:1px solid #eef1f5; }.schedule-item:last-child { border-bottom:0; }.schedule-time strong,.schedule-location strong { display:block; font-size:.93rem; }.schedule-time span,.schedule-location span,.schedule-payment label { display:block; margin-top:4px; color:var(--muted); font-size:.75rem; }.schedule-location { display:flex; align-items:flex-start; gap:11px; min-width:0; }.schedule-location>div { min-width:0; }.schedule-location strong { white-space:normal; overflow-wrap:anywhere; word-break:break-word; line-height:1.35; }.location-icon { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:11px; color:#7c3aed; background:#f5f3ff; font-size:1.2rem; }.payment-select { width:100%; padding:9px 10px; color:var(--ink); background:#fff; border:1px solid #dfe5ed; border-radius:10px; font:inherit; font-size:.8rem; }
.announcement-panel { display:flex; align-items:flex-start; gap:18px; padding:28px; background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:0 8px 26px rgba(37,52,92,.05); }.announcement-icon { display:grid; place-items:center; width:58px; height:58px; flex:0 0 58px; border-radius:18px; background:#fef3c7; font-size:1.7rem; }.announcement-panel h2 { margin:5px 0 8px; font-size:1.35rem; }.announcement-panel p { margin:0; color:var(--muted); line-height:1.55; }.announcement-tip { display:flex; gap:12px; align-items:flex-start; margin-top:14px; padding:16px 18px; color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:16px; }.announcement-tip p { margin:3px 0 0; color:#a16207; font-size:.87rem; }
.empty-state { padding:70px 24px; border:1px dashed #cdd5e7; border-radius:22px; background:#fff; text-align:center; }.empty-icon { font-size:2.5rem; color:var(--primary); }.empty-state h2 { margin:14px 0 6px; font-size:1.25rem; }.empty-state p { margin:0; color:var(--muted); }
.payment-toast { position:fixed; right:18px; bottom:88px; z-index:9999; }.toast-message { display:flex; align-items:center; gap:14px; padding:13px 14px 13px 17px; color:#fff; border-radius:13px; box-shadow:0 12px 26px rgba(15,23,42,.2); opacity:0; transform:translateY(8px); pointer-events:none; transition:.2s ease; }.toast-message.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }.toast-message--success { background:#059669; }.toast-message--error { background:#dc2626; }.toast-message button { color:inherit; background:none; border:0; font-size:1.3rem; cursor:pointer; }
.login-shell { display:grid; place-items:center; min-height:100vh; margin:0; padding:24px; background:radial-gradient(circle at top left,#dff7f3 0,#f6f8fb 45%,#eef2ff 100%); }.login-card { width:min(100%,430px); padding:34px; background:rgba(255,255,255,.96); border:1px solid rgba(255,255,255,.8); border-radius:28px; box-shadow:0 24px 70px rgba(31,45,74,.15); }.login-brand { display:flex; align-items:center; gap:12px; }.login-logo { display:grid; place-items:center; width:58px; height:58px; padding:7px; color:#fff; background:linear-gradient(135deg,#0f766e,#0d9488); border:4px solid #dff7f3; border-radius:18px; box-shadow:0 8px 20px rgba(15,118,110,.24); }.login-logo svg { width:100%; height:100%; fill:currentColor; filter:drop-shadow(0 2px 2px rgba(5,73,69,.2)); }.login-logo__door { fill:#a7f3d0; }.login-logo__sparkle { fill:#fef3c7; }.brand-pill { color:var(--teal); font-size:.68rem; font-weight:800; letter-spacing:.12em; }.login-heading { margin:34px 0 26px; }.login-heading h1 { margin:6px 0 9px; color:var(--ink); font-size:2rem; letter-spacing:-.05em; }.login-heading p:not(.eyebrow) { margin:0; color:var(--muted); line-height:1.6; }.login-form label { display:block; margin-bottom:8px; color:var(--ink); font-size:.83rem; font-weight:700; }.login-input-wrap { display:flex; align-items:center; gap:10px; padding:0 14px; border:1px solid #dfe5ed; border-radius:13px; background:#fff; }.login-input-wrap>span { color:var(--teal); font-size:1.4rem; }.login-input-wrap input { width:100%; min-width:0; padding:14px 0; color:var(--ink); background:transparent; border:0; outline:0; font:inherit; }.primary-button { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:16px; padding:14px 17px; color:#fff; background:linear-gradient(135deg,#0f766e,#0d9488); border:0; border-radius:13px; box-shadow:0 10px 18px rgba(15,118,110,.22); font:inherit; font-weight:700; cursor:pointer; }.login-error { display:flex; gap:9px; align-items:flex-start; margin-top:16px; padding:12px 13px; color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; border-radius:11px; font-size:.82rem; line-height:1.45; }.login-note { margin:25px 0 0; color:var(--muted); text-align:center; font-size:.74rem; }
@media (max-width:767.98px) {
  .app-page,.salary-page { padding:4px 0 18px; }.page-hero,.salary-hero { min-height:150px; padding:25px 20px; border-radius:22px; }.page-hero h1,.salary-hero h1 { font-size:1.85rem; }.hero-mark { width:56px; height:56px; flex-basis:56px; border-radius:17px; font-size:1rem; }.hero-copy { font-size:.9rem; max-width:260px; }
  .salary-summary { grid-template-columns:1fr; gap:9px; margin:-23px 12px 18px; }.summary-card { min-height:68px; padding:12px 14px; }.salary-panel { padding:18px 14px; border-radius:18px; }.panel-heading { margin-bottom:12px; }.salary-table thead { display:none; }.salary-table,.salary-table tbody,.salary-table tr,.salary-table td { display:block; width:100%; }.salary-table tr { display:grid; grid-template-columns:1fr auto; gap:7px 12px; padding:13px 0; border-bottom:1px solid var(--line); }.salary-table td { padding:0; border:0; }.salary-table td:before { content:attr(data-label); display:block; margin-bottom:3px; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.salary-table td:first-child,.salary-table td:nth-child(2) { grid-column:1; }.salary-table td:nth-child(3) { grid-column:2; grid-row:1 / span 2; align-self:center; }.date-year { display:block; margin:3px 0 0; }.balance-list>div { font-size:.9rem; }
  .mini-summary { gap:9px; }.mini-summary article { padding:14px 11px; }.mini-summary strong { font-size:1rem; }.schedule-day-heading,.schedule-items { padding-left:17px; padding-right:17px; }.schedule-item { grid-template-columns:1fr; gap:14px; padding:18px 0; }.schedule-location strong { font-size:.95rem; }.schedule-payment { width:100%; }.announcement-panel { padding:22px 18px; }.login-card { padding:27px 22px; border-radius:23px; }
}