:root{
  --bg: #f7f8fb;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #10b981;
  --accent-dark: #0ea37a;
  --indent-0: 0;
  --indent-1: 1.25rem;
  --indent-2: 2.5rem;
  --indent-3: 3.75rem;
}
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
.container{max-width:960px;margin:24px auto;padding:0 16px}
.header{
  max-width:960px;margin:24px auto 16px;padding:24px 24px;
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:8px 12px;align-items:center;
}
.brand{font-weight:700;color:#111827}
.brand-prefix{opacity:.9}
.brand-dot{color:#9ca3af;margin:0 2px}
.brand-suffix{opacity:.9}
.titles{grid-column:1 / -1}
.title{margin:4px 0 6px;font-size:28px; text-align: center;}
.subtitle{margin:0;color:var(--muted); text-align: center;}
.lang-switch{display:flex;gap:8px}
.lang-btn{
  padding:6px 10px;border-radius:10px;border:1px solid var(--border);background:#fff;color:#374151;cursor:pointer;
  display:flex;align-items:center;gap:6px;
}
.lang-btn:hover{border-color:#d1d5db}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04);overflow:hidden
}
.card + .card{margin-top:12px}
.card-header{
  display:flex;align-items:center;gap:8px;padding:12px 6px;border-bottom:1px solid var(--border);color:#374151
}
.product-header{cursor:pointer}
.product-header:hover{background:#f9fafb}
.chevron{transition:transform .15s ease}
details[open] .chevron{transform:rotate(180deg)}
.folder{color:#059669}
.section{padding:8px 0}
.item{display:flex;align-items:center;gap:10px;padding:10px 16px}
.item + .item{border-top:1px solid var(--border)}
.item .name{flex:1}
.item .size{color:var(--muted);margin-left:8px}
.btn{
  background:var(--accent);color:#fff;border:none;padding:8px 12px;border-radius:999px;cursor:pointer
}
.btn:hover{background:var(--accent-dark)}
.accordion .lang-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--border);cursor:pointer}
.accordion .lang-row:hover{background:#f9fafb}
.accordion .lang-row .label{flex:1}
[class*="indent-"]{position:relative}
.indent-0{padding-left:var(--indent-0) !important}
.indent-1{padding-left:var(--indent-1) !important}
.indent-2{padding-left:var(--indent-2) !important}
.indent-3{padding-left:var(--indent-3) !important}
[class*="ml-"]{position:relative}
.ml-0{margin-left:var(--indent-0)}
.ml-1{margin-left:var(--indent-1)}
.ml-2{margin-left:var(--indent-2)}
.ml-3{margin-left:var(--indent-3)}
[dir="rtl"] .container, [dir="rtl"] .header{direction:rtl}
[dir="rtl"] .lang-switch{justify-content:flex-start}