:root{--bg: #f7f7f7;--panel: #ffffff;--panel-muted: #fbfbfb;--text: #111111;--muted: #777777;--line: #e6e6e6;--line-dark: #d8d8d8;--primary: #111111;--primary-soft: #f1f1f1;--good: #059669;--warn: #b45309;--bad: #e11d48;--shadow: 0 4px 14px rgba(0, 0, 0, .08)}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Helvetica Neue,Noto Sans SC,PingFang SC,sans-serif;font-size:14px;line-height:1.45}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;-webkit-tap-highlight-color:transparent}input,select,textarea{width:100%;background:var(--panel);border:1px solid var(--line-dark);border-radius:8px;padding:9px 10px;color:var(--text)}textarea{resize:vertical}button,.ghost-button,.primary-button{border:1px solid var(--line-dark);border-radius:8px;padding:8px 12px;background:var(--panel);color:var(--text);cursor:pointer;transition:box-shadow .18s ease,border-color .18s ease,background-color .18s ease,color .18s ease}button:hover,.ghost-button:hover,.primary-button:hover,.nav-item:hover,.upload-thumb__preview:hover{box-shadow:var(--shadow)}button.primary,.primary-button{background:var(--primary);border-color:var(--primary);color:#fff}button.danger,.ghost-button--danger{border-color:#f0b9c8;color:var(--bad)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mono{font-family:SF Mono,Roboto Mono,Menlo,monospace;font-variant-numeric:tabular-nums}.subtle{color:var(--muted);font-size:11px;letter-spacing:.02em}.row{display:flex;gap:8px;align-items:center}.row--wrap{flex-wrap:wrap}.page-wrap{display:flex;min-height:100vh}.sidebar{width:220px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:12px;padding:14px 12px;position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto}.sidebar-header{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}.logo{width:40px;height:40px;border-radius:10px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:.08em}.sidebar-title-main{font-size:16px;font-weight:700;line-height:1.2}.sidebar-nav{display:flex;flex-direction:column;gap:6px}.nav-item{width:100%;min-height:40px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:8px;padding:8px 10px;color:#666;background:#fff}.nav-item-icon{width:24px;font-size:12px;color:#999}.nav-item.active{background:#111;color:#fff;border-color:#111}.nav-item.active .nav-item-icon{color:#d6d6d6}.sidebar-footer{margin-top:auto;display:grid;gap:10px}.sidebar-user{display:grid;gap:2px}.sidebar-logout{width:100%}.main{flex:1;min-width:0;padding:20px}.workspace,.dashboard,.login-shell{display:flex;flex-direction:column;gap:16px}.dashboard,.login-shell{width:min(1120px,100%);margin:0 auto}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.page-title,.hero-card h1,.login-panel h1,.section-heading h2{margin:0;font-size:clamp(22px,2vw,28px);line-height:1.2}.section-title{margin:0;font-size:18px;line-height:1.25}.card,.panel,.hero-card,.login-panel,.stat-card,.stats-panel,.image-modal__card{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px #00000005}.card,.panel,.login-panel,.stat-card,.stats-panel,.image-modal__card{padding:14px}.section-card,.panel--spacious{padding:16px}.hero-card{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:18px}.hero-card__actions,.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.hero-card__eyebrow,.section-heading__eyebrow,.login-panel__badge{margin:0 0 6px;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.section-heading--compact{margin-bottom:10px}.section-heading__hint,.hero-card p,.login-panel__intro{margin:4px 0 0;color:#5d5d5d}.status-text{margin:0;border-radius:10px;border:1px solid var(--line);background:#fafafa;padding:10px 12px}.status-text--success{color:var(--good);border-color:#b8e5d7;background:#f4fbf8}.status-text--error{color:var(--bad);border-color:#f3cad7;background:#fff7fa}.record-workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start}.content-main,.record-main,.record-side{display:flex;flex-direction:column;gap:12px}.record-side{position:sticky;top:20px}.subsection-card{background:var(--panel-muted);border-color:var(--line);box-shadow:none}.form-grid{display:grid;gap:12px}.form-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}label{display:flex;flex-direction:column;gap:6px}label span{font-size:12px;color:#666}.record-editor-shell form{margin:0}.upload-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.upload-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}.upload-card__head{display:grid;gap:12px}.detail-field{display:grid;gap:6px}.detail-field__value{margin:0;font-size:16px;line-height:1.45;font-weight:400;color:#1f2937;overflow-wrap:anywhere;word-break:break-word}.detail-field__value--mono,.detail-field__value--mono.mono,.summary-line__value--mono.mono{font-variant-numeric:tabular-nums}.detail-field__value--mono{letter-spacing:.01em}.detail-image-grid{align-items:stretch}.detail-image-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:12px}.detail-image-card__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.detail-image-card__head h4,.detail-note{margin:0}.detail-image-card__head p{margin:6px 0 0}.detail-image-card__actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.detail-note{min-height:88px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.upload-card__title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.upload-card__head h3{margin:0;font-size:16px}.upload-card__body-row{display:grid;grid-template-columns:minmax(0,1fr) 176px;align-items:start;gap:12px}.upload-card__helper{margin:0;max-width:34ch}.upload-card__controls{display:flex;justify-content:flex-end}.upload-card__buttons{width:100%;display:grid;gap:10px}.upload-card__buttons>button{width:100%}.upload-card__status{margin-top:0}.upload-card__notes{display:grid;gap:4px}.upload-card__notes p{margin:0}.upload-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.upload-thumb{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#f4f4f4}.upload-thumb--pending{border-style:dashed}.upload-thumb__preview{display:block;width:100%;height:120px;padding:0;border:none;background:transparent;border-radius:0}.upload-thumb__preview img,.thumb-chip img{width:100%;height:100%;object-fit:cover}.upload-thumb__meta{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px}.upload-thumb__name{font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.upload-thumb__remove{padding:4px 8px;font-size:12px}.upload-empty{border:1px dashed var(--line-dark);border-radius:12px;background:var(--panel-muted);padding:16px;display:grid;gap:4px}.upload-empty p{margin:0}.summary-card,.tips-card{display:grid;gap:10px}.summary-line{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:8px}.summary-line:last-of-type{border-bottom:none}.summary-line__value{min-width:0;text-align:right;font-weight:400;color:#1f2937;overflow-wrap:anywhere;word-break:break-word}.summary-line__value--mono{font-variant-numeric:tabular-nums;letter-spacing:.01em}.summary-line strong{min-width:0;text-align:right;overflow-wrap:anywhere;word-break:break-word}.summary-note{margin:0}.summary-actions{display:grid;gap:8px}.summary-primary-action{width:100%}.tips-list{margin:0;padding-left:18px;display:grid;gap:8px}.toolbar-form{display:grid;gap:12px;align-items:end}.toolbar-form--employee,.toolbar-form--admin{grid-template-columns:repeat(6,minmax(0,1fr))}.toolbar-form--users{grid-template-columns:repeat(4,minmax(0,1fr))}.date-range-field{grid-column:span 2}.date-range-field__inputs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}.date-range-field__separator{color:#666;font-size:13px}.filter-toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-top:12px}.filter-toolbar__actions{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}.quick-filter-group{display:grid;gap:8px}.quick-filter-chips,.active-filter-tags{display:flex;flex-wrap:wrap;gap:8px}.filter-chip{min-height:34px;padding:6px 12px;border-radius:999px;background:#fff}.filter-chip--active{background:#111;color:#fff;border-color:#111}.results-summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.active-filter-bar{display:grid;gap:8px;margin-bottom:12px}.overview-actions{display:grid;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}.overview-actions__lead{display:flex;justify-content:space-between;gap:12px;align-items:flex-end}.overview-actions__export{display:flex;flex-wrap:wrap;gap:8px}.pagination-bar{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.pagination-bar__summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.pagination-bar__actions{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}.pagination-chip{min-width:40px;min-height:36px;border-radius:12px;padding:6px 12px;background:#fff}.pagination-chip--active{background:#111;border-color:#111;color:#fff}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:780px}.admin-record-table table{min-width:1080px;table-layout:fixed}.employee-table table{table-layout:fixed}.users-table table{min-width:900px}.employee-table th:nth-child(1),.employee-table td:nth-child(1){width:112px}.employee-table th:nth-child(2),.employee-table td:nth-child(2){width:220px}.employee-table th:nth-child(3),.employee-table td:nth-child(3){width:200px}.employee-table th:nth-child(4),.employee-table td:nth-child(4){width:72px}.employee-table th:nth-child(5),.employee-table td:nth-child(5){width:160px}.employee-table th:nth-child(6),.employee-table td:nth-child(6){width:144px}.employee-table th:nth-child(7),.employee-table td:nth-child(7){width:156px}.employee-table th:nth-child(8),.employee-table td:nth-child(8){width:148px}.admin-record-table th:nth-child(1),.admin-record-table td:nth-child(1){width:124px}.admin-record-table th:nth-child(2),.admin-record-table td:nth-child(2){width:188px}.admin-record-table th:nth-child(3),.admin-record-table td:nth-child(3){width:184px}.admin-record-table th:nth-child(4),.admin-record-table td:nth-child(4){width:64px}.admin-record-table th:nth-child(5),.admin-record-table td:nth-child(5){width:146px}.admin-record-table th:nth-child(6),.admin-record-table td:nth-child(6){width:158px}.admin-record-table th:nth-child(7),.admin-record-table td:nth-child(7){width:72px}.admin-record-table th:nth-child(8),.admin-record-table td:nth-child(8){width:116px}th,td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}th{font-size:11px;color:var(--muted);letter-spacing:.04em;font-weight:600}.table-title{display:grid;gap:2px;min-width:0}.table-title span{color:#666}.table-title--truncate strong,.table-title--truncate span,.table-cell-ellipsis{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.record-image-summary{display:grid;gap:4px;margin-top:0}.admin-image-cell{min-width:0}.employee-image-cell{min-width:188px}.record-image-summary__line{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#666;font-size:12px}.record-image-summary__line strong{color:var(--text)}.record-image-summary__head{display:flex;align-items:center;gap:8px;justify-content:flex-start}.record-image-summary__compact{color:#666;font-size:12px}.record-image-summary__actions{display:inline-flex;align-items:center;flex-wrap:nowrap;justify-content:flex-start;gap:6px}.admin-detail-cell{text-align:center}.admin-detail-cell .icon-action-button{margin-inline:auto}.icon-action-button{width:32px;height:32px;padding:0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#5b6472;border:1px solid #d6dde6;box-shadow:none;transition:color .18s ease,border-color .18s ease,background-color .18s ease,transform .18s ease}.icon-action-button:hover:not(:disabled){color:#111;border-color:#111;background:#f8fafc;transform:translateY(-1px)}.icon-action-button:disabled{opacity:.48;cursor:not-allowed}.icon-action-button svg{width:16px;height:16px}.thumb-strip{display:flex;flex-wrap:wrap;gap:6px}.thumb-chip{width:48px;height:48px;padding:0;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#f4f4f4}.inline-editor,.field-stack{display:grid;gap:6px}.field-stack__read{min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-muted);display:flex;align-items:center;overflow-wrap:anywhere;word-break:break-word}.status-inline-field{display:grid;gap:4px;width:112px}.status-inline-field--mobile{width:min(140px,100%)}.status-inline-select{width:100%;min-width:0;padding-right:30px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.25 4.5 6 8.25 9.75 4.5' stroke='%23666' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:12px 12px}.table-actions{display:grid;gap:8px}.badge{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:3px 8px;border-radius:999px;border:1px solid var(--line-dark);font-size:11px}.badge.good,.badge--success{color:var(--good);border-color:#9fe2cc}.badge.bad,.badge--danger{color:var(--bad);border-color:#f5c7d6}.badge.neutral,.badge--neutral{color:#4b5563;border-color:#d5dbe3}.badge--warn{color:var(--warn);border-color:#eed0ae}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stat-card strong{display:block;margin-top:4px;font-size:28px;line-height:1.1}.stats-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.stats-panel h3{margin:0 0 12px;font-size:16px}.bar-row,.stats-list-row{display:grid;gap:6px;margin-bottom:10px}.bar-row__meta,.stats-list-row{display:flex;justify-content:space-between;gap:8px}.bar-track{height:10px;border-radius:999px;overflow:hidden;background:#eee}.bar-fill{height:100%;border-radius:inherit;background:#111}.bar-fill--warm{background:#b45309}.bar-fill--dark{background:#4b5563}.empty-state{margin:0;color:var(--muted)}.mobile-records{display:none}.mobile-record-card{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:12px;display:grid;gap:10px}.record-image-summary--mobile{margin-top:0;padding-top:2px}.record-image-summary--mobile .record-image-summary__head{width:100%}.mobile-record-card__head,.mobile-record-card__line{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.mobile-record-card__head p{margin:4px 0 0}.mobile-text-wrap{overflow-wrap:anywhere;word-break:break-word}.mobile-record-card__line span{color:var(--muted)}.mobile-record-card__line--status{align-items:center}.login-shell{min-height:100vh;align-items:center;justify-content:center;padding:20px}.login-panel{width:min(480px,100%);padding:20px}.login-panel__badge{margin-bottom:10px}.login-form{display:grid;gap:12px;margin-top:16px}.login-quickfill{display:grid;gap:8px;margin-top:16px}.login-quickfill__label{margin:0}.login-account-hints{display:grid;gap:8px}.login-account-card{display:grid;gap:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel-muted);padding:12px}.login-account-card__head{display:flex;justify-content:space-between;gap:10px;align-items:center}.login-account-card__meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.login-form__submit{width:100%}.image-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#0000008c;z-index:60}.image-modal__card{width:min(920px,100%);max-height:calc(100vh - 32px)}.image-modal__card--preview{display:flex;flex-direction:column;gap:12px;padding:12px}.image-modal__toolbar{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.image-modal__meta{min-width:0;display:flex;flex-direction:column;gap:4px}.image-modal__counter{margin:0;color:var(--muted);font-size:12px}.image-modal__close{flex-shrink:0}.image-modal__title{margin:0;font-weight:600;line-height:1.3}.image-modal__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px}.preview-rotate-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:78px}.preview-rotate-arrow{font-size:16px;line-height:1}.image-modal__stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:240px;max-height:calc(100vh - 160px);overflow:hidden;border-radius:10px;background:#f3f4f6;padding:12px 72px}.image-modal__canvas{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;overflow:auto;overscroll-behavior:contain}.image-modal__image{width:auto;max-width:100%;max-height:calc(100vh - 220px);object-fit:contain;border-radius:8px;transform-origin:center center;transition:transform .18s ease}.image-modal__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;padding:0;font-size:28px;line-height:1;flex-shrink:0;z-index:1;background:#fffffff5;box-shadow:0 10px 24px #0f172a14}.image-modal__nav--prev{left:16px}.image-modal__nav--next{right:16px}@media(max-width:1200px){.toolbar-form--employee,.toolbar-form--admin{grid-template-columns:repeat(3,minmax(0,1fr))}.image-modal__stage{max-height:calc(100vh - 180px)}}@media(max-width:1024px){.record-workspace{grid-template-columns:1fr}.record-side{position:static;order:-1}.upload-grid,.stats-grid,.stats-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.image-modal__stage{padding-inline:60px}.image-modal__nav{width:40px;height:40px}}@media(max-width:820px){.page-wrap{flex-direction:column}.sidebar{width:100%;height:auto;position:sticky;top:0;z-index:30;flex-direction:row;align-items:center;border-right:none;border-bottom:1px solid var(--line);padding:8px;gap:8px;overflow-x:auto}.sidebar-header{border-bottom:none;padding-bottom:0;min-width:max-content}.sidebar-title{display:none}.sidebar-nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto}.nav-item{min-width:max-content;white-space:nowrap}.sidebar-footer{margin-top:0;margin-left:auto;grid-template-columns:1fr}.sidebar-user{display:none}.sidebar-logout{width:max-content;white-space:nowrap}.main{padding:12px}.toolbar-form--employee,.toolbar-form--admin,.toolbar-form--users,.form-grid--two,.upload-grid,.stats-grid,.stats-columns{grid-template-columns:1fr}.page-head,.hero-card,.section-heading,.overview-actions__lead,.login-account-card__head,.filter-toolbar{flex-direction:column;align-items:flex-start}.date-range-field{grid-column:span 1}.date-range-field__inputs{grid-template-columns:1fr}.date-range-field__separator{display:none}.upload-card__body-row{grid-template-columns:1fr}.upload-card__controls{justify-content:flex-start}.upload-card__buttons{width:auto}.upload-card__buttons>button{width:auto}.employee-table,.admin-record-table,.users-table{display:none}.mobile-records{display:grid;gap:10px}.image-modal{padding:10px}.image-modal__card--preview{gap:10px;padding:10px}.image-modal__actions{justify-content:flex-start}.image-modal__stage{padding:8px;min-height:180px;max-height:calc(100vh - 220px)}.image-modal__nav{position:absolute;top:12px;transform:none;width:36px;height:36px;z-index:1}.image-modal__nav--prev{left:12px}.image-modal__nav--next{right:12px}.image-modal__image{max-height:calc(100vh - 260px)}}@media(max-width:560px){.main{padding:10px}.card,.panel,.login-panel,.stat-card,.stats-panel{padding:12px}.overview-actions__export{display:grid;grid-template-columns:1fr}.page-title,.hero-card h1,.login-panel h1,.section-heading h2{font-size:20px}input,select,textarea,button,.ghost-button,.primary-button{min-height:40px}.thumb-chip{width:44px;height:44px}}