:root{--bg-page: #fff7ed;--bg-surface: #ffffff;--bg-alt: #f7fafc;--bg-soft: #fff9f2;--bg-muted: #fff7ed;--text-primary: #1a202c;--text-secondary: #4a5568;--text-muted: #78716c;--text-placeholder: #a0aec0;--text-accent: #977048;--text-brand: #7c2d12;--text-on-accent: #ffffff;--border: #e9e9e9;--border-input: #e2e8f0;--border-input-hover: #cbd5e0;--border-soft: #d6d3d1;--border-orange-soft: #fed7aa;--border-orange-light: #ffedd5;--accent-focus: #e6c3a4;--accent-icon: #b69474;--accent-gold: #d4a843;--accent-coffee: #9a6b46;--accent-coffee-text: #7c4f2f;--accent-action: #c98a57;--accent-action-hover: #d6a87b;--success: #12b981;--info: #7dd3fc;--warning-soft: #f9a8d4;--error: #f87171;--neutral: #9ca3af;--purple-accent: #a78bfa;--warning-bg: #fef9c3;--warning-text: #854d0e;--btn-primary: var(--accent-action);--btn-primary-hover: var(--accent-action-hover);--btn-primary-text: var(--text-on-accent);--btn-danger: #dc2626;--btn-danger-hover: #b91c1c;--table-header-bg: hsl(29, 40%, 90%);--table-header-text: var(--text-accent);--shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);--shadow-md: 0 4px 12px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.03);--radius-sm: 8px;--radius-md: 8px;--radius-lg: 8px;font-size:16px}html[data-theme=dark]{--bg-page: #1a1816;--bg-surface: #292524;--bg-alt: #1c1917;--bg-soft: #1f1b1a;--bg-muted: #1f1b1a;--border: #44403c;--border-input: #44403c;--border-input-hover: #57534e;--border-soft: #3d3935;--border-orange-soft: #5c3d23;--border-orange-light: #4a3220;--text-primary: #f5f5f4;--text-secondary: #d6d3d1;--text-muted: #a8a29e;--text-placeholder: #78716c;--text-accent: #e6c3a4;--text-brand: #e6c3a4;--text-on-accent: #1a1816;--accent-focus: #d4a884;--accent-icon: #c9a078;--accent-action: #d4a884;--accent-action-hover: #e0b994;--table-header-bg: #2d2926;--table-header-text: #d6d3d1;--shadow-sm: 0 1px 3px rgba(0,0,0,.2);--shadow-md: 0 4px 12px rgba(0,0,0,.25)}html[data-theme=dark] .form-group input,html[data-theme=dark] .form-group select,html[data-theme=dark] .form-group textarea{background:#1c1917;color:var(--text-primary)}html[data-theme=dark] .sidebar{background:var(--bg-surface)}html[data-theme=dark] tr:hover td{background:#2d2926}.theme-toggle{position:fixed;top:12px;right:16px;z-index:200;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border);border-radius:50%;background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;transition:background .15s,color .15s,border-color .15s;box-shadow:var(--shadow-sm)}.theme-toggle:hover{background:var(--bg-soft);color:var(--accent-action);border-color:var(--accent-action)}.theme-toggle:focus-visible{outline:3px solid var(--accent-focus);outline-offset:2px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:var(--bg-page);color:var(--text-primary);line-height:1.65;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}a{color:var(--accent-coffee-text);text-decoration:none}a:hover{color:var(--accent-coffee)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:600;cursor:pointer;background:var(--btn-primary);color:var(--btn-primary-text);transition:background .15s,box-shadow .15s;box-shadow:var(--shadow-sm);min-height:46px;white-space:nowrap}.btn:hover{background:var(--btn-primary-hover);box-shadow:var(--shadow-md)}.btn:focus-visible{outline:3px solid var(--accent-focus);outline-offset:2px}.btn:active{transform:scale(.98)}.btn-danger{background:var(--btn-danger)}.btn-danger:hover{background:var(--btn-danger-hover)}.btn-secondary{background:var(--bg-alt);color:var(--text-secondary);border:1px solid var(--border);box-shadow:none}.btn-secondary:hover{background:var(--border-orange-light);border-color:var(--border-orange-soft)}.btn-outline{background:transparent;color:var(--text-secondary);border:1px solid var(--border);box-shadow:none}.btn-outline:hover{background:var(--bg-alt);border-color:var(--border-input-hover);color:var(--text-primary)}.btn-sm{padding:7px 16px;font-size:13px;min-height:36px;border-radius:8px}.btn-icon{padding:10px;min-width:46px;min-height:46px}.card{background:var(--bg-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:24px;border:1px solid var(--border)}.form-group{margin-bottom:18px}.form-group label{display:block;font-size:14px;font-weight:600;margin-bottom:6px;color:var(--text-muted)}.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:1.5px solid var(--border-input);border-radius:var(--radius-sm);font-size:16px;color:var(--text-primary);background:#fbfcff;transition:border-color .15s,box-shadow .15s;min-height:48px}.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-placeholder);font-size:15px}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent-focus);box-shadow:0 0 0 4px #e6c3a433}.form-group input[type=checkbox]{width:20px;height:20px;min-height:unset;accent-color:var(--accent-action)}.form-group select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2378716c' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}table{width:100%;border-collapse:collapse;font-size:14px;min-width:920px}th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle}th{background:var(--table-header-bg);font-weight:600;color:var(--table-header-text);font-size:14px;position:sticky;top:0;z-index:1}tr:hover td{background:var(--bg-soft)}td .btn{font-size:13px;padding:6px 14px;min-height:34px}.actions-col{width:112px;text-align:right}.row-actions{display:flex;justify-content:flex-end;gap:8px;white-space:nowrap}.empty-row{text-align:center;color:var(--text-placeholder);padding:34px 16px}.sidebar{width:270px;height:100vh;background:var(--bg-surface);border-right:1px solid var(--border);padding:0;position:fixed;top:0;left:0;box-shadow:var(--shadow-sm);z-index:100;overflow:hidden;transition:transform .25s ease;display:flex;flex-direction:column}.sidebar .logo{min-height:76px;padding:0 24px;font-size:22px;font-weight:700;border-bottom:1px solid var(--border-orange-soft);color:var(--text-brand);display:flex;align-items:center;gap:10px;flex:0 0 auto}.sidebar .logo svg{color:var(--accent-action);flex:0 0 auto}.sidebar-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px 0 24px;scrollbar-gutter:stable}.sidebar a{color:var(--text-secondary);display:flex;align-items:center;gap:10px;padding:11px 24px;font-size:15px;transition:background .12s,color .12s;border-left:3px solid transparent}.sidebar a svg{color:var(--accent-icon);flex:0 0 auto}.sidebar a.active svg,.sidebar a:hover svg{color:var(--accent-action)}.sidebar a:hover{background:var(--bg-soft);color:var(--accent-coffee-text);border-left-color:var(--accent-focus)}.sidebar a.active{background:var(--bg-soft);color:var(--accent-coffee-text);font-weight:600;border-left-color:var(--accent-action)}.sidebar .section{font-size:12px;text-transform:uppercase;padding:18px 24px 8px;color:var(--text-muted);letter-spacing:1.4px}.sidebar-scroll::-webkit-scrollbar{width:10px}.sidebar-scroll::-webkit-scrollbar-track{background:var(--bg-surface)}.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--border-soft);border:3px solid var(--bg-surface);border-radius:999px}.sidebar-scroll::-webkit-scrollbar-thumb:hover{background:var(--accent-icon)}.sidebar-footer{flex:0 0 auto;padding:14px 16px;border-top:1px solid var(--border-orange-soft)}.btn-logout{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font-size:15px;cursor:pointer;transition:background .12s,color .12s}.btn-logout:hover{background:#fef2f2;color:var(--error)}.btn-logout svg{flex:0 0 auto}.hamburger{display:none;position:fixed;top:16px;left:16px;z-index:200;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;font-size:22px;cursor:pointer;box-shadow:var(--shadow-sm)}.overlay{display:none}.app-shell{display:flex;min-height:100vh}.main{margin-left:270px;padding:28px 32px;min-height:100vh;width:calc(100vw - 270px)}.crud-page{width:100%}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:16px}.header h1{font-size:24px;color:var(--text-accent);font-weight:700;display:flex;align-items:center;gap:12px;line-height:1.2}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.title-icon{width:42px;height:42px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border-orange-soft);color:var(--accent-action);box-shadow:var(--shadow-sm)}.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:14px;margin-bottom:18px}.summary-card{display:flex;align-items:center;gap:12px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 18px;box-shadow:var(--shadow-sm)}.summary-icon{width:38px;height:38px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;color:#0f766e;background:#ccfbf1;flex:0 0 auto}.summary-card p{color:var(--text-muted);font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;line-height:1.1}.summary-card strong{display:block;font-size:24px;line-height:1.2;color:var(--text-primary);margin-top:4px}.data-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);width:100%;overflow:hidden}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:600;display:flex;align-items:flex-start;justify-content:center;padding:56px 28px;background:#1c191775;overflow-y:auto}.modal-panel{width:min(980px,100%);background:var(--bg-surface);border-radius:var(--radius-lg);border:1px solid var(--border);box-shadow:0 24px 60px #0000002e}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--border)}.modal-kicker{display:block;color:var(--text-muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px}.modal-header h2{color:var(--text-primary);font-size:22px;line-height:1.2;margin-top:4px}.modal-form{padding:22px}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:14px 16px}.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:18px;margin-top:4px;border-top:1px solid var(--border)}.bulk-panel{width:min(760px,100%)}.bulk-body{padding:22px;display:grid;gap:16px}.bulk-drop{position:relative;display:grid;justify-items:center;gap:8px;padding:26px;text-align:center;border:1px dashed var(--border-input-hover);border-radius:var(--radius-md);background:var(--bg-alt);color:var(--text-secondary)}.bulk-drop svg{color:var(--accent-action)}.bulk-drop strong{color:var(--text-primary);font-size:17px}.bulk-drop span{max-width:520px;font-size:14px;line-height:1.45}.bulk-drop input{width:min(360px,100%);margin-top:8px}.bulk-fields{border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;background:var(--bg-surface)}.bulk-fields h3{font-size:15px;margin-bottom:12px;color:var(--text-primary)}.bulk-field-list{display:flex;gap:8px;flex-wrap:wrap}.bulk-field-list span{display:inline-flex;align-items:center;min-height:30px;padding:5px 10px;border:1px solid var(--border-orange-soft);border-radius:var(--radius-sm);background:var(--bg-soft);color:var(--text-secondary);font-size:13px;font-weight:600}.bulk-message{padding:12px 14px;border-radius:var(--radius-sm);background:var(--warning-bg);color:var(--warning-text);font-size:14px;font-weight:600}.sync-bar{position:fixed;bottom:0;left:0;right:0;z-index:500;padding:10px 20px;font-size:14px;font-weight:500;text-align:center;transition:transform .3s}.sync-bar.pending{background:var(--warning-bg);color:var(--warning-text)}.sync-bar.syncing{background:var(--info);color:#0c4a6e}.sync-bar.synced{background:var(--success);color:#fff}.sync-bar.error{background:var(--error);color:#fff}.sync-bar.hidden{transform:translateY(100%)}@media(max-width:1024px){:root{font-size:16px}.sidebar{transform:translate(-100%);width:280px}.sidebar.open{transform:translate(0)}.hamburger{display:block}.overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:99}.overlay.open{display:block}.main{margin-left:0;padding:20px 16px;width:100vw}.header h1{font-size:22px}.card{padding:18px}.btn{padding:11px 20px;font-size:15px;min-height:44px}.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid{grid-template-columns:repeat(2,minmax(180px,1fr))}}@media(max-width:768px){:root{font-size:15px}.main{padding:14px 10px}.header{flex-direction:column;align-items:flex-start}.header h1{font-size:20px}.header-actions,.header-actions .btn{width:100%}.summary-grid{grid-template-columns:1fr}.card{padding:14px;border-radius:var(--radius-sm)}table{font-size:14px}th,td{padding:10px}.form-group input,.form-group select,.form-group textarea{min-height:44px;font-size:16px}.btn{padding:10px 16px;font-size:14px;min-height:42px}.btn-sm{padding:6px 12px;font-size:13px}.modal-backdrop{padding:18px 10px;align-items:flex-start}.modal-header,.modal-form{padding:16px}.form-grid{grid-template-columns:1fr}.modal-actions{flex-direction:column-reverse}.modal-actions .btn{width:100%}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fade-in{animation:fadeIn .2s ease}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin .8s linear infinite}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-page)}::-webkit-scrollbar-thumb{background:var(--border-soft);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}