/* =========================================================
   THEME VARIABLES — LIGHT (default)
   ========================================================= */
:root {
  --bg-page:           #f4f5f7;
  --bg-toolbar-top:    #f8f9fa;
  --bg-toolbar-bot:    #e8ebef;
  --bg-editor:         #ffffff;
  --bg-header:         #f3f5f8;
  --bg-offset:         #f3f5f8;
  --bg-sidebar:        #f6f7f9;
  --bg-statusbar-top:  #f0f1f3;
  --bg-statusbar-bot:  #dee0e3;
  --bg-modal:          #ffffff;
  --bg-modal-header-top: #f8f9fa;
  --bg-modal-header-bot: #ebedf0;
  --bg-modal-footer:   #f8f9fa;
  --bg-panel-top:      #f8f9fa;
  --bg-panel-bot:      #ebedf0;
  --bg-input:          #ffffff;
  --bg-button:         #f6f7f9;
  --bg-ctx:            #ffffff;
  --bg-hover-btn:      #dceaf9;
  --bg-active-btn:     #b8d3ef;
  --bg-row-cursor:     #e1ecf7;
  --bg-mode-ins:       #e1ecf7;

  --border:            #d0d4da;
  --border-strong:     #b0b4ba;
  --border-soft:       #e5e7eb;
  --border-dotted:     #e0e3e6;
  --border-toolbar:    #c0c4c8;
  --border-light:      #a8c6e5;

  --text-primary:      #1a1a1a;
  --text-secondary:    #555555;
  --text-tertiary:     #6a7280;
  --text-quaternary:   #8a929e;
  --text-very-dim:     #b0b4ba;

  --byte-zero:         #b6b9bd;
  --ch-nonprint:       #c0c4c8;

  --sel-bg:            #cfe3f7;
  --sel-fg:            #0a2c52;
  --sel-zero-fg:       #6a7a90;

  --cursor-bg:         #1c5fb5;
  --cursor-fg:         #ffffff;
  --cursor-soft-bg:    #eaf1fa;
  --cursor-soft-border:#6c9bd0;

  --accent:            #1c5fb5;
  --accent-hover:      #2a78cf;
  --accent-light:      #e1ecf7;
  --accent-text:       #1958a8;

  --header-active-bg:  #fff3bf;
  --header-active-fg:  #5a4500;

  --match-bg:          #fff3bf;
  --match-sel-bg:      #ffd966;

  --shadow-modal:      0 10px 32px rgba(0,0,0,0.28);
  --shadow-card:       0 8px 32px rgba(28,95,181,0.08);
  --shadow-card-hover: 0 12px 40px rgba(28,95,181,0.14);
  --shadow-card-drag:  0 14px 44px rgba(28,95,181,0.22);
  --shadow-ctx:        0 6px 18px rgba(0,0,0,0.22);
  --shadow-btn:        0 2px 6px rgba(28,95,181,0.25);

  --hover-byte:        rgba(28,95,181,0.06);
  --modal-overlay:     rgba(0,0,0,0.35);
  --drop-overlay-bg:   rgba(28,95,181,0.18);

  --toast-bg:          #2a2a2a;
  --toast-fg:          #ffffff;

  --kbd-bg:            #f0f3f7;
  --kbd-border:        #d0d4da;
  --kbd-fg:            #1a2a3a;

  --welcome-bg-1:      #f7f9fc;
  --welcome-bg-2:      #e8eef5;
  --welcome-card-bg:   #ffffff;
  --welcome-card-bd:   #b8c8db;
  --welcome-card-bd-hover: #6c9bd0;
  --welcome-card-bd-drag:  #1c5fb5;
  --welcome-card-bg-drag:  #f0f6fd;
  --welcome-icon:      #6c9bd0;
  --welcome-icon-hover:#1c5fb5;
  --welcome-h1:        #1a2a3a;
  --welcome-divider:   #e6ebf2;

  --error:             #b00020;
  --success:           #1c8a3b;

  --scrollbar-bg:      #f3f4f6;
  --scrollbar-thumb:   #c8ccd1;
  --scrollbar-thumb-hover: #a8acb1;
}

/* =========================================================
   THEME VARIABLES — DARK
   ========================================================= */
body.dark {
  --bg-page:           #1e1e1e;
  --bg-toolbar-top:    #2d2d30;
  --bg-toolbar-bot:    #252526;
  --bg-editor:         #1e1e1e;
  --bg-header:         #252526;
  --bg-offset:         #252526;
  --bg-sidebar:        #252526;
  --bg-statusbar-top:  #2d2d30;
  --bg-statusbar-bot:  #1e1e1e;
  --bg-modal:          #2d2d30;
  --bg-modal-header-top: #3a3a3e;
  --bg-modal-header-bot: #2d2d30;
  --bg-modal-footer:   #252526;
  --bg-panel-top:      #3a3a3e;
  --bg-panel-bot:      #2d2d30;
  --bg-input:          #1e1e1e;
  --bg-button:         #3a3a3d;
  --bg-ctx:            #2d2d30;
  --bg-hover-btn:      #094771;
  --bg-active-btn:     #0a5a8a;
  --bg-row-cursor:     #2a3a4e;
  --bg-mode-ins:       #1c4a78;

  --border:            #3e3e42;
  --border-strong:     #555558;
  --border-soft:       #353539;
  --border-dotted:     #3a3a3e;
  --border-toolbar:    #1a1a1a;
  --border-light:      #4080d0;

  --text-primary:      #e0e0e0;
  --text-secondary:    #b0b0b0;
  --text-tertiary:     #909090;
  --text-quaternary:   #707070;
  --text-very-dim:     #555558;

  --byte-zero:         #5a5a5a;
  --ch-nonprint:       #5a5a5a;

  --sel-bg:            #1c4a78;
  --sel-fg:            #e8e8e8;
  --sel-zero-fg:       #8aa0b8;

  --cursor-bg:         #4080d0;
  --cursor-fg:         #ffffff;
  --cursor-soft-bg:    #2a3a4e;
  --cursor-soft-border:#4080d0;

  --accent:            #4080d0;
  --accent-hover:      #5090e0;
  --accent-light:      #1c4a78;
  --accent-text:       #6cb0f0;

  --header-active-bg:  #4a3a00;
  --header-active-fg:  #ffe070;

  --match-bg:          #4a3a00;
  --match-sel-bg:      #6a5500;

  --shadow-modal:      0 10px 32px rgba(0,0,0,0.6);
  --shadow-card:       0 8px 32px rgba(0,0,0,0.4);
  --shadow-card-hover: 0 12px 40px rgba(0,0,0,0.55);
  --shadow-card-drag:  0 14px 44px rgba(0,0,0,0.65);
  --shadow-ctx:        0 6px 18px rgba(0,0,0,0.6);
  --shadow-btn:        0 2px 6px rgba(0,0,0,0.4);

  --hover-byte:        rgba(64,128,208,0.18);
  --modal-overlay:     rgba(0,0,0,0.6);
  --drop-overlay-bg:   rgba(64,128,208,0.2);

  --toast-bg:          #4a4a4a;
  --toast-fg:          #ffffff;

  --kbd-bg:            #3a3a3d;
  --kbd-border:        #555558;
  --kbd-fg:            #e0e0e0;

  --welcome-bg-1:      #1e1e1e;
  --welcome-bg-2:      #252526;
  --welcome-card-bg:   #2d2d30;
  --welcome-card-bd:   #3e3e42;
  --welcome-card-bd-hover: #4080d0;
  --welcome-card-bd-drag:  #5090e0;
  --welcome-card-bg-drag:  #1a2a3a;
  --welcome-icon:      #6cb0f0;
  --welcome-icon-hover:#80c0ff;
  --welcome-h1:        #e0e0e0;
  --welcome-divider:   #3a3a3e;

  --error:             #ff6b80;
  --success:           #4caf50;

  --scrollbar-bg:      #1e1e1e;
  --scrollbar-thumb:   #4a4a4d;
  --scrollbar-thumb-hover: #6a6a6d;
}

/* =========================================================
   BASE
   ========================================================= */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 13px;
  background: var(--bg-page);
  color: var(--text-primary);
  overflow: hidden;
  user-select: none;
  transition: background-color 0.18s, color 0.18s;
}
#app { display: flex; flex-direction: column; height: 100vh; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid var(--scrollbar-bg);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* =========================================================
   TOOLBAR
   ========================================================= */
.menubar {
  display: flex; align-items: center;
  background: linear-gradient(to bottom, var(--bg-toolbar-top), var(--bg-toolbar-bot));
  border-bottom: 1px solid var(--border-toolbar);
  padding: 4px 6px;
  gap: 2px;
  flex: 0 0 auto;
  flex-wrap: wrap;        /* permite saltar de línea si no caben items */
  row-gap: 4px;
}
.menubar button {
  background: transparent;
  border: 1px solid transparent;
  padding: 5px 11px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 3px;
  color: var(--text-primary);
  font-family: inherit;
}
.menubar button:hover { background: var(--bg-hover-btn); border-color: var(--border-light); }
.menubar button:active { background: var(--bg-active-btn); }
.menubar button:disabled { color: var(--text-very-dim); cursor: default; }
.menubar button:disabled:hover { background: transparent; border-color: transparent; }
.menubar .sep { width: 1px; background: var(--border-toolbar); margin: 4px 4px; align-self: stretch; }
.menubar input[type=file] { display: none; }
.menubar select {
  border: 1px solid var(--border-strong);
  background: var(--bg-input);
  color: var(--text-primary);
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 2px;
  font-family: inherit;
}
.menubar label {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 4px; font-size: 12px; color: var(--text-secondary);
}
.menubar .spacer { flex: 1; }
.menubar .title {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 4px 10px;
  border-left: 1px solid var(--border-toolbar);
  max-width: 280px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menubar .title b { color: var(--text-primary); font-weight: 600; }

.icon-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  padding: 0 !important;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn .icon-moon { display: inline-block; }
.icon-btn .icon-sun  { display: none; }
body.dark .icon-btn .icon-moon { display: none; }
body.dark .icon-btn .icon-sun  { display: inline-block; }

/* =========================================================
   MAIN
   ========================================================= */
.main { display: flex; flex: 1; min-height: 0; background: var(--bg-editor); }
.editor-wrap {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0; border-right: 1px solid var(--border);
  position: relative;
}
.editor-header {
  display: flex;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 6px 0;
  user-select: none;
  flex: 0 0 auto;
}
.editor-header .lbl-off {
  width: 96px; padding: 0 8px;
  color: var(--text-tertiary); flex: 0 0 auto;
}
.editor-header .lbl-hex {
  padding: 0 6px; flex: 0 0 auto;
  border-right: 1px solid var(--border-soft);
}
.editor-header .lbl-hex .col {
  display: inline-block; padding: 0 3px;
  width: 22px; text-align: center;
}
.editor-header .lbl-hex .col.group-end { padding-right: 9px; width: 28px; }
.editor-header .lbl-hex .col.active {
  background: var(--header-active-bg);
  color: var(--header-active-fg);
  border-radius: 2px; font-weight: 600;
}
.editor-header .lbl-ascii { padding: 0 6px; color: var(--text-tertiary); }

.editor-viewport {
  position: relative; flex: 1;
  overflow-y: scroll; overflow-x: auto;
  background: var(--bg-editor);
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px; line-height: 20px;
  outline: none;
}
.editor-content { position: relative; }
.row {
  position: absolute; left: 0; right: 0;
  height: 20px; display: flex; white-space: pre;
}
.row .offset {
  color: var(--text-tertiary);
  padding: 0 8px; width: 96px;
  background: var(--bg-offset);
  border-right: 1px solid var(--border-soft);
  flex: 0 0 auto; cursor: pointer;
}
.row.cursor-row .offset {
  background: var(--bg-row-cursor);
  color: var(--accent-text);
  font-weight: 600;
}
.row .hex {
  padding: 0 6px;
  border-right: 1px solid var(--border-soft);
  flex: 0 0 auto;
}
.row .ascii { padding: 0 6px; flex: 0 0 auto; }

/* Bytes */
.byte {
  display: inline-block; padding: 0 3px;
  width: 22px; text-align: center;
  color: var(--text-primary);
}
.byte.group-end { padding-right: 9px; width: 28px; }
.byte.zero { color: var(--byte-zero); }
.byte:hover { background: var(--hover-byte); }

.ch {
  display: inline-block; padding: 0 0;
  width: 9px; text-align: center;
  color: var(--text-primary);
}
.ch.group-end { padding-right: 6px; width: 15px; }
.ch.nonprint { color: var(--ch-nonprint); }
.ch:hover { background: var(--hover-byte); }

.byte.sel, .ch.sel {
  background: var(--sel-bg) !important;
  color: var(--sel-fg) !important;
}
.byte.sel.zero { color: var(--sel-zero-fg) !important; }
.ch.sel.nonprint { color: var(--sel-zero-fg) !important; }

.byte.cursor, .ch.cursor {
  background: var(--cursor-bg);
  color: var(--cursor-fg);
}
.byte.cursor.zero { color: rgba(255,255,255,0.7); }
.ch.cursor.nonprint { color: rgba(255,255,255,0.7); }
.byte.cursor-soft, .ch.cursor-soft {
  background: var(--cursor-soft-bg);
  outline: 1px solid var(--cursor-soft-border);
  outline-offset: -1px;
}
.nibble.on {
  background: var(--cursor-bg); color: var(--cursor-fg);
  padding: 0 1px; border-radius: 2px;
}
.nibble.off { color: var(--text-primary); }
.byte.cursor .nibble.off { color: rgba(255,255,255,0.6); }

.editor-viewport.insert-mode .byte.cursor,
.editor-viewport.insert-mode .ch.cursor {
  background: transparent;
  color: var(--text-primary);
  box-shadow: inset 2px 0 0 var(--cursor-bg);
}
.editor-viewport.insert-mode .byte.cursor.zero { color: var(--byte-zero); }
.editor-viewport.insert-mode .nibble.on {
  background: transparent; color: var(--text-primary);
  box-shadow: inset 2px 0 0 var(--cursor-bg); border-radius: 0;
}
.editor-viewport.insert-mode .byte.cursor .nibble.off { color: var(--text-primary); }

@keyframes blink { 0%, 55% { opacity: 1; } 55.01%, 100% { opacity: 0.35; } }
.editor-viewport:focus .byte.cursor:not(.sel),
.editor-viewport:focus .ch.cursor:not(.sel) {
  animation: blink 1.1s infinite step-end;
}

.byte.match, .ch.match { background: var(--match-bg); }
.byte.match.sel, .ch.match.sel { background: var(--match-sel-bg) !important; }

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar {
  width: 300px;
  background: var(--bg-sidebar);
  display: flex; flex-direction: column;
  overflow-y: auto;
  user-select: text;
  flex: 0 0 auto;
}
.panel { border-bottom: 1px solid var(--border); }
.panel h3 {
  margin: 0; padding: 7px 12px;
  background: linear-gradient(to bottom, var(--bg-panel-top), var(--bg-panel-bot));
  font-size: 11px; font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}
.panel-body { padding: 8px 12px; font-size: 12px; font-family: Consolas, monospace; }
.insp-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 0;
  border-bottom: 1px dotted var(--border-dotted);
  gap: 8px;
}
.insp-row:last-child { border-bottom: none; }
.insp-row .lbl {
  color: var(--text-secondary);
  font-family: "Segoe UI", sans-serif;
  font-size: 11px;
  flex: 0 0 auto;
}
.insp-row .val {
  color: var(--text-primary);
  text-align: right;
  max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: copy;
}
.insp-row .val.dim { color: var(--text-very-dim); cursor: default; }
.insp-row .val:not(.dim):hover { background: var(--header-active-bg); color: var(--header-active-fg); }

.shortcuts-body { font-family: "Segoe UI", sans-serif; font-size: 11px; line-height: 1.7; color: var(--text-primary); }
.shortcuts-body b { color: var(--accent-text); }

/* =========================================================
   STATUS BAR
   ========================================================= */
.statusbar {
  height: 26px;
  background: linear-gradient(to bottom, var(--bg-statusbar-top), var(--bg-statusbar-bot));
  border-top: 1px solid var(--border-toolbar);
  display: flex; align-items: center;
  font-size: 11px; padding: 0 12px;
  gap: 18px;
  color: var(--text-secondary);
  user-select: none; flex: 0 0 auto;
}
.statusbar b { color: var(--text-primary); font-weight: 600; }
.statusbar .mode {
  padding: 2px 9px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  cursor: pointer;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.statusbar .mode.ins {
  color: var(--accent-text);
  background: var(--bg-mode-ins);
  border-color: var(--cursor-soft-border);
}
.statusbar .modified { color: var(--error); font-weight: 700; }

/* =========================================================
   MODAL
   ========================================================= */
.modal-bg {
  position: fixed; inset: 0;
  background: var(--modal-overlay);
  display: none; align-items: center; justify-content: center;
  z-index: 100;
}
.modal-bg.open { display: flex; }
.modal {
  background: var(--bg-modal);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: var(--shadow-modal);
  min-width: 440px; max-width: 600px;
  user-select: text;
  color: var(--text-primary);
}
.modal-header {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-dotted);
  background: linear-gradient(to bottom, var(--bg-modal-header-top), var(--bg-modal-header-bot));
  border-radius: 6px 6px 0 0;
}
.modal-header h2 {
  margin: 0; font-size: 13px; font-weight: 700;
  color: var(--text-primary);
}
.modal-body { padding: 14px 16px; }
.modal-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border-dotted);
  background: var(--bg-modal-footer);
  border-radius: 0 0 6px 6px;
  display: flex; justify-content: flex-end; gap: 6px;
}
.modal .field { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.modal .field label { width: 120px; font-size: 12px; color: var(--text-primary); }
.modal input[type=text], .modal input[type=number], .modal select {
  flex: 1;
  padding: 5px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  font-family: Consolas, monospace;
  font-size: 13px;
  color: var(--text-primary);
}
.modal input:focus, .modal select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(28,95,181,0.2);
}
body.dark .modal input:focus, body.dark .modal select:focus {
  box-shadow: 0 0 0 2px rgba(64,128,208,0.3);
}
.modal button {
  padding: 6px 16px;
  border: 1px solid var(--border-strong);
  background: var(--bg-button);
  cursor: pointer;
  border-radius: 3px;
  font-size: 12px;
  color: var(--text-primary);
  font-family: inherit;
}
.modal button:hover { background: var(--bg-hover-btn); border-color: var(--accent); }
.modal button.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  font-weight: 600;
}
.modal button.primary:hover { background: var(--accent-hover); }
.modal .hint {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  padding-left: 130px;
}
.modal .hint code {
  background: var(--bg-button);
  padding: 1px 4px;
  border-radius: 2px;
  font-family: Consolas, monospace;
  color: var(--text-primary);
}
.modal .msg {
  margin: 0;
  padding: 4px 16px 4px;
  font-size: 12px;
  color: var(--error);
  min-height: 18px;
}
.modal .msg.ok { color: var(--success); }

.radio-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; padding-left: 120px;
}
.radio-row input[type=radio] { margin: 0; }
.radio-row label { width: auto !important; font-size: 12px; cursor: pointer; }
.radio-row input[type=text] {
  flex: 1; padding: 4px 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  font-family: Consolas, monospace;
  font-size: 12px;
  color: var(--text-primary);
}
.radio-row.compact input[type=text] { max-width: 100px; }

/* =========================================================
   CONTEXT MENU
   ========================================================= */
.ctx-menu {
  position: fixed;
  background: var(--bg-ctx);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow: var(--shadow-ctx);
  padding: 4px 0;
  min-width: 240px;
  font-size: 12px;
  z-index: 200;
  user-select: none;
  display: none;
  font-family: "Segoe UI", Tahoma, sans-serif;
}
.ctx-menu.open { display: block; }
.ctx-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 16px; cursor: pointer; gap: 16px;
  color: var(--text-primary);
}
.ctx-item:hover { background: var(--bg-hover-btn); }
.ctx-item.disabled { color: var(--text-very-dim); cursor: default; }
.ctx-item.disabled:hover { background: transparent; }
.ctx-item .shortcut { color: var(--text-tertiary); font-size: 11px; }
.ctx-item.disabled .shortcut { color: var(--text-very-dim); }
.ctx-sep { height: 1px; background: var(--border-dotted); margin: 4px 0; }

/* =========================================================
   DROP OVERLAY
   ========================================================= */
.drop-overlay {
  position: fixed; inset: 0;
  background: var(--drop-overlay-bg);
  border: 4px dashed var(--accent);
  display: none; align-items: center; justify-content: center;
  font-size: 24px;
  color: var(--accent);
  z-index: 50;
  pointer-events: none;
  font-weight: 700;
}
.drop-overlay.show { display: flex; }

/* =========================================================
   TOAST
   ========================================================= */
.toast {
  position: fixed; bottom: 36px; left: 50%;
  transform: translateX(-50%);
  background: var(--toast-bg);
  color: var(--toast-fg);
  padding: 8px 16px; border-radius: 4px;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.toast.show { opacity: 0.94; }

/* =========================================================
   LOADING OVERLAY
   ========================================================= */
.loading-overlay {
  position: fixed; inset: 0;
  background: var(--modal-overlay);
  display: none;
  align-items: center; justify-content: center;
  z-index: 400;
}
.loading-overlay.show { display: flex; }
.loading-card {
  background: var(--bg-modal);
  color: var(--text-primary);
  padding: 26px 40px;
  border-radius: 8px;
  text-align: center;
  box-shadow: var(--shadow-modal);
  min-width: 280px;
  border: 1px solid var(--border);
}
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: Consolas, monospace;
}

/* =========================================================
   WELCOME / DROP ZONE
   ========================================================= */
.welcome {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--welcome-bg-1) 0%, var(--welcome-bg-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 32px;
  overflow: auto;
}
.welcome.hidden { display: none; }

.welcome-card {
  background: var(--welcome-card-bg);
  border: 2px dashed var(--welcome-card-bd);
  border-radius: 14px;
  padding: 44px 56px;
  text-align: center;
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow-card);
  transition: all 0.22s cubic-bezier(.2,.7,.3,1);
  cursor: pointer;
}
.welcome-card:hover {
  border-color: var(--welcome-card-bd-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.welcome.dragover .welcome-card {
  border-color: var(--welcome-card-bd-drag);
  background: var(--welcome-card-bg-drag);
  box-shadow: var(--shadow-card-drag);
  transform: scale(1.02);
}

.welcome-icon {
  width: 88px; height: 88px;
  margin: 0 auto 18px;
  color: var(--welcome-icon);
  transition: color 0.22s, transform 0.22s;
}
.welcome-card:hover .welcome-icon {
  color: var(--welcome-icon-hover);
  transform: scale(1.05);
}
.welcome.dragover .welcome-icon {
  color: var(--welcome-card-bd-drag);
  animation: float 0.8s ease-in-out infinite alternate;
}
@keyframes float {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}

.welcome h1 {
  margin: 0 0 6px;
  font-size: 22px; font-weight: 700;
  color: var(--welcome-h1);
  letter-spacing: -0.01em;
}
.welcome .subtitle {
  margin: 0 0 22px;
  color: var(--text-tertiary);
  font-size: 13.5px; line-height: 1.55;
}
.welcome .formats {
  font-size: 11px;
  color: var(--text-quaternary);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.welcome-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 8px 0 4px;
}
.welcome-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 11px 26px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow-btn);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.welcome-btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 12px rgba(28,95,181,0.32);
}
.welcome-btn:active { transform: translateY(1px); }
.welcome-btn.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--welcome-card-bd);
  box-shadow: none;
}
.welcome-btn.secondary:hover {
  background: var(--welcome-card-bg-drag);
  border-color: var(--welcome-card-bd-hover);
}

.welcome-tips {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--welcome-divider);
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.9;
  text-align: left;
}
.welcome-tips strong {
  color: var(--welcome-h1);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.welcome-tips kbd {
  background: var(--kbd-bg);
  padding: 2px 7px;
  border: 1px solid var(--kbd-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: Consolas, monospace;
  font-size: 11px;
  color: var(--kbd-fg);
  margin: 0 2px;
}

.welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-top: 8px;
}
.welcome-grid > div { display: flex; align-items: center; gap: 8px; }

/* Welcome backups */
.welcome-backups {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--welcome-divider);
  text-align: left;
}
.welcome-backups-title {
  font-size: 11px; font-weight: 700;
  color: var(--welcome-h1);
  text-transform: uppercase; letter-spacing: 0.06em;
  text-align: center;
  margin: 0 0 12px;
}
.welcome-backups-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding: 2px;
}
.wb-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-button);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.15s;
  overflow: hidden;
}
.wb-item:hover {
  border-color: var(--accent);
  background: var(--bg-hover-btn);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.wb-ext {
  flex: 0 0 auto;
  background: var(--accent);
  color: white;
  font-family: Consolas, monospace;
  font-size: 9px; font-weight: 700;
  padding: 4px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.wb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wb-name {
  font-size: 11.5px; font-weight: 600;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-meta {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: Consolas, monospace;
}

/* =========================================================
   LOGIN — flat design (estilo GitHub / Linear)
   ========================================================= */
body.auth-page {
  background: #0d1117;
  color: #e6edf3;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: auto;
  padding: 24px;
}

.auth-wrap {
  width: 100%;
  max-width: 380px;
}

.auth-brand {
  text-align: center;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.36em;
  color: #e6edf3;
}
.auth-brand span {
  display: block;
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 500;
  color: #6e7681;
  letter-spacing: 0.32em;
}

.auth-card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 24px 24px 22px;
}

.auth-h1 {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 600;
  color: #e6edf3;
  text-align: center;
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid #30363d;
  margin: 0 -24px 22px;
}
.auth-tab {
  flex: 1;
  background: none;
  border: none;
  color: #8b949e;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 0;
  cursor: pointer;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.auth-tab:hover { color: #e6edf3; }
.auth-tab.active {
  color: #e6edf3;
  border-bottom-color: #2f81f7;
}

.auth-form { display: none; }
.auth-form.active { display: block; }

.auth-field { margin-bottom: 14px; }
.auth-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #c9d1d9;
  margin-bottom: 6px;
}
.auth-field input {
  width: 100%;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: #e6edf3;
  font-family: inherit;
  line-height: 20px;
}
.auth-field input::placeholder { color: #484f58; }
.auth-field input:focus {
  outline: none;
  border-color: #2f81f7;
  box-shadow: 0 0 0 3px rgba(47, 129, 247, 0.25);
}

.auth-msg {
  margin: 8px 0 14px;
  min-height: 16px;
  font-size: 12px;
  color: #f85149;
  text-align: center;
  line-height: 1.4;
}
.auth-msg.ok { color: #3fb950; }

.auth-btn {
  width: 100%;
  background: #238636;
  color: white;
  border: 1px solid rgba(240, 246, 252, 0.1);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  line-height: 20px;
  transition: background 0.12s, border-color 0.12s;
}
.auth-btn:hover {
  background: #2ea043;
  border-color: rgba(240, 246, 252, 0.15);
}
.auth-btn:active { background: #1f7a2e; }
.auth-btn:disabled { opacity: 0.55; cursor: wait; }

.auth-foot {
  margin-top: 18px;
  text-align: center;
  font-size: 11px;
  color: #484f58;
}

@media (max-width: 480px) {
  body.auth-page { padding: 16px; }
  .auth-card { padding: 20px; }
  .auth-tabs { margin-left: -20px; margin-right: -20px; }
}

/* =========================================================
   RESPONSIVE EDITOR (index.html)
   ========================================================= */

/* Pantallas medianas: sidebar más estrecha */
@media (max-width: 1280px) {
  .sidebar { width: 270px; }
  .menubar .title { max-width: 180px; }
}

/* Pantallas medianas-pequeñas: oculta título de archivo en toolbar */
@media (max-width: 1140px) {
  .menubar .title { display: none; }
  .sidebar { width: 250px; }
}

/* Tablet: sidebar más compacta + atajos de un sola columna */
@media (max-width: 980px) {
  .sidebar { width: 230px; }
  .panel-body { padding: 6px 10px; }
  .insp-row .val { max-width: 130px; font-size: 11px; }
  .menubar { padding: 3px 4px; }
  .menubar button { padding: 4px 8px; font-size: 11.5px; }
  .menubar label { font-size: 11px; }
}

/* Por debajo de 820px: sidebar oculta + toolbar compacto */
@media (max-width: 820px) {
  .sidebar { display: none; }
  .editor-wrap { border-right: none; }
  .menubar label > span { display: none; }   /* oculta "Bytes/línea:" "Endian:" */
  .menubar select { font-size: 11px; padding: 2px 4px; }
  .menubar .user-menu .user-name { max-width: 80px; }
}

/* Móvil: aún más compacto, oculta separadores y simplifica */
@media (max-width: 620px) {
  .menubar .sep { display: none; }
  .menubar { gap: 1px; }
  .menubar button { padding: 4px 6px; font-size: 11px; }
  .editor-viewport { font-size: 12px; line-height: 18px; }
  .row { height: 18px; }
  .row .offset { width: 70px; padding: 0 4px; font-size: 11px; }
  .editor-header .lbl-off { width: 70px; padding: 0 4px; font-size: 11px; }
  .byte { width: 18px; padding: 0 2px; font-size: 12px; }
  .byte.group-end { padding-right: 6px; width: 22px; }
}

/* Welcome screen adaptive */
@media (max-width: 600px) {
  .welcome { padding: 16px; }
  .welcome-card { padding: 28px 22px; }
  .welcome h1 { font-size: 18px; }
  .welcome .subtitle { font-size: 12.5px; }
  .welcome-actions { flex-direction: column; }
  .welcome-actions .welcome-btn { width: 100%; }
  .welcome-grid { grid-template-columns: 1fr; gap: 6px 12px; }
  .welcome-icon { width: 64px; height: 64px; }
}

/* Status bar — colapsa info menos relevante en móvil */
@media (max-width: 720px) {
  .statusbar { gap: 10px; padding: 0 8px; font-size: 10px; }
}
@media (max-width: 520px) {
  .statusbar > span:nth-child(2),  /* Selección */
  .statusbar > span:nth-child(3) { /* Tamaño */
    display: none;
  }
}

/* =========================================================
   USER MENU + CLOUD PANEL (en index.html)
   ========================================================= */
.menubar .user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  border-left: 1px solid var(--border-toolbar);
  cursor: pointer;
  user-select: none;
}
.menubar .user-menu:hover { background: var(--bg-hover-btn); }
.menubar .user-menu .user-name {
  color: var(--text-primary);
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menubar .user-menu .chev { color: var(--text-tertiary); font-size: 9px; }
.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-ctx);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow: var(--shadow-ctx);
  min-width: 200px;
  display: none;
  z-index: 150;
  margin-top: 2px;
}
.user-dropdown.open { display: block; }
.user-dropdown .item {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-dropdown .item:hover { background: var(--bg-hover-btn); }
.user-dropdown .item.info {
  cursor: default;
  color: var(--text-tertiary);
  font-size: 11px;
  border-bottom: 1px solid var(--border-soft);
  padding: 6px 14px;
}
.user-dropdown .item.info:hover { background: transparent; }

/* Cloud files panel */
.cloud-panel-actions {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.cloud-panel-actions button {
  background: var(--bg-button);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  flex: 1;
}
.cloud-panel-actions button:hover { background: var(--bg-hover-btn); border-color: var(--accent); }
.cloud-panel-actions button.primary {
  background: var(--accent); color: white; border-color: var(--accent); font-weight: 600;
}
.cloud-panel-actions button.primary:hover { background: var(--accent-hover); }

.cloud-list {
  max-height: 420px;
  overflow-y: auto;
  margin-top: 6px;
  padding: 2px;
}

/* Grupos por fecha */
.cloud-group { margin-bottom: 6px; }
.cloud-group:last-child { margin-bottom: 0; }
.cloud-group-header {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px;
  font-family: "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  transition: background 0.12s;
}
.cloud-group-header:hover { background: var(--bg-hover-btn); color: var(--text-primary); }
.cloud-group-header .caret {
  display: inline-block;
  width: 10px;
  font-size: 10px;
  color: var(--text-tertiary);
  transition: transform 0.18s ease;
}
.cloud-group.collapsed .caret { transform: rotate(-90deg); }
.cloud-group-header .group-label { flex: 1; }
.cloud-group-header .group-count {
  background: var(--bg-button);
  color: var(--text-secondary);
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 9.5px;
  font-weight: 700;
  border: 1px solid var(--border);
  letter-spacing: 0;
}

.cloud-group-items {
  overflow: hidden;
  max-height: 1200px;
  opacity: 1;
  transition: max-height 0.25s ease, opacity 0.18s, padding 0.18s;
  padding: 2px 0 4px;
}
.cloud-group.collapsed .cloud-group-items {
  max-height: 0; opacity: 0; padding: 0;
}

/* Item de archivo (doble línea) */
.cloud-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  margin-bottom: 2px;
  font-family: "Segoe UI", sans-serif;
  transition: background 0.1s, border-color 0.1s;
}
.cloud-item:hover {
  background: var(--bg-hover-btn);
  border-color: var(--border);
}
.cloud-item .ci-icon {
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  font-family: Consolas, monospace;
  font-size: 9px;
  font-weight: 700;
  padding: 5px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  min-width: 32px;
  text-align: center;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.cloud-item .ci-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.cloud-item .ci-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.2;
}
.cloud-item .ci-line {
  font-size: 10.5px;
  color: var(--text-tertiary);
  display: flex; gap: 5px;
  font-family: Consolas, monospace;
}
.cloud-item .ci-line .ci-sep { opacity: 0.5; }
.cloud-item .ci-del {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px 7px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.cloud-item:hover .ci-del { opacity: 0.7; }
.cloud-item .ci-del:hover { opacity: 1; background: var(--error); color: white; }

.cloud-empty {
  padding: 16px 8px;
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
  font-family: "Segoe UI", sans-serif;
  font-style: italic;
}

/* Botón "Abrir almacén" debajo de los actions */
.cloud-storage-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--accent-text);
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.cloud-storage-btn:hover {
  background: var(--bg-hover-btn);
  border-color: var(--accent);
  border-style: solid;
}

/* =========================================================
   STORAGE MODAL — Mi Almacén
   ========================================================= */
.storage-modal {
  width: 760px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
}
.storage-header {
  display: flex; align-items: center; justify-content: space-between;
}
.storage-close {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  border-radius: 4px;
  font-family: inherit;
}
.storage-close:hover { background: var(--bg-hover-btn); color: var(--text-primary); }

/* Fila 1: stats + botón "Subir nuevo" */
.storage-meta {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-dotted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: linear-gradient(to bottom, var(--bg-modal-header-top), var(--bg-modal));
}
.storage-stats {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: "Segoe UI", sans-serif;
}
.stats-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.stats-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.stats-lbl {
  font-size: 10.5px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.stats-sep {
  color: var(--border-strong);
  font-size: 18px;
  margin: 0 2px;
}

.storage-new-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.12s, box-shadow 0.18s;
  box-shadow: 0 2px 6px rgba(28,95,181,0.3);
}
.storage-new-btn svg { width: 14px; height: 14px; }
.storage-new-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(28,95,181,0.45);
}

/* Fila 2: búsqueda + ordenación */
.storage-toolbar {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-dotted);
  background: var(--bg-modal-footer);
  display: flex;
  align-items: center;
  gap: 10px;
}
.storage-search {
  position: relative;
  flex: 1;
}
.storage-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--text-tertiary);
  pointer-events: none;
}
/* Selectores específicos para vencer .modal input[type=text] / .modal select */
.modal .storage-search input[type=text] {
  width: 100%;
  flex: none;
  padding: 9px 12px 9px 40px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-primary);
  font-family: inherit;
}
.modal .storage-search input[type=text]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(28,95,181,0.18);
}
.storage-search:focus-within svg { color: var(--accent); }

.modal select.storage-sort {
  flex: none;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 8px 28px 8px 10px;
  font-size: 12px;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  min-width: 160px;
}
.modal select.storage-sort:focus {
  outline: none;
  border-color: var(--accent);
}

.storage-body {
  padding: 8px 12px 12px;
  overflow-y: auto;
  flex: 1;
}

.storage-group { margin-bottom: 14px; }
.storage-group:last-child { margin-bottom: 0; }
.storage-group-header {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px 6px;
  font-family: "Segoe UI", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.storage-group-header span:first-child { flex: 1; }
.storage-group-count {
  background: var(--bg-button);
  color: var(--text-secondary);
  padding: 1px 8px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid var(--border);
  letter-spacing: 0;
}

.storage-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  margin-bottom: 4px;
  font-family: "Segoe UI", sans-serif;
  transition: background 0.1s, border-color 0.1s;
}
.storage-item:hover {
  background: var(--bg-hover-btn);
  border-color: var(--border);
}
.storage-item .si-icon {
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  font-family: Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 7px 8px;
  border-radius: 5px;
  letter-spacing: 0.04em;
  min-width: 38px;
  text-align: center;
  margin-top: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.storage-item .si-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.storage-item .si-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.2;
}
.storage-item .si-desc {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-style: italic;
}
.storage-item .si-desc .dim { color: var(--text-very-dim); font-style: normal; }
.storage-item .si-meta {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-family: Consolas, monospace;
  display: flex; gap: 6px; align-items: center;
}
.storage-item .si-meta .si-sep { opacity: 0.5; }
.storage-item .si-sha { color: var(--text-quaternary); }

.storage-item .si-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s;
  align-self: center;
}
.storage-item:hover .si-actions { opacity: 1; }
.storage-item .si-actions button {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  padding: 6px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.storage-item .si-actions button svg { width: 15px; height: 15px; }
.storage-item .si-actions button:hover {
  background: var(--bg-button);
  border-color: var(--border);
  color: var(--text-primary);
}
.storage-item .si-actions button.danger:hover {
  background: var(--error);
  color: white;
  border-color: var(--error);
}