/**
 * EXIF Viewer & Metadata Remover — Style
 * (c) 2026 Eric Bernstein
 */

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #0a0a0e;
  color: #d0d0d0;
  /* System UI font with explicit CJK / Indic / Arabic fallbacks for cross-platform legibility */
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial,
    'Noto Sans', 'Noto Sans CJK JP', 'Noto Sans CJK SC', 'Noto Sans CJK KR',
    'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans Bengali',
    'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo,
    'PingFang SC', 'Microsoft YaHei',
    'Apple SD Gothic Neo', 'Malgun Gothic',
    sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}
a { color: #6699ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Layout Container --- */
header, main, footer {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* --- Header --- */
header { padding-block: 24px 16px; }
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
h1 {
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  color: #f0f0f0;
  font-weight: 700;
  letter-spacing: -0.02em;
}
h1 > span { display: block; }
h1 .h1-tag {
  font-size: 0.65em;
  font-weight: 500;
  color: #88c8a0;
  letter-spacing: 0.02em;
  margin-block-start: 4px;
}
.subtitle {
  font-size: 0.9rem;
  color: #aaa;
  margin-block-start: 4px;
}

/* --- Language Switcher --- */
.lang-switch { flex-shrink: 0; }
.lang-switch select {
  background: #16161e;
  color: #aaa;
  border: 1px solid #333;
  border-radius: 6px;
  padding-block: 6px;
  padding-inline-start: 12px;
  padding-inline-end: 32px;
  font-size: 0.8rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%23aaa' stroke='%23aaa' stroke-width='0.5' d='M2 2l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}
[dir="rtl"] .lang-switch select { background-position: left 10px center; }
.lang-switch select:focus { outline: none; border-color: #5588ff; }

/* --- Privacy Banner --- */
.privacy-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(40, 200, 120, 0.10), rgba(40, 200, 120, 0.04));
  border: 1px solid rgba(40, 200, 120, 0.30);
  border-radius: 12px;
  padding: 14px 18px;
  margin-block-end: 20px;
}
.privacy-icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(40, 200, 120, 0.4));
}
.privacy-text strong {
  display: block;
  color: #d8f5e3;
  font-size: 0.95rem;
  margin-block-end: 2px;
}
.privacy-text span {
  display: block;
  color: #88c8a0;
  font-size: 0.78rem;
  line-height: 1.45;
}

/* --- Upload Section --- */
.upload-section { margin-block-end: 20px; }
.drop-zone {
  border: 2px dashed #333;
  border-radius: 16px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.drop-zone:hover, .drop-zone.over {
  border-color: #5588ff;
  background: rgba(85, 136, 255, 0.06);
}
.drop-zone:focus-visible {
  outline: 2px solid #5588ff;
  outline-offset: 2px;
}
.drop-icon {
  font-size: 2.5rem;
  margin-block-end: 8px;
  opacity: 0.6;
}
.drop-zone p { color: #aaa; font-size: 0.95rem; }
.drop-zone .hint { color: #777; font-size: 0.8rem; margin-block-start: 6px; }
input[type="file"] { display: none; }

/* Demo / try-it hint */
.demo-hint {
  text-align: center;
  margin-block-start: 12px;
  font-size: 0.82rem;
  color: #888;
}
.demo-btn {
  background: transparent;
  color: #88c8a0;
  border: 1px dashed rgba(40, 200, 120, 0.4);
  border-radius: 6px;
  padding: 6px 14px;
  margin-inline-start: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.demo-btn:hover {
  background: rgba(40, 200, 120, 0.08);
  border-color: rgba(40, 200, 120, 0.7);
  color: #b8f5d3;
}
/* In RTL the trailing "→" arrow in CTA labels should visually go the other way.
   Translation strings already include locale-appropriate arrows where it
   matters (e.g. "←" in Arabic), so no extra CSS flip is needed. */
.demo-license-details {
  text-align: center;
  margin-block-start: 8px;
  font-size: 0.72rem;
  color: #666;
}
.demo-license-details summary {
  cursor: pointer;
  display: inline;
  list-style: none;
  color: #777;
}
.demo-license-details summary::-webkit-details-marker { display: none; }
.demo-license-details summary::before { content: 'ⓘ '; opacity: 0.6; }
.demo-license-details summary:hover { color: #aaa; }
.demo-license-details p {
  margin-block-start: 8px;
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.5;
  color: #888;
}
.demo-license-details a { color: #88a8d0; text-decoration: underline; }

/* --- Bulk Actions --- */
.bulk-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-block-end: 16px;
  align-items: stretch;
}

/* --- Buttons --- */
.btn {
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn:focus-visible {
  outline: 2px solid #5588ff;
  outline-offset: 2px;
}
.btn:disabled { opacity: 0.35; cursor: default; transform: none; box-shadow: none; pointer-events: none; }

.btn-primary {
  background: linear-gradient(135deg, #2255cc, #1a44aa);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { transform: scale(1.03); box-shadow: 0 4px 16px rgba(34, 85, 204, 0.35); }
.btn-primary:active:not(:disabled) { transform: scale(0.97); }

.btn-secondary {
  background: #1e1e2a;
  color: #aaa;
  border: 1px solid #333;
}
.btn-secondary:hover:not(:disabled) { border-color: #5588ff; color: #ddd; }
.btn-secondary:active:not(:disabled) { transform: scale(0.97); }

.btn-danger {
  background: #2a1818;
  color: #ff8080;
  border: 1px solid #553333;
}
.btn-danger:hover:not(:disabled) { background: #3a2020; border-color: #ff4040; color: #ffa0a0; }

.btn-small {
  padding: 6px 14px;
  font-size: 0.78rem;
}

/* --- Compare Panel --- */
.compare-panel {
  background: #12121a;
  border: 1px solid #252530;
  border-radius: 12px;
  padding: 18px 20px;
  margin-block-end: 16px;
}
.compare-panel[hidden] { display: none; }
.compare-panel h3 {
  font-size: 1rem;
  color: #e0e0e0;
  margin-block-end: 6px;
}
.compare-files-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-block-start: 12px;
}
.compare-files-table th, .compare-files-table td {
  padding: 6px 10px;
  border-block-end: 1px solid #1e1e28;
  vertical-align: top;
  word-break: break-word;
}
.compare-files-table th {
  background: #14141c;
  color: #88a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: start;
}
.compare-files-table td:first-child {
  color: #aaa;
  font-weight: 500;
  width: 22%;
}
.compare-files-table td.cmp-missing { color: #555; text-align: center; }
.compare-files-table tr.cmp-same { background: rgba(40, 200, 120, 0.04); }
.compare-files-table tr.cmp-diff { background: rgba(255, 80, 80, 0.04); }
.compare-files-table tr.cmp-partial { background: rgba(255, 200, 80, 0.04); }

/* --- File Cards --- */
.file-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.file-card {
  background: #12121a;
  border: 1px solid #252530;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.file-card.processing { opacity: 0.6; pointer-events: none; }
.file-card.cleaned { border-color: rgba(40, 200, 120, 0.5); }

.file-header {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  align-items: flex-start;
  border-block-end: 1px solid #1e1e28;
}
.file-thumb {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #0a0a0e;
  border: 1px solid #252530;
  object-fit: cover;
  display: block;
}
.file-thumb-placeholder {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #1a1a24;
  border: 1px solid #252530;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 2rem;
}
.thumb-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(85, 136, 255, 0.25);
  border-block-start-color: #5588ff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.file-info {
  flex: 1;
  min-width: 0;
}
.file-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e0e0e0;
  word-break: break-all;
  margin-block-end: 4px;
}
.file-meta {
  font-size: 0.78rem;
  color: #888;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.file-meta span { display: inline-flex; align-items: center; gap: 4px; }
.file-meta .size-arrow { color: #28c878; font-weight: 600; }
.file-remove {
  background: transparent;
  border: 1px solid #333;
  color: #888;
  border-radius: 6px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: all 0.15s;
  flex-shrink: 0;
  font-family: inherit;
}
.file-remove:hover { color: #ff8080; border-color: #553333; }

/* --- Metadata Body --- */
.file-body { padding: 0 16px 16px; }

.gps-warning {
  background: linear-gradient(135deg, rgba(255, 80, 80, 0.10), rgba(255, 80, 80, 0.04));
  border: 1px solid rgba(255, 80, 80, 0.30);
  border-radius: 10px;
  padding: 12px 14px;
  margin-block: 12px;
  font-size: 0.85rem;
}
.gps-warning strong {
  display: block;
  color: #ffb0b0;
  margin-block-end: 4px;
  font-size: 0.9rem;
}
.gps-coords {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  color: #ffe0e0;
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 10px;
  border-radius: 6px;
  display: inline-block;
  font-size: 0.85rem;
  margin-block-start: 6px;
  user-select: all;
  direction: ltr;       /* Coordinates are numeric + lat/lon refs — always LTR */
  unicode-bidi: isolate;
}
.meta-table td:last-child {
  /* EXIF tag values are technical (numbers, English keywords) — keep LTR-readable */
  unicode-bidi: isolate;
}
.gps-actions {
  margin-block-start: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.gps-actions a {
  font-size: 0.78rem;
  color: #88a8d0;
  border: 1px solid #2a3a5a;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(85, 136, 255, 0.05);
}
.gps-actions a:hover { background: rgba(85, 136, 255, 0.15); text-decoration: none; }
.gps-actions .gps-leak-hint {
  font-size: 0.72rem;
  color: #888;
  font-style: italic;
}

.gps-nearest {
  margin-block-start: 8px;
  padding: 8px 12px;
  background: rgba(255, 80, 80, 0.05);
  border-radius: 6px;
  font-size: 0.85rem;
  color: #ffc8c8;
  font-weight: 500;
}

.gps-threats {
  margin-block-start: 10px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.25);
  border-inline-start: 3px solid rgba(255, 80, 80, 0.5);
  border-radius: 6px;
  font-size: 0.82rem;
}
.gps-threats strong {
  display: block;
  color: #ffd4d4;
  margin-block-end: 6px;
  font-size: 0.85rem;
}
.gps-threats ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gps-threats li {
  position: relative;
  padding-block: 3px;
  padding-inline-start: 18px;
  color: #d8b8b8;
  line-height: 1.45;
}
.gps-threats li::before {
  content: '▸';
  position: absolute;
  inset-inline-start: 4px;
  color: #ff8080;
}
[dir="rtl"] .gps-threats li::before { content: '◂'; }

/* Categories */
.meta-section { margin-block-start: 14px; }
.meta-empty {
  background: rgba(40, 200, 120, 0.06);
  border: 1px solid rgba(40, 200, 120, 0.25);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  color: #88c8a0;
  font-size: 0.85rem;
  margin-block-start: 12px;
}
.meta-category {
  border: 1px solid #1e1e28;
  border-radius: 10px;
  margin-block-end: 10px;
  overflow: hidden;
}
.meta-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #161620;
  padding: 8px 14px;
  cursor: pointer;
  user-select: none;
}
.meta-category-header:hover { background: #1a1a26; }
.meta-category-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #88a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.meta-category-title::before {
  content: '▶';
  font-size: 0.7em;
  transition: transform 0.15s;
  display: inline-block;
}
[dir="rtl"] .meta-category-title::before { content: '◀'; }
.meta-category[open] .meta-category-title::before {
  transform: rotate(90deg);
}
[dir="rtl"] .meta-category[open] .meta-category-title::before {
  transform: rotate(-90deg);
}
.meta-category-count {
  font-size: 0.7rem;
  color: #666;
  background: #0a0a12;
  padding: 2px 8px;
  border-radius: 10px;
}
.meta-category[open] .meta-category-header { border-block-end: 1px solid #1e1e28; }

.meta-table {
  width: 100%;
  font-size: 0.8rem;
  border-collapse: collapse;
}
.meta-table tr { border-block-end: 1px solid #14141c; }
.meta-table tr:last-child { border-block-end: none; }
.meta-table td {
  padding: 6px 14px;
  vertical-align: top;
}
.meta-table td:first-child {
  color: #888;
  font-weight: 500;
  width: 40%;
  word-break: break-word;
}
.meta-table td:last-child {
  color: #d0d0d0;
  word-break: break-word;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.78rem;
}

/* --- Strip Preview --- */
.strip-preview {
  margin-block: 12px;
  border: 1px solid rgba(255, 200, 80, 0.25);
  border-radius: 8px;
  background: rgba(255, 200, 80, 0.04);
  overflow: hidden;
}
.strip-preview summary {
  cursor: pointer;
  padding: 8px 14px;
  font-size: 0.82rem;
  color: #ffc880;
  user-select: none;
  list-style: none;
}
.strip-preview summary::-webkit-details-marker { display: none; }
.strip-preview summary::before {
  content: '▶';
  display: inline-block;
  margin-inline-end: 8px;
  transition: transform 0.15s;
  font-size: 0.7em;
}
[dir="rtl"] .strip-preview summary::before { content: '◀'; }
.strip-preview[open] summary::before { transform: rotate(90deg); }
[dir="rtl"] .strip-preview[open] summary::before { transform: rotate(-90deg); }
.strip-preview summary:hover { background: rgba(255, 200, 80, 0.06); }
.strip-preview-list {
  list-style: none;
  padding: 6px 14px 12px;
  padding-inline-start: 36px;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 4px 16px;
  font-size: 0.78rem;
  color: #b8a880;
}
.strip-preview-list li::before { content: '✗ '; color: #ff8080; }

/* --- Hex Viewer --- */
.hex-viewer {
  margin-block-start: 12px;
  border: 1px solid #1e1e28;
  border-radius: 8px;
  overflow: hidden;
}
.hex-viewer summary {
  cursor: pointer;
  padding: 8px 14px;
  font-size: 0.78rem;
  color: #88a;
  background: #0e0e16;
  user-select: none;
  list-style: none;
}
.hex-viewer summary::-webkit-details-marker { display: none; }
.hex-viewer summary::before {
  content: '▶';
  display: inline-block;
  margin-inline-end: 8px;
  transition: transform 0.15s;
}
[dir="rtl"] .hex-viewer summary::before { content: '◀'; }
.hex-viewer[open] summary::before { transform: rotate(90deg); }
[dir="rtl"] .hex-viewer[open] summary::before { transform: rotate(-90deg); }
/* Hex dump is technical content (English, byte ordering) — keep it LTR even in RTL pages */
[dir="rtl"] .hex-dump { direction: ltr; text-align: left; }
.hex-viewer summary:hover { background: #14141c; }
.hex-dump {
  background: #050508;
  color: #88c8a0;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.72rem;
  line-height: 1.4;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0;
  white-space: pre;
}

/* --- File Actions --- */
.file-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-block-start: 12px;
  margin-block-start: 14px;
  border-block-start: 1px solid #1e1e28;
}

/* --- Status & Notice --- */
.status-banner {
  background: rgba(40, 200, 120, 0.10);
  border: 1px solid rgba(40, 200, 120, 0.30);
  border-radius: 8px;
  padding: 10px 14px;
  margin-block-start: 12px;
  font-size: 0.85rem;
  color: #88e0a8;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- SEO Content Section --- */
.content-section {
  margin-block-start: 48px;
  border-block-start: 1px solid #1a1a22;
  padding-block-start: 40px;
}
.content-card {
  background: #12121a;
  border: 1px solid #1e1e28;
  border-radius: 12px;
  padding: 24px 26px;
  margin-block-end: 20px;
}
.content-card h2 {
  color: #e0e0e0;
  font-size: 1.25rem;
  margin-block-end: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.content-card p {
  color: #a8a8a8;
  font-size: 0.92rem;
  margin-block-end: 12px;
  line-height: 1.65;
}
.content-card p:last-child { margin-block-end: 0; }
.content-card strong { color: #d0d0d0; }

.highlight-card {
  border-color: rgba(40, 200, 120, 0.30);
  background: linear-gradient(135deg, rgba(40, 200, 120, 0.06), #12121a 60%);
}

.trust-list {
  list-style: none;
  margin-block-start: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.trust-list li {
  position: relative;
  padding: 10px 14px;
  padding-inline-start: 38px;
  background: #0e0e16;
  border: 1px solid #1e1e28;
  border-radius: 8px;
  color: #aaa;
  font-size: 0.85rem;
  line-height: 1.45;
}
.trust-list li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 12px;
  top: 10px;
  color: #28c878;
  font-weight: 700;
}

.feature-list {
  list-style: none;
  margin-block: 12px;
}
.feature-list li {
  position: relative;
  padding-block: 6px;
  padding-inline-start: 22px;
  color: #aaa;
  font-size: 0.9rem;
  line-height: 1.55;
}
.feature-list li::before {
  content: '·';
  position: absolute;
  inset-inline-start: 8px;
  top: 6px;
  color: #5588ff;
  font-weight: 700;
  font-size: 1.4em;
  line-height: 1;
}

.howto-steps {
  list-style: none;
  counter-reset: howto;
  margin-block-start: 12px;
}
.howto-steps li {
  counter-increment: howto;
  position: relative;
  padding-block: 10px;
  padding-inline-start: 44px;
  color: #aaa;
  font-size: 0.9rem;
  line-height: 1.6;
}
.howto-steps li::before {
  content: counter(howto);
  position: absolute;
  inset-inline-start: 0;
  top: 8px;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #2255cc, #1a44aa);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}
.howto-steps strong { color: #d0d0d0; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-block-start: 14px;
}
.feature {
  background: #0e0e16;
  border: 1px solid #1e1e28;
  border-radius: 8px;
  padding: 12px 14px;
}
.feature strong {
  display: block;
  color: #d0d0d0;
  font-size: 0.9rem;
  margin-block-end: 4px;
}
.feature span {
  color: #888;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* --- Compare table --- */
.compare-wrap { overflow-x: auto; margin-block: 16px; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  min-width: 560px;
}
.compare-table th, .compare-table td {
  padding: 10px 12px;
  border-block-end: 1px solid #1e1e28;
  text-align: start;
  vertical-align: top;
}
.compare-table th {
  color: #88a;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #14141c;
}
.compare-table th:first-child { background: transparent; }
.compare-table td.yes { color: #88e0a8; }
.compare-table td.no { color: #ffa0a0; }
.compare-table tbody tr:hover { background: rgba(85, 136, 255, 0.04); }
.compare-foot { color: #888; font-size: 0.82rem; font-style: italic; margin-block-start: 12px; }

/* --- FAQ Permalinks (internal SEO links to subpages) --- */
.faq-permalink-hint {
  font-size: 0.82rem;
  color: #888;
  margin-block: 4px 12px;
}
.faq-permalinks {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 4px 16px;
}
.faq-permalinks li { padding: 4px 0; font-size: 0.85rem; }
.faq-permalinks a { color: #88a8d0; text-decoration: none; }
.faq-permalinks a:hover { color: #b8c8e8; text-decoration: underline; }
.faq-permalinks li::before { content: '↗ '; color: #555; font-size: 0.8em; }

/* --- FAQ --- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-item {
  background: #0e0e16;
  border: 1px solid #1e1e28;
  border-radius: 8px;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 12px 14px;
  font-size: 0.9rem;
  color: #d0d0d0;
  font-weight: 500;
  list-style: none;
  user-select: none;
  position: relative;
  padding-inline-start: 40px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: '+';
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: #5588ff;
  width: 18px;
  text-align: center;
  transition: transform 0.15s;
  line-height: 1;
}
.faq-item[open] summary::before {
  content: '−';
}
.faq-item summary:hover { background: #14141c; }
.faq-item p {
  padding: 0 14px 14px;
  color: #aaa;
  font-size: 0.85rem;
  line-height: 1.6;
}

/* --- Footer --- */
footer {
  margin-block-start: 40px;
  padding-block: 24px 28px;
  text-align: center;
  border-block-start: 1px solid #1a1a22;
}
footer p {
  font-size: 0.78rem;
  color: #666;
  margin-block-end: 8px;
}
.footer-links {
  font-size: 0.78rem;
  color: #888;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.footer-sep { color: #444; }

/* --- Responsive --- */
@media (max-width: 640px) {
  header, main, footer { padding-inline: 14px; }
  .privacy-banner { flex-direction: row; }
  .privacy-icon { font-size: 1.4rem; }
  .file-thumb, .file-thumb-placeholder { width: 64px; height: 64px; }
  .file-header { padding: 12px; gap: 10px; }
  .meta-table td { padding: 5px 10px; }
  .meta-table td:first-child { width: 38%; font-size: 0.75rem; }
  .meta-table td:last-child { font-size: 0.74rem; }
  .content-card { padding: 18px 16px; }
  .bulk-actions .btn { flex: 1 1 100%; justify-content: center; }
  .file-actions .btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}