:root {
  --ink: var(--brand-navy);
  --muted: var(--brand-muted);
  --line: var(--brand-border);
  --canvas: var(--brand-surface);
  --primary: var(--brand-primary);
  --primary-dark: var(--brand-primary-dark);
  --primary-pale: var(--brand-tint);
  --mint: #25c99a;
  --mint-pale: #e6faf3;
  --peach: #ff8d7a;
  --peach-pale: #fff0ed;
  --yellow: #f3b94d;
  --yellow-pale: #fff7df;
  --shadow: 0 8px 24px rgba(35, 35, 65, .045);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; }
button, input { font: inherit; }
button { border: 0; }
.app-shell { min-height: 100vh; }

.sidebar { background: #fff; border-right: 1px solid var(--line); bottom: 0; flex-direction: column; left: 0; padding: 26px 17px 18px; position: fixed; top: 0; width: 252px; z-index: 10; }
.brand { align-items: center; display: flex; gap: 10px; padding: 0 8px; }
.brand-mark { align-items: center; background: linear-gradient(145deg, #8ddecc, #51cdb2); border-radius: 10px; box-shadow: 0 5px 12px rgba(10, 122, 102, .2); color: white; display: inline-flex; font-size: 19px; height: 34px; justify-content: center; width: 34px; }
.brand strong { display: block; font-size: 16px; letter-spacing: -.5px; line-height: 17px; }
.brand small { color: #9da0ae; display: block; font-size: 8px; font-weight: 700; letter-spacing: .95px; margin-top: 2px; }
.sidebar-label, .nav-section { color: #adb0bd; font-size: 10px; font-weight: 700; letter-spacing: .07em; margin: 34px 10px 9px; }
.workspace-switcher { align-items: center; background: #f8fbfa; border-radius: 9px; color: #4b4f60; display: flex; font-size: 12px; gap: 9px; padding: 9px 10px; text-align: left; width: 100%; }
.workspace-switcher > i { color: #a2a5b2; font-size: 10px; margin-left: auto; }
.workspace-avatar { align-items: center; background: #ecf9f6; border-radius: 7px; color: var(--primary); display: inline-flex; font-size: 10px; font-weight: 800; height: 24px; justify-content: center; width: 24px; }
.app-nav { margin-top: 14px; }
.sidebar .app-nav { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; padding-right: 2px; scrollbar-color: #d7e5e2 transparent; scrollbar-width: thin; }
.sidebar .app-nav::-webkit-scrollbar { width: 5px; }.sidebar .app-nav::-webkit-scrollbar-thumb { background: #d7e5e2; border-radius: 99px; }
.app-nav .nav-link { align-items: center; border-radius: 8px; color: #74788b; display: flex; font-size: 12px; font-weight: 500; gap: 12px; margin: 1px 0; min-height: 39px; padding: 0 10px; text-decoration: none; transition: background .15s, color .15s; }
.app-nav .nav-link i { color: #9093a4; font-size: 16px; width: 16px; }
.app-nav .nav-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-nav .nav-link b { align-items: center; background: #effaf8; border-radius: 999px; color: #7ad9c4; display: inline-flex; font-size: 10px; font-weight: 700; height: 19px; justify-content: center; margin-left: auto; min-width: 19px; padding: 0 6px; }
.app-nav .nav-link:hover, .app-nav .nav-link.active { background: var(--primary-pale); color: var(--primary); }
.app-nav .nav-link:hover i, .app-nav .nav-link.active i { color: var(--primary); }
.app-nav .nav-section { margin: 23px 10px 7px; }
.sidebar-user { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 9px; margin-top: 18px; padding: 17px 5px 0; }
.sidebar-user strong, .person strong { display: block; font-size: 11px; font-weight: 700; }
.sidebar-user small, .person small { color: #9da0ae; display: block; font-size: 10px; margin-top: 2px; }

.main-content { margin-left: 252px; min-height: 100vh; }
.topbar { align-items: center; background: #fff; border-bottom: 1px solid var(--line); display: flex; gap: 16px; height: 84px; justify-content: space-between; padding: 0 40px; position: sticky; top: 0; z-index: 5; }
.page-heading p { color: #a3a6b3; font-size: 10px; margin: 0 0 3px; }
.page-heading h1 { font-size: 20px; font-weight: 750; letter-spacing: -.6px; margin: 0; }
.topbar-actions { align-items: center; display: flex; gap: 14px; }
.search-box { align-items: center; background: #f7faf9; border-radius: 9px; color: #a7aab6; gap: 8px; height: 36px; padding: 0 12px; width: 225px; }
.search-box input, .table-search input { background: transparent; border: 0; color: var(--ink); font-size: 12px; outline: 0; width: 100%; }
.search-box input::placeholder, .table-search input::placeholder { color: #a7aab6; }
.icon-btn { align-items: center; background: transparent; border-radius: 8px; color: #777b8c; display: inline-flex; height: 34px; justify-content: center; padding: 0; position: relative; width: 34px; }
.icon-btn:hover { background: #f2f7f6; color: var(--primary); }
.notification span { background: #ff7568; border: 2px solid #fff; border-radius: 50%; height: 8px; position: absolute; right: 7px; top: 6px; width: 8px; }
.system-status { align-items: center; border-left: 1px solid var(--line); color: #27b68b; font-size: 11px; font-weight: 600; gap: 6px; margin-left: 2px; padding-left: 17px; }
.system-status i { font-size: 7px; }
.page-content { margin: 0 auto; max-width: 1560px; padding: 28px 40px 40px; }

.welcome-card, .module-hero { align-items: center; background: linear-gradient(102deg, var(--brand-primary-dark), var(--brand-primary)); border-radius: 15px; box-shadow: 0 12px 30px rgba(10, 122, 102, .19); color: #fff; display: flex; justify-content: space-between; min-height: 150px; overflow: hidden; padding: 28px 34px; position: relative; }
.eyebrow { color: #aee7db; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.welcome-card .eyebrow { color: #e3f7f3; }
.welcome-card h2, .module-hero h2 { font-size: 24px; font-weight: 700; letter-spacing: -.7px; margin: 8px 0 5px; }
.welcome-card p, .module-hero p { color: rgba(255,255,255,.78); font-size: 12px; margin: 0; }
.welcome-art { align-items: center; display: flex; height: 155px; justify-content: center; position: relative; width: 250px; }
.welcome-art i { color: #fff; font-size: 54px; opacity: .95; position: relative; z-index: 2; }
.orb { border: 1px solid rgba(255,255,255,.19); border-radius: 50%; position: absolute; }
.orb-one { height: 156px; width: 156px; }.orb-two { height: 112px; left: 76px; top: -7px; width: 112px; }.orb-three { background: rgba(255,255,255,.12); bottom: -44px; height: 133px; right: -11px; width: 133px; }
.metrics-row { margin-top: 18px; }
.metric-card { align-items: flex-start; background: #fff; border: 1px solid #f0f4f3; border-radius: 12px; box-shadow: var(--shadow); display: flex; gap: 12px; min-height: 125px; padding: 19px; position: relative; }
.metric-icon { align-items: center; border-radius: 9px; display: inline-flex; flex: 0 0 auto; font-size: 18px; height: 37px; justify-content: center; width: 37px; }.metric-icon.purple { background: var(--primary-pale); color: var(--primary); }.metric-icon.mint { background: var(--mint-pale); color: var(--mint); }.metric-icon.peach { background: var(--peach-pale); color: var(--peach); }.metric-icon.yellow { background: var(--yellow-pale); color: #dfa21e; }
.metric-card p { color: #878b9b; font-size: 11px; margin: 1px 0 4px; }.metric-card h3 { font-size: 24px; font-weight: 750; letter-spacing: -.6px; line-height: 27px; margin: 0 0 7px; }.metric-card h3 small { color: #9b9ead; font-size: 12px; font-weight: 500; }.metric-more { background: transparent; color: #b0b2be; font-size: 16px; position: absolute; right: 14px; top: 14px; }
.trend { font-size: 10px; font-weight: 700; }.trend em { color: #a4a6b1; font-style: normal; font-weight: 500; margin-left: 2px; }.trend.up { color: #20b687; }.trend.down { color: #ff796d; }

.panel-card { background: #fff; border: 1px solid #eef4f3; border-radius: 12px; box-shadow: var(--shadow); padding: 22px; }
.panel-heading { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 18px; }.panel-heading h2 { font-size: 15px; font-weight: 750; letter-spacing: -.3px; margin: 0 0 4px; }.panel-heading p { color: #989ba9; font-size: 11px; margin: 0; }.select-btn, .outline-action { align-items: center; background: #fff; border: 1px solid #e8eeed; border-radius: 7px; color: #727587; display: inline-flex; font-size: 11px; gap: 7px; padding: 8px 10px; white-space: nowrap; }.select-btn i { font-size: 9px; }.select-btn:hover, .outline-action:hover { border-color: #cef1e9; color: var(--primary); }.text-action { background: transparent; color: var(--primary); font-size: 11px; font-weight: 700; padding: 3px; }.text-action i { margin-left: 4px; }.small-icon { height: 28px; width: 28px; }
.chart-key { display: flex; gap: 18px; margin: 4px 0 8px 42px; }.chart-key span { color: #858897; font-size: 10px; }.dot { border-radius: 50%; display: inline-block; height: 7px; margin-right: 5px; width: 7px; }.violet { background: var(--primary); }.mint-dot { background: var(--mint); }.peach-dot { background: var(--peach); }.gray-dot { background: #ccd0d9; }
.line-chart { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: 240px 20px; }.y-axis { align-items: stretch; color: #adb0bd; display: flex; flex-direction: column; font-size: 9px; justify-content: space-between; padding: 0 5px 0 0; text-align: right; }.line-chart svg { height: 240px; overflow: visible; width: 100%; }.chart-grid line { stroke: #f0f5f4; stroke-width: 1; }.area { fill: url(#fillGradient); }.main-line { fill: none; stroke: var(--primary); stroke-linecap: round; stroke-width: 3; }.secondary-line { fill: none; stroke: var(--mint); stroke-dasharray: 6 5; stroke-linecap: round; stroke-width: 2; }.chart-points circle { fill: #fff; stroke: var(--primary); stroke-width: 3; }.x-axis { color: #aeb1bd; display: flex; font-size: 9px; grid-column: 2; justify-content: space-between; padding-top: 8px; }
.event-list { display: grid; gap: 14px; }.event { align-items: center; display: flex; gap: 10px; }.event-date { align-items: center; border-radius: 8px; display: flex; flex: 0 0 auto; flex-direction: column; height: 39px; justify-content: center; width: 39px; }.event-date strong { font-size: 13px; line-height: 13px; }.event-date span { font-size: 8px; font-weight: 700; }.purple-date { background: var(--primary-pale); color: var(--primary); }.peach-date { background: var(--peach-pale); color: #f47968; }.mint-date { background: var(--mint-pale); color: #15ae81; }.event h3 { font-size: 11px; font-weight: 700; margin: 0 0 3px; }.event p { color: #9a9daa; font-size: 9px; margin: 0; }.event p i { margin-right: 3px; }.event .icon-btn { margin-left: auto; }
.table { --bs-table-bg: transparent; --bs-table-border-color: #f1f5f4; font-size: 11px; }.table > :not(caption) > * > * { padding: 12px 8px; }.table thead th { border-bottom-width: 1px; color: #a2a5b2; font-size: 9px; font-weight: 750; letter-spacing: .045em; white-space: nowrap; }.table tbody td { color: #707485; white-space: nowrap; }.person { align-items: center; display: flex; gap: 8px; }.person strong { color: #45495a; }.avatar { align-items: center; border-radius: 50%; color: white; display: inline-flex; flex: 0 0 auto; font-size: 9px; font-weight: 800; height: 28px; justify-content: center; width: 28px; }.avatar-photo { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }.avatar-jenny { background: linear-gradient(145deg, #1f3657, #f0ab8b); }.avatar-david { background: linear-gradient(145deg, #4c586e, #d8b59f); }.avatar-rachel { background: linear-gradient(145deg, #513c46, #f3c4ac); }.avatar-michael { background: linear-gradient(145deg, #233246, #7b9fca); }.badge-soft { border-radius: 999px; display: inline-flex; font-size: 9px; font-weight: 700; padding: 4px 8px; }.badge-soft.success { background: #e6faf3; color: #18ad81; }.badge-soft.warning { background: #fff4db; color: #d99418; }.badge-soft.danger { background: #fff0ed; color: #e66d5e; }.badge-soft.info { background: #f3fbf9; color: #6cd4be; }
.attendance-score { align-items: center; display: flex; gap: 20px; padding: 6px 0 20px; }.donut { align-items: center; background: conic-gradient(var(--mint) 0 85%, var(--primary) 85% 91%, var(--peach) 91% 96%, #e5ecea 96% 100%); border-radius: 50%; display: flex; height: 112px; justify-content: center; position: relative; width: 112px; }.donut:before { background: #fff; border-radius: 50%; content: ""; height: 80px; position: absolute; width: 80px; }.donut span { position: relative; text-align: center; }.donut strong { display: block; font-size: 18px; }.donut small { color: #9fa2ae; display: block; font-size: 9px; }.attendance-legend { flex: 1; }.attendance-legend p { color: #8d90a0; display: flex; font-size: 10px; justify-content: space-between; margin: 0 0 8px; }.attendance-legend strong { color: #56596a; }.outline-action { justify-content: center; }

.module-hero { box-shadow: none; min-height: 130px; }.module-hero .eyebrow { color: #e3f7f3; }.module-hero h2 { margin-top: 5px; }.primary-action { align-items: center; background: #fff; border-radius: 8px; color: var(--primary-dark); display: inline-flex; font-size: 11px; font-weight: 700; gap: 7px; padding: 10px 13px; white-space: nowrap; }.primary-action:hover { background: #f5fcfb; }.module-stat { background: #fff; border: 1px solid #eff4f3; border-radius: 11px; box-shadow: var(--shadow); padding: 17px; }.module-stat p { color: #9093a2; font-size: 11px; margin: 0 0 5px; }.module-stat h3 { font-size: 21px; font-weight: 750; margin: 0; }.module-stat span { color: #22af83; font-size: 10px; font-weight: 700; }.module-heading { align-items: center; }.table-controls { align-items: center; display: flex; gap: 8px; }.table-search { align-items: center; background: #f7faf9; border-radius: 7px; color: #a6a9b5; display: flex; gap: 6px; height: 33px; padding: 0 9px; width: 165px; }.export-btn { border: 1px solid #e8eeed; height: 33px; width: 33px; }
.row-actions { display: flex; gap: 3px; }.row-action { align-items: center; border-radius: 6px; color: #818596; display: inline-flex; height: 28px; justify-content: center; text-decoration: none; width: 28px; }.row-action:hover { background: var(--primary-pale); color: var(--primary); }.row-delete { background: transparent; border-radius: 6px; color: #818596; height: 28px; width: 28px; }.row-delete:hover { background: var(--peach-pale); color: #e56d60; }
.create-page-header { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 22px; }.back-link { background: transparent; color: var(--primary); font-size: 11px; font-weight: 700; margin-bottom: 10px; padding: 0; }.back-link i { margin-right: 5px; }.create-page-header h2 { font-size: 24px; font-weight: 750; letter-spacing: -.6px; margin: 0 0 5px; }.create-page-header p { color: #9194a3; font-size: 12px; margin: 0; }.draft-pill { align-items: center; background: var(--mint-pale); border-radius: 999px; color: #17aa7f; display: inline-flex; font-size: 10px; font-weight: 700; gap: 5px; padding: 7px 10px; }.form-card { margin-bottom: 15px; padding: 25px; }.form-section-title { align-items: center; display: flex; gap: 10px; }.form-section-title h3 { font-size: 14px; font-weight: 750; margin: 0 0 3px; }.form-section-title p { color: #9b9eab; font-size: 11px; margin: 0; }.form-step { align-items: center; background: var(--primary-pale); border-radius: 8px; color: var(--primary); display: inline-flex; font-size: 11px; font-weight: 800; height: 32px; justify-content: center; width: 32px; }.form-label { color: #545869; font-size: 11px; font-weight: 700; margin-bottom: 6px; }.form-label span { color: #a2a5b1; font-weight: 500; }.form-control, .form-select { border-color: #e7e7ed; border-radius: 8px; box-shadow: none !important; color: #4b4e5f; font-size: 12px; min-height: 39px; padding: 9px 11px; }.form-control:focus, .form-select:focus { border-color: #b1e8dc; }.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 21px; }.primary-form-action, .confirm-delete-btn { align-items: center; background: var(--primary); border-radius: 8px; color: #fff; display: inline-flex; font-size: 11px; font-weight: 700; gap: 7px; justify-content: center; padding: 10px 13px; }.primary-form-action:hover { background: var(--primary-dark); }.delete-record-btn { align-items: center; background: var(--peach-pale); border-radius: 8px; color: #df695c; display: inline-flex; font-size: 11px; font-weight: 700; gap: 7px; padding: 10px 13px; }.delete-modal { border: 0; border-radius: 13px; }.delete-icon { align-items: center; background: var(--peach-pale); border-radius: 50%; color: #e66d60; display: inline-flex; font-size: 21px; height: 52px; justify-content: center; width: 52px; }.delete-modal h2 { font-size: 18px; font-weight: 750; margin: 15px 0 7px; }.delete-modal p { color: #9093a2; font-size: 12px; margin: 0; }.confirm-delete-btn { background: #e66d60; }
.mobile-nav .offcanvas-header { padding: 22px 18px 15px; }.mobile-nav .offcanvas-body { padding: 10px 17px; }.mobile-nav .app-nav { margin-top: 13px; }.mobile-nav .nav-section { margin-top: 21px; }
.toast { border-radius: 10px; }.toast-body { color: #55596b; font-size: 12px; }.toast-body i { color: var(--mint); margin-right: 6px; }

@media (max-width: 1199.98px) { .topbar { padding: 0 28px; }.page-content { padding: 24px 28px 36px; }.welcome-art { width: 190px; }.attendance-card { min-height: 280px; } }
@media (max-width: 991.98px) { .main-content { margin-left: 0; }.topbar { height: 74px; padding: 0 20px; }.page-content { padding: 20px; }.page-heading p { display: none; }.page-heading h1 { font-size: 18px; }.module-hero { align-items: flex-start; flex-direction: column; }.mobile-nav { width: 280px; } }
@media (max-width: 575.98px) { .topbar-actions { gap: 5px; }.page-content { padding: 16px; }.welcome-card { align-items: flex-start; min-height: 170px; padding: 23px; }.welcome-card h2, .module-hero h2 { font-size: 20px; }.welcome-art { bottom: -25px; opacity: .28; position: absolute; right: -55px; }.panel-card { padding: 17px; }.panel-heading { margin-bottom: 15px; }.panel-heading > div:first-child p { max-width: 190px; }.line-chart { grid-template-columns: 26px 1fr; }.chart-key { margin-left: 30px; }.attendance-score { justify-content: center; }.employee-table th:nth-child(3), .employee-table td:nth-child(3), .employee-table th:nth-child(4), .employee-table td:nth-child(4) { display: none; }.module-heading { align-items: flex-start; flex-direction: column; }.table-controls, .table-search { width: 100%; }.table-search { flex: 1; }.module-hero { padding: 23px; }.primary-action { width: 100%; justify-content: center; }.create-page-header { align-items: flex-start; flex-direction: column; gap: 10px; }.form-card { padding: 19px; }.form-actions { justify-content: stretch; }.form-actions > * { flex: 1; justify-content: center; } }

/* Authentication pages */
.auth-body { background: #f8fbfa; min-height: 100vh; }.auth-layout { display: grid; grid-template-columns: minmax(390px, 46%) 1fr; min-height: 100vh; }.auth-panel { align-items: center; background: #fff; display: flex; justify-content: center; padding: 42px; }.auth-card { max-width: 400px; width: 100%; }.auth-card .brand { padding: 0; }.auth-card h1 { font-size: 28px; font-weight: 760; letter-spacing: -.85px; margin: 42px 0 8px; }.auth-card > p { color: #8f92a2; font-size: 13px; line-height: 1.6; margin: 0 0 27px; }.auth-form { display: grid; gap: 16px; }.auth-field { display: grid; gap: 7px; }.auth-field label { color: #535767; font-size: 12px; font-weight: 700; }.auth-field label span { color: #9da0ad; font-weight: 500; }.auth-field input { background: #fff; border: 1px solid #e3ebe9; border-radius: 9px; color: #454958; font-size: 13px; height: 45px; outline: none; padding: 0 13px; transition: border .15s, box-shadow .15s; }.auth-field input:focus { border-color: #aae6d9; box-shadow: 0 0 0 3px rgba(10, 122, 102, .1); }.password-field { position: relative; }.password-field input { padding-right: 43px; width: 100%; }.password-toggle { background: transparent; color: #9699a8; height: 36px; position: absolute; right: 5px; top: 5px; width: 36px; }.auth-options { align-items: center; display: flex; justify-content: space-between; margin-top: -3px; }.auth-check { align-items: center; color: #777b8b; display: flex; font-size: 11px; gap: 7px; }.auth-check input { accent-color: var(--primary); height: 14px; width: 14px; }.auth-link { color: var(--primary); font-size: 11px; font-weight: 700; text-decoration: none; }.auth-link:hover { color: var(--primary-dark); text-decoration: underline; }.auth-submit { align-items: center; background: var(--primary); border-radius: 9px; color: #fff; display: flex; font-size: 13px; font-weight: 700; height: 45px; justify-content: center; margin-top: 2px; text-decoration: none; transition: background .15s; width: 100%; }.auth-submit:hover { background: var(--primary-dark); color: #fff; }.auth-divider { align-items: center; color: #a5a7b1; display: flex; font-size: 11px; gap: 12px; margin: 7px 0 1px; }.auth-divider:before, .auth-divider:after { background: #edf2f1; content: ""; height: 1px; width: 100%; }.google-button { align-items: center; background: #fff; border: 1px solid #e3e3ea; border-radius: 9px; color: #555968; display: flex; font-size: 12px; font-weight: 700; height: 44px; justify-content: center; text-decoration: none; }.google-button:hover { background: #fafafa; }.google-mark { color: #4285f4; font-size: 18px; margin-right: 9px; }.auth-footer { color: #8a8d9c; font-size: 12px; margin: 26px 0 0; text-align: center; }.auth-feedback { align-items: center; background: var(--mint-pale); border-radius: 8px; color: #159d75; display: none; font-size: 11px; font-weight: 700; gap: 7px; margin-top: 4px; padding: 10px 12px; }.auth-feedback.show { display: flex; }.auth-side { background: linear-gradient(135deg, var(--brand-navy), var(--brand-primary-dark) 70%, var(--brand-primary)); color: #fff; overflow: hidden; padding: 60px; position: relative; }.auth-side:before, .auth-side:after { border: 1px solid rgba(255,255,255,.18); border-radius: 50%; content: ""; position: absolute; }.auth-side:before { height: 420px; right: -135px; top: -155px; width: 420px; }.auth-side:after { bottom: -180px; height: 450px; left: -150px; width: 450px; }.auth-side-content { display: flex; flex-direction: column; height: 100%; justify-content: center; margin: 0 auto; max-width: 470px; position: relative; z-index: 1; }.auth-side .eyebrow { color: #e2f6f2; }.auth-side h2 { font-size: clamp(30px, 3.4vw, 49px); font-weight: 750; letter-spacing: -1.7px; line-height: 1.08; margin: 13px 0 17px; }.auth-side p { color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.65; margin: 0; max-width: 380px; }.auth-preview { background: rgba(255,255,255,.97); border: 8px solid rgba(255,255,255,.16); border-radius: 15px; box-shadow: 0 22px 50px rgba(18,41,58,.23); color: var(--ink); margin-top: 40px; padding: 17px; transform: rotate(-3deg); }.auth-preview-top { align-items: center; display: flex; gap: 7px; margin-bottom: 16px; }.preview-dot { background: #ff8e80; border-radius: 50%; height: 7px; width: 7px; }.preview-dot:nth-child(2) { background: #f3c05d; }.preview-dot:nth-child(3) { background: #3bcaa2; }.preview-line { background: #edf6f4; border-radius: 9px; height: 9px; margin-left: 6px; width: 85px; }.preview-stats { display: grid; gap: 9px; grid-template-columns: repeat(3, 1fr); }.preview-stat { background: #f7faf9; border-radius: 7px; height: 52px; }.preview-chart { background: linear-gradient(180deg, #f1fbf9, #fff); border-radius: 7px; height: 87px; margin-top: 10px; position: relative; }.preview-chart:after { border-bottom: 3px solid #77d7c2; border-radius: 50% 50% 0 0; bottom: 16px; content: ""; height: 34px; left: 15px; position: absolute; transform: skewX(-24deg); width: 88%; }.auth-icon-circle { align-items: center; background: var(--primary-pale); border-radius: 50%; color: var(--primary); display: inline-flex; font-size: 25px; height: 66px; justify-content: center; width: 66px; }.auth-card.centered { text-align: center; }.auth-card.centered .brand { justify-content: center; }.auth-card.centered .auth-submit { margin-top: 5px; }.auth-card.centered .auth-field, .auth-card.centered .auth-options { text-align: left; }.auth-card.centered .auth-feedback { text-align: left; }.password-hint { color: #9ca0ad; font-size: 10px; margin: -7px 0 2px; }.auth-legal { color: #a1a3ad; font-size: 10px; line-height: 1.5; margin: 0; text-align: center; }.auth-legal a { color: var(--primary); text-decoration: none; }
@media (max-width: 850px) { .auth-layout { display: block; }.auth-side { display: none; }.auth-panel { min-height: 100vh; padding: 32px 22px; } }.auth-card h1 { margin-top: 34px; }