:root { --page:#f4f6f8; --ink:#16212c; --brand:#111c27; --muted:#657381; --line:#dfe5eb; }
.auth-shell { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(450px,.9fr); padding:0; background:white; }
.auth-story { align-self:stretch; min-height:100dvh; padding:48px clamp(40px,7vw,110px); background-color:#111c27; color:white; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.auth-story::before { content:''; position:absolute; width:550px; height:550px; right:-300px; top:28%; transform:rotate(32deg); border:1px solid #3e5265; box-shadow:0 0 0 55px #ffffff03,0 0 0 110px #ffffff03,0 0 0 165px #ffffff03; pointer-events:none; }
.story-brand { display:flex; gap:14px; align-items:center; z-index:1; }
.story-brand>span { background:var(--orange); color:var(--brand); padding:8px 11px; border-radius:9px; font-size:1.35rem; font-weight:900; letter-spacing:-2px; }
.story-brand strong { font-size:1.4rem; letter-spacing:-.04em; }
.pro-label { font-size:.7rem; padding:4px 6px; border:1px solid #5e6d79; border-radius:4px; margin-left:10px; letter-spacing:.07em; vertical-align:middle; }
.story-copy { z-index:1; margin:70px 0; max-width:500px; }
.story-copy .eyebrow { color:#ffa461; }
.story-copy h2 { font-size:clamp(2.8rem,4.8vw,4.6rem); letter-spacing:-.055em; line-height:1.04; margin:24px 0; font-weight:650; }
.story-copy p { max-width:380px; color:#b9c7d4; font-size:1.06rem; }
.story-rule { width:52px; height:3px; background:var(--orange); margin:32px 0; }
.story-points { display:grid; gap:16px; color:#e1e7ed; font-size:.875rem; }
.story-footer { position:relative; font-size:.75rem; color:#9babba; letter-spacing:.08em; display:flex; gap:30px; justify-content:space-between; }
.story-footer span { font-size:.7rem; }
.auth-panel { max-width:420px; width:100%; border:0; box-shadow:none; padding:40px 24px; margin:auto; }
.auth-panel .auth-brand { display:none; }
.auth-heading h2 { font-size:2.25rem; line-height:1.15; }
.auth-heading .eyebrow { color:var(--muted); }
.auth-heading p { margin-bottom:30px; }
.auth-footer { color:var(--muted); }
.app-shell { max-width:none; margin:0; padding:0; display:block; min-height:100dvh; border:0; }
.sidebar { position:fixed; inset:0 auto 0 0; width:250px; z-index:40; background:var(--brand); color:#dde5ee; display:flex; flex-direction:column; padding:28px 17px 16px; overflow-y:auto; }
.sidebar-brand { display:flex; gap:11px; align-items:center; color:white; text-decoration:none; padding:0 8px 25px; font-size:1.25rem; font-weight:700; letter-spacing:-.04em; }
.sidebar-brand .brand-mark { width:40px; height:40px; flex:0 0 40px; }
.sidebar-brand small { display:block; font-size:.62rem; letter-spacing:.13em; margin-top:3px; color:#99a9b8; }
.company-switch { display:flex; align-items:center; gap:11px; background:#ffffff08; border:1px solid #ffffff12; padding:12px; border-radius:9px; margin-bottom:28px; }
.company-avatar { background:#334351; width:32px; height:32px; display:grid; place-items:center; border-radius:7px; flex:0 0 32px; }
.company-switch strong { font-size:.875rem; display:block; overflow-wrap:anywhere; line-height:1.3; }
.company-switch small { font-size:.75rem; color:#9dabb8; text-transform:capitalize; }
.side-navigation { display:grid; gap:3px; }
.nav-group { display:block; font-size:.65rem; letter-spacing:.12em; color:#92a1af; padding:17px 13px 8px; font-weight:700; }
.nav-group:first-child { padding-top:0; }
.sidebar .tab { display:flex; justify-content:flex-start; gap:12px; min-height:44px; width:100%; padding:11px 13px; text-align:left; color:#b8c6d4; border-radius:7px; }
.sidebar .tab strong { font-size:.875rem; font-weight:500; }
.sidebar .tab .icon { width:19px; height:19px; }
.sidebar .tab:hover { color:white; background:#ffffff09; }
.sidebar .tab.active { background:#f9731617; color:#ffb079; box-shadow:inset 3px 0 var(--orange); }
.sidebar .tab.active strong { font-weight:650; }
.sidebar-bottom { margin-top:auto; padding-top:28px; }
.mobile-link { padding:15px 13px; display:flex; justify-content:space-between; color:#b8c6d4; text-decoration:none; font-size:.875rem; border-top:1px solid #ffffff12; margin-top:15px; }
.sidebar-caption { display:block; color:#7f919f; font-size:.65rem; letter-spacing:.17em; padding:14px 13px 0; }
.workspace-main { margin-left:250px; }
.workspace-topbar { min-height:80px; display:flex; align-items:center; gap:16px; padding:15px 36px; background:white; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:25; }
.breadcrumb { display:flex; align-items:center; gap:14px; font-size:.875rem; flex:1; }
.breadcrumb span,.breadcrumb b { color:var(--muted); font-weight:400; }
.toolbar-project { display:flex; align-items:center; gap:12px; }
.toolbar-project label { font-size:.75rem; color:var(--muted); white-space:nowrap; }
.toolbar-project .project-select { background:white; color:var(--ink); border-color:var(--line); max-width:270px; min-height:42px; font-size:.875rem; padding:8px 30px 8px 12px; }
.project-select option { color:var(--ink); background:white; }
.workspace-topbar .plain { background:white; padding:8px 10px; min-height:42px; }
#installButton { color:var(--ink); border-color:var(--line); }
#menuButton { display:none; }
.workspace-status { display:flex; align-items:center; gap:8px; padding:12px 36px 0; font-size:.75rem; color:var(--muted); }
#todayLabel { margin-left:auto; }
.view-root { padding:28px 36px 50px; max-width:1640px; margin:auto; }
.page-title { margin-bottom:25px; align-items:center; }
.page-title h2 { font-size:1.85rem; font-weight:650; letter-spacing:-.04em; }
.page-title .status-pill { border:1px solid var(--line); background:white; }
.page-title p { margin-top:5px; }
.page-actions { display:flex; align-items:center; gap:10px; }
.page-actions .primary,.page-actions .plain,.compact-button { min-height:42px; font-size:.875rem; padding:10px 16px; border-radius:8px; }
.grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.metric { min-height:120px; padding:20px; border-bottom-width:1px!important; }
.metric strong { margin:14px 0 5px; font-size:2rem; letter-spacing:-.045em; }
.metric small { color:var(--muted); font-size:.75rem; }
.panel,.card,.list-row,.photo-card { border-radius:10px; }
.panel { padding:22px; }
.panel h3 { font-size:1rem; }
.project-hero { max-width:none; border-radius:10px; }
.project-hero h3 { font-size:1.85rem; }
.quick-actions { max-width:500px; }
.table-panel { background:white; border:1px solid var(--line); border-radius:10px; margin-top:24px; overflow:hidden; }
.table-heading { padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:15px; border-bottom:1px solid var(--line); }
.table-heading h3 { font-size:1rem; font-weight:650; }
.table-heading p { color:var(--muted); font-size:.875rem; margin-top:3px; }
.table-controls { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:16px 22px; border-bottom:1px solid var(--line); }
.search-control { min-height:42px; max-width:330px; font-size:.875rem; }
.table-controls select { width:auto; min-height:42px; font-size:.875rem; }
.table-scroll { width:100%; overflow-x:auto; }
.data-table { border-collapse:collapse; width:100%; text-align:left; font-size:.875rem; }
.data-table th { background:#f8fafb; padding:13px 22px; color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; font-weight:600; white-space:nowrap; border-bottom:1px solid var(--line); }
.data-table td { padding:19px 22px; border-bottom:1px solid #edf0f3; vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover { background:#fafbfd; }
.data-table strong { font-weight:600; }
.data-table small { display:block; margin-top:3px; color:var(--muted); font-size:.75rem; }
.data-table .text-button { text-decoration:none; color:#a74309; font-weight:650; }
.data-table .progress-inline { width:130px; display:flex; gap:10px; align-items:center; font-size:.75rem; }
.data-table progress { height:5px; background:#e5e9ee; }
.data-table progress::-webkit-progress-bar { background:#e5e9ee; }
.data-table td:first-child { min-width:220px; }
.table-footer { padding:15px 22px; border-top:1px solid var(--line); color:var(--muted); font-size:.75rem; }
.status-label { display:inline-flex; align-items:center; gap:6px; border-radius:5px; font-size:.75rem; padding:4px 8px; background:#edf2f6; color:#455766; white-space:nowrap; }
.status-label.good { background:#e7f5ee; color:#24774d; }
.status-label.warn { background:#fff1dc; color:#8a5909; }
.status-label.bad { background:#fce9e9; color:#aa3535; }
.overview-bottom { display:grid; grid-template-columns:1.25fr 1fr; gap:22px; margin-top:24px; }
.overview-bottom .panel { margin:0; }
.development-line { display:flex; gap:15px; align-items:center; padding:17px 0; border-bottom:1px solid #edf0f3; }
.development-line:last-child { border:0; }
.development-mark { width:38px; height:38px; background:#eff3f7; display:grid; place-items:center; border-radius:8px; color:#526574; flex:0 0 38px; }
.development-line>div { flex:1; }
.development-line strong { font-size:.875rem; }
.development-line small { display:block; color:var(--muted); font-size:.75rem; }
.development-line b { font-size:.875rem; }
.split-page { display:grid; grid-template-columns:minmax(300px,1fr) minmax(360px,1.3fr); gap:24px; align-items:start; }
.two-col { gap:16px; }
.field-stack { gap:16px; }
.photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.photo-card { min-height:0; }
.photo-thumb,.photo-placeholder { aspect-ratio:4/3; }
.photo-copy { padding:13px; }
.field-stack .primary { justify-self:start; min-width:160px; }
.auth-panel .primary { justify-self:stretch; }
.edit-dialog { width:min(94vw,700px); max-height:90dvh; padding:0; border:0; border-radius:14px; color:var(--ink); }
.edit-dialog::backdrop { background:#101820aa; }
.dialog-heading { padding:22px 26px; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); }
.dialog-heading h2 { font-size:1.3rem; letter-spacing:-.025em; }
.dialog-heading p { color:var(--muted); font-size:.875rem; margin-top:4px; }
.dialog-heading button { border:0; background:var(--surface-2); width:38px; height:38px; border-radius:8px; font-size:1.2rem; }
.dialog-body { padding:24px 26px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--line); padding:20px 26px; }
.dialog-actions .primary { min-width:140px; }
.dialog-actions .plain { min-width:90px; }
.form-error:empty { display:none; }
.empty-state { padding:50px 24px; }
.notice { padding:15px 18px; font-size:.875rem; border:1px solid #c9dfed; background:#eef7fc; border-radius:8px; margin-bottom:20px; color:#34566e; }
.notice.warn { background:#fff5e8; color:#835511; border-color:#ecd6b6; }
.loading-state { min-height:180px; display:grid; place-content:center; text-align:center; gap:14px; color:var(--muted); }
.loading-ring { width:26px; height:26px; margin:auto; border:3px solid #dde4ea; border-top-color:var(--orange); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.kv-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:6px 0; }
.kv-grid dt { color:var(--muted); font-size:.75rem; margin-bottom:5px; }
.kv-grid dd { margin:0; font-size:.95rem; font-weight:550; overflow-wrap:anywhere; }
.tabs-row { display:flex; gap:22px; border-bottom:1px solid var(--line); margin:0 0 24px; }
.tabs-row button { border:0; background:none; min-height:48px; padding:0 4px; font-size:.875rem; color:var(--muted); }
.tabs-row .active { color:var(--ink); border-bottom:3px solid var(--orange); }
.choice-list { display:flex; flex-wrap:wrap; gap:14px; }
.choice-list label { display:flex; align-items:center; gap:7px; font-size:.875rem; }
.toast { bottom:28px; }
.sync-banner { margin:16px 36px 0; border:1px solid #ead6b1; border-radius:8px; }
.form-section-title { border-top:1px solid var(--line); padding-top:18px; font-size:.875rem; font-weight:650; }
@media(min-width:1050px) { #dailyForm,#itemForm { width:calc(48% - 12px); float:left; margin-right:24px; } #dailyForm+.panel { width:calc(52% - 12px); float:left; } #itemForm~.filters,#itemForm~.list { margin-left:calc(48% + 12px); } .view-root::after { content:''; display:block; clear:both; } }
@media(max-width:1200px) { .sidebar { width:220px; } .workspace-main { margin-left:220px; } .workspace-topbar { padding-inline:24px; } .view-root { padding:24px; } .workspace-status { padding-inline:24px; } .metric { padding:16px; } .photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .toolbar-project label { display:none; } }
@media(max-width:900px) { .auth-shell { grid-template-columns:1fr; } .auth-story { min-height:0; padding:26px 32px; } .story-copy,.story-footer { display:none; } .auth-panel { max-width:460px; padding:44px 28px; } .sidebar { transform:translateX(-100%); width:250px; } .sidebar.open { transform:translateX(0); box-shadow:10px 0 70px #111c2740; } .workspace-main { margin-left:0; } #menuButton { display:block; } .grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .workspace-topbar { padding:12px 18px; min-height:68px; } .breadcrumb>span,.breadcrumb>b { display:none; } .toolbar-project .project-select { max-width:230px; } .overview-bottom,.split-page { grid-template-columns:1fr; } }
@media(max-width:600px) { .view-root { padding:22px 16px; } .workspace-status { padding-inline:16px; } .workspace-topbar { flex-wrap:wrap; gap:10px; } .toolbar-project { order:3; width:100%; } .toolbar-project .project-select { max-width:none; width:100%; } .page-title { flex-wrap:wrap; } .page-actions { flex-wrap:wrap; } .photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .metric strong { font-size:1.6rem; } .table-heading,.table-controls { padding:16px; flex-wrap:wrap; } .two-col,.kv-grid { grid-template-columns:1fr; } .sync-banner { margin-inline:16px; } .story-brand strong { font-size:1.2rem; } #todayLabel { display:none; } .dialog-body { padding:20px; } .data-table td,.data-table th { padding:14px 16px; } }
@media(prefers-reduced-motion:reduce) { .loading-ring { animation:none; } }