:root { --navy:#17324d; --navy-2:#244b67; --ink:#1d2d3a; --muted:#6f7f8b; --line:#e6ebee; --paper:#fff; --canvas:#f4f6f7; --orange:#d9773d; --green:#43856b; --shadow:0 12px 32px rgba(26,48,65,.07); }
* { box-sizing:border-box; } body { margin:0; background:var(--canvas); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } button,input,textarea { font:inherit; } button { cursor:pointer; border:0; } .app-shell { display:flex; min-height:100vh; }
.sidebar { width:252px; background:var(--navy); color:#eaf1f4; padding:26px 18px 18px; display:flex; flex-direction:column; } .brand { display:flex; gap:11px; align-items:center; padding:0 10px 36px; } .brand-mark { width:38px; height:38px; border:1px solid #c8d9df; display:grid; place-items:center; color:#fff; font:700 20px Georgia,serif; } .brand strong,.brand span { display:block; } .brand strong { font:700 18px Georgia,serif; letter-spacing:.02em; } .brand span { font-size:10px; color:#9fb5c0; margin-top:3px; text-transform:uppercase; letter-spacing:.1em; } .workspace-label { color:#7893a1; text-transform:uppercase; letter-spacing:.11em; font-size:10px; padding:0 12px 10px; } .main-nav { display:grid; gap:5px; } .nav-item { display:flex; align-items:center; gap:11px; color:#a9bdc7; background:transparent; text-align:left; padding:12px; border-radius:5px; font-size:13px; } .nav-item:hover,.nav-item.active { background:#244b67; color:#fff; } .nav-icon { width:18px; font-size:18px; line-height:1; } .sidebar-bottom { margin-top:auto; } .sync-status { display:flex; align-items:center; gap:8px; padding:16px 11px; color:#86a19e; font-size:11px; border-top:1px solid rgba(255,255,255,.08); } .status-dot { width:7px; height:7px; background:#79b394; border-radius:50%; } .profile { display:flex; gap:9px; align-items:center; padding:13px 7px 0; border-top:1px solid rgba(255,255,255,.08); } .avatar,.top-avatar { display:grid; place-items:center; background:#d8e5e8; color:var(--navy); border-radius:50%; font-weight:700; } .avatar { width:31px; height:31px; font-size:10px; } .profile strong,.profile small { display:block; } .profile strong { font-size:11px; font-weight:600; } .profile small { color:#87a1ac; font-size:10px; margin-top:2px; } .more { margin-left:auto; color:#83a0ac; letter-spacing:2px; }
.main-content { width:calc(100% - 252px); min-width:0; } .topbar { height:70px; border-bottom:1px solid var(--line); background:#fff; padding:0 42px; display:flex; align-items:center; justify-content:space-between; } .breadcrumb { display:flex; gap:11px; color:#9aa6ad; font-size:12px; align-items:center; } .breadcrumb strong { color:var(--ink); font-weight:600; } .breadcrumb b { color:#c4cdd1; font-weight:400; } .topbar-actions { display:flex; align-items:center; gap:18px; } .icon-button { color:#71808b; background:none; font-size:22px; } .top-avatar { width:31px; height:31px; font-size:10px; }
.view { display:none; max-width:1280px; margin:auto; padding:43px 45px 70px; } .view.active-view { display:block; } .page-heading,.detail-heading,.section-toolbar,.panel-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; } .page-heading { margin-bottom:34px; } .eyebrow { color:var(--orange); text-transform:uppercase; letter-spacing:.14em; font-size:10px; font-weight:700; margin:0 0 8px; } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:8px; font:600 36px Georgia,serif; color:var(--navy); letter-spacing:-.02em; } h2 { font:600 22px Georgia,serif; color:var(--navy); margin-bottom:5px; } .subheading,.muted { color:var(--muted); font-size:13px; } .subheading { margin:0; } .primary-button,.secondary-button,.ghost-button,.filter-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:4px; padding:11px 16px; font-size:12px; font-weight:600; white-space:nowrap; } .primary-button { background:var(--orange); color:#fff; box-shadow:0 5px 13px rgba(217,119,61,.18); } .primary-button:hover { background:#bd6030; } .primary-button.small { padding:9px 13px; font-size:11px; } .secondary-button,.filter-button { background:#fff; color:var(--navy); border:1px solid #dce4e7; } .ghost-button { background:transparent; color:#647681; } .metrics-row { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:46px; } .metric { background:#fff; border:1px solid var(--line); padding:19px 20px; min-height:111px; } .metric span,.metric small { display:block; color:var(--muted); font-size:11px; } .metric strong { display:block; color:var(--navy); font:600 23px Georgia,serif; margin:10px 0 5px; } .metric .positive { color:var(--green); } .accent-metric { border-top:3px solid var(--orange); }
.section-toolbar { align-items:center; margin-bottom:17px; } .section-toolbar h2 { font-size:20px; margin:0 0 3px; } .toolbar-actions { display:flex; gap:9px; } .search-box { background:#fff; border:1px solid var(--line); display:flex; align-items:center; gap:8px; padding:0 11px; width:220px; color:#99a6ad; } .search-box input { border:0; outline:0; width:100%; padding:10px 0; font-size:11px; } .project-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; } .project-card { background:#fff; border:1px solid var(--line); padding:23px; transition:.2s ease; cursor:pointer; } .project-card:hover { border-color:#b9cbd1; transform:translateY(-2px); box-shadow:var(--shadow); } .project-card-top { display:flex; justify-content:space-between; gap:15px; } .project-card h3 { margin:0 0 7px; font:600 19px Georgia,serif; color:var(--navy); } .project-owner { color:var(--muted); font-size:11px; } .project-status { color:var(--green); font-size:10px; background:#ecf6f0; padding:5px 7px; height:max-content; } .project-status.archived { color:#6b7880; background:#edf0f2; } .project-card-footer { border-top:1px solid var(--line); padding-top:16px; margin-top:20px; display:flex; justify-content:space-between; color:var(--muted); font-size:10px; } .project-card-footer strong { color:var(--navy); font-weight:600; }
.back-link { color:var(--muted); background:transparent; font-size:12px; padding:0; margin-bottom:28px; } .detail-heading { align-items:center; margin-bottom:30px; } .detail-actions { display:flex; gap:10px; align-items:center; } .status-badge { color:var(--green); font-size:11px; display:flex; align-items:center; gap:6px; } .status-badge i { width:7px; height:7px; border-radius:50%; background:#5baf7c; } .detail-tabs { display:flex; gap:30px; border-bottom:1px solid var(--line); margin:0 -45px 28px; padding:0 45px; } .tab { background:transparent; color:#8a979d; padding:0 0 13px; border-bottom:2px solid transparent; font-size:12px; } .tab.active { color:var(--navy); border-color:var(--orange); font-weight:700; } .tab span { display:inline-block; margin-left:5px; background:#edf1f2; padding:2px 6px; font-size:9px; color:#708089; } .tab.active span { background:#f7e8de; color:var(--orange); }
.tab-panel { display:none; } .tab-panel.active-panel { display:block; } .panel-heading { align-items:center; margin-bottom:21px; } .panel-heading h2 { margin:0 0 3px; } .note-composer,.expense-form { background:#fff; border:1px solid #d8e1e4; padding:18px; margin-bottom:18px; } .composer-meta { display:flex; gap:9px; align-items:center; color:var(--muted); font-size:11px; margin-bottom:12px; } .date-chip { color:var(--orange); background:#fcf0e9; font-size:9px; padding:5px 7px; font-weight:700; } textarea { display:block; border:1px solid var(--line); min-height:105px; resize:vertical; width:100%; padding:13px; outline:none; font-size:12px; color:var(--ink); } textarea:focus,input:focus { border-color:#afc3ca; } .composer-footer,.form-actions { display:flex; align-items:center; gap:10px; margin-top:12px; } .composer-footer > div:last-child { margin-left:auto; display:flex; gap:6px; } .upload-button { cursor:pointer; color:var(--navy-2); font-size:11px; } .upload-button input { display:none; } .photo-name { font-size:10px; color:#9ba8ad; }
.timeline { position:relative; margin-left:9px; padding-left:29px; border-left:1px solid #d9e3e5; } .note { position:relative; background:#fff; border:1px solid var(--line); padding:19px 20px; margin-bottom:17px; } .note::before { content:""; width:9px; height:9px; background:var(--orange); border:3px solid var(--canvas); border-radius:50%; position:absolute; left:-35px; top:22px; } .note-header { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; margin-bottom:12px; } .note-header strong { color:var(--navy); font-size:11px; } .note p { font-size:12px; line-height:1.6; margin:0; } .photo-preview { max-width:170px; max-height:110px; object-fit:cover; margin-top:13px; border:1px solid var(--line); }
.form-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:12px; } label { color:#6d7c84; font-size:10px; display:block; } label input { display:block; width:100%; border:1px solid var(--line); padding:10px; margin-top:6px; outline:0; font-size:11px; color:var(--ink); background:#fff; } .form-total { text-align:right; border-top:1px solid var(--line); margin-top:18px; padding-top:14px; color:var(--muted); font-size:12px; } .form-total strong { color:var(--navy); font:600 18px Georgia,serif; } .form-actions { justify-content:flex-end; } .table-wrap { overflow:auto; background:#fff; border:1px solid var(--line); } table { width:100%; border-collapse:collapse; font-size:11px; } th,td { padding:15px 17px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; } th { color:#85939b; font-size:9px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; background:#fafbfb; } td { color:#586b75; } td strong { color:var(--navy); font-weight:600; } tfoot td { border:0; color:var(--navy); font-weight:700; } .align-right { text-align:right; } .delete-button { background:transparent; color:#a5b0b5; }
.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .summary-card { background:#fff; border:1px solid var(--line); padding:23px; min-height:130px; } .summary-card.wide { grid-column:span 1; } .summary-card span,.summary-card small { display:block; color:var(--muted); font-size:11px; } .summary-card strong { display:block; color:var(--navy); font:600 24px Georgia,serif; margin:15px 0 5px; }
.archive-list { background:#fff; border:1px solid var(--line); } .archive-row { padding:20px 22px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); } .archive-row:last-child { border-bottom:0; } .archive-row h3 { margin:0 0 5px; font:600 18px Georgia,serif; color:var(--navy); } .archive-row p { margin:0; color:var(--muted); font-size:11px; } .archive-actions { display:flex; align-items:center; gap:18px; }
.hidden { display:none !important; } .modal-backdrop { position:fixed; inset:0; background:rgba(18,42,57,.48); display:grid; place-items:center; padding:20px; z-index:5; } .modal { position:relative; background:#fff; width:min(100%,430px); padding:32px; box-shadow:0 20px 70px rgba(0,0,0,.18); } .modal h2 { font-size:27px; margin-bottom:8px; } .modal label { margin-top:20px; } .modal-actions { display:flex; justify-content:flex-end; gap:7px; margin-top:26px; } .modal-close { position:absolute; top:14px; right:15px; background:transparent; color:#96a3a9; font-size:23px; }
@media (max-width:900px) { .sidebar { width:205px; } .main-content { width:calc(100% - 205px); } .metrics-row { grid-template-columns:repeat(2,1fr); } .project-grid { grid-template-columns:1fr; } .view { padding-left:28px; padding-right:28px; } .detail-tabs { margin-left:-28px; margin-right:-28px; padding-left:28px; padding-right:28px; } .form-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .sidebar { width:64px; padding:18px 9px; } .brand { padding:0 4px 30px; } .brand > div:last-child,.workspace-label,.nav-item:not(.active)::after,.nav-item { font-size:0; } .brand-mark { margin:auto; } .main-nav { gap:4px; } .nav-item { justify-content:center; padding:12px 5px; } .nav-icon { font-size:18px; } .sidebar-bottom { display:none; } .main-content { width:calc(100% - 64px); } .topbar { padding:0 17px; height:62px; } .breadcrumb span,.breadcrumb b { display:none; } .view { padding:27px 17px 50px; } .page-heading,.detail-heading,.section-toolbar,.panel-heading { align-items:flex-start; flex-direction:column; } .page-heading { margin-bottom:25px; } h1 { font-size:31px; } .metrics-row { gap:8px; margin-bottom:30px; } .metric { padding:13px; min-height:100px; } .metric strong { font-size:18px; } .metric span,.metric small { font-size:9px; } .toolbar-actions { width:100%; } .search-box { flex:1; } .detail-actions { width:100%; justify-content:space-between; } .detail-tabs { margin-left:-17px; margin-right:-17px; padding:0 17px; gap:20px; overflow:auto; } .form-grid,.item-grid { grid-template-columns:1fr; } .control-summary { grid-template-columns:1fr 1fr; } .avaluo-fields { flex-direction:column; } .composer-footer { align-items:flex-start; flex-wrap:wrap; } .composer-footer > div:last-child { width:100%; margin-left:0; justify-content:flex-end; } .summary-grid { grid-template-columns:1fr 1fr; } .summary-card.wide { grid-column:span 2; } .archive-row { align-items:flex-start; flex-direction:column; gap:14px; } }
 .edit-note { background:transparent; color:var(--orange); font-size:10px; padding:11px 0 0; } .valuation-chip { display:inline-block; color:var(--navy); background:#eef4f5; padding:7px 9px; margin-top:12px; font-size:10px; font-weight:600; } .compact-label { display:flex; align-items:center; gap:8px; font-size:10px; } .compact-label input,.compact-label select { margin:0; padding:7px 8px; width:auto; } .avaluo-fields { display:flex; gap:12px; margin-bottom:12px; } .control-summary { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:13px; margin-bottom:20px; } .control-summary > div { background:#fff; border:1px solid var(--line); padding:17px; } .control-summary span { display:block; color:var(--muted); font-size:10px; } .control-summary strong { display:block; color:var(--navy); font:600 20px Georgia,serif; margin-top:9px; } .progress-track { background:#edf1f2; height:6px; margin-top:12px; } .progress-track i { display:block; height:100%; width:0; background:var(--green); transition:width .25s; } .item-form { background:#fff; border:1px solid #d8e1e4; padding:18px; margin-bottom:18px; } .item-grid { grid-template-columns:2fr .8fr 1fr 1fr 1fr; } .inline-progress { width:82px; border:1px solid var(--line); padding:6px; font-size:11px; } .check-label { display:flex; align-items:center; gap:5px; white-space:nowrap; } .check-label input { width:auto; margin:0; } .change-log { background:#fff; border:1px solid var(--line); padding:4px 20px; } .change-row { display:flex; gap:13px; padding:16px 4px; border-bottom:1px solid var(--line); } .change-row:last-child { border-bottom:0; } .change-dot { width:8px; height:8px; border-radius:50%; background:var(--orange); margin-top:4px; flex:none; } .change-row strong,.change-row small { display:block; } .change-row strong { font-size:11px; color:var(--navy); font-weight:600; } .change-row small { color:var(--muted); font-size:10px; margin-top:4px; }
 .inline-item { width:100%; min-width:82px; border:1px solid transparent; background:transparent; padding:6px; font-size:11px; color:var(--ink); } .inline-item:hover,.inline-item:focus { background:#fff; border-color:#b7c9cf; outline:0; } .item-name-field { min-width:170px; font-weight:600; color:var(--navy); } .item-unit-field { min-width:82px; } .item-number-field { text-align:right; min-width:76px; } 
 .additional-costs,.expense-summary { margin-top:30px; } .additional-costs { border-top:3px solid var(--navy-2); padding-top:22px; } .expense-summary { border-top:3px solid var(--orange); padding-top:22px; } .summary-period { color:var(--muted); font-size:10px; } .expense-date-field { min-width:118px; } .expense-product-field { min-width:180px; } .expense-number-field { min-width:75px; text-align:right; } .summary-share { min-width:150px; } .share-track { display:inline-block; vertical-align:middle; width:76px; height:6px; background:#edf1f2; margin-right:8px; } .share-track i { display:block; height:100%; background:var(--orange); } 
 .budget-strip { display:grid; grid-template-columns:1.3fr 1.3fr 1fr 1fr; gap:12px; background:#f8faf9; border:1px solid var(--line); padding:14px; margin-bottom:14px; } .budget-balance { background:#fff; border:1px solid var(--line); padding:11px; } .budget-balance span { display:block; color:var(--muted); font-size:10px; } .budget-balance strong { display:block; color:var(--green); font:600 17px Georgia,serif; margin-top:7px; } .additional-entry-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; } .additional-entry { background:#fff; border:1px solid var(--line); padding:14px; } .additional-entry p { color:var(--navy); font:600 14px Georgia,serif; margin-bottom:12px; } .additional-entry .primary-button { margin-top:12px; }
@media print { body { background:#fff; } .sidebar,.topbar,.back-link,.detail-actions,.detail-tabs,.primary-button,.secondary-button,.ghost-button,.delete-button,.edit-note,.project-search,.additional-entry-grid,.budget-strip input { display:none !important; } .main-content { width:100%; } .view { padding:0; max-width:none; } .detail-view { display:block !important; } .tab-panel { display:none !important; } .tab-panel.active-panel { display:block !important; } .table-wrap,.note,.change-log,.summary-card,.control-summary { box-shadow:none; break-inside:avoid; } h1 { font-size:25px; } }
 .budget-strip { grid-template-columns:repeat(3,1fr); } .financial-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; } .financial-summary > div { background:#fff; border:1px solid var(--line); padding:13px 16px; } .financial-summary span { display:block; color:var(--muted); font-size:10px; } .financial-summary strong { display:block; color:var(--navy); font:600 18px Georgia,serif; margin-top:7px; } .bottom-summary { margin-top:20px; border-top:2px solid var(--navy-2); padding-top:18px; } .bottom-summary > div:last-child { border-top:2px solid var(--orange); } .additional-delete,.expense-delete { font-size:14px; padding:5px; color:#8a5d58; }
@media (max-width:900px) { .budget-strip,.financial-summary { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .budget-strip,.financial-summary { grid-template-columns:1fr; } }
 .single-hidden-entry { display:flex; align-items:end; gap:13px; background:#fff; border:1px solid var(--line); padding:14px; margin:14px 0; } .single-hidden-entry > strong { color:var(--navy); font:600 14px Georgia,serif; margin-right:auto; } .single-hidden-entry label { min-width:180px; } .single-hidden-entry .primary-button { flex:none; } 
@media (max-width:640px) { .single-hidden-entry { align-items:stretch; flex-direction:column; } .single-hidden-entry > strong { margin:0; } }
 .budget-strip { grid-template-columns:1fr 1fr; } .budget-strip > label:nth-child(1) { grid-column:1; grid-row:1; } .budget-strip > label:nth-child(2) { grid-column:2; grid-row:1; } .budget-strip > .budget-balance:nth-child(3) { grid-column:1; grid-row:2; } .budget-strip > .budget-balance:nth-child(4) { grid-column:2; grid-row:2; } .settings-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:16px; } .settings-card { background:#fff; border:1px solid var(--line); padding:23px; } .settings-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; } .settings-card-heading h2 { margin-bottom:4px; } .admin-profile,.role-row,.drive-connection { display:flex; align-items:center; gap:12px; padding:15px 0; border-top:1px solid var(--line); } .admin-profile strong,.admin-profile span,.role-row strong,.role-row small,.drive-connection strong,.drive-connection small { display:block; } .admin-profile strong,.role-row strong,.drive-connection strong { color:var(--navy); font-size:12px; } .admin-profile span,.role-row small,.drive-connection small { color:var(--muted); font-size:10px; margin-top:4px; } .large-avatar { width:38px; height:38px; } .role-pill,.connection-status { margin-left:auto; padding:6px 8px; font-size:9px; white-space:nowrap; } .admin-pill { color:#fff; background:var(--navy); } .capture-pill { color:#8b6a2c; background:#f9f1dc; } .supervisor-pill { color:var(--green); background:#eaf5ef; } .connection-status { color:#8b6a2c; background:#f9f1dc; } .drive-icon { width:35px; height:35px; display:grid; place-items:center; background:#edf3f4; color:var(--navy); font:700 20px Georgia,serif; } .drive-connection button { margin-left:auto; } .settings-note { color:var(--muted); font-size:10px; line-height:1.5; background:#f7f9f9; padding:12px; margin:15px 0 0; }
@media (max-width:900px) { .settings-grid { grid-template-columns:1fr; } }
@media (max-width:640px) { .budget-strip { grid-template-columns:1fr; } .budget-strip > label:nth-child(1),.budget-strip > label:nth-child(2),.budget-strip > .budget-balance:nth-child(3),.budget-strip > .budget-balance:nth-child(4) { grid-column:1; grid-row:auto; } .settings-card-heading,.admin-profile,.role-row,.drive-connection { align-items:flex-start; flex-wrap:wrap; } .role-pill,.connection-status { margin-left:0; } }
 .summary-search { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); padding:0 10px; width:260px; color:#9aa7ad; } .summary-search input { border:0; outline:0; width:100%; padding:9px 0; font-size:11px; }
.summary-filter-bar { display:flex; align-items:center; gap:10px; width:100%; margin-top:8px; padding:10px; background:#f8fafb; border:1px solid var(--line); }
.summary-filter-bar .summary-search { flex:1; width:auto; min-width:240px; }
.filter-label { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.08em; }
.date-filter { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; font-weight:700; white-space:nowrap; }
.date-filter input { margin:0; width:145px; border:1px solid var(--line); padding:9px 7px; font-size:11px; background:#fff; }
@media (max-width:640px) { .summary-search { width:100%; } }
@media (max-width:640px) { .summary-filter-bar { align-items:stretch; flex-direction:column; } .summary-filter-bar .summary-search { min-width:0; width:100%; } .date-filter { justify-content:space-between; } .date-filter input { width:65%; } }
body { text-transform:uppercase; } .note p,.note textarea,textarea,input,select,.change-row strong,.change-row small { text-transform:none; } .summary-date { border:1px solid var(--line); padding:9px 7px; font-size:10px; color:var(--muted); } 
body.auth-pending .app-shell { visibility:hidden; }
.auth-overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:#f3f6f7; }
.auth-card { width:min(390px,calc(100% - 40px)); padding:30px; background:#fff; border:1px solid var(--line); box-shadow:0 15px 40px #17324d18; }
.forgot-password { background:none !important; color:var(--accent) !important; padding:8px 0 !important; margin-top:10px !important; font-size:11px; }
.general-grid { margin-top:18px; }.reminder-note { display:flex; flex-direction:column; gap:5px; margin-top:18px; padding:14px; border-left:3px solid var(--accent); background:#fff8f3; font-size:12px; }.reminder-note span { color:var(--muted); }
.reminder-alert { position:fixed; right:22px; bottom:22px; z-index:90; width:min(390px,calc(100% - 44px)); padding:16px; background:#fff4df; border:1px solid #e5b65d; box-shadow:0 10px 30px #17324d22; font-size:12px; }.reminder-alert strong { display:block; margin-bottom:6px; }.reminder-alert button { float:right; border:0; background:transparent; font-size:16px; cursor:pointer; }
.remember-email { display:flex !important; align-items:center; gap:7px; font-weight:400 !important; }.remember-email input { width:auto !important; margin:0 !important; padding:0 !important; }.logout-button { border:1px solid var(--line); background:#fff; color:var(--muted); padding:8px 10px; font-size:10px; font-weight:700; cursor:pointer; }
.auth-card h1 { margin:0 0 8px; font-size:25px; }.auth-card p { color:var(--muted); font-size:13px; line-height:1.5; }.auth-card label { display:block; margin-top:16px; font-size:11px; font-weight:700; }.auth-card input { display:block; box-sizing:border-box; width:100%; margin-top:6px; padding:11px; border:1px solid var(--line); }.auth-card button { width:100%; margin-top:20px; }.auth-error { color:#b43d2b; font-size:12px; margin-top:12px; }