:root{--bg: #cfe2f5;--card: #ffffff;--odd-row: #f5f8fc;--header-bg: #f8fafc;--sort-row-bg: #f1f5f9;--border: #eef2f7;--border-hover: #e2e8f0;--border-active: #cbd5e1;--muted: #6b7280;--accent: #2563eb;--accent-rgb: 37, 99, 235;--text-primary: #111827;--max-width: 1800px;--font-size-base: .875rem;--font-size-small: .75rem;--font-size-table: .9rem;--font-size-table-small: .8rem;--spacing-xs: .2rem;--spacing-sm: .4rem;--spacing-md: .5rem;--spacing-lg: .75rem;--spacing-xl: 1rem;--spacing-2xl: 2rem;--border-radius-sm: 2px;--border-radius-md: 6px;--border-radius-lg: 8px;--shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);--shadow-md: 0 1px 2px rgba(0, 0, 0, .05);--shadow-lg: 0 2px 4px rgba(0, 0, 0, .1);--shadow-accent: 0 2px 4px rgba(var(--accent-rgb), .2);--z-index-sticky: 6;--z-index-header: 10;--table-head-height: 2.4rem}body.app{background-color:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;margin:0;padding:var(--spacing-2xl);color:var(--text-primary);min-height:100vh}.container{max-width:var(--max-width);margin:0 auto;background:transparent}.page-header{position:sticky;top:0;background-color:var(--bg);padding:var(--spacing-2xl) 0 var(--spacing-xl);z-index:var(--z-index-header);border-bottom:1px solid #cad5e1;margin:calc(-1 * var(--spacing-2xl)) 0 0}h1{font-size:1.5rem;margin:0 0 var(--spacing-xl)}.nav-buttons{display:flex;gap:var(--spacing-md);flex-wrap:nowrap;margin-bottom:var(--spacing-md);overflow-x:auto}.nav-btn{background-color:var(--card);border:1px solid var(--border-hover);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius-md);color:var(--accent);cursor:pointer;font-size:var(--font-size-base);white-space:nowrap;transition:all .12s ease}.nav-btn:hover{background-color:var(--header-bg);border-color:var(--border-active)}.table-wrap{overflow-x:auto;overflow-y:visible;margin:var(--spacing-md) 0 2.5rem;border-radius:var(--border-radius-lg);background-color:var(--card)}.data-table{width:100%;border-collapse:collapse;background:none;box-shadow:var(--shadow-sm);--table-head-height: var(--table-head-height)}.data-table th,.data-table td{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border);font-size:var(--font-size-table);text-align:right;white-space:nowrap}.data-table thead tr:first-child th{background-color:var(--header-bg);position:static;color:var(--text-primary)}.data-table thead tr.sort-row th{background-color:var(--sort-row-bg);padding:.25rem var(--spacing-lg);font-size:var(--font-size-table-small);position:static}.sort-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--border);padding:.25rem var(--spacing-md);border-radius:var(--border-radius-md);cursor:pointer;color:var(--muted);min-width:2rem;height:2rem;transition:all .12s ease;font-size:var(--font-size-table-small);box-shadow:var(--shadow-md)}.sort-btn:hover{background:var(--header-bg);border-color:var(--border-active);color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-1px)}.sort-btn:active{transform:translateY(0);box-shadow:var(--shadow-md)}.sort-btn.active{color:var(--accent);font-weight:600;background:var(--header-bg);border-color:var(--accent);box-shadow:var(--shadow-accent)}.sort-symbol{font-size:.95rem;line-height:1}.data-table tbody tr:nth-child(odd)>td{background-color:var(--odd-row)}.data-table tbody tr:nth-child(2n)>td{background-color:var(--card)}.data-table th:first-child,.data-table td:first-child{position:sticky;left:0;z-index:var(--z-index-sticky)}.data-table thead th:first-child{background-color:var(--header-bg)}.data-table thead tr.sort-row th:first-child{background-color:var(--sort-row-bg)}.data-table tbody tr:nth-child(odd) td:first-child{background-color:var(--odd-row)}.data-table tbody tr:nth-child(2n) td:first-child{background-color:var(--card)}input[type=text],input[type=number],select{padding:var(--spacing-sm) var(--spacing-md);border:1px solid #e6eef7;border-radius:var(--border-radius-md);background:#fff}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}.value-area{display:flex;align-items:center;gap:var(--spacing-lg);margin-top:var(--spacing-md);max-width:var(--max-width);overflow-x:auto}.value-reset-btn{background:var(--card);border:1px solid var(--border-hover);padding:.35rem .6rem;border-radius:var(--border-radius-md);color:var(--accent);cursor:pointer;flex-shrink:0;transition:all .12s ease}.value-reset-btn:hover{background:var(--header-bg);border-color:var(--border-active)}.value-table{border-collapse:collapse;width:100%;max-width:var(--max-width)}.value-table th,.value-table td{padding:var(--spacing-xs);border:1px solid var(--border);background:var(--card);white-space:nowrap}.value-table td{text-align:right}.value-input{width:2.5rem;padding:var(--spacing-xs);border:1px solid #dfe7f3;border-radius:var(--border-radius-sm);text-align:right;appearance:textfield;-moz-appearance:textfield}.value-input::-webkit-outer-spin-button,.value-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.value-table input[type=number]{appearance:textfield;-moz-appearance:textfield}@media (max-width: 900px){.data-table th,.data-table td{font-size:var(--font-size-small);padding:.35rem var(--spacing-md)}select{height:2.5rem}}.page-header .title-area{display:flex;align-items:center;gap:var(--spacing-xl);margin-bottom:var(--spacing-lg)}.page-header .title-area h1{margin:0;font-size:1.5rem;font-weight:700}.page-header .page-switch-buttons{display:flex;gap:var(--spacing-sm)}.page-switch-buttons .nav-btn{position:relative}.page-switch-buttons .nav-btn.active{color:var(--accent);background-color:rgba(var(--accent-rgb),.04);border-color:var(--accent);box-shadow:var(--shadow-accent)}.calculator-page{display:none;padding:var(--spacing-2xl) 0}.calculator-table{margin:0;border-collapse:collapse}.calculator-nav-area{display:flex;align-items:center;gap:var(--spacing-lg);margin-top:var(--spacing-md);overflow-x:auto}.calculator-nav-area .quantity-input{width:2.5rem;text-align:right}.calculator-page .diamond-value{font-weight:700;color:var(--text-primary)}.calculator-page .price-input-area{margin-top:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-lg)}.calculator-page .price-input-area label{font-weight:700;color:var(--text-primary)}.calculator-page .price-input-area input{width:2.5rem;text-align:right}