/* Drive: a content-first workspace library beneath the PowerAI shell. */

.drive-main {
  --dv-bg: #f4f5f1;
  --dv-rail: #eaede7;
  --dv-surface: #fbfcf9;
  --dv-surface-strong: #ffffff;
  --dv-ink: #202620;
  --dv-muted: #6c756d;
  --dv-faint: #919990;
  --dv-line: #dce0d9;
  --dv-line-soft: #e9ece6;
  --dv-accent: #315f57;
  --dv-accent-strong: #244c45;
  --dv-accent-soft: #dceae5;
  --dv-lime: #d9f56f;
  --dv-danger: #a4423d;
  height: calc(100vh - 56px);
  min-width: 0;
  overflow: hidden;
  background: var(--dv-bg);
  color: var(--dv-ink);
}

.drive-main *,
.drive-main *::before,
.drive-main *::after { box-sizing: border-box; }

.drive-main button,
.drive-main input,
.drive-main textarea,
.drive-main select { font: inherit; }

.drive-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.drive-icon .drive-icon-fill { fill: currentColor; stroke: currentColor; }

.drive-shell {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr);
  overflow: hidden;
}

/* App-local navigator */

.drive-sidebar {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: 16px 12px 12px;
  border-right: 1px solid var(--dv-line);
  background: var(--dv-rail);
}

.drive-sidebar-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px 15px;
}

.drive-app-mark {
  width: 35px;
  height: 35px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  background: #d9e8e2;
  color: var(--dv-accent);
}

.drive-app-mark .drive-icon { width: 19px; height: 19px; }
.drive-sidebar-head > span:last-child { min-width: 0; display: grid; gap: 1px; }
.drive-sidebar-head strong { font-size: 13.5px; font-weight: 750; letter-spacing: -.02em; }
.drive-sidebar-head small { color: var(--dv-muted); font-size: 10px; }

.drive-create-wrap { position: relative; margin: 0 3px 18px; }

.drive-create-button {
  width: 100%;
  height: 39px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--dv-ink);
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(27, 35, 29, .13);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.drive-create-button:hover { background: var(--dv-accent); transform: translateY(-1px); box-shadow: 0 9px 24px rgba(27, 35, 29, .16); }
.drive-create-button span { font-size: 12px; font-weight: 700; }
.drive-create-button .drive-icon:last-child { width: 14px; height: 14px; }

.drive-create-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 7px);
  left: 0;
  width: 100%;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid #d4d9d1;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(26, 34, 28, .16);
}

.drive-create-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--dv-ink);
  text-align: left;
  cursor: pointer;
}

.drive-create-menu button:hover { background: #edf2ee; }
.drive-create-menu span { font-size: 11.5px; font-weight: 650; }
.drive-create-menu .drive-icon { width: 16px; height: 16px; color: var(--dv-accent); }

.drive-nav { min-height: 0; display: flex; flex-direction: column; gap: 2px; }
.drive-nav-label { padding: 0 10px 7px; color: var(--dv-faint); font-size: 9px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }

.drive-nav-item {
  width: 100%;
  min-width: 0;
  height: 37px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #687169;
  text-align: left;
  cursor: pointer;
  transition: color .14s ease, background .14s ease;
}

.drive-nav-item:hover { background: rgba(255, 255, 255, .56); color: var(--dv-ink); }
.drive-nav-item.active { background: #fff; color: var(--dv-ink); box-shadow: 0 1px 2px rgba(24, 31, 26, .04); }
.drive-nav-icon { color: #7b857d; }
.drive-nav-item.active .drive-nav-icon { color: var(--dv-accent); }
.drive-nav-icon .drive-icon { width: 17px; height: 17px; }
.drive-nav-item strong { overflow: hidden; font-size: 11.5px; font-weight: 640; text-overflow: ellipsis; white-space: nowrap; }

.drive-sidebar-foot { display: grid; gap: 9px; padding-top: 10px; border-top: 1px solid #d8ddd5; }

.drive-review-link {
  min-width: 0;
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 10px;
  border: 1px solid #d8ded6;
  border-radius: 10px;
  background: rgba(255, 255, 255, .42);
  color: var(--dv-muted);
  text-align: left;
  cursor: pointer;
}

.drive-review-link:hover { border-color: #b8c7bd; background: rgba(255, 255, 255, .78); color: var(--dv-ink); }
.drive-review-link .drive-icon { width: 17px; height: 17px; margin-top: 1px; color: var(--dv-accent); }
.drive-review-link span { min-width: 0; display: grid; gap: 2px; }
.drive-review-link strong { font-size: 10.5px; font-weight: 690; }
.drive-review-link small { color: var(--dv-faint); font-size: 8.5px; line-height: 1.35; }

/* Workspace header and controls */

.drive-workspace { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--dv-bg); }
.drive-content { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }

.drive-notice {
  position: absolute;
  z-index: 45;
  top: 14px;
  right: 18px;
  max-width: 440px;
  padding: 10px 13px;
  border: 1px solid #e3bbb7;
  border-radius: 9px;
  background: #fff5f3;
  color: #833c38;
  font-size: 11px;
  box-shadow: 0 10px 30px rgba(67, 28, 25, .12);
}

.drive-header {
  position: relative;
  z-index: 12;
  display: grid;
  gap: 13px;
  padding: 22px 26px 13px;
  border-bottom: 1px solid var(--dv-line);
  background: rgba(250, 251, 248, .9);
  backdrop-filter: blur(16px);
}

.drive-heading-row,
.drive-control-row { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.drive-title-block { min-width: 0; display: grid; gap: 3px; }

.drive-breadcrumbs { min-width: 0; display: flex; align-items: center; gap: 6px; }
.drive-breadcrumbs .drive-icon { width: 13px; height: 13px; color: #9ba29b; }
.drive-breadcrumbs button { max-width: 180px; overflow: hidden; padding: 2px 0; border: 0; background: transparent; color: var(--dv-muted); font-size: 15px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.drive-breadcrumbs button:hover { color: var(--dv-accent); }
.drive-breadcrumbs h2 { overflow: hidden; margin: 0; color: var(--dv-ink); font-size: 22px; font-weight: 760; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.drive-title-block > span { color: var(--dv-muted); font-size: 10.5px; }

.drive-primary-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }

.drive-command {
  min-height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid #d5dad3;
  border-radius: 9px;
  background: #fff;
  color: #38413a;
  font-size: 10.5px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease, transform .14s ease;
}

.drive-command:hover { border-color: #aeb9af; background: #f7f9f6; color: var(--dv-ink); transform: translateY(-1px); }
.drive-command.primary { border-color: var(--dv-accent); background: var(--dv-accent); color: #fff; }
.drive-command.primary:hover { border-color: var(--dv-accent-strong); background: var(--dv-accent-strong); }
.drive-command.danger { border-color: #d7aaa7; color: var(--dv-danger); }
.drive-command .drive-icon { width: 15px; height: 15px; }

.drive-search {
  width: min(520px, 50vw);
  height: 37px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 7px 0 11px;
  border: 1px solid #d7dcd5;
  border-radius: 10px;
  background: #f2f4f0;
  color: #818a82;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.drive-search:focus-within { border-color: #91aaa1; background: #fff; box-shadow: 0 0 0 3px rgba(49, 95, 87, .07); }
.drive-search > .drive-icon { width: 16px; height: 16px; }
.drive-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--dv-ink); font-size: 11px; }
.drive-search input::placeholder { color: #8b938c; }
.drive-search kbd { padding: 2px 5px; border: 1px solid #d7dcd5; border-radius: 5px; background: #fafbf9; color: #929991; font-size: 8.5px; line-height: 1.2; }
.drive-search button { width: 24px; height: 24px; display: grid; padding: 0; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--dv-muted); cursor: pointer; }
.drive-search button:hover { background: #e8ebe6; color: var(--dv-ink); }
.drive-search button .drive-icon { width: 13px; height: 13px; }

.drive-toolbar { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.drive-sort { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 10px; border: 1px solid #d9ddd6; border-radius: 9px; background: #fff; color: var(--dv-muted); }
.drive-sort span { font-size: 9px; }
.drive-sort select { padding: 0 20px 0 0; border: 0; outline: 0; background: transparent; color: var(--dv-ink); font-size: 10px; font-weight: 650; cursor: pointer; }

.drive-view-switch { height: 34px; display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid #d9ddd6; border-radius: 9px; background: #fff; }
.drive-icon-button { width: 27px; height: 27px; display: grid; padding: 0; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #7b847c; cursor: pointer; }
.drive-icon-button:hover { background: #eef1ec; color: var(--dv-ink); }
.drive-icon-button.active { background: #e1e9e4; color: var(--dv-accent); }
.drive-icon-button .drive-icon { width: 15px; height: 15px; }

/* Selection toolbar */

.drive-selection-bar {
  min-width: 0;
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 7px 6px 9px;
  border: 1px solid #c8d8d0;
  border-radius: 10px;
  background: #e8f0ec;
}

.drive-selection-name { min-width: 140px; display: flex; align-items: center; gap: 7px; }
.drive-selection-name > button { width: 27px; height: 27px; display: grid; flex: 0 0 auto; padding: 0; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--dv-muted); cursor: pointer; }
.drive-selection-name > button:hover { background: rgba(255,255,255,.72); color: var(--dv-ink); }
.drive-selection-name > button .drive-icon { width: 13px; height: 13px; }
.drive-selection-name span { min-width: 0; display: grid; gap: 0; }
.drive-selection-name small { color: #718079; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.drive-selection-name strong { max-width: 220px; overflow: hidden; font-size: 10.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.drive-selection-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.drive-selection-actions::-webkit-scrollbar { display: none; }
.drive-selection-actions button,
.drive-selection-actions a { height: 29px; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: #3d4a43; font-size: 9.5px; font-weight: 620; text-decoration: none; cursor: pointer; }
.drive-selection-actions button:hover,
.drive-selection-actions a:hover { background: rgba(255, 255, 255, .8); color: var(--dv-ink); }
.drive-selection-actions .drive-icon { width: 14px; height: 14px; }
.drive-selection-actions .active { background: #fff; color: var(--dv-accent); }
.drive-selection-actions .danger { color: var(--dv-danger); }

/* Browser and file views */

.drive-browser { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.drive-browser.details-open { grid-template-columns: minmax(0, 1fr) 288px; }
.drive-items-panel { min-width: 0; min-height: 0; overflow: auto; padding: 18px 26px 42px; scrollbar-width: thin; scrollbar-color: #c8cec6 transparent; }

.drive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 12px; align-content: start; }

.drive-tile {
  position: relative;
  min-width: 0;
  height: 190px;
  display: grid;
  grid-template-rows: 32px minmax(0, 1fr);
  overflow: visible;
  border: 1px solid var(--dv-line);
  border-radius: 13px;
  background: var(--dv-surface);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.drive-tile:hover { border-color: #c3cbc2; box-shadow: 0 8px 22px rgba(31, 39, 33, .07); transform: translateY(-1px); }
.drive-tile.selected { border-color: #7fa397; box-shadow: 0 0 0 2px rgba(49, 95, 87, .11), 0 9px 24px rgba(31, 39, 33, .08); }
.drive-tile-topline { display: flex; align-items: center; gap: 4px; padding: 6px 7px 0; }
.drive-tile-topline .drive-favorite-mark { margin-left: auto; }
.drive-tile-topline .drive-more-button { margin-left: auto; }
.drive-tile-topline .drive-favorite-mark + .drive-more-button { margin-left: 1px; }

.drive-select-control {
  width: 20px;
  height: 20px;
  display: grid;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  border: 1px solid #c8cec7;
  border-radius: 6px;
  background: #fff;
  color: #fff;
  cursor: pointer;
}

.drive-select-control:hover { border-color: #7d998f; }
.selected > .drive-select-control,
.selected .drive-select-control { border-color: var(--dv-accent); background: var(--dv-accent); }
.drive-select-control .drive-icon { width: 13px; height: 13px; stroke-width: 2.1; }

.drive-favorite-mark { display: inline-flex; color: #829c31; }
.drive-favorite-mark .drive-icon { width: 14px; height: 14px; }

.drive-more-button { width: 24px; height: 24px; display: grid; padding: 0; place-items: center; border: 0; border-radius: 6px; background: transparent; color: #818a82; cursor: pointer; }
.drive-more-button:hover { background: #e9ede8; color: var(--dv-ink); }
.drive-more-button .drive-icon { width: 16px; height: 16px; }

.drive-tile-main { min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; padding: 2px 10px 12px; border: 0; border-radius: 0 0 13px 13px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.drive-item-copy { min-width: 0; display: grid; gap: 2px; padding: 0 2px; }
.drive-item-copy strong { overflow: hidden; font-size: 11px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.drive-item-copy small { overflow: hidden; color: var(--dv-muted); font-size: 8.8px; text-overflow: ellipsis; white-space: nowrap; }

.drive-folder-art,
.drive-file-art { width: 100%; height: 100%; min-height: 92px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; }
.drive-folder-art { background: #edf0e8; color: #b3ca52; }
.drive-folder-art .drive-icon { width: 54px; height: 54px; stroke-width: 1.25; }
.drive-file-art { position: relative; grid-template-rows: 1fr auto; gap: 3px; padding: 18px 8px 10px; background: #e7ece8; color: #4f665d; }
.drive-file-art.document { background: #e8edef; color: #556c75; }
.drive-file-art.media { background: #eee9f0; color: #725f78; }
.drive-file-art > .drive-icon { width: 34px; height: 34px; stroke-width: 1.35; }
.drive-file-art > span { font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.drive-image-thumb { display: block; padding: 0; background: #e6ebe7; }
.drive-image-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.drive-image-thumb > span { position: absolute; right: 6px; bottom: 6px; padding: 3px 5px; border-radius: 5px; background: rgba(24, 31, 27, .72); color: #fff; font-size: 6.5px; backdrop-filter: blur(6px); }

.drive-folder-art.small,
.drive-file-art.small { width: 32px; height: 32px; min-height: 0; flex: 0 0 auto; border-radius: 7px; }
.drive-folder-art.small .drive-icon { width: 19px; height: 19px; }
.drive-file-art.small { padding: 0; grid-template-rows: 1fr; }
.drive-file-art.small > .drive-icon { width: 17px; height: 17px; }
.drive-file-art.small > span { display: none; }

.drive-list { min-width: 740px; border: 1px solid var(--dv-line); border-radius: 11px; background: var(--dv-surface); }
.drive-list-head,
.drive-row { display: grid; grid-template-columns: 32px minmax(240px, 1.7fr) minmax(125px, .8fr) minmax(115px, .7fr) 80px 70px; align-items: center; column-gap: 9px; padding: 0 10px; }
.drive-list-head { position: sticky; z-index: 5; top: -18px; height: 38px; border-bottom: 1px solid var(--dv-line); border-radius: 11px 11px 0 0; background: #f4f6f2; color: #7f887f; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.drive-row { min-height: 53px; border-bottom: 1px solid var(--dv-line-soft); transition: background .13s ease; }
.drive-row:last-child { border-bottom: 0; }
.drive-row:hover { background: #f5f7f4; }
.drive-row.selected { background: #e7efeb; box-shadow: inset 3px 0 var(--dv-accent); }
.drive-row-main { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.drive-row-main > span:last-child { min-width: 0; display: grid; gap: 2px; }
.drive-row-main strong { overflow: hidden; font-size: 10.5px; font-weight: 670; text-overflow: ellipsis; white-space: nowrap; }
.drive-row-main small { overflow: hidden; color: var(--dv-muted); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.drive-cell { overflow: hidden; color: var(--dv-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.drive-menu-wrap { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 2px; }

.drive-item-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 4px);
  right: 0;
  width: 205px;
  display: grid;
  gap: 1px;
  padding: 6px;
  border: 1px solid #d5dad3;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 17px 44px rgba(25, 32, 27, .17);
}

.drive-tile .drive-item-menu { top: 2px; right: 6px; }
.drive-item-menu button,
.drive-item-menu a { min-height: 31px; display: flex; align-items: center; gap: 9px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: #3b463f; font-size: 10px; font-weight: 590; text-align: left; text-decoration: none; cursor: pointer; }
.drive-item-menu button:hover,
.drive-item-menu a:hover { background: #eef2ee; color: var(--dv-ink); }
.drive-item-menu .drive-icon { width: 15px; height: 15px; color: #748078; }
.drive-item-menu .danger { color: var(--dv-danger); }
.drive-item-menu .danger .drive-icon { color: var(--dv-danger); }
.drive-menu-separator { height: 1px; margin: 4px 6px; background: var(--dv-line-soft); }

/* Inspector */

.drive-details { min-width: 0; min-height: 0; overflow-y: auto; border-left: 1px solid var(--dv-line); background: #f9faf7; scrollbar-width: thin; }
.drive-details-card { min-height: 100%; padding: 17px 17px 30px; }
.drive-inspector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.drive-inspector-head > div { min-width: 0; display: grid; gap: 2px; }
.drive-inspector-head span { color: var(--dv-faint); font-size: 8px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.drive-inspector-head strong { overflow: hidden; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.drive-inspector-head button { width: 27px; height: 27px; display: grid; flex: 0 0 auto; padding: 0; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--dv-muted); cursor: pointer; }
.drive-inspector-head button:hover { background: #e9ede7; color: var(--dv-ink); }
.drive-inspector-head button .drive-icon { width: 13px; height: 13px; }

.drive-preview { height: 164px; display: grid; margin-bottom: 13px; overflow: hidden; border: 1px solid var(--dv-line); border-radius: 11px; background: #eef1ec; }
.drive-preview .drive-folder-art,
.drive-preview .drive-file-art { min-height: 0; border-radius: 0; }
.drive-inspector-title { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.drive-kind-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 6px; background: #e8ece7; color: #59655d; font-size: 7.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.drive-kind-badge.favorite { background: #eef2d8; color: #687d27; }
.drive-kind-badge .drive-icon { width: 10px; height: 10px; }
.drive-details-card h3 { margin: 0; overflow-wrap: anywhere; font-size: 17px; font-weight: 740; letter-spacing: -.03em; line-height: 1.2; }
.drive-description { margin: 8px 0 0; color: #5d6860; font-size: 9.5px; line-height: 1.55; }
.drive-description.muted { color: #969d96; }
.drive-inspector-actions { display: flex; gap: 5px; margin: 12px 0 10px; }
.drive-inspector-actions button { min-height: 29px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid var(--dv-line); border-radius: 7px; background: #fff; color: #4a564e; font-size: 8.5px; font-weight: 620; cursor: pointer; }
.drive-inspector-actions button:hover { border-color: #aebdb3; color: var(--dv-accent); }
.drive-inspector-actions .drive-icon { width: 13px; height: 13px; }
.drive-tag-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; }
.drive-tag { display: inline-flex; margin: 0 3px 3px 0; padding: 4px 6px; border-radius: 6px; background: var(--dv-accent-soft); color: var(--dv-accent-strong); font-size: 7.5px; font-weight: 650; }

.drive-details-card dl { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 0; margin: 15px 0 0; border-top: 1px solid var(--dv-line); }
.drive-details-card dt,
.drive-details-card dd { min-width: 0; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--dv-line-soft); font-size: 8.5px; }
.drive-details-card dt { color: var(--dv-faint); }
.drive-details-card dd { color: #4e5951; overflow-wrap: anywhere; }
.drive-details-card code { padding: 2px 4px; border-radius: 4px; background: #ecefeb; font: 7.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.drive-metadata-list { display: grid; gap: 5px; }
.drive-metadata-list div { display: grid; gap: 1px; }
.drive-metadata-list span { color: var(--dv-faint); font-size: 7px; }
.drive-metadata-list strong { font-size: 8px; font-weight: 600; overflow-wrap: anywhere; }

/* Empty, loading, upload, and drag states */

.drive-empty { min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.drive-empty-icon { width: 55px; height: 55px; display: grid; margin-bottom: 15px; place-items: center; border-radius: 18px; background: #e5ebe6; color: var(--dv-accent); }
.drive-empty-icon .drive-icon { width: 26px; height: 26px; }
.drive-empty strong { font-size: 15px; font-weight: 720; letter-spacing: -.02em; }
.drive-empty p { max-width: 380px; margin: 7px 0 16px; color: var(--dv-muted); font-size: 10px; line-height: 1.55; }
.drive-empty > div { display: flex; gap: 7px; }

.drive-loading { min-height: 360px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.drive-loading span { width: 6px; height: 6px; border-radius: 50%; background: var(--dv-accent); animation: drive-pulse 1s infinite ease-in-out; }
.drive-loading span:nth-child(2) { animation-delay: .12s; }
.drive-loading span:nth-child(3) { animation-delay: .24s; }
@keyframes drive-pulse { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

.drive-drop-overlay { position: absolute; z-index: 70; inset: 12px; display: none; place-items: center; border: 2px dashed #6e9b8b; border-radius: 16px; background: rgba(234, 243, 238, .93); color: var(--dv-accent); pointer-events: none; }
.drive-workspace.drag-active .drive-drop-overlay { display: grid; }
.drive-drop-overlay > div { display: grid; gap: 4px; text-align: center; }
.drive-drop-overlay strong { font-size: 17px; }
.drive-drop-overlay span { color: var(--dv-muted); font-size: 10px; }

.drive-upload-status { position: absolute; z-index: 60; right: 20px; bottom: 18px; max-width: 480px; display: flex; align-items: center; gap: 9px; padding: 9px 10px 9px 9px; border: 1px solid #bdd0c5; border-radius: 11px; background: #f7fbf8; color: var(--dv-ink); box-shadow: 0 14px 38px rgba(27, 38, 31, .15); }
.drive-upload-status > span { width: 26px; height: 26px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 8px; background: var(--dv-accent-soft); color: var(--dv-accent); }
.drive-upload-status > span .drive-icon { width: 15px; height: 15px; }
.drive-upload-status strong { min-width: 0; font-size: 9.5px; font-weight: 620; }
.drive-upload-status button { flex: 0 0 auto; padding: 5px 7px; border: 0; border-radius: 6px; background: var(--dv-accent); color: #fff; font-size: 8.5px; font-weight: 700; cursor: pointer; }

/* Modals and viewer */

.drive-modal-backdrop { position: fixed; z-index: 250; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(24, 30, 26, .38); backdrop-filter: blur(7px); }
.drive-modal { width: min(450px, 100%); overflow: hidden; border: 1px solid rgba(255,255,255,.65); border-radius: 16px; background: #fbfcf9; box-shadow: 0 28px 80px rgba(19, 25, 21, .3); }
.drive-modal > header { display: grid; grid-template-columns: 38px minmax(0, 1fr) 29px; align-items: center; gap: 10px; padding: 16px 17px 12px; }
.drive-modal-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--dv-accent-soft); color: var(--dv-accent); }
.drive-modal-mark.danger { background: #f1dfdc; color: var(--dv-danger); }
.drive-modal-mark .drive-icon { width: 18px; height: 18px; }
.drive-modal header > div { min-width: 0; display: grid; gap: 1px; }
.drive-modal header small { color: var(--dv-faint); font-size: 8px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.drive-modal h3 { overflow: hidden; margin: 0; font-size: 15px; font-weight: 730; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.drive-modal header > .drive-icon-button { justify-self: end; }
.drive-modal > p { margin: 4px 17px 16px; color: var(--dv-muted); font-size: 10.5px; line-height: 1.55; }
.drive-modal form { display: grid; gap: 13px; padding: 5px 17px 17px; }
.drive-modal label { display: grid; gap: 6px; color: #4c5750; font-size: 9.5px; font-weight: 650; }
.drive-modal label > small { color: var(--dv-faint); font-size: 8px; font-weight: 500; }
.drive-modal input,
.drive-modal textarea,
.drive-modal select { width: 100%; padding: 9px 10px; border: 1px solid #d2d8d0; border-radius: 9px; outline: 0; background: #fff; color: var(--dv-ink); font-size: 10.5px; resize: vertical; }
.drive-modal input:focus,
.drive-modal textarea:focus,
.drive-modal select:focus { border-color: #88a59a; box-shadow: 0 0 0 3px rgba(49, 95, 87, .08); }
.drive-modal button:disabled,
.drive-modal select:disabled { cursor: wait; opacity: .55; }
.drive-modal footer { display: flex; justify-content: flex-end; gap: 7px; padding-top: 4px; }
.drive-modal > footer { padding: 0 17px 17px; }
.drive-modal-hint { margin: 0; color: var(--dv-faint); font-size: 8.5px; line-height: 1.45; }
.drive-modal-intro { margin-top: -2px !important; }

.drive-image-viewer-backdrop { padding: 18px; background: rgba(13, 17, 14, .76); }
.drive-image-viewer { width: min(1100px, 96vw); height: min(820px, 92vh); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-radius: 15px; background: #1c211e; color: #fff; box-shadow: 0 30px 100px rgba(0,0,0,.45); }
.drive-image-viewer > header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 13px 12px 16px; border-bottom: 1px solid rgba(255,255,255,.09); }
.drive-image-viewer header > div:first-child { min-width: 0; display: grid; gap: 2px; }
.drive-image-viewer h3 { overflow: hidden; margin: 0; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.drive-image-viewer header span { color: #aeb7b0; font-size: 8.5px; }
.drive-image-viewer header > div:last-child { display: flex; align-items: center; gap: 7px; }
.drive-image-viewer .drive-command { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff; }
.drive-image-viewer .drive-icon-button { color: #e7ece8; }
.drive-image-viewer-stage { min-width: 0; min-height: 0; display: grid; place-items: center; overflow: auto; padding: 20px; background: #121613; }
.drive-image-viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 10px 45px rgba(0,0,0,.3); }

/* Responsive */

@media (max-width: 1050px) {
  .drive-browser.details-open { grid-template-columns: minmax(0, 1fr) 260px; }
  .drive-location-cell,
  .drive-list-head > span:nth-child(4) { display: none; }
  .drive-list-head,
  .drive-row { grid-template-columns: 32px minmax(230px, 1.7fr) minmax(120px, .8fr) 80px 70px; }
}

@media (max-width: 820px) {
  .drive-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .drive-sidebar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 8px 12px; padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--dv-line); }
  .drive-sidebar-head { grid-column: 1; padding: 0; }
  .drive-sidebar-head > span:last-child { display: none; }
  .drive-app-mark { width: 33px; height: 33px; border-radius: 9px; }
  .drive-create-wrap { grid-column: 3; grid-row: 1; width: 92px; margin: 0; }
  .drive-create-menu { right: 0; left: auto; width: 170px; }
  .drive-nav { grid-column: 1 / -1; grid-row: 2; flex-direction: row; gap: 3px; overflow-x: auto; scrollbar-width: none; }
  .drive-nav::-webkit-scrollbar { display: none; }
  .drive-nav-label { display: none; }
  .drive-nav-item { width: auto; min-width: max-content; height: 31px; grid-template-columns: 15px auto; gap: 6px; padding: 0 9px; }
  .drive-nav-icon .drive-icon { width: 14px; height: 14px; }
  .drive-sidebar-foot { grid-column: 2; grid-row: 1; display: flex; justify-content: flex-end; padding: 0; border: 0; }
  .drive-sidebar-foot .drive-nav-item { width: 34px; min-width: 34px; grid-template-columns: 1fr; padding: 0; place-items: center; }
  .drive-sidebar-foot .drive-nav-item strong,
  .drive-review-link { display: none; }
  .drive-header { padding: 16px 17px 11px; }
  .drive-items-panel { padding: 14px 17px 35px; }
  .drive-heading-row { align-items: flex-start; }
  .drive-search { width: 100%; }
  .drive-control-row { align-items: stretch; flex-direction: column; gap: 8px; }
  .drive-toolbar { justify-content: space-between; }
  .drive-selection-bar { align-items: flex-start; flex-direction: column; gap: 5px; }
  .drive-selection-actions { width: 100%; justify-content: flex-start; }
  .drive-browser.details-open { grid-template-columns: minmax(0, 1fr); }
  .drive-details { position: absolute; z-index: 30; top: 0; right: 0; bottom: 0; width: min(310px, 90vw); box-shadow: -16px 0 44px rgba(25, 32, 27, .14); }
}

@media (max-width: 560px) {
  .drive-header { gap: 10px; padding: 13px 12px 10px; }
  .drive-items-panel { padding: 12px 12px 28px; }
  .drive-breadcrumbs h2 { font-size: 18px; }
  .drive-title-block > span { font-size: 9px; }
  .drive-primary-actions .drive-command:first-child { display: none; }
  .drive-command { min-height: 33px; padding: 0 10px; }
  .drive-sort span { display: none; }
  .drive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .drive-tile { height: 164px; }
  .drive-folder-art,
  .drive-file-art { min-height: 72px; }
  .drive-folder-art .drive-icon { width: 43px; height: 43px; }
  .drive-selection-name { min-width: 0; }
  .drive-selection-name strong { max-width: 220px; }
  .drive-selection-actions button,
  .drive-selection-actions a { padding: 0 7px; }
  .drive-modal-backdrop { padding: 12px; }
  .drive-upload-status { right: 10px; bottom: 10px; left: 10px; max-width: none; }
}