#panel-zip .frow { grid-template-columns: 20px 1fr max-content 24px 24px; }
#panel-zip .frow .ico { line-height: 0; }
#panel-zip .frow.dirrow .ico { color: var(--hl); }
.rowbtn { background: none; border: none; padding: 3px; color: var(--fg-muted); cursor: pointer; line-height: 0; border-radius: 3px; }
.rowbtn:hover { color: var(--hl); }
.rowbtn.x:hover { color: var(--accent); }
.rowbtn:focus-visible { outline: 1px solid var(--hl); }
.frow .rename { width: 100%; background: var(--bg); border: 1px solid var(--hl); border-radius: 3px; color: var(--fg); font: inherit; font-size: 13px; padding: 2px 6px; }
.frow .rename:focus { outline: none; }
.opts { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; }
.opt { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-dim); }
.opt select, .opt input { background: var(--bg-2); border: 1px solid var(--rule); border-radius: 3px; color: var(--fg); font: inherit; font-size: 12px; padding: 7px 8px; }
.opt select:focus, .opt input:focus { outline: none; border-color: var(--hl); }
.opt select:disabled { opacity: 0.5; }
.opt input[type=number] { width: 84px; }
.opt input[hidden] { display: none; }
.editnote { margin: 14px 0 0; font-size: 12px; color: var(--fg-dim); border: 1px solid var(--rule); border-left: 2px solid var(--hl); border-radius: 3px; background: var(--bg-2); padding: 7px 11px; }
.editnote[hidden], .parts[hidden], #zip-legacy-wrap[hidden], #zip-encnames-wrap[hidden] { display: none; }
#zip-legacy-wrap, #zip-encnames-wrap { margin-top: 10px; }
.parts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; }
.parts a { color: var(--link); }
#in-zip-edit { display: none; }
#status-zip .mini { margin-left: 6px; }
#status-zip .mini { background: none; border: 1px solid var(--rule); border-radius: 3px; color: var(--hl); font: inherit; font-size: 12px; padding: 3px 9px; cursor: pointer; }
#status-zip .mini:hover { border-color: var(--hl); }
.arc-editor[hidden] { display: none; }
.arc-editor-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.arc-editor-bar .arc-back { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--rule); border-radius: 3px; color: var(--fg-dim); font: inherit; font-size: 12px; padding: 6px 12px; cursor: pointer; }
.arc-editor-bar .arc-back:hover { color: var(--hl); border-color: var(--hl); }
.arc-editor-bar .arc-back svg { flex: none; }
.arc-editor-bar .arc-editor-title { font-size: 12px; color: var(--fg-muted); }
.arc-editor #panel-zip .drop .small a { color: var(--hl); text-decoration: underline; cursor: pointer; }
.arc-editor #panel-zip .drop .small a:hover { text-decoration: none; }
.arc-editor #panel-zip .files-head .clear { cursor: pointer; background: transparent; border: 1px solid var(--rule); border-radius: 3px; color: var(--fg-dim); font: inherit; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; }
.arc-editor #panel-zip .files-head .clear:hover { color: var(--hl); border-color: var(--hl); }
.arc-editor #panel-zip .frow.draggable { cursor: grab; }
.arc-editor #panel-zip .frow.in-dir { margin-left: 26px; }
.arc-editor #panel-zip .frow.dirrow { background: var(--bg-3); border-left: 2px solid var(--hl); }
.arc-editor #panel-zip .frow.dirrow .fn { font-weight: 600; }
.arc-editor #panel-zip .frow.dirrow .cnt { color: var(--fg-muted); font-size: 11px; }
.arc-editor #panel-zip .frow.dirrow .add { cursor: pointer; color: var(--fg-muted); font-size: 11px; border: none; background: none; font-family: inherit; padding: 0; }
.arc-editor #panel-zip .frow.dirrow .add:hover { color: var(--hl); }
.arc-editor #panel-zip .frow.drop-ok { border-color: var(--hl); background: var(--bg-3); }
.arc-editor #panel-zip .toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 10px; }
.arc-editor #panel-zip .toolbar .mini { background: transparent; border: 1px solid var(--rule); border-radius: 3px; color: var(--fg-dim); font: inherit; font-size: 12px; padding: 6px 12px; cursor: pointer; }
.arc-editor #panel-zip .toolbar .mini:hover { color: var(--hl); border-color: var(--hl); }
.arc-editor #panel-zip .toolbar .newdir-field { display: none; align-items: center; gap: 6px; }
.arc-editor #panel-zip .toolbar .newdir-field.show { display: inline-flex; }
.arc-editor #panel-zip .toolbar .newdir-field input { background: var(--bg); border: 1px solid var(--rule); border-radius: 3px; outline: none; color: var(--fg); font: inherit; font-size: 12px; padding: 6px 10px; width: 150px; }
.arc-editor #panel-zip .toolbar .newdir-field input:focus { border-color: var(--hl); }
.arc-editor #panel-zip .check { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-dim); cursor: pointer; user-select: none; }
.arc-editor #panel-zip .check input { accent-color: var(--hl); margin: 0; }
.arc-editor #panel-zip .btn { background: var(--hl); color: var(--bg); border: 1px solid var(--hl); font: inherit; font-size: 14px; font-weight: 600; padding: 10px 22px; border-radius: 4px; cursor: pointer; display: inline-block; text-decoration: none; }
.arc-editor #panel-zip .btn:hover { background: var(--accent); border-color: var(--accent); }
.arc-editor #panel-zip .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.arc-editor #panel-zip .btn.ready { background: var(--ok); border-color: var(--ok); color: #10230c; }
.arc-editor #panel-zip .btn.ready:hover { background: #6fd162; border-color: #6fd162; }
.arc-editor #panel-zip .btn[hidden] { display: none; }
.arc-editor #panel-zip .name-field { display: flex; align-items: center; gap: 0; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: var(--bg); }
.arc-editor #panel-zip .name-field input { background: transparent; border: none; outline: none; color: var(--fg); font: inherit; font-size: 13px; padding: 9px 4px 9px 12px; width: 160px; }
.arc-editor #panel-zip .name-field .ext { color: var(--fg-muted); font-size: 13px; padding-right: 12px; }
.arc-editor #panel-zip .name-field.pw input { width: 190px; padding-right: 4px; }
.arc-editor #panel-zip .name-field .reveal { background: transparent; border: none; cursor: pointer; color: var(--fg-muted); font: inherit; font-size: 14px; padding: 0 10px 0 4px; line-height: 1; }
.arc-editor #panel-zip .name-field .reveal:hover, .arc-editor #panel-zip .name-field .reveal.on { color: var(--hl); }
.arc-editor #panel-zip .pwhint { color: var(--fg-muted); font-size: 12px; margin: 10px 0 0; max-width: 640px; text-wrap: pretty; }
.arc-editor #panel-zip .pwhint strong { color: var(--fg-dim); }
@media (max-width: 600px) {
  .arc-editor #panel-zip .name-field input { width: 100%; }
  .arc-editor #panel-zip .btn { width: 100%; }
}