:root {
    --bg-primary: #FAFAF9;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F5F5F4;
    --bg-elevated: #FFFFFF;
    --bg-drop: #F0F9F4;
    --border-primary: #E7E5E4;
    --border-secondary: #D6D3D1;
    --border-accent: #10B981;
    --text-primary: #1C1917;
    --text-secondary: #57534E;
    --text-tertiary: #736B66;
    --text-inverse: #FFFFFF;
    --accent: #059669;
    --accent-hover: #047857;
    --accent-light: #D1FAE5;
    --accent-muted: #ECFDF5;
    --danger: #DC2626;
    --danger-light: #FEF2F2;
    --warning: #F59E0B;
    --warning-light: #FFFBEB;
    --info: #3B82F6;
    --info-light: #EFF6FF;
    --shadow-sm: 0 1px 2px rgba(28,25,23,0.05);
    --shadow-md: 0 4px 12px rgba(28,25,23,0.08);
    --shadow-lg: 0 12px 40px rgba(28,25,23,0.12);
    --shadow-glow: 0 0 0 3px rgba(5,150,105,0.15);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --preview-bg: #FAFAF9;
    --preview-header: #F5F5F4;
    --preview-border: #E7E5E4;
    --preview-stripe: #FAFAF9;
    --badge-bg: #F5F5F4;
    --badge-text: #57534E;
    --scrollbar-track: #F5F5F4;
    --scrollbar-thumb: #D6D3D1;
    --toggle-bg: #E7E5E4;
    --code-bg: #F5F5F4;
  }

  [data-theme="dark"] {
    --bg-primary: #0C0A09;
    --bg-secondary: #1C1917;
    --bg-tertiary: #292524;
    --bg-elevated: #1C1917;
    --bg-drop: #052E1C;
    --border-primary: #292524;
    --border-secondary: #44403C;
    --border-accent: #10B981;
    --text-primary: #FAFAF9;
    --text-secondary: #A8A29E;
    --text-tertiary: #8A8380;
    --text-inverse: #1C1917;
    --accent: #34D399;
    --accent-hover: #6EE7B7;
    --accent-light: #064E3B;
    --accent-muted: #022C22;
    --danger: #F87171;
    --danger-light: #1F0A0A;
    --warning: #FBBF24;
    --warning-light: #1A1500;
    --info: #60A5FA;
    --info-light: #0A1628;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 0 3px rgba(52,211,153,0.2);
    --preview-bg: #1C1917;
    --preview-header: #292524;
    --preview-border: #44403C;
    --preview-stripe: #292524;
    --badge-bg: #292524;
    --badge-text: #A8A29E;
    --scrollbar-track: #1C1917;
    --scrollbar-thumb: #44403C;
    --toggle-bg: #44403C;
    --code-bg: #292524;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
    transition: background 0.3s ease, color 0.3s ease;
  }

  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: var(--scrollbar-track); }
  ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

  /* ---- Skip Link ---- */
  .skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    background: var(--accent);
    color: var(--text-inverse);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    z-index: 10000;
    transition: top 0.2s;
  }
  .skip-link:focus {
    top: 8px;
  }

  /* ---- Header ---- */
  .site-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
  }
  .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-primary); }
  .logo-icon {
    width: 36px; height: 36px;
    background: var(--accent); border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-inverse); font-weight: 700; font-size: 16px;
  }
  .logo-text {
    font-family: 'Instrument Serif', serif;
    font-size: 24px; font-weight: 400; letter-spacing: -0.02em;
  }
  .logo-sub {
    font-size: 12px; color: var(--text-tertiary); margin-left: 12px;
    font-weight: 400; padding-left: 12px; border-left: 1px solid var(--border-primary);
  }
  .header-actions { display: flex; align-items: center; gap: 8px; }
  .privacy-badge {
    display: flex; align-items: center; gap: 6px; padding: 6px 12px;
    background: rgba(52, 211, 153, 0.1); color: #34d399; border-radius: 100px;
    font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
  }
  .privacy-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #34d399;
    animation: pulse-privacy 2s ease infinite;
  }
  @keyframes pulse-privacy { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
  .theme-toggle {
    width: 44px; height: 24px; background: var(--toggle-bg);
    border-radius: 12px; border: none; cursor: pointer; position: relative;
    transition: background 0.3s ease;
  }
  .theme-toggle::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; background: var(--accent);
    border-radius: 50%; transition: transform 0.3s ease;
  }
  [data-theme="dark"] .theme-toggle::after { transform: translateX(20px); }
  .theme-icon {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 11px; z-index: 1; pointer-events: none; line-height: 1;
  }
  .theme-icon.sun { left: 5px; }
  .theme-icon.moon { right: 5px; }

  /* ---- Main ---- */
  .main { max-width: 1200px; margin: 0 auto; padding: 40px 24px 80px; }
  .hero { text-align: center; margin-bottom: 40px; }
  .hero h1 {
    font-family: 'Instrument Serif', serif;
    font-size: 40px; font-weight: 400; letter-spacing: -0.03em; margin-bottom: 8px;
  }
  .hero p { color: var(--text-secondary); font-size: 16px; max-width: 540px; margin: 0 auto; }
  .format-badges {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px;
  }
  .format-badge {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
    padding: 4px 10px; border-radius: 6px; background: var(--badge-bg);
    color: var(--badge-text); border: 1px solid var(--border-primary);
    text-transform: uppercase; letter-spacing: 0.05em;
  }

  /* ---- Upload Zone ---- */
  .upload-zone {
    border: 2px dashed var(--border-secondary); border-radius: var(--radius-lg);
    padding: 48px 32px; text-align: center; cursor: pointer;
    transition: all 0.3s ease; background: var(--bg-secondary); position: relative;
  }
  .upload-zone:hover, .upload-zone.dragover {
    border-color: var(--border-accent); background: var(--bg-drop);
    box-shadow: var(--shadow-glow);
  }
  .upload-zone.dragover { transform: scale(1.01); }
  .upload-icon {
    width: 56px; height: 56px; margin: 0 auto 16px; border-radius: var(--radius-md);
    background: var(--accent-muted); display: flex; align-items: center; justify-content: center;
  }
  .upload-icon svg {
    width: 28px; height: 28px; stroke: var(--accent); fill: none;
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  }
  .upload-zone h2 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
  .upload-zone p { color: var(--text-secondary); font-size: 14px; }
  .browse-link {
    color: var(--accent); font-weight: 600; text-decoration: underline;
    text-underline-offset: 2px;
    background: none; border: none; cursor: pointer; font-size: inherit; font-family: inherit; padding: 0;
  }
  .upload-hint {
    margin-top: 12px; font-size: 12px; color: var(--text-tertiary);
    font-family: 'JetBrains Mono', monospace;
  }
  #fileInput { display: none; }

  /* ---- Workspace ---- */
  .workspace { display: none; margin-top: 32px; animation: fadeSlideUp 0.4s ease; }
  .workspace.visible { display: block; }
  @keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .file-info-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; background: var(--bg-secondary);
    border: 1px solid var(--border-primary); border-radius: var(--radius-md);
    margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
  }
  .file-info-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .file-type-icon {
    width: 40px; height: 40px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
    text-transform: uppercase; flex-shrink: 0; color: #fff;
  }
  .file-type-icon.csv { background: #059669; }
  .file-type-icon.tsv { background: #0891B2; }
  .file-type-icon.xlsx, .file-type-icon.xls { background: #16A34A; }
  .file-type-icon.json { background: #D97706; }
  .file-type-icon.xml { background: #7C3AED; }
  .file-type-icon.default { background: #6B7280; }
  .file-details { min-width: 0; }
  .file-name {
    font-weight: 600; font-size: 14px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 400px;
  }
  .file-meta { font-size: 12px; color: var(--text-tertiary); display: flex; gap: 8px; flex-wrap: wrap; }
  .file-meta span::before { content: '\00b7'; margin-right: 8px; color: var(--border-secondary); }
  .file-meta span:first-child::before { display: none; }
  .btn-remove {
    background: none; border: 1px solid var(--border-primary); color: var(--text-secondary);
    cursor: pointer; padding: 6px 14px; border-radius: var(--radius-sm);
    font-size: 13px; font-family: inherit; transition: all 0.2s ease; white-space: nowrap;
  }
  .btn-remove:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-light); }

  /* Conversion controls */
  .conversion-controls {
    display: flex; gap: 12px; align-items: end; margin-bottom: 20px; flex-wrap: wrap;
  }
  .control-group { flex: 1; min-width: 180px; }
  .control-group label {
    display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em;
  }
  .control-group select {
    width: 100%; padding: 10px 14px; border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm); background: var(--bg-secondary); color: var(--text-primary);
    font-family: inherit; font-size: 14px; cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%2378716C' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .control-group select:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-glow); }
  .control-group select:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn-convert {
    padding: 10px 28px; background: var(--accent); color: var(--text-inverse);
    border: none; border-radius: var(--radius-sm); font-family: inherit;
    font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
    white-space: nowrap; display: flex; align-items: center; gap: 8px; height: 42px;
  }
  .btn-convert:hover:not(:disabled) { background: var(--accent-hover); box-shadow: var(--shadow-md); }
  .btn-convert:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn-convert .spinner {
    width: 16px; height: 16px; border: 2px solid transparent;
    border-top-color: currentColor; border-radius: 50%;
    animation: spin 0.6s linear infinite; display: none;
  }
  .btn-convert.loading .spinner { display: block; }
  .btn-convert.loading .btn-text { display: none; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Options row */
  .options-row {
    display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; align-items: center;
  }
  .option-check {
    display: flex; align-items: center; gap: 6px; font-size: 13px;
    color: var(--text-secondary); cursor: pointer;
  }
  .option-check input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
  .sheet-selector { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
  .sheet-selector select {
    padding: 4px 8px; border: 1px solid var(--border-primary); border-radius: 6px;
    background: var(--bg-secondary); color: var(--text-primary); font-family: inherit;
    font-size: 13px; cursor: pointer;
  }

  /* Preview */
  .preview-section { margin-bottom: 20px; }
  .preview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .preview-header h2 { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
  .preview-count { font-size: 12px; color: var(--text-tertiary); font-weight: 400; font-family: 'JetBrains Mono', monospace; }
  .preview-tabs { display: flex; gap: 4px; }
  .preview-tab {
    padding: 4px 12px; font-size: 12px; font-family: inherit; font-weight: 500;
    border: 1px solid var(--border-primary); border-radius: 6px;
    background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; transition: all 0.2s;
  }
  .preview-tab.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
  .preview-container {
    border: 1px solid var(--preview-border); border-radius: var(--radius-md);
    overflow: hidden; background: var(--preview-bg);
  }
  .preview-table-wrap { max-height: 360px; overflow: auto; }
  .preview-table { width: 100%; border-collapse: collapse; font-size: 13px; }
  .preview-table th {
    position: sticky; top: 0; background: var(--preview-header);
    padding: 10px 14px; text-align: left; font-weight: 600; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary);
    border-bottom: 1px solid var(--preview-border); white-space: nowrap; z-index: 1;
  }
  .preview-table td {
    padding: 8px 14px; border-bottom: 1px solid var(--preview-border);
    max-width: 240px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: var(--text-primary);
  }
  .preview-table tbody tr:nth-child(even) { background: var(--preview-stripe); }
  .preview-table tbody tr:hover { background: var(--accent-muted); }
  .preview-raw {
    display: none; padding: 16px; font-family: 'JetBrains Mono', monospace;
    font-size: 12px; line-height: 1.7; max-height: 360px; overflow: auto;
    white-space: pre-wrap; word-break: break-all; color: var(--text-secondary); background: var(--code-bg);
  }

  /* Status */
  .status-bar {
    padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px;
    display: none; align-items: center; gap: 10px; margin-bottom: 20px;
    animation: fadeSlideUp 0.3s ease;
  }
  .status-bar.visible { display: flex; }
  .status-bar.success { background: var(--accent-muted); color: var(--accent); border: 1px solid var(--accent); }
  .status-bar.error { background: var(--danger-light); color: var(--danger); border: 1px solid var(--danger); }
  .status-bar.info { background: var(--info-light); color: var(--info); border: 1px solid var(--info); }
  .status-bar.warning { background: var(--warning-light); color: var(--warning); border: 1px solid var(--warning); }
  .status-icon { font-size: 16px; flex-shrink: 0; }

  /* Conversion matrix */
  .matrix-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border-primary); }
  .matrix-section h2 {
    font-family: 'Instrument Serif', serif; font-size: 22px; font-weight: 400; margin-bottom: 6px;
  }
  .matrix-section > p { color: var(--text-secondary); font-size: 14px; margin-bottom: 20px; }
  .matrix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
  .matrix-card {
    padding: 16px; background: var(--bg-secondary); border: 1px solid var(--border-primary);
    border-radius: var(--radius-md); transition: border-color 0.2s;
  }
  .matrix-card:hover { border-color: var(--accent); }
  .matrix-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .matrix-from, .matrix-to {
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
    padding: 3px 8px; border-radius: 4px; text-transform: uppercase;
  }
  .matrix-from { background: var(--badge-bg); color: var(--text-secondary); }
  .matrix-to { background: var(--accent-light); color: var(--accent); }
  .matrix-arrow { color: var(--text-tertiary); font-size: 14px; }
  .matrix-card p { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; }

  /* Footer */
  .footer {
    text-align: center; padding: 24px; font-size: 12px; color: var(--text-tertiary);
    border-top: 1px solid var(--border-primary); margin-top: 48px;
  }
  .footer strong { color: var(--text-secondary); font-weight: 600; }

  /* ---- Responsive ---- */
  @media (max-width: 640px) {
    .header-inner { height: 56px; }
    .logo-sub { display: none; }
    .privacy-badge span:not(.privacy-dot) { display: none; }
    .privacy-badge { padding: 8px; }
    .main { padding: 24px 16px 60px; }
    .hero h1 { font-size: 28px; }
    .hero p { font-size: 14px; }
    .upload-zone { padding: 32px 20px; }
    .conversion-controls { flex-direction: column; }
    .control-group { min-width: 100%; }
    .btn-convert { width: 100%; justify-content: center; }
    .file-name { max-width: 180px; }
    .matrix-grid { grid-template-columns: 1fr; }
  }

/* ===== SITE FOOTER ===== */
.site-footer{
  margin-top:60px;padding:48px 28px 36px;
  border-top:1px solid var(--border-primary);
  background:var(--bg-primary);color:var(--text-secondary);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;line-height:1.6;
}
.site-footer .footer-inner{max-width:1100px;margin:0 auto}
.site-footer .footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;margin-bottom:40px;
}
.site-footer .footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.site-footer .footer-brand svg{width:32px;height:32px;color:#a855f7;flex-shrink:0}
.site-footer .footer-brand-name{
  font-size:20px;font-weight:700;
  background:linear-gradient(90deg,#8B5CF6,#EC4899,#3B82F6);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.site-footer .footer-desc{color:var(--text-tertiary);margin-bottom:16px;max-width:360px}
.site-footer .footer-copy{font-size:12px;color:var(--text-tertiary)}
.site-footer h2{font-weight:700;margin-bottom:16px;color:var(--text-primary);font-size:15px}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.site-footer a{color:var(--text-secondary);text-decoration:underline;text-decoration-color:var(--border-primary);text-underline-offset:2px;transition:color .2s,text-decoration-color .2s}
.site-footer a:hover{color:#a855f7;text-decoration-color:#a855f7}
.site-footer .footer-bottom{
  border-top:1px solid var(--border-primary);
  padding-top:20px;text-align:center;
}
.site-footer .footer-bottom p{color:var(--text-tertiary);font-size:13px}
.site-footer .footer-bottom span{color:#a855f7}

@media(max-width:768px){
  .site-footer .footer-grid{grid-template-columns:1fr;gap:32px}
  .site-footer{padding:36px 16px 28px}
}