:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  color: #e7ecf2;
  background: #111419;
  --surface-0: #111419;
  --surface-1: #171b21;
  --surface-2: #1e232b;
  --surface-3: #272d36;
  --border: #303741;
  --border-strong: #414a56;
  --muted: #9ca7b5;
  --text: #e7ecf2;
  --accent: #2684d9;
  --accent-soft: rgba(38, 132, 217, .22);
  --danger: #e05252;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 760px; background: var(--surface-0); }
[hidden] { display: none !important; }
button, input { font: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; color-scheme: light; color: #172033; background: radial-gradient(circle at top, #e8f6ff, #f4f7fb 48%); }
.login-card { width: min(560px, 100%); padding: clamp(2rem, 6vw, 4rem); border: 1px solid #d6e0eb; border-radius: 1rem; background: #fff; box-shadow: 0 20px 60px rgba(7, 27, 61, .12); text-align: center; }
.login-card h1 { margin-top: 1rem; color: #071b3d; letter-spacing: .06em; }
.login-card h2 { margin: .65rem 0; color: #18324f; }
.login-card p { margin: 0 auto 1.75rem; max-width: 42ch; color: #42526a; line-height: 1.6; }
.login-card .eyebrow { color: #1261a0; font-weight: 700; letter-spacing: .08em; font-size: .76rem; }
.login-button { display: inline-block; border-radius: .55rem; padding: .8rem 1.15rem; background: #1261a0; color: #fff; font-weight: 700; text-decoration: none; }
.login-button:hover, .login-button:focus-visible { background: #0c4d82; }

.workspace { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-0); }
.app-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .75rem 1.25rem; border-bottom: 1px solid #26303b; background: #101720; box-shadow: 0 1px 0 rgba(255,255,255,.02); }
.brand-block { min-width: 0; }
.brand-block h1 { margin: .2rem 0 0; overflow: hidden; color: #f4f7fb; font-size: 1.1rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.environment-badge { color: #6bb8f3; font-size: .72rem; font-weight: 750; letter-spacing: .1em; }
.identity { display: grid; justify-items: end; gap: .2rem; color: #c8d0da; font-size: .82rem; }
.identity a { color: #89bfe9; text-decoration: none; }
.identity a:hover { text-decoration: underline; }

.file-manager { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
.command-bar { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem .75rem; border-bottom: 1px solid var(--border); background: var(--surface-1); }
.command-group { min-width: 0; display: flex; align-items: center; gap: .15rem; }
.command-button, .navigation-button { border: 1px solid transparent; border-radius: 3px; color: #dce3eb; background: transparent; cursor: pointer; }
.command-button { min-height: 35px; display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .6rem; font-size: .79rem; white-space: nowrap; }
.command-button:hover:not(:disabled), .navigation-button:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-3); }
.command-button:focus-visible, .navigation-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.command-button:disabled, .navigation-button:disabled { color: #606a76; cursor: default; }
.command-button.danger-command:not(:disabled) { color: #ff8585; }
.command-button.danger-command:hover:not(:disabled) { border-color: rgba(224,82,82,.45); background: rgba(224,82,82,.12); }
.command-separator { width: 1px; height: 25px; margin: 0 .25rem; background: var(--border); }
.search-box { width: min(280px, 25vw); min-width: 190px; display: flex; align-items: center; gap: .45rem; padding: .38rem .65rem; border: 1px solid var(--border); border-radius: 3px; color: var(--muted); background: #12161c; }
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: .8rem; }
.search-box input::placeholder { color: #737f8d; }

.navigation-bar { min-height: 43px; display: flex; align-items: center; gap: .25rem; padding: .35rem .75rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.navigation-button { width: 31px; height: 30px; display: grid; place-items: center; padding: 0; }
.breadcrumb { min-width: 0; flex: 1; display: flex; align-items: center; gap: .15rem; margin-left: .35rem; overflow: hidden; }
.breadcrumb button { max-width: 220px; overflow: hidden; border: 0; border-radius: 3px; padding: .27rem .4rem; color: #d6dde6; background: transparent; cursor: pointer; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb button:hover { color: #fff; background: var(--surface-3); }
.breadcrumb .separator { color: #647180; }
.overwrite-toggle { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .75rem; white-space: nowrap; }
.overwrite-toggle input, .selection-column input, .row-select { accent-color: var(--accent); }

.upload-progress { padding: .55rem .85rem; border-bottom: 1px solid var(--border); background: #151b23; }
.progress-copy { display: flex; justify-content: space-between; margin-bottom: .35rem; color: #bdc7d2; font-size: .76rem; }
.upload-progress progress { width: 100%; height: 5px; border: 0; border-radius: 2px; overflow: hidden; accent-color: var(--accent); }
.message { min-height: 0; margin: 0; padding: 0 .85rem; color: #aeb9c6; background: var(--surface-1); font-size: .78rem; line-height: 0; transition: padding .15s, line-height .15s; }
.message:not(:empty) { padding-top: .45rem; padding-bottom: .45rem; border-bottom: 1px solid var(--border); line-height: 1.25; }
.message.error { color: #ff8c8c; }
.message.success { color: #80d4a5; }

.explorer-panel { position: relative; flex: 1; min-height: 260px; overflow: hidden; background: var(--surface-1); }
.table-scroll { height: 100%; overflow: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
th, td { height: 36px; padding: .35rem .7rem; border-right: 1px solid #282e36; border-bottom: 1px solid #272d35; text-align: left; }
th { position: sticky; top: 0; z-index: 2; height: 34px; color: #abb5c1; background: #20252c; font-size: .72rem; font-weight: 600; }
th:first-child, td:first-child { width: 42px; text-align: center; }
th:nth-child(2) { width: auto; }
th:nth-child(3) { width: 140px; }
th:nth-child(4) { width: 190px; }
th:nth-child(5) { width: 115px; text-align: right; }
td:nth-child(5) { text-align: right; color: #aab4c0; font-variant-numeric: tabular-nums; }
tbody tr { color: #d9e0e8; background: #181c22; user-select: none; }
tbody tr:nth-child(even) { background: #1a1f25; }
tbody tr:hover { background: #222a34; }
tbody tr.selected { background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
tbody tr:focus { outline: 1px solid var(--accent); outline-offset: -1px; }
.name-cell { min-width: 0; display: flex; align-items: center; gap: .55rem; }
.name-cell svg { flex: 0 0 auto; color: #74b8ec; }
.name-cell .folder-icon { color: #e3b341; }
.name-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-cell, .modified-cell { color: #aab4c0; font-size: .78rem; }
.selection-column { padding-left: .6rem; padding-right: .6rem; }
.empty-state { position: absolute; inset: 35px 0 0; display: grid; place-content: center; justify-items: center; gap: .6rem; color: #778391; pointer-events: none; }
.empty-state svg { width: 42px; height: 42px; color: #535e6a; }
.drop-overlay { position: absolute; inset: 34px 0 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: .75rem; border: 2px dashed #4d9bda; color: #dceeff; background: rgba(16, 27, 39, .92); pointer-events: none; }
.drop-overlay svg { width: 42px; height: 42px; color: #64b5f1; }
.status-bar { min-height: 29px; display: flex; align-items: center; gap: 1.5rem; padding: .3rem .8rem; border-top: 1px solid var(--border); color: #8995a3; background: #14181e; font-size: .72rem; }

.modal { width: min(430px, calc(100% - 2rem)); border: 1px solid #3a424d; border-radius: 5px; padding: 1.25rem; color: var(--text); background: #20252c; box-shadow: 0 22px 70px rgba(0,0,0,.55); }
.modal::backdrop { background: rgba(3, 6, 10, .72); }
.modal h2 { margin: 0 0 1rem; font-size: 1rem; }
.modal label, .modal p { color: #bdc6d1; font-size: .84rem; line-height: 1.45; }
.modal input { width: 100%; margin-top: .5rem; padding: .62rem .7rem; border: 1px solid #4a5562; border-radius: 3px; outline: 0; color: #fff; background: #14181e; }
.modal input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.warning-copy { color: #ff9191 !important; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .55rem; margin-top: 1.3rem; }
.dialog-button { border: 1px solid #46515e; border-radius: 3px; padding: .48rem .85rem; color: #e8edf3; background: #2a3038; cursor: pointer; }
.dialog-button.primary { border-color: #2878b9; background: #1769aa; }
.dialog-button.delete-confirm { border-color: #b64141; background: #a83232; }

@media (max-width: 1100px) {
  .command-button span { display: none; }
  .command-button { width: 36px; justify-content: center; padding: .4rem; }
  .search-box { width: 230px; }
}
@media (max-width: 850px) {
  .column-modified, th:nth-child(4), td:nth-child(4) { display: none; }
  .overwrite-toggle span { display: none; }
  .identity { max-width: 260px; }
}