/* ============ МЕТАСКОП · стиль прибора ============ */
:root{
  --bg0:#0c1218; --bg1:#0f1720; --panel:#141f2a; --panel2:#182635;
  --line:rgba(146,176,205,.14); --line2:rgba(146,176,205,.28);
  --ink:#e9f1f7; --dim:#8fa5b8; --faint:#5f7488;
  --amber:#ffb454; --amber2:#ffd28f; --aqua:#45d6c1; --coral:#ff8f7d; --red:#ff6459;
  --mono:'JetBrains Mono',monospace; --disp:'Unbounded',sans-serif; --body:'IBM Plex Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body); color:var(--ink); background:var(--bg0);
  min-height:100vh; line-height:1.55; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 34px),
    var(--bg0);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(700px 340px at 18% -6%, rgba(255,180,84,.10), transparent 70%),
    radial-gradient(600px 300px at 88% 4%, rgba(69,214,193,.07), transparent 70%);
}
.mono{font-family:var(--mono)}
.dim{color:var(--dim)}
.hidden{display:none!important}

/* ---------- шапка ---------- */
.top{
  display:flex; justify-content:flex-start; align-items:center; gap:20px; flex-wrap:wrap;
  padding:18px 28px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(20,31,42,.9), rgba(15,23,32,.75));
  position:sticky; top:0; z-index:40; backdrop-filter:blur(6px);
}
.brand{display:flex; align-items:center; gap:14px; color:var(--amber)}
.mark{width:42px;height:42px; animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.brand h1{font-family:var(--disp); font-weight:900; font-size:22px; letter-spacing:.06em; color:var(--ink)}
.tagline{display:block; font-size:12px; color:var(--dim); letter-spacing:.04em}

/* ---------- каркас ---------- */
.layout{display:grid; grid-template-columns:340px 1fr; gap:22px; padding:26px 28px; max-width:1440px; margin:0 auto}
.panel{
  background:linear-gradient(180deg,var(--panel),var(--bg1));
  border:1px solid var(--line); border-radius:8px; padding:18px; position:relative;
}
.panel::before,.panel::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--line2);opacity:.8}
.panel::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
.panel::after{bottom:-2px;right:-2px;border-left:none;border-top:none}
.panel h3{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin-bottom:12px}

/* ---------- дроп-зона ---------- */
.dropzone{
  border:1.5px dashed var(--line2); border-radius:8px; min-height:250px; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--bg1)); transition:border-color .25s, transform .25s, box-shadow .25s;
}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--amber); box-shadow:0 0 0 3px rgba(255,180,84,.12); outline:none}
.dropzone.drag{border-color:var(--aqua); transform:scale(1.015); box-shadow:0 0 0 4px rgba(69,214,193,.15)}
.dz-inner{text-align:center; padding:26px 18px; color:var(--dim)}
.dz-ico{width:56px;height:56px;color:var(--amber); margin-bottom:12px}
.dz-big{font-family:var(--disp); font-size:16px; color:var(--ink); margin-bottom:6px}
.dz-sub{font-size:12px}
.dz-scanline{
  position:absolute; left:0; right:0; top:-20%; height:26%; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent, rgba(69,214,193,.16), transparent);
}
.dropzone.scanning .dz-scanline{opacity:1; animation:scan 1.15s linear infinite}
@keyframes scan{from{top:-26%}to{top:104%}}
.dz-status{position:absolute; bottom:0; left:0; right:0; padding:8px 14px; font-family:var(--mono); font-size:11px; color:var(--aqua); background:rgba(12,18,24,.7); border-top:1px solid var(--line)}
.dz-status:empty{display:none}

/* ---------- карточка файла ---------- */
.file-card{margin-top:18px; animation:rise .45s ease both}
.file-card .fname{font-family:var(--mono); font-weight:700; word-break:break-all; font-size:13px}
.file-card .fmeta{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0}
.kv{font-family:var(--mono); font-size:11px; padding:3px 8px; border:1px solid var(--line); border-radius:3px; color:var(--dim)}
.kv b{color:var(--amber2); font-weight:600}
.hexline{font-family:var(--mono); font-size:10px; color:var(--faint); word-break:break-all; margin-bottom:12px}
.file-card .row{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- модули / форматы ---------- */
.mods{margin-top:18px}
.module-log{font-family:var(--mono); font-size:11px; display:flex; flex-direction:column; gap:6px}
.module-log .ml{display:flex; gap:8px; align-items:baseline; color:var(--dim)}
.module-log .ml.ok{color:var(--aqua)} .module-log .ml.err{color:var(--red)} .module-log .ml.load{color:var(--amber)}
.fmts{margin-top:18px}
.fmt-grid{display:flex; flex-wrap:wrap; gap:6px}
.fmt-grid span{
  font-family:var(--mono); font-size:11px; padding:4px 10px; border:1px solid var(--line2);
  border-radius:3px; color:var(--amber2); transition:.2s;
}
.fmt-grid span:hover{border-color:var(--amber); transform:translateY(-1px)}

/* ---------- idle ---------- */
.idle{padding:56px 40px; overflow:hidden}
.idle-grid{position:absolute; inset:0; opacity:.5;
  background:radial-gradient(circle at 78% 22%, rgba(255,180,84,.08), transparent 45%)}
.idle h2{font-family:var(--disp); font-size:30px; font-weight:700; margin-bottom:14px}
.idle p{max-width:560px; color:var(--dim)}
.idle-steps{list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:8px}
.idle-steps li{font-family:var(--mono); font-size:13px; color:var(--dim)}
.idle-steps b{color:var(--aqua); margin-right:10px}

/* ---------- вкладки ---------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; flex-wrap:wrap}
.tabs button{
  background:none; border:none; color:var(--dim); font-family:var(--mono); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; padding:10px 16px; cursor:pointer; position:relative; transition:color .2s;
}
.tabs button:hover{color:var(--ink)}
.tabs button.active{color:var(--amber)}
.tabs button.active::after{content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; background:var(--amber); box-shadow:0 0 10px rgba(255,180,84,.6)}

/* ---------- обзор ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:18px}
.tile{border:1px solid var(--line); border-radius:6px; padding:14px; background:var(--panel2); animation:rise .5s ease both; transition:transform .2s, border-color .2s}
.tile:hover{transform:translateY(-2px); border-color:var(--line2)}
.tile .n{font-family:var(--disp); font-size:26px; font-weight:700; color:var(--amber2)}
.tile .n.aq{color:var(--aqua)}
.tile .l{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:4px}
.actions{display:flex; gap:10px; flex-wrap:wrap}

/* ---------- таблицы метаданных ---------- */
.group{border:1px solid var(--line); border-radius:6px; margin-bottom:14px; overflow:hidden; animation:rise .5s ease both}
.group>summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; background:var(--panel2); font-family:var(--mono); font-size:12px; letter-spacing:.06em;
}
.group>summary::-webkit-details-marker{display:none}
.group>summary:hover{background:#1c2c3d}
.group .cnt{color:var(--faint)}
.mtable{width:100%; border-collapse:collapse; font-size:13px}
.mtable td{padding:7px 14px; border-top:1px solid var(--line); vertical-align:top}
.mtable tr:hover td{background:rgba(255,180,84,.05)}
.mtable td.k{font-family:var(--mono); font-size:12px; color:var(--amber2); width:32%; white-space:nowrap}
.mtable td.v{font-family:var(--mono); font-size:12px; word-break:break-word}
.copybtn{
  background:none; border:1px solid var(--line); border-radius:3px; color:var(--faint);
  font-family:var(--mono); font-size:10px; padding:2px 7px; cursor:pointer; transition:.2s;
}
.copybtn:hover{color:var(--aqua); border-color:var(--aqua)}
.badge{font-family:var(--mono); font-size:9px; letter-spacing:.1em; padding:2px 6px; border-radius:2px; text-transform:uppercase}
.b-exif{background:rgba(255,180,84,.15); color:var(--amber)}
.b-xmp{background:rgba(69,214,193,.14); color:var(--aqua)}
.b-iptc{background:rgba(255,143,125,.14); color:var(--coral)}
.b-icc,.b-file,.b-jfif,.b-gps{background:rgba(143,165,184,.14); color:var(--dim)}
pre.blob{font-family:var(--mono); font-size:11px; background:#0a0f14; border:1px solid var(--line); padding:12px; overflow:auto; max-height:340px; white-space:pre-wrap; word-break:break-all; color:#b9cfdf}

/* ---------- структура ---------- */
.strow{display:grid; grid-template-columns:110px 150px 1fr 90px; gap:10px; padding:6px 10px; font-family:var(--mono); font-size:12px; border-top:1px solid var(--line); align-items:baseline}
.strow:first-child{border-top:none}
.strow:hover{background:rgba(69,214,193,.05)}
.strow .off{color:var(--faint)} .strow .nm{color:var(--amber2)} .strow .rl{color:var(--dim); word-break:break-word} .strow .sz{text-align:right; color:var(--aqua)}
.sthead{display:grid; grid-template-columns:110px 150px 1fr 90px; gap:10px; padding:6px 10px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}

/* ---------- inline-редактирование таблицы метаданных ---------- */
.mtable td.v{ padding:4px 6px }
.mtable td.v .inline-wrap{ display:flex; gap:6px; align-items:stretch }
.mtable td.v .inline-wrap input,
.mtable td.v .inline-wrap textarea{
  flex:1; min-width:0; background:#0b1118; border:1px solid transparent;
  color:var(--ink); border-radius:3px; padding:5px 8px; font-family:var(--mono); font-size:12px;
  transition:border-color .2s, box-shadow .2s; resize:none;
}
.mtable td.v .inline-wrap textarea{ min-height:26px; max-height:140px }
.mtable td.v .inline-wrap input:focus,
.mtable td.v .inline-wrap textarea:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 2px rgba(255,180,84,.15) }
.mtable td.v .inline-wrap.dirty input,
.mtable td.v .inline-wrap.dirty textarea{ border-color:var(--aqua) }
.mtable td.v .inline-wrap.del input,
.mtable td.v .inline-wrap.del textarea{
  border-color:rgba(255,100,89,.4); color:var(--faint); text-decoration:line-through; background:rgba(255,100,89,.06);
}
.del-btn{
  background:none; border:1px solid var(--line); border-radius:3px; color:var(--faint);
  font-family:var(--mono); font-size:11px; width:26px; cursor:pointer; flex-shrink:0; transition:.2s;
  display:flex; align-items:center; justify-content:center;
}
.del-btn:hover{ color:var(--red); border-color:var(--red) }
.del-btn.active{ color:var(--red); border-color:var(--red); background:rgba(255,100,89,.1) }

/* пустое значение — приглушённый placeholder */
.mtable td.v .inline-wrap.empty input,
.mtable td.v .inline-wrap.empty textarea{ color:var(--faint); font-style:italic }

/* ---------- панель действий под таблицами ---------- */
.data-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--line) }
.data-actions .spacer{ flex:1 }
.change-counter{ font-family:var(--mono); font-size:11px; color:var(--dim); padding:10px 14px; border:1px solid var(--line2); border-radius:4px; align-self:center }
.change-counter b{ color:var(--aqua) }
.readonly-note{ display:inline-block; font-family:var(--mono); font-size:10px; padding:2px 8px; border:1px solid var(--line); border-radius:3px; color:var(--faint); letter-spacing:.05em; text-transform:uppercase }
.group[data-readonly="true"] > summary{ opacity:.7 }

/* ---------- кнопки ---------- */
.btn{
  font-family:var(--disp); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:11px 20px; border-radius:5px; cursor:pointer; border:1px solid transparent; transition:.2s;
}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--amber); color:#1b1204; border-color:var(--amber)}
.btn.primary:hover{background:var(--amber2); box-shadow:0 4px 18px rgba(255,180,84,.35)}
.btn.ghost{background:none; color:var(--amber2); border-color:var(--line2)}
.btn.ghost:hover{border-color:var(--amber)}
.btn.danger{background:none; color:var(--red); border-color:rgba(255,100,89,.5)}
.btn.danger:hover{border-color:var(--red); box-shadow:0 0 14px rgba(255,100,89,.2)}
.btn.small{padding:7px 13px; font-size:10px}

.reportbox{margin-top:14px; border:1px solid rgba(69,214,193,.35); border-radius:6px; padding:12px 14px; background:rgba(69,214,193,.06)}
.reportbox h5{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--aqua); margin-bottom:8px; text-transform:uppercase}
.reportbox li{font-family:var(--mono); font-size:12px; color:var(--dim); margin-left:18px; padding:2px 0}
.warn{border:1px solid rgba(255,180,84,.4); background:rgba(255,180,84,.07); color:var(--amber2); border-radius:6px; padding:10px 14px; font-size:12px; margin-bottom:12px}

/* ---------- тосты ---------- */
.toasts{position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:8px; z-index:100}
.toast{
  background:var(--panel2); border:1px solid var(--line2); border-left:3px solid var(--aqua);
  padding:10px 16px; border-radius:4px; font-family:var(--mono); font-size:12px; max-width:360px;
  animation:slidein .3s ease both; box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.toast.err{border-left-color:var(--red)} .toast.warn{border-left-color:var(--amber)}
@keyframes slidein{from{opacity:0; transform:translateX(24px)}}
@keyframes rise{from{opacity:0; transform:translateY(10px)}}

/* ---------- футер ---------- */
.foot{border-top:1px solid var(--line); margin-top:30px; padding:22px 28px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--dim); font-size:12px}
.foot-matrix{font-size:10px; color:var(--faint)}

@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .top{position:static}
  .strow,.sthead{grid-template-columns:80px 110px 1fr 70px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}

/* ---------- панель действий СВЕРХУ списка (sticky) ---------- */
.data-actions-top{
  position: sticky; top: 70px; z-index: 20;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 16px; padding: 14px 18px;
  background: linear-gradient(180deg, rgba(20,31,42,.98), rgba(15,23,32,.96));
  border: 1px solid var(--line); border-radius: 8px;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.data-actions-top::before,.data-actions-top::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--line2);opacity:.8}
.data-actions-top::before{top:-2px;left:-2px;border-right:none;border-bottom:none}
.data-actions-top::after{bottom:-2px;right:-2px;border-left:none;border-top:none}
.data-actions-top .spacer{ flex:1 }
.data-actions-top .change-counter{
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  padding: 8px 12px; border: 1px solid var(--line2); border-radius: 4px; align-self: center;
}
.data-actions-top .change-counter b{ color: var(--aqua) }

/* нижние действия — оставляем для совместимости, но не рендерим */
.data-actions{ display:none }

/* ---------- индикаторы статуса метаданных ---------- */
.meta-status{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 6px; margin-bottom: 18px;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
}
.meta-status.found{
  background: rgba(255,100,89,.08); border: 1.5px solid rgba(255,100,89,.35); color: var(--coral);
}
.meta-status.clean{
  background: rgba(69,214,193,.08); border: 1.5px solid rgba(69,214,193,.35); color: var(--aqua);
}
.meta-status svg{ flex-shrink: 0 }
.meta-status .text{ flex: 1 }

/* ---------- выравнивание кнопок действий ---------- */
.data-actions-top .btn{ min-width: 180px; text-align: center }

/* ---------- сворачивание групп read-only ---------- */
.group[data-readonly="true"]:not([open]) > summary::after{
  content: "▶"; font-size: 10px; color: var(--faint); margin-left: 8px;
}
.group[data-readonly="true"][open] > summary::after{
  content: "▼"; font-size: 10px; color: var(--faint); margin-left: 8px;
}
.group[data-readonly="false"]:not([open]) > summary::after{
  content: "▶"; font-size: 10px; color: var(--amber); margin-left: 8px;
}
.group[data-readonly="false"][open] > summary::after{
  content: "▼"; font-size: 10px; color: var(--amber); margin-left: 8px;
}