@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap";:root{--color-primary: #1f3a5f;--color-primary-hover: #162b46;--color-primary-light: rgba(31, 58, 95, .08);--color-accent: #0f766e;--color-accent-light: #14b8a6;--color-warning: #d97706;--color-error: #dc2626;--color-success: #0f766e;--color-ink: #1a1a1a;--color-muted: #52525b;--color-subtle: #a1a1aa;--color-bg: #f6f4ef;--color-surface: #ffffff;--color-border: #e6e1d8;--color-table-header: #f1ece3;--font-display: "Playfair Display", "Noto Serif SC", "Georgia", serif;--font-body: "IBM Plex Sans", "Noto Sans SC", "Segoe UI", sans-serif;--font-mono: "IBM Plex Mono", "Consolas", monospace;--text-xs: 12px;--text-sm: 13px;--text-base: 14px;--text-lg: 16px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 32px;--text-4xl: 40px;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-2xl: 16px;--radius-3xl: 20px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(31, 58, 95, .06);--shadow-lg: 0 8px 24px rgba(31, 58, 95, .1);--shadow-xl: 0 18px 40px rgba(31, 58, 95, .12);--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .35s;--ease-default: cubic-bezier(.4, 0, .2, 1);--sidebar-width: 240px;--topbar-height: 64px;--content-max-width: 1360px;--page-padding-x: 48px;--page-padding-y: 40px;--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-overlay: 400;--z-modal: 500;--z-toast: 700}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;color:var(--color-ink);background:radial-gradient(circle at top,#fbfaf7,#f3efe7);min-height:100vh}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:var(--font-semibold);line-height:1.3}h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}h4{font-size:var(--text-lg)}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;height:auto}.text-muted{color:var(--color-muted)}.text-subtle{color:var(--color-subtle)}.text-primary{color:var(--color-primary)}.text-accent{color:var(--color-accent)}.text-error{color:var(--color-error)}.text-success{color:var(--color-success)}.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mb-1{margin-bottom:var(--space-1)}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:none;border-radius:var(--radius-md);font-family:var(--font-body);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--duration-fast) var(--ease-default)}.btn-sm{height:32px;padding:0 var(--space-3);font-size:var(--text-sm)}.btn-md{height:40px;padding:0 var(--space-5);font-size:var(--text-base)}.btn-lg{height:48px;padding:0 var(--space-6);font-size:var(--text-lg)}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover)}.btn-primary:active{transform:translateY(1px)}.btn-secondary{background:transparent;border:1px solid var(--color-border);color:var(--color-ink)}.btn-secondary:hover{background:var(--color-primary-light);border-color:var(--color-primary)}.btn-ghost{background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-muted)}.btn-ghost:hover{background:var(--color-primary-light);color:var(--color-primary)}.btn-danger{background:var(--color-error);color:#fff}.btn-danger:hover{background:#b91c1c}.btn-link{background:none;border:none;color:var(--color-primary);padding:0;height:auto}.btn-link:hover{text-decoration:underline}.btn:disabled,.btn-loading{opacity:.5;cursor:not-allowed}.btn-loading{position:relative;color:transparent}.btn-loading:after{content:"";position:absolute;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}.btn-icon{display:flex;align-items:center}.form-field{display:flex;flex-direction:column;gap:var(--space-1)}.form-label{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-muted)}.input{height:40px;padding:0 var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-base);font-family:var(--font-body);background:#fff;transition:all var(--duration-fast) var(--ease-default)}.input:hover{border-color:var(--color-muted)}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.input::placeholder{color:var(--color-subtle)}.input:disabled{background:var(--color-bg);cursor:not-allowed}.input-error{border-color:var(--color-error)}.input-error:focus{box-shadow:0 0 0 3px #dc26261a}.form-hint{font-size:var(--text-xs);color:var(--color-subtle)}.form-error{font-size:var(--text-xs);color:var(--color-error)}.form-success{font-size:var(--text-sm);color:var(--color-accent)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-6);box-shadow:var(--shadow-md)}.card-elevated{box-shadow:var(--shadow-lg)}.card-outlined{box-shadow:none}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.card-header-right{display:flex;align-items:center;gap:var(--space-3)}.card-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--font-semibold);margin:0}.card-footer{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-medium)}.badge-primary{background:var(--color-primary-light);color:var(--color-primary)}.badge-success{background:#0f766e1a;color:var(--color-accent)}.badge-warning{background:#d977061a;color:var(--color-warning)}.badge-error{background:#dc26261a;color:var(--color-error)}.badge-neutral{background:var(--color-bg);color:var(--color-muted)}.pill{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background:var(--color-primary-light);color:var(--color-primary);font-size:var(--text-xs);font-weight:var(--font-medium)}.table-container{overflow-x:auto}.table{width:100%;border-collapse:collapse}.table-header{background:var(--color-table-header)}.table-header th{padding:var(--space-3) var(--space-4);text-align:left;font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-muted);border-bottom:1px solid var(--color-border)}.table-body tr{border-bottom:1px solid var(--color-border);transition:background var(--duration-fast) var(--ease-default)}.table-body tr:hover{background:#f4f4f5}.table-body tr.selected{background:var(--color-primary-light)}.table-body td{padding:var(--space-3) var(--space-4);font-size:var(--text-base)}.table-cell-checkbox{width:40px;text-align:center}.product-cell{display:flex;flex-direction:column;gap:4px}.product-name{font-weight:var(--font-semibold)}.product-meta{display:grid;gap:2px;font-size:var(--text-xs);color:var(--color-muted)}.product-meta span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:520px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12) var(--space-6);text-align:center;color:var(--color-muted);font-size:var(--text-base)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}.product-form{display:flex;flex-direction:column;gap:var(--space-6)}.form-section{display:flex;flex-direction:column;gap:var(--space-4)}.form-section h4{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-ink);margin:0;padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border)}.form-grid-2col{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}@media(max-width:640px){.form-grid-2col{grid-template-columns:1fr}}.textarea{height:auto;min-height:80px;padding:var(--space-3);resize:vertical}.form-actions{display:flex;justify-content:flex-end;gap:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--color-border)}.product-thumbnail{width:60px;height:60px;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--color-border)}.product-no-image{width:60px;height:60px;background:var(--color-bg);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-subtle);font-size:var(--text-xs)}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-4)}.modal-content{background:var(--color-surface);border-radius:var(--radius-2xl);max-width:800px;width:100%;max-height:90vh;overflow-y:auto;padding:var(--space-6);box-shadow:var(--shadow-xl)}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}.modal-title{font-size:var(--text-xl);font-weight:var(--font-semibold);margin:0}.modal-close{background:none;border:none;font-size:var(--text-2xl);cursor:pointer;color:var(--color-muted);padding:var(--space-2)}.modal-close:hover{color:var(--color-ink)}.procurement-modal .modal-content{max-width:720px}.procurement-rules{display:flex;flex-direction:column;gap:var(--space-4);line-height:1.7}.procurement-rules p{margin:0}.procurement-section{display:flex;flex-direction:column;gap:var(--space-2)}.procurement-title{font-weight:var(--font-semibold)}.procurement-rules ul{margin:0;padding-left:20px;color:var(--color-muted)}.procurement-actions{display:flex;justify-content:flex-end;margin-top:var(--space-5)}.template-help{max-width:760px}.template-help-body{display:flex;flex-direction:column;gap:var(--space-4);line-height:1.7}.template-section{display:flex;flex-direction:column;gap:var(--space-2)}.template-title{font-weight:var(--font-semibold)}.template-help-body ul{margin:0;padding-left:20px;color:var(--color-muted)}.template-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-end;margin-top:var(--space-5)}.image-upload-area{display:flex;flex-direction:column;gap:var(--space-3)}.image-preview-list{display:flex;flex-wrap:wrap;gap:var(--space-3)}.image-preview{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.image-preview img{width:100px;height:100px;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--color-border)}.image-preview .btn-link{font-size:var(--text-xs);color:var(--color-error)}.filter-bar{display:flex;gap:var(--space-4);margin-bottom:var(--space-4);padding:var(--space-3);background:var(--color-bg);border-radius:var(--radius-md)}.filter-bar .form-field{min-width:200px}.filter-bar .input{height:36px}.category-form{display:flex;gap:var(--space-4);align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--space-6);padding:var(--space-4);background:var(--color-bg);border-radius:var(--radius-md)}.category-form .form-field{min-width:200px}.category-tree{margin-top:var(--space-4)}.category-tree h4{margin-bottom:var(--space-3);font-size:var(--text-lg);font-weight:var(--font-semibold)}.import-errors{margin-top:var(--space-4);padding:var(--space-4);background:#dc26260d;border:1px solid rgba(220,38,38,.2);border-radius:var(--radius-md)}.import-errors h4{margin-bottom:var(--space-3);color:var(--color-error);font-size:var(--text-base)}.status-badge{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--font-medium)}.status-active{background:#22c55e1a;color:#16a34a}.status-inactive{background:#ef44441a;color:#dc2626}.status-pending{background:#fbbf241a;color:#d97706}.text-error{color:var(--color-error)!important}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at top,#fbfaf7,#f3efe7);padding:var(--space-6)}.login-container{width:100%;max-width:420px}.login-card{background:var(--color-surface);border-radius:var(--radius-2xl);padding:var(--space-10);box-shadow:var(--shadow-xl);border:1px solid var(--color-border)}.login-header{text-align:center;margin-bottom:var(--space-8)}.login-logo{height:72px;width:auto;margin-bottom:var(--space-4);border-radius:var(--radius-lg)}.login-header h1{font-family:var(--font-display);font-size:var(--text-xl);margin:0 0 var(--space-2);color:var(--color-ink)}.login-subtitle{color:var(--color-muted);font-size:var(--text-base);margin:0}.login-form-inner{display:flex;flex-direction:column;gap:var(--space-4)}.login-btn{width:100%;margin-top:var(--space-2)}.login-demo{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--color-border);text-align:center}.login-demo p{font-size:var(--text-sm);color:var(--color-muted);margin:0 0 var(--space-2)}.demo-accounts{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-xs);color:var(--color-subtle)}.toast{position:fixed;top:var(--space-6);right:var(--space-6);padding:var(--space-3) var(--space-5);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:var(--font-medium);z-index:var(--z-toast);animation:slideIn var(--duration-normal) var(--ease-default)}.toast-success{background:var(--color-accent);color:#fff}.toast-error{background:var(--color-error);color:#fff}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.app{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);min-height:100vh}.sidebar{width:var(--sidebar-width);background:var(--color-surface);border-right:1px solid var(--color-border);padding:var(--space-8) var(--space-6);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}.sidebar-brand{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);margin-bottom:var(--space-8)}.sidebar-logo{height:auto;width:140px;border-radius:var(--radius-md)}.sidebar-title{font-family:var(--font-display);font-size:16px;font-weight:var(--font-semibold);color:var(--color-ink);line-height:1.3}.nav{display:flex;flex-direction:column;gap:var(--space-2)}.nav-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3);border-radius:var(--radius-lg);color:var(--color-muted);font-weight:var(--font-medium);font-size:var(--text-base);cursor:pointer;transition:all var(--duration-fast) var(--ease-default);border:none;background:transparent;width:100%;text-align:left}.nav-item:hover,.nav-item.active{background:var(--color-primary-light);color:var(--color-primary)}.nav-footer{margin-top:auto;display:flex;flex-direction:column;gap:var(--space-3);padding-top:var(--space-6);border-top:1px solid var(--color-border)}.role-tag{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:1px;color:var(--color-muted)}.content{padding:var(--page-padding-y) var(--page-padding-x);max-width:var(--content-max-width);width:100%;margin:0;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-8)}.topbar-left{display:flex;align-items:center;gap:var(--space-4)}.topbar-titles{display:flex;flex-direction:column;gap:var(--space-1)}.topbar-subtitle{font-size:var(--text-base);color:var(--color-muted)}.topbar-title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--font-semibold);margin:0}.topbar-actions{display:flex;align-items:center;gap:var(--space-3)}.topbar-menu{display:none}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-bottom:var(--space-8)}.metric-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-6);box-shadow:var(--shadow-md)}.metric-label{font-size:var(--text-sm);color:var(--color-muted);margin-bottom:var(--space-2)}.metric-value{font-family:var(--font-display);font-size:28px;font-weight:var(--font-bold);color:var(--color-ink)}.metric-sub{font-size:var(--text-sm);color:var(--color-accent);margin-top:var(--space-2)}.metric-sub.trend-up{color:var(--color-accent)}.metric-sub.trend-down{color:var(--color-error)}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-bottom:var(--space-8)}.panel{background:var(--color-surface);border-radius:var(--radius-2xl);padding:var(--space-6);border:1px solid var(--color-border);box-shadow:var(--shadow-md)}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.panel-header h2{font-family:var(--font-display);font-size:var(--text-xl);margin:0}.cta{background:linear-gradient(120deg,#1f3a5f1f,#0f766e1f);border-radius:var(--radius-3xl);padding:var(--space-8);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}.cta h2{font-family:var(--font-display);margin:0 0 var(--space-2)}.cta p{color:var(--color-muted);margin:0}.login-panel{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-8);background:var(--color-surface);border-radius:var(--radius-3xl);padding:var(--space-6);border:1px solid var(--color-border);box-shadow:var(--shadow-xl);margin-bottom:var(--space-8)}.login-info h2{font-family:var(--font-display);margin:0 0 var(--space-2)}.login-hint{font-size:var(--text-sm);color:var(--color-muted);margin:0}.login-form{flex:1;display:flex;flex-direction:column;gap:var(--space-4);max-width:400px}.login-actions{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.login-status{display:flex;gap:var(--space-2)}.notification-list{display:flex;flex-direction:column;gap:var(--space-3)}.notification-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-xl);transition:all var(--duration-fast) var(--ease-default)}.notification-item.unread{border-color:#1f3a5f66;background:var(--color-primary-light)}.notification-content{flex:1}.notification-title{font-weight:var(--font-semibold)}.notification-body{font-size:var(--text-sm);color:var(--color-muted);margin-top:2px}.notification-time{font-size:var(--text-xs);color:var(--color-muted)}.notification-actions{display:flex;align-items:center;gap:var(--space-3)}.form-grid{display:flex;flex-direction:column;gap:var(--space-4)}.detail-card{margin-top:var(--space-6);padding:var(--space-5);border-radius:var(--radius-2xl);border:1px solid var(--color-border);background:var(--color-bg)}.detail-card h3{margin:0 0 var(--space-4)}@media(max-width:1024px){.app{grid-template-columns:1fr}.sidebar{position:fixed;left:calc(-1 * var(--sidebar-width));z-index:var(--z-fixed);transition:left var(--duration-normal) var(--ease-default)}.sidebar.open{left:0}.content{margin-left:0;padding:var(--space-6)}.metrics,.grid{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start}.topbar-left{width:100%;justify-content:space-between}.topbar-menu{display:inline-flex}.login-panel{flex-direction:column}.login-form{max-width:100%}.cta{flex-direction:column;text-align:center}}.sidebar-overlay{position:fixed;inset:0;background:#0f172a66;opacity:0;pointer-events:none;transition:opacity var(--duration-normal) var(--ease-default);border:none}.sidebar-overlay.show{opacity:1;pointer-events:auto}@media(min-width:1025px){.sidebar-overlay{display:none}}@media(max-width:640px){.content{padding:var(--space-4)}.topbar-actions{width:100%}.topbar-actions .btn{flex:1}.login-actions{flex-direction:column;width:100%}.login-actions .btn{width:100%}}