:root{--color-primary: #345735;--color-primary-dark: #2A452B;--color-primary-light: #E8F0E8;--color-secondary: #2C3E22;--color-accent: #4A6B4A;--color-accent-light: #6B8E6B;--color-bg: #F8F9FA;--color-surface: #FFFFFF;--color-surface-alt: #F5F6F7;--color-border: #D4D9C8;--color-border-light: #E8EDD8;--color-text: #1A1F14;--color-text-secondary: #3D4A22;--color-text-muted: #6B7A5A;--color-text-inverse: #FFFFFF;--color-success: #345735;--color-success-light: #D4E8D0;--color-warning: #B8860B;--color-warning-light: #F5E6D3;--color-danger: #8B4513;--color-danger-light: #F0D9C7;--color-info: #345735;--color-info-light: #E8F0E8;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;--font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--shadow-sm: 0 1px 2px 0 rgba(52, 87, 53, .08);--shadow-md: 0 4px 6px -1px rgba(52, 87, 53, .12), 0 2px 4px -1px rgba(52, 87, 53, .06);--shadow-lg: 0 10px 15px -3px rgba(52, 87, 53, .15), 0 4px 6px -2px rgba(52, 87, 53, .08);--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ribbon{background:var(--color-surface);border-bottom:2px solid var(--color-primary);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100}.ribbon-header{background:linear-gradient(135deg,var(--color-secondary) 0%,var(--color-primary) 100%);color:var(--color-text-inverse);min-height:64px;display:flex;align-items:center}.ribbon-inner{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--spacing-lg)}.ribbon-header{padding:var(--spacing-sm) 0}.ribbon-header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--spacing-md)}.ribbon-brand{display:flex;align-items:center}.ribbon-logo{height:48px;width:auto;display:block}.ribbon-title{display:none}.ribbon-header .user-info{display:flex;align-items:center;gap:var(--spacing-md);font-size:13px;justify-content:flex-end}.ribbon-tabs{display:flex;background:linear-gradient(135deg,var(--color-secondary) 0%,var(--color-primary) 100%);border-bottom:2px solid var(--color-primary-dark);overflow-x:auto;scrollbar-width:thin}.ribbon-tabs-inner{display:flex;justify-content:center;gap:0;padding:0;min-width:max-content}.ribbon-tabs::-webkit-scrollbar{height:4px}.ribbon-tabs::-webkit-scrollbar-thumb{background:var(--color-primary);border-radius:2px}.ribbon-tab{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);color:#ffffffeb;text-decoration:none;border:none;background:none;cursor:pointer;font-size:13px;font-weight:500;white-space:nowrap;transition:all var(--transition-fast);border-bottom:3px solid transparent;position:relative}.ribbon-tab:hover{background:#ffffff1f;color:var(--color-text-inverse)}.ribbon-tab.active{color:var(--color-text-inverse);border-bottom-color:#ffffffd9;background:#0000001f;font-weight:600}.ribbon-tab-icon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;font-size:14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ribbon-actions{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-surface);border-bottom:1px solid var(--color-border)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);cursor:pointer;font-size:13px;font-weight:500;font-family:var(--font-sans);transition:all var(--transition-fast);text-decoration:none;white-space:nowrap}.btn:hover{background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary-dark)}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}.btn-primary:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);color:var(--color-text-inverse)}.btn-sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:12px}.btn-icon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-md);overflow:hidden;transition:box-shadow var(--transition-base)}.card:hover{box-shadow:var(--shadow-md)}.card-header{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-border-light);font-weight:600;font-size:14px;background:var(--color-surface-alt);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md)}.card-body{padding:var(--spacing-lg)}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}table{width:100%;border-collapse:collapse;font-size:13px}th{padding:var(--spacing-sm) var(--spacing-md);text-align:left;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-secondary);background:var(--color-surface-alt);border-bottom:2px solid var(--color-primary);white-space:nowrap}td{padding:var(--spacing-md);border-bottom:1px solid var(--color-border-light);color:var(--color-text)}tbody tr{transition:background var(--transition-fast)}tbody tr:hover{background:var(--color-primary-light)}.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}.badge-green{background:var(--color-success-light);color:#1f3a20}.badge-yellow{background:var(--color-warning-light);color:#6b4a0a}.badge-red{background:var(--color-danger-light);color:#5a2d0a}.badge-gray{background:var(--color-surface-alt);color:var(--color-text-secondary)}.badge-blue{background:var(--color-info-light);color:var(--color-primary-dark)}.form-group{margin-bottom:var(--spacing-md)}.form-group label{display:block;margin-bottom:var(--spacing-xs);font-weight:500;font-size:13px;color:var(--color-text)}.form-group input,.form-group select,.form-group textarea{width:100%;max-width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:13px;font-family:var(--font-sans);background:var(--color-surface);color:var(--color-text);transition:all var(--transition-fast)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.form-group textarea{min-height:80px;resize:vertical}.form-group-checkbox{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.form-group-checkbox label{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:0;font-weight:500;font-size:13px;color:var(--color-text);cursor:pointer}.form-group-checkbox input[type=checkbox]{width:18px;height:18px;min-width:18px;accent-color:var(--color-primary);cursor:pointer;margin:0}.form-group label input[type=checkbox]{width:18px;height:18px;min-width:18px;accent-color:var(--color-primary);cursor:pointer;margin-right:var(--spacing-sm);vertical-align:middle}.form-group input[type=file]{padding:var(--spacing-sm);border:1px dashed var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-alt);cursor:pointer}.form-group input[type=file]:hover{border-color:var(--color-primary);background:var(--color-primary-light)}.form-group input[type=file]:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-light)}.modal-backdrop{position:fixed;inset:0;background:#34573599;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-lg);backdrop-filter:blur(4px)}.modal{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:800px;width:100%;max-height:90vh;overflow:auto;animation:modalSlideIn var(--transition-base)}.modal-wide{max-width:1000px}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal-header{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border-light);display:flex;justify-content:space-between;align-items:center;background:var(--color-surface-alt)}.modal-header h2{margin:0;font-size:18px;font-weight:600;color:var(--color-text)}.modal-body{padding:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-md)}.modal-footer{padding:var(--spacing-lg);border-top:1px solid var(--color-border-light);display:flex;justify-content:flex-end;gap:var(--spacing-sm);background:var(--color-surface-alt)}.alert{padding:var(--spacing-md);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md);border-left:4px solid;font-size:13px}.alert-danger{background:var(--color-danger-light);color:#5a2d0a;border-color:var(--color-danger)}.alert-info{background:var(--color-info-light);color:var(--color-primary-dark);border-color:var(--color-primary)}.alert-warning{background:var(--color-warning-light);color:#6b4a0a;border-color:var(--color-warning)}.alert-success{background:var(--color-success-light);color:#1f3a20;border-color:var(--color-success)}.container{max-width:1400px;margin:0 auto;padding:var(--spacing-lg)}.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-lg);flex-wrap:wrap;gap:var(--spacing-md)}.page-header>div{display:flex;flex-direction:column;gap:var(--spacing-xs)}.page-header h1{margin:0;font-size:24px;font-weight:600;color:var(--color-text)}.chapter-badge{display:inline-block;font-size:12px;font-weight:500;color:var(--color-text-muted);background:var(--color-surface-alt);padding:2px 8px;border-radius:var(--radius-sm);border:1px solid var(--color-border)}.traffic{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:var(--spacing-xs);box-shadow:0 0 0 2px #ffffff4d}.traffic.green{background:var(--color-success)}.traffic.yellow{background:var(--color-warning)}.traffic.red{background:var(--color-danger)}.langs{display:flex;gap:var(--spacing-xs);background:#ffffff26;border-radius:var(--radius-sm);padding:2px}.langs button{padding:var(--spacing-xs) var(--spacing-sm);font-size:11px;font-weight:600;background:transparent;border:none;color:#ffffffe6;cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.langs button:hover{background:#ffffff40;color:var(--color-text-inverse)}.langs button.active{background:var(--color-text-inverse);color:var(--color-primary-dark)}.text-muted{color:var(--color-text-muted)}.text-center{text-align:center}.mt-1{margin-top:var(--spacing-sm)}.mt-2{margin-top:var(--spacing-md)}.mt-3{margin-top:var(--spacing-lg)}.mb-1{margin-bottom:var(--spacing-sm)}.mb-2{margin-bottom:var(--spacing-md)}.mb-3{margin-bottom:var(--spacing-lg)}.loading{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl);color:var(--color-text-muted);font-size:14px}.loading:after{content:"";width:20px;height:20px;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .6s linear infinite;margin-left:var(--spacing-sm)}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:var(--spacing-xl);color:var(--color-text-muted)}.empty-state:before{content:"📋";font-size:48px;display:block;margin-bottom:var(--spacing-md);opacity:.5}@media (max-width: 768px){.container{padding:var(--spacing-md)}.ribbon-inner{padding:0 var(--spacing-md)}.ribbon-header-inner{grid-template-columns:1fr;justify-items:center;gap:var(--spacing-sm)}.ribbon-logo{height:44px}.ribbon-header .user-info{justify-content:center;flex-wrap:wrap}.ribbon-tabs{padding:0 var(--spacing-sm)}.ribbon-tab{padding:var(--spacing-sm);font-size:12px}.page-header{flex-direction:column;align-items:flex-start}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}