html[data-page="browser"] :is(.quick-actions,.recording-status,.content-frame){display:none}
.browser-page{display:flex;flex-direction:column;min-height:0;flex:1;padding:0 17px var(--page-bottom-space);background:var(--panel);overflow:hidden;position:relative}
.browser-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 2px 19px;flex:none}
.browser-heading h1{font-size:20px;letter-spacing:-.5px;margin:0 0 5px}.browser-heading p{margin:0;color:var(--dim);font-size:11px}.browser-heading-actions{display:flex;gap:7px;align-items:center;flex-shrink:0}.browser-heading-actions button{white-space:nowrap}
.browser-page button{font-size:11px}.browser-page button:focus-visible,.browser-page input:focus-visible,.browser-page select:focus-visible,.browser-page textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.browser-shell{display:grid;grid-template-columns:155px minmax(0,1fr);border:1px solid var(--border);border-radius:18px;background:var(--surface);min-height:0;flex:1;overflow:hidden}
.browser-places{padding:18px 9px;border-right:1px solid var(--border);overflow:auto;background:color-mix(in srgb,var(--panel) 55%,transparent)}
.browser-group-label{font-size:9px;font-weight:600;letter-spacing:1px;color:var(--dim);padding:3px 10px 9px}.browser-group-label:not(:first-child){margin-top:22px}
.browser-location{display:flex;align-items:center;gap:2px;border-radius:9px;margin-bottom:5px;border:1px solid transparent}.browser-location.selected{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 20%,transparent)}
.browser-location-main{border:0!important;box-shadow:none!important;background:none!important;display:flex;align-items:center;gap:7px;min-width:0;flex:1;padding:10px 7px;color:var(--fg);text-align:left}.selected .browser-location-main{color:var(--accent)}.browser-location-icon{font-size:19px;line-height:1}.browser-location-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:10px;font-weight:550}.browser-location-remove{padding:3px 5px;background:none!important;border:0;box-shadow:none;color:var(--dim);opacity:0}.browser-location:hover .browser-location-remove,.browser-location:focus-within .browser-location-remove{opacity:1}.browser-status-dot{width:4px;height:4px;flex:none;border-radius:50%;background:var(--dim)}.browser-status-dot.connected{background:#55a980}.browser-no-servers{font-size:9px;line-height:1.6;color:var(--dim);padding:0 10px}
.browser-content{min-width:0;min-height:0;display:flex;flex-direction:column}.browser-pathbar{display:flex;align-items:center;gap:5px;padding:12px 12px 8px}.browser-pathbar>button{flex:none;padding:5px 8px;border:0;background:none;box-shadow:none;color:var(--dim)}.browser-breadcrumbs{display:flex;gap:4px;align-items:center;min-width:0;overflow:auto;white-space:nowrap}.browser-breadcrumbs button{border:0;box-shadow:none;background:none;padding:5px;color:var(--fg);font-size:11px;font-weight:600}.browser-breadcrumbs>span{color:var(--dim)}
.browser-toolbar{display:flex;gap:5px;align-items:center;padding:5px 14px 13px;border-bottom:1px solid var(--border);flex-wrap:wrap}.browser-toolbar button{padding:6px 9px;border-radius:7px;background:transparent;box-shadow:none}.browser-toolbar input{margin-left:auto;min-width:80px;max-width:170px;width:30%;font-size:10px;padding:7px 9px;border-radius:8px}
.browser-column-head,.browser-file{display:grid;grid-template-columns:minmax(110px,1fr) 76px 54px 132px;gap:8px;align-items:center}.browser-column-head{padding:11px 16px;color:var(--dim);font-size:9px;flex:none}.browser-column-head :nth-child(3),.browser-file-size{text-align:right}.browser-entries{overflow:auto;flex:1;min-height:0;padding:0 7px}.browser-file{border-radius:9px;min-height:47px;padding:2px 9px;border:1px solid transparent}.browser-file:hover,.browser-file:focus-within{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 12%,transparent)}.browser-file-name{display:flex;align-items:center;gap:9px;min-width:0;text-align:left;border:0!important;box-shadow:none!important;background:none!important;color:var(--fg);padding:7px 0}.browser-file-name>span:last-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px}.browser-file-icon{display:grid;place-items:center;width:27px;height:30px;border-radius:6px;font-size:21px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);flex:none}.browser-file-icon.folder{background:none;color:#d8aa64}.browser-file-date,.browser-file-size{font-size:9px;color:var(--dim);white-space:nowrap}.browser-file-actions{display:flex;justify-content:flex-end;gap:3px;opacity:0;pointer-events:none}.browser-file:hover .browser-file-actions,.browser-file:focus-within .browser-file-actions{opacity:1;pointer-events:auto}.browser-file-actions button{font-size:9px;padding:4px;background:transparent;box-shadow:none;border:0}.browser-file-actions .danger,.browser-form-card .danger{color:#d47d82}.browser-footer{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--border);padding:10px 15px;color:var(--dim);font-size:9px;flex:none}
.browser-empty{padding:60px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;color:var(--dim)}.browser-empty-icon{font-size:40px;color:var(--accent);opacity:.6}.browser-empty strong{font-size:12px;color:var(--fg)}.browser-empty p{margin:0;font-size:10px;line-height:1.7;max-width:280px}.browser-empty button{margin-top:4px}.browser-page[aria-busy="true"] .browser-entries{opacity:.65}
.browser-form-overlay,.browser-editor{position:absolute;inset:0;z-index:60;background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:16px}.browser-page [hidden]{display:none!important}.browser-form-card{width:min(390px,100%);max-height:100%;overflow:auto;border:1px solid var(--border);border-radius:19px;background:var(--surface);box-shadow:0 16px 45px var(--shadow);padding:25px}.browser-form-card h2{font-size:19px;margin:0 0 10px}.browser-form-description{color:var(--dim);font-size:11px;line-height:1.7;margin:8px 0 17px}.browser-form-fields{display:flex;flex-direction:column;gap:12px}.browser-field{font-size:10px;color:var(--dim);display:flex;flex-direction:column;gap:6px}.browser-field input,.browser-field select{width:100%;padding:9px 11px;font-size:12px;border-radius:8px;box-sizing:border-box}.browser-form-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.browser-form-footer button{min-width:62px;padding:9px 14px}.browser-page .primary{background:var(--accent);border-color:var(--accent);color:#fff}.browser-form-status{font-size:11px;line-height:1.6;color:#d48b80;margin:12px 0 0}.browser-ftp-warning{font-size:10px;line-height:1.6;color:#c8925a;display:flex;align-items:start;gap:7px}.browser-ftp-warning input{flex:none;width:14px;margin:2px 0}.browser-fingerprint{padding:12px;border:1px solid var(--border);border-radius:9px;font-size:10px}.browser-fingerprint code{display:block;overflow-wrap:anywhere;margin:10px 0;color:var(--accent);user-select:text}.browser-fingerprint p{color:var(--dim);line-height:1.6}
.browser-editor{align-items:stretch;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:16px}.browser-editor-head{display:flex;align-items:center;gap:9px}.browser-editor-head strong{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.browser-editor-head button{padding:8px 13px}.browser-editor textarea{min-height:0;flex:1;resize:none;border:1px solid var(--border);background:var(--panel);padding:16px;border-radius:11px;font:12px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;user-select:text}.browser-editor-status{font-size:10px;color:var(--dim);min-height:14px}
@media(max-width:740px){.browser-shell{grid-template-columns:120px minmax(0,1fr)}.browser-column-head,.browser-file{grid-template-columns:minmax(90px,1fr) 46px 110px}.browser-file-date,.browser-column-head :nth-child(2){display:none}.browser-file-actions button{font-size:8px}.browser-heading-actions button{padding:7px}.browser-toolbar input{max-width:100px}}
@media(prefers-reduced-motion:no-preference){.browser-file,.browser-location{transition:background .15s,border-color .15s}.browser-file-actions{transition:opacity .12s}}

.browser-file-icon svg{width:20px;height:23px;stroke-width:1.5}.browser-file-icon.folder svg{fill:color-mix(in srgb,#d8aa64 14%,transparent);stroke-width:1.4}.browser-location-icon svg{width:17px;height:18px;stroke-width:1.6}.browser-empty-icon svg{width:45px;height:45px;stroke-width:1}
/* This window spans the monitor; responsive layout follows the panel, not viewport width. */
.browser-page{container-type:inline-size}
.browser-page button{border:1px solid var(--border);border-radius:8px;padding:7px 10px;background:var(--surface);color:var(--accent);box-shadow:none;line-height:1.4}
.browser-page button:hover:not(:disabled){background:var(--accent-soft)}
.browser-page button:disabled{cursor:default;opacity:.45}
.browser-add-control{position:relative}.browser-page #browser-add{display:flex;align-items:center;gap:14px;padding:9px 14px;font-weight:600}.browser-add-control svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.browser-add-menu{position:absolute;right:0;top:calc(100% + 7px);z-index:90;min-width:158px;padding:5px;border:1px solid var(--border);border-radius:12px;background:var(--panel);box-shadow:0 10px 30px #0003}.browser-add-menu[hidden]{display:none}.browser-page .browser-add-menu button{display:block;width:100%;text-align:left;background:transparent;box-shadow:none;border:0;border-radius:7px;padding:9px 11px;color:var(--fg)}
.browser-page input,.browser-page select,.browser-page textarea{appearance:none;-webkit-appearance:none;border:1px solid var(--border);background:var(--panel);color:var(--fg);box-shadow:none}
.browser-page input::placeholder{color:var(--dim)}
.browser-column-head,.browser-file{grid-template-columns:minmax(90px,1fr) 70px 54px}
.browser-column-head>span:last-child{display:none}
.browser-file{position:relative}
.browser-file-actions{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:135px}
.browser-file:hover :is(.browser-file-date,.browser-file-size),.browser-file:focus-within :is(.browser-file-date,.browser-file-size){visibility:hidden}
.browser-file-actions button{font-size:9px;padding:4px;border:0;background:none}
.browser-location-main{padding:10px 7px!important}.browser-location-remove{padding:3px 5px!important;border:0!important;color:var(--dim)!important}
.browser-pathbar>button,.browser-breadcrumbs button{border:0;background:none;padding:5px;color:var(--dim)}.browser-breadcrumbs button{color:var(--fg)}
.browser-heading-actions>button{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 18%,var(--border))}
.browser-toolbar input{margin-left:auto;width:125px;max-width:100%;min-width:70px}
@container(max-width:520px){.browser-shell{grid-template-columns:125px minmax(0,1fr)}.browser-heading-actions{gap:5px}.browser-heading-actions>button{font-size:10px;padding:7px}.browser-column-head,.browser-file{grid-template-columns:minmax(65px,1fr) 48px}.browser-file-date,.browser-column-head>span:nth-child(2){display:none}.browser-file-actions{width:auto;gap:2px}.browser-file:hover .browser-file-name,.browser-file:focus-within .browser-file-name{max-width:calc(100% - 75px)}.browser-toolbar{gap:5px;padding-inline:10px}.browser-toolbar button{font-size:10px;padding:6px}.browser-toolbar input{width:110px}.browser-file-size{grid-column:2}}

.browser-page .browser-file-name{padding:7px 0}

.browser-page .browser-file-name{color:var(--fg)}.browser-location-main{color:var(--muted)!important}.browser-location.selected .browser-location-main{color:var(--accent)!important}
/* Folder and connection overview mirrors the Favorite apps shelf. */
.browser-heading{margin-bottom:18px;padding:0 0 0;min-height:43px}.browser-heading h1{font-size:18px}.browser-heading p{font-size:11px;color:var(--muted)}
.browser-locations{padding:3px 3px 16px}.browser-page .browser-location-card{position:relative;min-height:128px;padding:17px 10px;gap:12px;border:1px solid var(--border);border-radius:17px;background:var(--surface);color:var(--fg);text-align:center}
.browser-page .browser-location-card:hover{background:var(--accent-soft);transform:translateY(-2px);box-shadow:0 6px 16px var(--shadow)}
/* The LAN inbox entry is fixed before the sortable locations. */
.browser-page .browser-inbox-card{position:relative;min-height:128px;padding:17px 10px;gap:12px;border:1px solid var(--border);border-radius:17px;background:var(--surface);color:var(--fg);text-align:center}
.browser-page .browser-inbox-card:hover{background:var(--accent-soft);transform:translateY(-2px);box-shadow:0 6px 16px var(--shadow)}
.browser-page .browser-inbox-card .browser-tile-icon{color:var(--accent)}
.browser-tile-icon{display:grid;place-items:center;width:47px;height:47px;color:var(--muted)}.browser-tile-icon svg{width:45px;height:43px;stroke-width:1.35;fill:color-mix(in srgb,var(--muted) 8%,transparent)}
.browser-protocol-badge{position:absolute;right:10px;bottom:9px;font-size:8px;line-height:1;font-weight:650;letter-spacing:.4px;color:var(--dim);padding:4px 5px;border:1px solid var(--border);border-radius:5px;background:var(--panel)}
.browser-tile-status{position:absolute;left:12px;bottom:14px;width:4px;height:4px;border-radius:50%;background:var(--dim)}.browser-tile-status.connected{background:#6fa78b}