:root{--oj-on-primary:#fff;--oj-on-accent:#fff;--oj-on-sidebar:#fff;--oj-type-body:13.5px;--oj-type-control:13.5px;--oj-type-small:12px;--oj-type-table:12.5px;--oj-type-nav:14px;--oj-type-title:18px;--oj-type-heading:21px}html[data-oj-font-size="COMPACT"]{--oj-type-body:12.5px;--oj-type-control:12.5px;--oj-type-small:11px;--oj-type-table:11.5px;--oj-type-nav:13px;--oj-type-title:17px;--oj-type-heading:19px}html[data-oj-font-size="LARGE"]{--oj-type-body:15px;--oj-type-control:15px;--oj-type-small:13px;--oj-type-table:14px;--oj-type-nav:15px;--oj-type-title:20px;--oj-type-heading:23px}html,body,button,input,select,textarea{font-family:var(--oj-font-ui,"Segoe UI Variable","Segoe UI",Arial,sans-serif)!important}body{font-size:var(--oj-type-body);color:var(--oj-text);background:var(--oj-bg)}.content,.page,.app-shell{background-color:var(--oj-bg)}.card,.modal-card,.auth-card,.admin-list-card,.transaction-card,.customer-card{background-color:var(--oj-surface);border-color:var(--oj-line)}input,select,textarea{font-size:var(--oj-type-control);background-color:var(--oj-surface);color:var(--oj-text);border-color:var(--oj-line)}input::placeholder,textarea::placeholder{color:var(--oj-muted)}label,.page-subtitle,.page-head p,.section-head p,.modal-head p,.admin-muted,.report-empty{color:var(--oj-text-2)}.page-subtitle,.admin-muted,.report-empty,.section-head p,.modal-head p{font-size:var(--oj-type-small)}table,th,td{font-size:var(--oj-type-table)}.sidebar{background:linear-gradient(180deg,var(--oj-sidebar),var(--oj-sidebar-2) 75%);color:var(--oj-on-sidebar)}.sidebar .nav-btn{font-size:var(--oj-type-nav)}.page-title{font-size:var(--oj-type-title)}.page-head h2{font-size:var(--oj-type-heading)}.primary-btn,.btn-primary,.auth-submit{background:linear-gradient(135deg,var(--oj-primary),var(--oj-primary-dark));border-color:var(--oj-primary);color:var(--oj-on-primary)}.secondary-btn{background:var(--oj-surface);color:var(--oj-text-2);border-color:var(--oj-line)}.admin-tab.active,.attendance-tab.active{background:var(--oj-primary-dark);border-color:var(--oj-primary-dark);color:var(--oj-on-primary)}.topbar{background:color-mix(in srgb,var(--oj-surface) 94%,transparent);border-color:var(--oj-line)}.appearance-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:16px;align-items:start}.appearance-form{display:grid;gap:18px}.appearance-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.appearance-field{display:grid;gap:6px}.appearance-field label{font-size:11px;font-weight:700;letter-spacing:.045em}.appearance-field small{color:var(--oj-muted);line-height:1.45}.appearance-theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.appearance-theme-option{position:relative;border:1px solid var(--oj-line);border-radius:14px;background:var(--oj-surface);padding:10px;text-align:left;display:grid;gap:8px;cursor:pointer;color:var(--oj-text)}.appearance-theme-option.active{border-color:var(--oj-primary);box-shadow:0 0 0 3px var(--oj-primary-soft)}.appearance-theme-swatches{display:flex;height:22px;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.06)}.appearance-theme-swatches span{flex:1}.appearance-theme-option strong{font-size:12px}.appearance-custom-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px;border:1px solid var(--oj-line);border-radius:14px;background:var(--oj-surface-soft)}.appearance-color-field{display:grid;grid-template-columns:42px minmax(0,1fr);gap:9px;align-items:center}.appearance-color-field input[type="color"]{width:42px;height:38px;padding:3px;border-radius:10px;cursor:pointer}.appearance-color-field span{display:grid;gap:2px;min-width:0}.appearance-color-field b{font-size:12px}.appearance-color-field small{font-size:10px;color:var(--oj-muted)}.appearance-contrast{padding:10px 12px;border-radius:11px;background:var(--oj-primary-soft);color:var(--oj-primary-dark);font-size:12px;font-weight:600}.appearance-contrast.bad{background:#fff0f1;color:#a63040}.appearance-preview-card{position:sticky;top:84px;overflow:hidden;padding:0}.appearance-preview-sidebar{background:linear-gradient(180deg,var(--oj-sidebar),var(--oj-sidebar-2));color:var(--oj-on-sidebar);padding:18px;display:flex;align-items:center;justify-content:space-between;gap:10px}.appearance-preview-logo{font-weight:800;letter-spacing:.08em}.appearance-preview-pill{background:var(--oj-primary);color:var(--oj-on-primary);border-radius:999px;padding:6px 9px;font-size:10px;font-weight:700}.appearance-preview-body{padding:18px;display:grid;gap:14px;background:var(--oj-bg)}.appearance-preview-body h3{margin:0;color:var(--oj-text)}.appearance-preview-body p{margin:0;color:var(--oj-text-2);font-size:var(--oj-type-small)}.appearance-preview-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.appearance-preview-metric{background:var(--oj-surface);border:1px solid var(--oj-line);border-radius:13px;padding:12px;display:grid;gap:4px}.appearance-preview-metric span{font-size:10px;color:var(--oj-muted);font-weight:700}.appearance-preview-metric strong{color:var(--oj-text)}.appearance-preview-actions{display:flex;gap:8px;flex-wrap:wrap}.appearance-status{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--oj-line);border-radius:12px;background:var(--oj-surface-soft);color:var(--oj-text-2);font-size:12px}.appearance-status strong{color:var(--oj-text)}@media(max-width:980px){.appearance-layout{grid-template-columns:1fr}.appearance-preview-card{position:static}.appearance-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.appearance-field-grid,.appearance-custom-grid{grid-template-columns:1fr}.appearance-theme-grid{grid-template-columns:1fr 1fr}.appearance-preview-metrics{grid-template-columns:1fr}}@media print{html,body{font-family:Arial,sans-serif!important;color:#000!important;background:#fff!important}}