:root{--color-primary:#0f172a;--color-primary-light:#1e293b;--color-accent:#2563eb;--color-accent-hover:#1d4ed8;--color-accent-soft:#eff6ff;--color-success:#059669;--color-success-bg:#ecfdf5;--color-danger:#dc2626;--color-danger-bg:#fef2f2;--color-warning:#d97706;--color-warning-bg:#fffbeb;--color-info:#0891b2;--color-info-bg:#ecfeff;--color-text:#0f172a;--color-text-secondary:#475569;--color-text-muted:#64748b;--bg-page:#f1f5f9;--bg-card:#fff;--bg-hover:#f8fafc;--bg-subtle:#e2e8f0;--border-color:#e2e8f0;--border-color-strong:#cbd5e1;--c-border:var(--border-color);--c-success:var(--color-success);--c-danger:var(--color-danger);--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--shadow-sm:0 1px 2px 0 #0f172a0d;--shadow-md:0 4px 6px -1px #0f172a12, 0 2px 4px -2px #0f172a0d;--shadow-lg:0 10px 15px -3px #0f172a14, 0 4px 6px -4px #0f172a0d;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;--space-xl:24px;--space-2xl:32px;--font-sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:"SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--text-xs:11px;--text-sm:12px;--text-md:13px;--text-lg:15px;--text-xl:18px;--text-2xl:22px;--transition-fast:.12s ease;--transition-base:.18s ease}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-sans);font-size:var(--text-md);color:var(--color-text);background:var(--bg-page);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}h1,h2,h3,h4,h5,h6,p{margin:0}button{cursor:pointer;font-family:inherit}input,textarea,select{font-family:inherit;font-size:inherit}.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-header{background:var(--bg-card);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-sm);z-index:100;position:sticky;top:0}.app-header-inner{max-width:1280px;padding:0 var(--space-xl);justify-content:space-between;align-items:center;height:52px;margin:0 auto;display:flex}.app-brand{align-items:center;gap:var(--space-sm);font-size:var(--text-lg);color:var(--color-primary);letter-spacing:-.02em;font-weight:700;display:flex}.app-brand-mark{background:linear-gradient(135deg, var(--color-accent), #60a5fa);border-radius:var(--radius-md);justify-content:center;align-items:center;width:22px;height:22px;display:inline-flex}.app-nav{gap:var(--space-xs);display:flex}.app-nav-link{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);color:var(--color-text-secondary);font-weight:500;font-size:var(--text-md);transition:all var(--transition-fast);text-decoration:none}.app-nav-link:hover{background:var(--bg-hover);color:var(--color-text)}.app-nav-link.active{background:var(--color-accent-soft);color:var(--color-accent)}.app-main{width:100%;max-width:1280px;padding:var(--space-xl);flex:1;margin:0 auto}.app-page-title{font-size:var(--text-xl);color:var(--color-primary);margin-bottom:var(--space-lg);font-weight:700}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}.card-header{padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border-color);background:var(--bg-hover);justify-content:space-between;align-items:center;display:flex}.card-title{font-size:var(--text-lg);color:var(--color-primary);font-weight:600}.card-body{padding:var(--space-lg)}.card-body-compact{padding:var(--space-md)}.btn{justify-content:center;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:var(--text-md);white-space:nowrap;transition:all var(--transition-fast);border:1px solid #0000;font-weight:500;line-height:1.4;display:inline-flex}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--color-accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-accent-hover);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--bg-card);color:var(--color-text);border-color:var(--border-color-strong)}.btn-secondary:hover:not(:disabled){background:var(--bg-hover);border-color:var(--color-text-muted)}.btn-danger{background:var(--color-danger-bg);color:var(--color-danger);border-color:#fecaca}.btn-danger:hover:not(:disabled){background:#fecaca}.btn-sm{padding:var(--space-xs) var(--space-sm);font-size:var(--text-sm)}.form-group{gap:var(--space-xs);margin-bottom:var(--space-md);flex-direction:column;display:flex}.form-row{gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(180px,1fr));display:grid}.form-label{font-size:var(--text-sm);color:var(--color-text-secondary);font-weight:600}.input,.textarea,.select{width:100%;padding:var(--space-sm) var(--space-md);border:1px solid var(--border-color-strong);border-radius:var(--radius-md);background:var(--bg-card);color:var(--color-text);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);outline:none}.input::placeholder,.textarea::placeholder{color:var(--color-text-muted)}.input:focus,.textarea:focus,.select:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px #2563eb1f}.textarea{font-family:var(--font-mono);font-size:var(--text-sm);resize:vertical}.select{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right 8px center;background-repeat:no-repeat;background-size:16px;padding-right:28px}.checkbox-label{align-items:center;gap:var(--space-sm);font-size:var(--text-md);color:var(--color-text);cursor:pointer;display:inline-flex}.checkbox-input{width:16px;height:16px;accent-color:var(--color-accent);cursor:pointer}.file-drop{border:2px dashed var(--border-color-strong);border-radius:var(--radius-lg);padding:var(--space-xl);text-align:center;color:var(--color-text-secondary);background:var(--bg-hover);transition:all var(--transition-fast);cursor:pointer}.file-drop:hover,.file-drop.drag-over{border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-accent)}.file-drop-input{display:none}.data-table{border-collapse:collapse;width:100%;font-size:var(--text-sm)}.data-table thead{background:var(--bg-hover)}.data-table th,.data-table td{padding:var(--space-sm) var(--space-md);text-align:left;border-bottom:1px solid var(--border-color);vertical-align:middle}.data-table th{color:var(--color-text-secondary);text-transform:uppercase;font-weight:600;font-size:var(--text-xs);letter-spacing:.04em}.data-table tbody tr:hover{background:var(--bg-hover)}.data-table tbody tr.selected-row{background:var(--color-accent-soft)}.data-table tbody tr.selected-row:hover{background:#dbeafe}.data-table .actions{gap:var(--space-xs);justify-content:flex-start;display:flex}.tabs{gap:var(--space-xs);border-bottom:1px solid var(--border-color);margin-bottom:var(--space-lg);display:flex}.tab{padding:var(--space-sm) var(--space-md);color:var(--color-text-secondary);font-weight:500;font-size:var(--text-md);transition:all var(--transition-fast);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px}.tab:hover{color:var(--color-text)}.tab.active{color:var(--color-accent);border-bottom-color:var(--color-accent)}.alert{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:var(--text-sm);align-items:flex-start;gap:var(--space-sm);margin-bottom:var(--space-lg);border:1px solid #0000;display:flex}.alert-success{background:var(--color-success-bg);color:var(--color-success);border-color:#a7f3d0}.alert-error{background:var(--color-danger-bg);color:var(--color-danger);border-color:#fecaca}.alert-warning{background:var(--color-warning-bg);color:var(--color-warning);border-color:#fde68a}.alert-info{background:var(--color-info-bg);color:var(--color-info);border-color:#a5f3fc}.badge{padding:var(--space-xs) var(--space-sm);font-size:var(--text-xs);border-radius:9999px;align-items:center;font-weight:600;line-height:1;display:inline-flex}.badge-success{background:var(--color-success-bg);color:var(--color-success)}.badge-danger{background:var(--color-danger-bg);color:var(--color-danger)}.badge-warning{background:var(--color-warning-bg);color:var(--color-warning)}.badge-info{background:var(--color-info-bg);color:var(--color-info)}.badge-neutral{background:var(--bg-subtle);color:var(--color-text-secondary)}.empty-state{padding:var(--space-2xl);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm)}.diff-box{padding:var(--space-lg);border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-card);white-space:pre-wrap;line-height:1.7;font-family:var(--font-sans);font-size:var(--text-md)}.diff-box ins{color:#166534;background:#bbf7d0;border-radius:2px;padding:0 2px;text-decoration:none}.diff-box del{color:#991b1b;background:#fecaca;border-radius:2px;padding:0 2px;text-decoration:line-through}.text-muted{color:var(--color-text-muted)}.text-secondary{color:var(--color-text-secondary)}.text-mono{font-family:var(--font-mono)}.text-success{color:var(--color-success)}.text-error{color:var(--color-danger)}.mb-0{margin-bottom:0}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.grid-2{gap:var(--space-md);grid-template-columns:repeat(2,1fr);display:grid}.grid-3{gap:var(--space-md);grid-template-columns:repeat(3,1fr);display:grid}.table-data-wrapper{border:1px solid var(--border-color);border-radius:var(--radius-md);max-height:520px;margin-bottom:var(--space-md);overflow:auto}.table-data-wrapper .data-table{white-space:nowrap;min-width:100%}.table-data-summary{font-size:var(--text-sm);color:var(--color-text-secondary);margin-bottom:var(--space-md)}.pagination{justify-content:flex-end;align-items:center;gap:var(--space-md);display:flex}.pagination-info{font-size:var(--text-sm);color:var(--color-text-secondary);text-align:center;min-width:80px}.naming-rules code{background:var(--bg-hover);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-sm);padding:2px 6px}.naming-examples{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--border-color);font-size:var(--text-sm);color:var(--color-text-secondary)}.naming-examples .text-mono{margin:0 var(--space-xs)}@media (width<=768px){.app-header-inner,.app-main{padding:var(--space-md)}.app-header-inner{gap:var(--space-sm);height:auto;padding-top:var(--space-md);padding-bottom:var(--space-md);flex-direction:column}.grid-2,.grid-3,.form-row{grid-template-columns:1fr}}