:root{
  --brand: #c8102e;                 /* Crewit red */
  --brand-rgb: 200,16,46;
  --brand-hover: #a30d25;           /* darker hover */
  --brand-deep: #870d22;
  --brand-soft: rgba(var(--brand-rgb),0.10);
  --brand-soft-2: rgba(var(--brand-rgb),0.14);
  --brand-ring: rgba(var(--brand-rgb),0.20);
  --brand-search-bg: rgba(var(--brand-rgb),0.08);
  --sidebar-bg: var(--brand);
  --sidebar-bg-deep: var(--brand-deep);
  --surface-border: rgba(135,13,34,0.10);
  --surface-shadow: 0 16px 40px rgba(87,18,34,0.07);
  --z-header: 20000;
  --z-header-menu: 20030;
  --z-overlay: 30000;
  --z-preview: 32000;
}

/* ===============================
   GLOBAL STYLES
=============================== */
body {
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background:
    linear-gradient(180deg, #faf7f8 0%, #f4f5f7 42%, #f3f4f6 100%);
  color: #111827;
  margin: 0;
  padding: 0;
  opacity: 1;
}

[hidden] {
  display: none !important;
}

@keyframes fadeIn { to { opacity: 1; } }

a { text-decoration: none; color: inherit; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* ===============================
   DRIVE-LIKE APP LAYOUT
=============================== */
.drive-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.drive-topbar {
  position: relative;
  z-index: var(--z-header);
  height: 64px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(135,13,34,0.10);
  box-shadow: 0 10px 30px rgba(87,18,34,0.05);
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  align-items: center;
  padding: 0 16px;
}

.drive-top-left { display:flex; align-items:center; }
.drive-logo {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 600;
  min-height: 42px;
  padding: 0 8px;
  border-radius: 14px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.drive-logo:hover {
  background: rgba(var(--brand-rgb),0.06);
  transform: translateY(-1px);
}
.drive-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
}
.drive-logo-text { font-size: 16px; color: #111827; }

.drive-top-center { display:flex; justify-content:center; }
.drive-top-center.is-empty { min-height: 1px; }
.drive-searchbar {
  width: min(720px, 78vw);
  height: 42px;
  background: #fbf7f8;
  border: 1px solid rgba(135,13,34,0.12);
  border-radius: 999px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 0 14px;
}
.drive-searchbar input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 14px;
}
.drive-searchbar:focus-within {
  background: #fff;
  border-color: rgba(var(--brand-rgb),0.30);
  box-shadow: 0 0 0 4px var(--brand-ring);
}
.drive-search-icon { opacity: 0.7; display:flex; }

.drive-top-right {
  position: relative;
  z-index: calc(var(--z-header) + 1);
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

/* Sidebar + main */
.drive-body {
  display: grid;
  grid-template-columns: 256px 1fr;
  flex: 1;
  min-height: 0;
}

.drive-sidebar {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-deep) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 24px;
  margin: 14px 0 18px 16px;
  padding: 18px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 18px 42px rgba(87,18,34,0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.drive-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,0.18), transparent 30%),
    radial-gradient(circle at 88% 92%, rgba(255,255,255,0.10), transparent 32%),
    linear-gradient(90deg, rgba(255,255,255,0.06), transparent 42%);
}

.drive-side-section { position: relative; display:flex; flex-direction:column; gap:6px; }

.drive-side-link {
  position: relative;
  display:flex;
  align-items:center;
  gap:9px;
  min-height: 25px;
  padding: 7px 9px;
  border-radius: 12px;
  color: rgba(255,255,255,0.88);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
  overflow: hidden;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.drive-side-link:hover {
  background: rgba(255,255,255,0.13);
  color: #fff;
  border-color: rgba(255,255,255,0.12);
  transform: translateX(3px);
}
.drive-side-link.active {
  background: rgba(255,255,255,0.96);
  color: var(--brand);
  border-color: rgba(255,255,255,0.72);
  box-shadow: 0 14px 28px rgba(58,7,20,0.22);
}
.drive-side-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--brand);
}
.drive-side-ic {
  display:flex;
  align-items:center;
  justify-content:center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  opacity: 0.94;
  color: rgba(255,255,255,0.92);
  background: transparent;
  flex: 0 0 auto;
}
.drive-side-ic svg {
  width: 17px;
  height: 17px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.drive-side-link.active .drive-side-ic {
  color: var(--brand);
  background: rgba(var(--brand-rgb),0.08);
}

.drive-main {
  padding: 22px 22px 60px 24px;
}

/* IMPORTANT: remove the big centered margins INSIDE drive layout */
.drive-main .dashboard-page {
  max-width: none;
  margin: 0;
  padding: 0;
}
.drive-main .dashboard-page h1 {
  text-align: left;
  font-size: 28px;
  margin: 10px 0 18px 0;
}

.drive-page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin: 8px 0 16px 0;
}

.drive-head-main{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  width:100%;
}

.drive-head-left,
.drive-head-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.drive-head-left{
  align-items:flex-end;
}

.drive-input,
.drive-select{
  padding: 10px 12px;
  border: 1px solid rgba(135,13,34,0.14);
  border-radius: 12px;
  outline: none;
  font-size: 13px;
  background:#fff;
  box-sizing:border-box;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.drive-input:focus,
.drive-select:focus{
  border-color: rgba(var(--brand-rgb),0.34);
  box-shadow: 0 0 0 4px var(--brand-ring);
  background: #fff;
}

.drive-input{
  width: min(520px, 74vw);
}

.drive-select{
  width: auto;
  min-width: 180px;
  max-width: 240px;
}

[data-folders-index] .drive-head-right{
  justify-content: flex-end;
}

[data-folders-index] #folder-search{
  width: min(320px, 42vw);
}

[data-folders-index] #folder-sort{
  min-width: 190px;
  max-width: 220px;
}

.drive-scroll { overflow-x: auto; overflow-y: hidden; }
.drive-scroll { -webkit-overflow-scrolling: touch; }

.drive-card {
  background: #fff;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  box-shadow: var(--surface-shadow);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.drive-card:hover {
  border-color: rgba(135,13,34,0.15);
  box-shadow: 0 18px 44px rgba(87,18,34,0.09);
}

.drive-list .drive-header,
.drive-list .drive-row{
  padding: 5px 14px;
  align-items:center;
  font-size: 13px;
  line-height: 1.35;
}

.drive-list .drive-header{
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fffafa 0%, #fbf7f8 100%);
  border-bottom: 1px solid rgba(135,13,34,0.10);
  color: #6b4a55;
}

.drive-list .drive-row{
  border-bottom: 1px solid rgba(135,13,34,0.07);
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.drive-list .drive-row:hover{
  background: rgba(var(--brand-rgb),0.035);
  box-shadow: inset 3px 0 0 rgba(var(--brand-rgb),0.22);
}

.drive-list .drive-row.search-highlighted-file{
  background: #fff8fa;
  box-shadow:
    inset 4px 0 0 var(--brand),
    0 12px 28px rgba(87,18,34,0.10);
}

.file-line { display:flex; align-items:center; gap:10px; }
.file-icon,
.folder-icon,
.tree-icon { margin-top:0; opacity:1; flex:0 0 auto; align-self:center; }
.file-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.file-icon-svg{
  display:block;
}
.file-icon-label{
  fill:#ffffff;
  font-weight: 700;
  letter-spacing: 0;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.file-icon-label-dark{
  fill: currentColor;
  font-weight: 700;
  letter-spacing: 0;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.folder-icon,
.tree-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.folder-icon-svg{
  display:block;
}
.file-icon.is-word{ color:#385a96; }
.file-icon.is-pdf{ color:var(--brand); }
.file-icon.is-sheet{ color:#2f7d62; }
.file-icon.is-slide{ color:#9b4a2e; }
.file-icon.is-image{ color:#3f6f86; }
.file-icon.is-video{ color:#625b71; }
.file-icon.is-audio{ color:#6b5271; }
.file-icon.is-archive{ color:#806033; }
.file-icon.is-executable{ color:#334155; }
.file-icon.is-text{ color:#475569; }
.file-icon.is-generic{ color:#64748b; }
.file-text {
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.file-name,
.folder-name { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-sub { font-size: 11.5px; opacity:0.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.size-num { font-variant-numeric: tabular-nums; }

.folder-link{
  display:flex;
  align-items:center;
  gap: 15px;
  min-width:0;
}

.action-group{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.inline-form{ display:inline; margin:0; }
.btn.xsmall { padding: 5px 9px; border-radius: 10px; line-height: 1; font-size: 12px; }

.no-results {
  padding: 14px;
  margin-top: 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.06);
  font-size: 13px;
}

.pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: #7a1026;
  border: 1px solid rgba(var(--brand-rgb),0.14);
  background: rgba(var(--brand-rgb),0.07);
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 900px) {
  .drive-topbar {
    height: auto;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
    box-sizing: border-box;
  }
  .drive-top-left,
  .drive-top-right {
    min-width: 0;
  }
  .drive-top-center {
    grid-column: 1 / -1;
    order: 3;
    width: 100%;
    min-width: 0;
  }
  .drive-body {
    grid-template-columns: 1fr;
    min-width: 0;
  }
  .drive-sidebar {
    display: none;
  }
}

/* ===============================
   PROFILE DROPDOWN
=============================== */
.user-dropdown {
  position: relative;
  display: inline-block;
  z-index: calc(var(--z-header) + 2);
}

.profile-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 10px;
  color: #111827;
  border-radius: 10px;
}
.profile-toggle:hover { background: rgba(var(--brand-rgb),0.06); }

.profile-toggle .avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--brand) 0%, #8f1025 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  overflow: hidden;
}

.profile-toggle .profile-name { font-weight: 500; }

.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 8px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  min-width: 140px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.10);
  z-index: var(--z-header-menu);
  padding: 6px 0;
}

.dropdown-menu.open {
  display: block;
}


.dropdown-menu li { list-style: none; }
.dropdown-menu li + li {
  border-top: 1px solid #f3f4f6;
}
.dropdown-menu li a {
  display: block;
  padding: 9px 12px;
  text-decoration: none;
  color: #111827;
  font-size: 14px;
}
.dropdown-menu li a:hover { background: #f3f4f6; }
.dropdown-user-meta {
  padding: 10px 12px;
}
.dropdown-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}
.dropdown-user-email {
  margin-top: 2px;
  font-size: 12px;
  color: #6b7280;
  overflow-wrap: anywhere;
}
.dropdown-menu li a.dropdown-danger {
  color: #b42318;
}
.dropdown-menu li a.dropdown-danger:hover {
  background: #fef3f2;
}

/* ===============================
   FLASH MESSAGES
=============================== */
.flash {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-14px);
  text-align: center;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  width: min(520px, calc(100vw - 24px));
  opacity: 0;
  animation: flashIn 0.4s forwards;
  pointer-events: none;
  z-index: calc(var(--z-preview) + 10);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
  border: 1px solid rgba(15,23,42,0.08);
}
.flash.notice { background-color: #d1fae5; color: #065f46; }
.flash.alert  { background-color: #fee2e2; color: #b91c1c; }
.flash.is-dismissing {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
@keyframes flashIn {
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.share-result-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 10px auto 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  max-width: 900px;
}

.share-result-copy{
  min-width: 0;
}

.share-result-title{
  font-size: 12px;
  font-weight: 600;
  color: #1d4ed8;
  margin-bottom: 4px;
}

.share-result-url{
  display:block;
  min-width: 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color: #1e3a8a;
  font-size: 13px;
}

/* ===============================
   LOGIN / SIGNUP CARD
=============================== */
.auth-page {
  box-sizing: border-box;
  min-height: calc(100svh - 57px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 24px;
  background:
    radial-gradient(circle at top left, rgba(var(--brand-rgb),0.10), transparent 26%),
    radial-gradient(circle at bottom right, rgba(128,18,43,0.10), transparent 32%),
    linear-gradient(180deg, #f7f4f5 0%, #efe9eb 100%);
}

.auth-card {
  background: white;
  padding: 35px;
  width: 360px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.auth-card:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(0,0,0,0.07); }
.auth-login-card {
  width: min(860px, calc(100vw - 40px));
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1.1fr);
  border: 1px solid #e5e7eb;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}
.auth-login-brand {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-deep) 100%);
  color: #fff;
  padding: 48px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 28px;
  min-height: 390px;
}
.auth-login-brand::before {
  content: none;
}
.auth-login-brand::after {
  content: none;
}
.auth-login-brand-mark {
  position: relative;
  z-index: 1;
  width: min(100%, 255px);
  padding: 0;
  margin: -18px auto 0;
  align-self: center;
}
.auth-login-logo {
  width: 100%;
  height: auto;
  display: block;
}
.auth-login-brand-copy {
  position: relative;
  z-index: 1;
  max-width: 340px;
  margin-inline: auto;
  align-self: center;
  text-align: center;
}
.auth-login-eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  text-align: center;
}
.auth-login-brand-copy h1 {
  margin: 0 0 14px;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: center;
}
.auth-login-brand-copy p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
  text-align: center;
}
.auth-login-form-panel {
  padding: 42px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
}
.auth-login-form-panel h2 {
  text-align: center;
  margin: 0 0 8px;
}
.auth-login-copy {
  margin: 0 0 24px;
  color: #6b7280;
  font-size: 14px;
  text-align: center;
}
.auth-form .field input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 12px 13px;
}
.auth-login-actions {
  margin-top: 18px;
}
.auth-login-footer {
  text-align: center;
  margin-top: 18px;
}

/* ===============================
   FOLDER SHOW
=============================== */
[data-folder-show] .cvs-list { min-width: 980px; }
[data-folder-show] .cvs-list .drive-header,
[data-folder-show] .cvs-list .drive-row{
  display:grid;
  grid-template-columns: 52px minmax(320px, 1fr) 90px 110px 190px 120px;
  gap: 12px;
  padding: 5px 14px;
  align-items:center;
  font-size: 13px;
  line-height: 1.35;
}
[data-folder-show] .cvs-list .drive-header{
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(0,0,0,0.02);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
[data-folder-show] .cvs-list .drive-row{ border-bottom: 1px solid rgba(0,0,0,0.06); }
[data-folder-show] .cvs-list .drive-row:hover{ background: rgba(0,0,0,0.02); }
[data-folder-show] .clickable-folder,
[data-folder-show] .clickable-row{
  cursor: pointer;
}
[data-folder-show] .file-line{ display:flex; align-items:center; gap:10px; }
[data-folder-show] .file-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
[data-folder-show] .file-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-folder-show] .file-sub{ font-size: 11.5px; opacity: 0.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
[data-folder-show] .col-cv-size{ justify-self:end; }
[data-folder-show] .size-num{ font-variant-numeric: tabular-nums; }
[data-folder-show] .folder-check{ width:13px; height:13px; cursor:pointer; }

[data-folder-show] .col-cv-actions{
  justify-self:end;
  position: sticky;
  right: 0;
  z-index: 2;
  background: linear-gradient(to left, rgba(255,255,255,0.98) 78%, rgba(255,255,255,0));
  padding-left: 16px;
}
[data-folder-show] .drive-header .col-cv-actions{
  z-index: 3;
  background: linear-gradient(to left, rgba(251,242,244,0.98) 78%, rgba(251,242,244,0));
}
.kebab-wrap{ position:relative; display:inline-block; }
.kebab-btn{
  border: 1px solid rgba(135,13,34,0.12);
  background:#fff;
  color: #5b2433;
  border-radius: 10px;
  padding: 6px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: none;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.kebab-btn svg {
  width: 18px;
  height: 18px;
}
.kebab-menu{
  position:fixed;
  min-width: 180px;
  background:#fff;
  border: 1px solid rgba(135,13,34,0.12);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(87,18,34,0.18);
  padding: 6px;
  display:none;
  z-index: 12000;
}
.kebab-menu.hidden{
  display:none !important;
}
.kebab-item{
  box-sizing: border-box;
  width:100%;
  display:block;
  text-align:left;
  padding: 9px 10px;
  border-radius: 10px;
  border:none;
  background: transparent;
  cursor:pointer;
  font-size: 13px;
  color: inherit;
  text-decoration:none;
}
[data-folder-show] .kebab-btn:hover,
.kebab-btn:hover{
  background: #fff5f7;
  border-color: rgba(var(--brand-rgb),0.30);
  color: var(--brand);
}
.kebab-item:hover{ background: rgba(var(--brand-rgb),0.07); color: var(--brand); }
.kebab-item.danger{ color:#b91c1c; }
[data-folder-show] .inline-form{ display:block; margin:0; }
[data-folder-show] .inline-form button{ width:100%; }

[data-folders-index] .overlay,
[data-folder-show] .overlay,
[data-deleted-items] .overlay{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: var(--z-overlay);
  padding: 18px;
}
[data-folders-index] .modal-card,
[data-folder-show] .modal-card,
[data-deleted-items] .modal-card{
  background:#fff;
  border-radius: 14px;
  padding: 16px;
  width: min(560px, 92vw);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
[data-folder-show] .upload-modal-card{
  width: min(720px, 95vw);
  max-height: calc(100vh - 36px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
[data-folder-show] .upload-modal-card form{
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.modal-title{
  margin: 0;
}

.modal-copy{
  font-size: 13px;
  margin-top: 6px;
}

.modal-actions{
  margin-top: 16px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.folder-create-modal{
  width: min(460px, 92vw);
}

.folder-create-modal-body{
  margin-top: 12px;
}

.folder-create-modal-label{
  font-size: 13px;
  margin-bottom: 6px;
}

.folder-create-modal-input{
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  outline: none;
  font-size: 14px;
}

.folder-create-modal-input:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

[data-folder-show] .tree-row,
[data-deleted-items] .tree-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 6px;
  border-radius:10px;
}
[data-folder-show] .tree-row:hover,
[data-deleted-items] .tree-row:hover{ background: rgba(0,0,0,0.04); }
[data-folder-show] .tree-toggle,
[data-deleted-items] .tree-toggle{
  width:28px;
  height:28px;
  border:1px solid rgba(0,0,0,0.10);
  background:#fff;
  border-radius:10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1;
}
[data-folder-show] .tree-pick,
[data-deleted-items] .tree-pick{
  border:none;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  min-width:0;
  padding:6px 8px;
  border-radius:10px;
}
[data-folder-show] .tree-pick:hover,
[data-deleted-items] .tree-pick:hover{ background: rgba(0,0,0,0.06); }
[data-folder-show] .tree-name,
[data-deleted-items] .tree-name{
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 480px;
}
[data-folder-show] .tree-row.selected,
[data-deleted-items] .tree-row.selected{
  background: rgba(0,0,0,0.06);
  outline: 1px solid rgba(0,0,0,0.10);
}
[data-folder-show] .tree-toggle.is-hidden,
[data-deleted-items] .tree-toggle.is-hidden{
  visibility: hidden;
}
[data-folder-show] .tree-icon,
[data-deleted-items] .tree-icon{
  display:inline-flex;
  margin-right:8px;
}

[data-folder-show] .upload-dropzone{
  border: 2px dashed rgba(0,0,0,0.18);
  border-radius: 14px;
  padding: 18px;
  background: rgba(0,0,0,0.02);
  transition: background 120ms ease, border-color 120ms ease;
}
[data-folder-show] .upload-dropzone.dragover{
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.28);
}
[data-folder-show] .upload-dropzone-spaced{
  margin-top: 12px;
}
[data-folder-show] .upload-dropzone-title{
  font-weight: 600;
}
[data-folder-show] .upload-dropzone-subtitle{
  font-size: 13px;
  margin-top: 4px;
}
[data-folder-show] .upload-dropzone-actions{
  display:flex;
  gap:10px;
  margin-top:10px;
  flex-wrap:wrap;
  justify-content:center;
}
[data-folder-show] .upload-file-list-wrap{
  margin-top: 12px;
  flex-direction: column;
  align-items: stretch;
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid rgba(135,13,34,0.10);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fffafa;
}
[data-folder-show] .upload-file-list-label{
  font-size: 13px;
  margin-bottom: 6px;
}
[data-folder-show] .upload-file-list{
  margin: 0;
  padding-left: 18px;
}
[data-folder-show] .upload-status{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--brand);
  font-weight: 700;
}
[data-folder-show] .upload-status[hidden],
[data-folder-show] .upload-progress[hidden]{
  display: none !important;
}
[data-folder-show] .upload-spinner{
  width: 16px;
  height: 16px;
  border: 2px solid rgba(var(--brand-rgb),0.22);
  border-top-color: var(--brand);
  border-radius: 999px;
  animation: upload-spin 700ms linear infinite;
}
@keyframes upload-spin{
  to{ transform: rotate(360deg); }
}
[data-folder-show] .upload-progress{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
[data-folder-show] .upload-progress-track{
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--brand-rgb),0.12);
}
[data-folder-show] .upload-progress-bar{
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width 120ms ease;
}
[data-folder-show] .upload-progress-percent{
  min-width: 42px;
  color: var(--brand);
  font-weight: 800;
  text-align: right;
}
[data-folder-show] .upload-file-warning,
[data-folder-show] .upload-file-over-limit{
  color: #b42318;
  font-weight: 600;
}
.folder-show-head-left,
[data-folder-show] .folder-show-head-left{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.folder-show-title,
[data-folder-show] .folder-show-title{
  margin: 0 0 5px;
}
.folder-show-breadcrumbs,
[data-folder-show] .folder-show-breadcrumbs{
  font-size: 13px;
}
.folder-show-head-right,
[data-folder-show] .folder-show-head-right{
  margin-bottom: 5px;
}
[data-folder-show] .folder-show-bulk-actions{
  margin-top: 5px;
  align-items:center;
  gap:8px;
}
.folder-show-bulk-actions{
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
[data-folder-show] .folder-show-modal-body{
  margin-top: 12px;
}
[data-folder-show] .folder-show-modal-label{
  font-size: 13px;
  margin-bottom: 6px;
}
[data-folder-show] .folder-show-modal-input{
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}
[data-folder-show] .folder-show-move-modal,
[data-deleted-items] .folder-show-move-modal{
  width: min(720px, 95vw);
}
[data-folder-show] .folder-show-move-selected,
[data-deleted-items] .folder-show-move-selected{
  font-size: 13px;
  margin-top: 10px;
}
[data-folder-show] .folder-show-move-tree,
[data-deleted-items] .folder-show-move-tree{
  margin-top: 12px;
  border:1px solid rgba(0,0,0,0.10);
  border-radius:12px;
  padding:10px;
  max-height: 360px;
  overflow:auto;
}
[data-folder-show] .upload-dropzone-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:2px;
  padding: 10px;
}

/* ===============================
   SHARE MODAL
=============================== */
.share-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(31,8,15,0.48);
  backdrop-filter: blur(6px);
}

.share-modal-card{
  width: min(620px, 94vw);
  max-height: calc(100vh - 36px);
  padding: 0;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 24px 70px rgba(31,8,15,0.30);
  overflow: hidden;
  display:flex;
  flex-direction:column;
}

.share-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(180deg, #fff, #fff7f9);
}

.share-modal-title-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.share-modal-icon{
  width:38px;
  height:38px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--brand);
  background: rgba(var(--brand-rgb),0.08);
  border: 1px solid rgba(var(--brand-rgb),0.14);
}

.share-modal-title{
  margin:0;
  font-size: 18px;
  line-height:1.2;
}

.share-modal-subtitle{
  font-size:13px;
  margin-top:3px;
}

.share-modal-close{
  width:34px;
  height:34px;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 10px;
  background:#fff;
  color:#475569;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.share-modal-close:hover{
  color: var(--brand);
  border-color: rgba(var(--brand-rgb),0.24);
  background: #fff5f7;
}

.share-modal-body{
  padding: 18px 20px 4px;
  overflow:auto;
}

.share-modal-section{
  padding: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  background: #fff;
}

.share-modal-section + .share-modal-section,
.share-modal-section + .share-modal-emails,
.share-modal-emails + .share-modal-permission-wrap,
.share-modal-section + .share-modal-permission-wrap{
  margin-top: 12px;
}

.share-modal-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.share-modal-optional{
  font-size: 12px;
  font-weight: 600;
  color:#64748b;
  background:#f1f5f9;
  border-radius:999px;
  padding:4px 8px;
}

.share-modal-label{
  display:block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
}

.share-modal-input{
  width: 100%;
  box-sizing: border-box;
}

.share-modal-options{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-top: 6px;
}

.share-modal-options-inline{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.share-modal-option{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size: 14px;
  padding: 9px 10px;
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 10px;
  background:#fff;
  cursor:pointer;
  min-height: 30px;
}

.share-modal-option:hover{
  border-color: rgba(var(--brand-rgb),0.26);
  background:#fff8fa;
}

.share-modal-option input{
  margin-top: 2px;
  accent-color: var(--brand);
}

.share-modal-option-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.share-modal-option-copy strong{
  color:#0f172a;
  font-size: 13px;
}

.share-modal-option-copy small{
  color:#64748b;
  font-size: 11.5px;
  line-height:1.25;
}

.share-modal-emails{
  padding: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  background:#fbfdff;
}

.share-modal-permission-wrap,
.share-modal-existing{
  padding: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  background:#fff;
}

.share-modal-help{
  font-size:12px;
  margin-top:6px;
}

.share-public-warning{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(185,28,28,0.18);
  border-radius: 12px;
  background: #fff1f2;
  color: #9f1239;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.share-modal-error{
  margin-top: 8px;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 700;
}

.share-modal-textarea{
  width: 100%;
  min-height: 110px;
  box-sizing: border-box;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid rgba(135,13,34,0.14);
  border-radius: 12px;
  font: inherit;
}
.share-modal-textarea:focus{
  outline: none;
  border-color: rgba(var(--brand-rgb),0.34);
  box-shadow: 0 0 0 4px var(--brand-ring);
}

.share-modal-textarea[aria-invalid="true"]{
  border-color: #b91c1c;
  box-shadow: 0 0 0 4px rgba(185,28,28,0.12);
}

.share-description-textarea {
  min-height: 88px;
}

.share-links-new-brief-field {
  display: grid;
  gap: 6px;
  min-width: min(420px, 100%);
}

.share-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(15,23,42,0.08);
  background:#fff;
}

.share-result-url-modal{
  display:block;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--brand-rgb),0.16);
  border-radius: 12px;
  background: #fff8fa;
  color:#7f1d1d;
  font-size:13px;
  overflow-wrap:anywhere;
}

.share-result-success{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding: 14px;
  border: 1px solid rgba(5,150,105,0.14);
  border-radius:14px;
  background: rgba(5,150,105,0.06);
}

.share-result-check{
  width:30px;
  height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#059669;
  color:#fff;
  font-weight:700;
  flex:0 0 auto;
}

.share-result-title{
  font-weight:700;
  color:#0f172a;
}

.share-modal-existing-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.share-modal-existing-state{
  font-size:12px;
  text-align:right;
}

.share-modal-existing-list{
  list-style:none;
  margin: 10px 0 0;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.share-modal-existing-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,0.08);
  background: #f8fafc;
}

.share-modal-existing-copy{
  min-width:0;
}

.share-modal-existing-name{
  font-size: 13px;
  font-weight: 600;
  color:#0f172a;
  overflow-wrap:anywhere;
}

.share-modal-existing-meta{
  margin-top: 2px;
  font-size: 12px;
  color:#64748b;
  overflow-wrap:anywhere;
}

.share-modal-existing-badge,
.shared-permission-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.share-modal-existing-badge.is-editor,
.shared-permission-badge.is-editor{
  background: rgba(5,150,105,0.12);
  color:#047857;
}

.share-modal-existing-badge.is-viewer,
.shared-permission-badge.is-viewer{
  background: rgba(59,130,246,0.12);
  color:#1d4ed8;
}

/* ===============================
   DASHBOARD / INDEX PAGES
=============================== */
[data-folders-index] .dashboard-bulk-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

[data-folders-index] .folders-index-bulk-btn{
  display:inline-flex;
}

[data-folders-index] .folders-list .drive-header,
[data-folders-index] .folders-list .drive-row{
  display:grid;
  grid-template-columns: 52px minmax(260px, 1fr) 190px 244px;
  gap:12px;
}

[data-folders-index] .col-folder-check{
  display:flex;
  align-items:center;
}

[data-folders-index] .col-folder-actions{
  justify-self:end;
}

[data-folders-index] .folders-index-no-results{
  margin-bottom: 8px;
}

[data-share-links-index] .share-links-section-title{
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 10px;
}

[data-share-links-index] .share-links-list .drive-header,
[data-share-links-index] .share-links-list .drive-row{
  display:grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1.1fr) 130px 140px 190px;
  gap:12px;
}

[data-share-links-index] .url-text{
  color:#2563eb;
  word-break:break-all;
}

[data-share-links-index] .url-text:hover,
[data-share-links-index] .folder-link:hover{
  text-decoration: underline;
}

[data-share-links-index] .share-links-folder-extra{
  margin-left: 4px;
}

[data-share-links-index] .share-links-targets{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap:anywhere;
}

[data-share-links-index] .share-links-empty-card{
  padding: 18px;
}

[data-share-links-index] .share-links-spacer{
  height: 18px;
}

.share-access-page{
  max-width: 560px;
  margin: 0 auto;
}

.share-access-card{
  padding: 22px;
}

.share-access-title{
  margin: 0 0 8px;
}

.share-access-form{
  margin-top: 16px;
}

.share-access-input{
  width: 100%;
}

.share-access-actions{
  margin-top: 16px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.share-access-error{
  margin-top: 12px;
  color: #b91c1c;
  font-size: 14px;
  font-weight: 500;
}

.search-page-head{
  gap: 16px;
}

.search-form{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.search-form-input{
  width: min(420px, 100%);
}

.search-results-card{
  padding: 16px;
  margin-top: 12px;
}

.search-section-title{
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.search-section-spacer{
  height: 14px;
}

.search-results-list{
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
}

.search-results-list li + li{
  margin-top: 8px;
}

.search-result-link{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(15,23,42,0.09);
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.search-result-link:hover{
  color: var(--brand);
  border-color: rgba(var(--brand-rgb),0.28);
  box-shadow: 0 10px 24px rgba(15,23,42,0.08);
  transform: translateY(-1px);
}

.search-result-link:focus-visible{
  outline: 3px solid rgba(var(--brand-rgb),0.22);
  outline-offset: 2px;
}

.search-result-kind{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(var(--brand-rgb),0.09);
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
}

.search-result-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-location{
  min-width: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px){
  .search-result-link{
    grid-template-columns: auto minmax(0, 1fr);
  }

  .search-result-location{
    grid-column: 2;
    justify-self: start;
  }
}

.ratings-card{
  padding: 16px;
}

.dashboard-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.dashboard-table th,
.dashboard-table td{
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  font-size: 13px;
}

.dashboard-table th{
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #64748b;
}

.ratings-pagination{
  margin-top: 20px;
  text-align: center;
}

.share-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  padding: 16px 6px 10px;
  margin-bottom: 10px;
}

.share-title{
  margin: 8px 0 6px;
  font-size: 28px;
  letter-spacing: -0.2px;
}

.share-sub{
  font-size: 13px;
}

.share-hero-right{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.share-bulk-actions{
  margin-top:0;
  align-items:center;
  gap:8px;
  width:auto;
  flex-wrap:wrap;
}

.clickable-row,
.clickable-folder-row{
  cursor: pointer;
}

.share-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(0,0,0,0.06);
}

.badge.neutral{ background: rgba(37,99,235,0.10); }
.badge.danger{ background: rgba(185,28,28,0.12); }

.share-empty-copy{
  padding: 16px;
}

[data-shared-with-me] .shared-with-me-kicker{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#2563eb;
}

[data-shared-with-me] .shared-with-me-title{
  margin: 6px 0 4px;
}

[data-shared-with-me] .shared-with-me-subtitle{
  max-width: 720px;
}

[data-shared-with-me] .shared-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

[data-shared-with-me] .shared-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(37,99,235,0.08);
  color:#1d4ed8;
  font-size:12px;
  font-weight:700;
}

[data-shared-with-me] .shared-items-list .drive-header,
[data-shared-with-me] .shared-items-list .drive-row{
  display:grid;
  grid-template-columns: minmax(240px, 1fr) 90px 220px 130px 150px 180px;
  gap:12px;
}

[data-shared-with-me] .shared-item-row{
  cursor:pointer;
}

[data-shared-with-me] .shared-type-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight:600;
}

[data-shared-with-me] .shared-type-badge.is-folder{
  background: rgba(245,158,11,0.12);
  color:#92400e;
}

[data-shared-with-me] .shared-type-badge.is-file{
  background: rgba(59,130,246,0.12);
  color:#1d4ed8;
}

[data-shared-with-me] .shared-empty-card{
  padding: 18px;
}

[data-recents-index] .recents-title{
  margin:0;
}

[data-recents-index] .recents-subtitle{
  margin-top:4px;
}

[data-recents-index] .recents-list { min-width: 980px; }

[data-deleted-items] .deleted-items-list { min-width: 980px; }

[data-deleted-items] .deleted-items-list .drive-header,
[data-deleted-items] .deleted-items-list .drive-row{
  display:grid;
  grid-template-columns: minmax(260px, 1fr) 90px 180px 150px 240px;
  gap:12px;
}

[data-recents-index] .recents-list .drive-header,
[data-recents-index] .recents-list .drive-row{
  display:grid;
  grid-template-columns: minmax(240px, 1fr) 50px 65px 145px 110px 244px;
  gap:12px;
}

[data-recents-index] .col-size { justify-self: end; }

[data-recents-index] .location-link{
  color: var(--brand);
  font-weight: 500;
}

[data-recents-index] .location-link:hover{
  text-decoration: underline;
}

[data-share-links-new] .share-links-new-title{
  margin:0;
}

[data-share-links-new] .share-links-new-subtitle{
  margin-top:4px;
  margin-bottom:5px;
}

[data-share-links-new] .share-links-new-card{
  padding:16px;
}

[data-share-links-new] .share-links-new-inline-form{
  margin:0;
}

[data-share-links-new] .share-links-new-toolbar,
[data-share-links-new] .share-links-new-split,
[data-share-links-new] .share-links-new-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

[data-share-links-new] .share-links-new-split{
  justify-content:space-between;
  gap:12px;
}

[data-share-links-new] .share-links-new-section{
  margin-top:14px;
}

[data-share-links-new] .share-links-new-section-title,
[data-share-links-new] .share-links-new-section-label{
  font-weight:600;
}

[data-share-links-new] .share-links-new-section-label{
  margin-top:14px;
}

[data-share-links-new] .share-links-new-list-card{
  margin-top:10px;
}

[data-share-links-new] .share-links-new-actions{
  justify-content:flex-end;
  padding:14px;
}

[data-share-links-new] .select-files-list { min-width: 860px; }

[data-share-links-new] .select-files-list .drive-header,
[data-share-links-new] .select-files-list .drive-row{
  display:grid;
  grid-template-columns: 52px minmax(320px, 1fr) 90px 110px 190px;
  gap:12px;
}

[data-share-links-new] .col-size { justify-self: end; }

/* ===============================
   FILE PREVIEW
=============================== */
.file-preview-overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-preview);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(15,23,42,0.58);
}

.file-preview-card{
  width: min(1100px, 96vw);
  height: min(88vh, 880px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.28);
  overflow: hidden;
}

.file-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
}

.file-preview-title-wrap{
  min-width:0;
}

.file-preview-kicker{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2563eb;
}

.file-preview-title{
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-preview-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.file-preview-body{
  flex: 1;
  min-height: 0;
  padding: 0;
  background: #f8fafc;
  position: relative;
}

.file-preview-frame,
.file-preview-video,
.file-preview-image{
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.file-preview-video{
  background: #000;
}

.file-preview-image{
  object-fit: contain;
}

.file-preview-audio{
  width: min(720px, calc(100% - 32px));
  margin: 32px auto 0;
  display: block;
}

.file-preview-fallback{
  height: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding: 24px;
  text-align:center;
}

.file-preview-fallback-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.file-preview-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: rgba(15,23,42,0.74);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.file-preview-nav:hover{
  background: rgba(15,23,42,0.88);
}

.file-preview-nav:disabled{
  opacity: 0.45;
  cursor: default;
}

.file-preview-nav-prev{
  left: 18px;
}

.file-preview-nav-next{
  right: 18px;
}

@media (max-width: 900px) {
  .file-preview-overlay{
    padding: 12px;
  }

  .file-preview-card{
    width: 100%;
    height: min(92vh, 1000px);
  }

  .file-preview-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .file-preview-nav{
    width: 42px;
    height: 42px;
    font-size: 30px;
  }

  .file-preview-nav-prev{
    left: 10px;
  }

  .file-preview-nav-next{
    right: 10px;
  }
}

@media (min-width: 641px) {
  #file-preview-overlay .file-preview-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }

  #file-preview-overlay .file-preview-title-wrap {
    min-width: 0;
    flex: 1 1 auto;
  }

  #file-preview-overlay .file-preview-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: auto !important;
    flex: 0 0 auto;
  }

  #file-preview-overlay #file-preview-download {
    width: auto !important;
    min-width: 0 !important;
    height: 38px;
    padding: 0 16px;
    justify-content: center;
    white-space: nowrap;
  }

  #file-preview-overlay #file-preview-close {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px;
    min-height: 38px;
    padding: 0 !important;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    line-height: 1;
  }
}

@media (max-width: 640px) {
  #file-preview-overlay .file-preview-card {
    width: min(100%, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    overflow: hidden;
  }

  #file-preview-overlay .file-preview-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    grid-template-areas:
      "title close"
      "download download";
    gap: 12px 8px;
    align-items: start;
    padding: 14px;
  }

  #file-preview-overlay .file-preview-title-wrap {
    grid-area: title;
    min-width: 0;
    padding-right: 4px;
  }

  #file-preview-overlay .file-preview-title {
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
  }

  #file-preview-overlay .file-preview-actions {
    display: contents !important;
  }

  #file-preview-overlay #file-preview-download {
    grid-area: download;
    width: auto !important;
    min-width: 132px !important;
    max-width: 100%;
    height: 44px;
    padding: 0 18px;
    justify-content: center;
    justify-self: start;
    border-radius: 12px;
  }

  #file-preview-overlay #file-preview-close {
    grid-area: close;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px;
    min-height: 44px;
    padding: 0 !important;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    line-height: 1;
  }
}

/* ===============================
   ADMIN UI
=============================== */
.admin-shell{
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 8px;
  padding-bottom: 28px;
}

.admin-hero,
.admin-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom: 18px;
}

.admin-hero{
  align-items:flex-end;
  padding: 30px 32px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,0.22), transparent 42%),
    radial-gradient(circle at bottom right, rgba(14,165,233,0.16), transparent 35%),
    linear-gradient(135deg, #eff6ff 0%, #ffffff 48%, #f8fafc 100%);
  border: 1px solid rgba(37,99,235,0.14);
  box-shadow: 0 18px 40px rgba(15,23,42,0.08);
}

.admin-eyebrow{
  display:inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e5eefc;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-title{
  margin: 10px 0 6px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.admin-subtitle{
  max-width: 720px;
  color: #64748b;
  font-size: 14px;
}

.admin-hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.admin-hero-actions-vertical{
  flex-direction:column;
  align-items:stretch;
}

.admin-hero-copy{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.admin-hero-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 6px;
}

.admin-hero-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(15,23,42,0.08);
  color: #334155;
  font-size: 13px;
}

.admin-hero-meta strong{
  color: #0f172a;
}

.admin-stat-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:14px;
  margin-bottom: 16px;
}

.admin-stat-card{
  padding: 18px 18px 20px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 10px 24px rgba(15,23,42,0.05);
}

.admin-stat-card-wide{
  grid-column: span 2;
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
}

.admin-stat-label{
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.admin-stat-value{
  margin-top: 10px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  color: #0f172a;
}

.admin-panel{
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(15,23,42,0.06);
  overflow: hidden;
}

.admin-panel-tight{
  padding: 16px 18px;
  margin-bottom: 14px;
}

.admin-panel-form{
  padding: 24px;
}

.admin-panel-form form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.form-row{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.label{
  display:block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}

.input{
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid rgba(15,23,42,0.12);
  border-radius: 14px;
  background: #fff;
  color: #0f172a;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.input:hover{
  border-color: rgba(37,99,235,0.28);
}

.input:focus{
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
}

.input::placeholder{
  color: #94a3b8;
}

.admin-toolbar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.admin-toolbar-panel{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding: 18px 20px;
  margin-bottom: 14px;
}

.admin-toolbar-copy{
  min-width: 240px;
}

.admin-toolbar-note{
  color: #64748b;
  font-size: 14px;
}

.admin-search{
  width: min(520px, 100%);
}

.admin-dashboard-grid{
  display:grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
  gap:16px;
}

.admin-users-table{
  width: 100%;
}

.admin-users-head,
.admin-users-row{
  display:grid;
  grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.25fr) 110px 120px minmax(220px, 1fr);
  gap: 14px;
  align-items:center;
  padding: 16px 20px;
}

.admin-users-head{
  background: #f8fafc;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-users-row{
  border-bottom: 1px solid rgba(15,23,42,0.06);
  transition: background 0.2s ease;
}

.admin-users-row:hover{
  background: #fafcff;
}

.admin-users-row:last-child{
  border-bottom: 0;
}

.admin-user-name{
  font-weight: 600;
  color: #0f172a;
}

.admin-user-email{
  min-width: 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color: #475569;
}

.admin-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.admin-inline-form{
  display:inline-block;
  margin:0;
}

.admin-badge{
  display:inline-flex;
  align-items:center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}

.admin-badge.is-admin{
  background: #ede9fe;
  color: #6d28d9;
  border-color: #ddd6fe;
}

.admin-badge.is-user{
  background: #f1f5f9;
  color: #334155;
  border-color: #e2e8f0;
}

.admin-badge.is-active{
  background: #ecfdf5;
  color: #047857;
  border-color: #bbf7d0;
}

.admin-badge.is-suspended{
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.admin-edit-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
  gap:16px;
}

.admin-side-stack{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.admin-card-title{
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
}

.admin-card-kicker{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: 8px;
}

.admin-side-meta{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.admin-side-label{
  display:block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-side-value{
  color: #0f172a;
  font-size: 15px;
  font-weight: 600;
}

.admin-side-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.admin-list-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.admin-list-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(15,23,42,0.08);
}

.admin-list-caption{
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
}

.admin-list-item:first-child{
  padding-top: 0;
}

.admin-list-item:last-child{
  padding-bottom: 0;
  border-bottom: 0;
}

.admin-delete-modal-overlay{
  position:fixed;
  inset:0;
  z-index:var(--z-overlay);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(31,8,15,0.52);
  backdrop-filter:blur(6px);
}

.admin-delete-modal-card{
  width:min(520px, 94vw);
  max-height:calc(100vh - 36px);
  overflow:auto;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,23,42,0.08);
  box-shadow:0 24px 70px rgba(31,8,15,0.30);
}

.admin-delete-modal-head{
  align-items:flex-start;
  padding:18px 20px;
  border-bottom:1px solid rgba(15,23,42,0.08);
  background:linear-gradient(180deg, #fff, #fff7f9);
}

.admin-delete-modal-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px 20px 20px;
}

.admin-delete-modal-select{
  width:100%;
}

.admin-delete-modal-actions{
  justify-content:flex-end;
  margin-top:4px;
}

.admin-list-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.admin-note-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  color: #475569;
  font-size: 14px;
}

.admin-note-list-spaced{
  margin-top: 14px;
}

.admin-empty-copy{
  color: #64748b;
  font-size: 14px;
}

.admin-checkbox-row{
  display:flex;
  align-items:center;
  gap:10px;
  color: #334155;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,0.06);
}

.admin-checkbox-row input[type="checkbox"],
.admin-checkbox-row input[type="radio"]{
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #2563eb;
}

.admin-form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 18px;
}

.admin-form-intro{
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
}

.admin-form-copy{
  color: #64748b;
  font-size: 14px;
  margin-bottom: 2px;
}

.admin-radio-group{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.admin-usage-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

.admin-usage-item{
  padding: 14px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,0.06);
}

.admin-feature-panel{
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.admin-empty-state{
  padding: 36px 20px;
  text-align:center;
}

.admin-empty-title{
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.audit-toolbar{
  justify-content:flex-end;
}

.audit-action-select{
  width: min(260px, 100%);
}

.audit-table{
  width:100%;
}

.audit-head,
.audit-row{
  display:grid;
  grid-template-columns: 150px 170px minmax(180px, 1fr) minmax(180px, 1fr) minmax(260px, 1.25fr);
  gap:14px;
  align-items:start;
  padding: 16px 20px;
}

.audit-head{
  background:#f8fafc;
  border-bottom:1px solid rgba(15,23,42,0.08);
  color:#64748b;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
}

.audit-row{
  border-bottom:1px solid rgba(15,23,42,0.06);
}

.audit-row:last-child{
  border-bottom:0;
}

.audit-details{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.audit-detail-chip{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:5px 8px;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  color:#475569;
  font-size:12px;
  overflow-wrap:anywhere;
}

.btn.danger {
  background: #dc2626;
  color: white;
  font-weight: 600;
}

.btn.danger:hover {
  background: #b91c1c;
  transform: translateY(-2px);
}

@media (max-width: 980px) {
  .admin-stat-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-toolbar-panel,
  .admin-dashboard-grid{
    grid-template-columns: 1fr;
  }

  .admin-toolbar-panel{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }

  .admin-edit-grid{
    grid-template-columns: 1fr;
  }

  .admin-users-head{
    display:none;
  }

  .admin-users-row{
    grid-template-columns: 1fr;
    gap:10px;
    padding: 16px;
  }

  .audit-head{
    display:none;
  }

  .audit-row{
    grid-template-columns: 1fr;
    gap:10px;
    padding:16px;
  }

  .admin-actions{
    justify-content:flex-start;
  }

  .admin-hero-actions-vertical{
    width: 100%;
    flex-direction:row;
  }

  .admin-list-item{
    flex-direction:column;
  }

  .admin-list-meta{
    align-items:flex-start;
  }

  .admin-usage-grid{
    grid-template-columns: 1fr;
  }
}
.auth-card h2 { text-align: center; margin-bottom: 25px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; margin-bottom: 6px; color: #374151; }
.field input {
  width: 93%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-ring);
}

.actions { margin-top: 10px; }
.auth-footer { text-align: center; margin-top: 20px; font-size: 13px; color: #6b7280; }
.auth-footer a { color: var(--brand); font-weight: 500; }

/* ===============================
   DASHBOARD / FOLDERS / CVS
=============================== */
.dashboard-page { max-width: 1000px; margin: 50px auto; padding: 0 20px; }
.dashboard-page h1 { text-align: center; font-size: 30px; margin-bottom: 30px; color: #111827; }

.folders-container, .cvs-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }

.folder-card, .cv-card {
  background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 25px; width: 220px;
  text-align: center; transition: box-shadow 0.3s ease, transform 0.3s ease; cursor: pointer;
}
.folder-card:hover, .cv-card:hover {
  box-shadow: 0 12px 25px rgba(0,0,0,0.08);
  transform: translateY(-4px) scale(1.02);
}

.folder-card h2, .cv-card h2 { font-size: 18px; color: var(--brand); margin-bottom: 10px; }
.folder-card p, .cv-card p { font-size: 14px; color: #6b7280; margin: 0; }

.cv-actions { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.cv-actions a, .cv-actions form { font-size: 13px; }

.empty-message { text-align: center; font-size: 16px; color: #6b7280; }

/* Buttons */
.btn {
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.btn.primary {
  background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-deep) 100%);
  color: white;
  box-shadow: 0 10px 22px rgba(var(--brand-rgb),0.22);
}
.btn.primary:hover {
  background: linear-gradient(180deg, var(--brand-hover) 0%, var(--brand-deep) 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(var(--brand-rgb),0.26);
}

.btn.secondary {
  background: #fff;
  color: var(--brand);
  border: 1px solid rgba(var(--brand-rgb),0.30);
}
.btn.secondary:hover {
  background: #fff5f7;
  border-color: rgba(var(--brand-rgb),0.52);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(87,18,34,0.08);
}

.drive-search-form { width: 100%; }
.drive-search-input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 14px;
}

.drive-card {
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: #fff;
  overflow: visible;
  box-shadow: var(--surface-shadow);
}


/* Logo Style */
.app-logo {
  height: 32px;
  width: auto;
  display: block;
  margin-left: 20px;
}

.drive-body.no-sidebar {
  grid-template-columns: 1fr;
}

.main-footer {
  border-top: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.82);
  color: #667085;
}

.main-footer .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 56px;
  text-align: center;
}

.main-footer p {
  margin: 0;
  font-size: 13px;
}

.footer-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-powered {
  color: #8a6673;
}

.footer-powered-link {
  color: var(--brand);
  font-weight: 600;
}

.footer-powered-link:hover {
  color: var(--brand-hover);
}

.footer-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  font-size: 13px;
  color: #475467;
}

.footer-links a:hover {
  color: var(--brand);
}


/* ===== Brand logo in top bar ===== */
.drive-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.drive-logo:hover {
  background: rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

.app-logo {
  height: 34px;
  width: auto;
  display: block;
}

.drive-logo-text {
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* ===============================
   Profile dropdown FIX (SAFE)
   =============================== */

.profile-dropdown {
  position: relative;
}

.profile-dropdown .dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  padding: 6px;
  display: none;
  z-index: 9999;
}

.profile-dropdown .dropdown-menu.open {
  display: block;
}

.profile-dropdown .dropdown-item {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 13px;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}

.profile-dropdown .dropdown-item:hover {
  background: rgba(0,0,0,0.06);
}

.profile-page-title h2 {
  margin: 0;
}

.profile-page-title p {
  margin: 4px 0 0;
  color: #6b7280;
  font-size: 14px;
}

.profile-card {
  padding: 20px;
}

.profile-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
}

.profile-summary h3 {
  margin: 0;
  font-size: 22px;
  color: #111827;
}

.profile-summary p {
  margin: 4px 0 0;
  color: #6b7280;
}

.profile-avatar-large {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111827;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  overflow: hidden;
  flex: 0 0 auto;
}

.profile-avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.profile-photo-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.profile-field {
  padding: 14px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  background: #fbfdff;
}

.profile-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-note {
  margin-top: 18px;
  font-size: 14px;
  color: #475467;
}

.profile-form-grid {
  display: grid;
  gap: 16px;
  max-width: 720px;
}

.profile-form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #344054;
}

.profile-input {
  width: 100%;
}

.profile-readonly-value {
  min-height: 42px;
  display: flex;
  align-items: center;
  color: #475467;
  background: #f8fafc;
}

.profile-password-panel {
  padding: 16px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  background: #fcfcfd;
}

.profile-password-title {
  font-weight: 600;
  color: #111827;
}

.profile-password-copy {
  margin-top: 4px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #6b7280;
}

.profile-password-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.public-share-layout {
  display: grid;
  grid-template-columns: minmax(0, min(1020px, 100%)) minmax(260px, 320px);
  gap: 22px;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}

.public-share-main {
  min-width: 0;
  width: 100%;
}

.public-share-description {
  display: grid;
  gap: 6px;
  margin: 6px 0 26px;
  max-width: 720px;
  padding: 12px 14px 12px 16px;
  border: 1px solid rgba(135,13,34,0.10);
  border-left: 3px solid rgba(var(--brand-rgb),0.72);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(31,8,15,0.06);
  color: #344054;
  font-size: 13px;
  line-height: 1.45;
}

.public-share-description-label {
  color: #7a1f33;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.public-share-description-copy {
  min-width: 0;
}

.public-share-description p {
  margin: 0;
}

.public-share-description p + p {
  margin-top: 8px;
}

.public-share-sidebar {
  align-self: start;
  position: sticky;
  top: 24px;
  min-width: 0;
}

.public-share-owner-card {
  padding: 18px;
  border: 1px solid rgba(135,13,34,0.10);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff 0%, #fffafa 100%);
  box-shadow: 0 18px 44px rgba(31,8,15,0.10);
}

.public-share-owner-eyebrow {
  margin-bottom: 10px;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.public-share-owner-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.public-share-owner-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: #111827;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}

.public-share-owner-title {
  min-width: 0;
}

.public-share-owner-name {
  color: #111827;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.public-share-owner-subtitle {
  margin-top: 2px;
  color: #667085;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.public-share-owner-details {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,0.08);
}

.public-share-owner-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  min-width: 0;
}

.public-share-owner-row span {
  color: #667085;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.public-share-owner-row strong,
.public-share-owner-row a {
  color: #1d2939;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.public-share-owner-row a {
  text-decoration: none;
}

.public-share-owner-row a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.profile-dropdown .dropdown-item.danger {
  color: #b91c1c;
}

@media (max-width: 1360px) {
  [data-share-links-index] .drive-scroll,
  [data-shared-with-me] .drive-scroll,
  [data-recents-index] .drive-scroll {
    overflow: visible;
  }

  [data-share-links-index] .share-links-list,
  [data-shared-with-me] .shared-items-list,
  [data-recents-index] .recents-list {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  [data-share-links-index] .share-links-list .drive-header,
  [data-shared-with-me] .shared-items-list .drive-header,
  [data-recents-index] .recents-list .drive-header {
    display: none;
  }

  [data-share-links-index] .share-links-list .drive-row,
  [data-shared-with-me] .shared-items-list .drive-row,
  [data-recents-index] .recents-list .drive-row {
    display: grid;
    margin: 12px;
    padding: 16px;
    border: 1px solid rgba(101, 21, 40, 0.12);
    border-radius: 18px;
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,249,250,0.90));
    box-shadow:
      0 12px 24px rgba(77, 18, 33, 0.06),
      inset 0 1px 0 rgba(255,255,255,0.82);
  }

  [data-share-links-index] .share-links-list .drive-row > div,
  [data-shared-with-me] .shared-items-list .drive-row > div,
  [data-recents-index] .recents-list .drive-row > div {
    min-width: 0;
  }

  [data-recents-index] .recent-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "name name"
      "type size"
      "location modified"
      "actions actions";
    gap: 12px;
  }

  [data-recents-index] .col-name { grid-area: name; }
  [data-recents-index] .col-type { grid-area: type; }
  [data-recents-index] .col-size { grid-area: size; }
  [data-recents-index] .col-location { grid-area: location; }
  [data-recents-index] .col-modified { grid-area: modified; }
  [data-recents-index] .col-actions { grid-area: actions; justify-self: stretch; }

  [data-recents-index] .col-type::before,
  [data-recents-index] .col-size::before,
  [data-recents-index] .col-location::before,
  [data-recents-index] .col-modified::before,
  [data-share-links-index] .col-url::before,
  [data-share-links-index] .col-expires::before,
  [data-share-links-index] .col-created::before,
  [data-shared-with-me] .col-item-type::before,
  [data-shared-with-me] .col-item-permission::before,
  [data-shared-with-me] .col-item-owner::before,
  [data-shared-with-me] .col-item-expiry::before {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6673;
  }

  [data-recents-index] .col-type::before { content: "Type"; }
  [data-recents-index] .col-size::before { content: "Size"; }
  [data-recents-index] .col-location::before { content: "Location"; }
  [data-recents-index] .col-modified::before { content: "Updated"; }

  [data-share-links-index] .share-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "folder folder"
      "url url"
      "expires created"
      "actions actions";
    gap: 12px;
  }

  [data-share-links-index] .col-folder { grid-area: folder; }
  [data-share-links-index] .col-url { grid-area: url; }
  [data-share-links-index] .col-expires { grid-area: expires; }
  [data-share-links-index] .col-created { grid-area: created; }
  [data-share-links-index] .col-actions { grid-area: actions; justify-self: stretch; }
  [data-share-links-index] .col-url::before { content: "Details"; }
  [data-share-links-index] .col-expires::before { content: "Expires"; }
  [data-share-links-index] .col-created::before { content: "Created"; }

  [data-shared-with-me] .shared-item-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "name name"
      "type permission"
      "owner expiry"
      "actions actions";
    gap: 12px;
  }

  [data-shared-with-me] .col-item-name { grid-area: name; }
  [data-shared-with-me] .col-item-type { grid-area: type; }
  [data-shared-with-me] .col-item-permission { grid-area: permission; }
  [data-shared-with-me] .col-item-owner { grid-area: owner; }
  [data-shared-with-me] .col-item-expiry { grid-area: expiry; }
  [data-shared-with-me] .col-item-actions { grid-area: actions; justify-self: stretch; }
  [data-shared-with-me] .col-item-type::before { content: "Type"; }
  [data-shared-with-me] .col-item-permission::before { content: "Permission"; }
  [data-shared-with-me] .col-item-owner::before { content: "Shared by"; }
  [data-shared-with-me] .col-item-expiry::before { content: "Expires"; }

  [data-recents-index] .file-line,
  [data-share-links-index] .folder-link,
  [data-shared-with-me] .folder-link,
  [data-share-links-index] .url-line {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  [data-recents-index] .file-name,
  [data-recents-index] .file-sub,
  [data-share-links-index] .folder-name,
  [data-share-links-index] .share-links-targets,
  [data-share-links-index] .url-text,
  [data-recents-index] .location-link,
  [data-shared-with-me] .folder-name,
  [data-shared-with-me] .col-item-owner .muted,
  [data-shared-with-me] .col-item-expiry .muted {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 900px) {
  .drive-topbar {
    height: auto;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 12px;
  }

  .drive-top-left {
    min-width: 0;
  }

  .drive-top-center {
    grid-column: 1 / -1;
    order: 3;
    width: 100%;
  }

  .drive-top-right {
    justify-content: flex-end;
    align-self: start;
  }

  .drive-searchbar {
    width: 100%;
    min-width: 0;
  }

  .drive-body {
    grid-template-columns: 1fr;
  }

  .drive-sidebar {
    display: block;
    border-right: 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 10px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .drive-side-section {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    width: max-content;
    min-width: 100%;
  }

  .drive-side-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .drive-main {
    padding: 16px 14px 40px;
  }

  .drive-page-head,
  .drive-head-main,
  .drive-head-left,
  .drive-head-right {
    align-items: stretch;
  }

  .drive-head-left,
  .drive-head-right {
    width: 100%;
  }

  .drive-input,
  .drive-select {
    width: 100%;
    min-width: 0;
  }

  .dashboard-page {
    margin: 24px auto;
    padding: 0 14px;
  }

  .auth-page {
    min-height: auto;
    padding: 16px;
    align-items: flex-start;
  }

  .auth-card {
    width: min(100%, 420px);
    padding: 24px 18px;
  }

  .auth-login-card {
    width: min(100%, 640px);
    padding: 0;
    grid-template-columns: 1fr;
  }

  .auth-login-brand,
  .auth-login-form-panel {
    padding: 26px 20px;
  }

  .auth-login-brand {
    min-height: auto;
    gap: 20px;
    padding: 30px 22px;
  }

  .auth-login-brand-mark {
    padding: 0;
    width: min(100%, 210px);
  }

  .auth-login-logo {
    width: 100%;
  }

  .auth-login-brand-copy {
    max-width: 310px;
  }

  .auth-login-brand-copy h1 {
    font-size: 28px;
  }

  .auth-login-form-panel h2,
  .auth-login-footer {
    text-align: center;
  }

  .auth-login-copy {
    text-align: center;
  }

  .share-modal-overlay,
  .file-preview-overlay,
  [data-folders-index] .overlay,
  [data-folder-show] .overlay,
  [data-deleted-items] .overlay {
    padding: 12px;
  }

  .share-modal-card,
  .file-preview-card,
  [data-folders-index] .modal-card,
  [data-folder-show] .modal-card,
  [data-deleted-items] .modal-card {
    width: 100%;
    max-width: 100%;
  }

  .share-modal-head,
  .share-modal-actions,
  .file-preview-head {
    flex-wrap: wrap;
  }

  .share-modal-head,
  .share-modal-body,
  .share-modal-actions {
    padding-left: 14px;
    padding-right: 14px;
  }

  .share-modal-options,
  .share-modal-options-inline {
    grid-template-columns: 1fr;
  }

  .share-modal-existing-head,
  .share-modal-existing-item {
    align-items: flex-start;
  }

  .share-modal-existing-state {
    text-align: left;
  }

  .share-modal-actions,
  .file-preview-actions,
  .admin-form-actions,
  .profile-actions,
  .modal-actions,
  .share-access-actions,
  .search-form {
    justify-content: flex-start;
  }

  .share-modal-actions .btn,
  .share-modal-actions .share-native-btn,
  .file-preview-actions .btn,
  .admin-form-actions .btn,
  .profile-actions .btn,
  .modal-actions .btn,
  .share-access-actions .btn {
    flex: 1 1 160px;
    text-align: center;
  }

  .profile-summary {
    align-items: flex-start;
  }

  [data-folder-show] .cvs-list,
  .cvs-list,
  [data-recents-index] .recents-list,
  [data-share-links-new] .select-files-list {
    min-width: 760px;
  }

  [data-folders-index] .folders-list .drive-header,
  [data-folders-index] .folders-list .drive-row {
    grid-template-columns: 52px minmax(220px, 1fr) 160px 216px;
  }

  [data-share-links-index] .share-links-list .drive-header,
  [data-share-links-index] .share-links-list .drive-row {
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) 120px 140px 180px;
  }

  [data-shared-with-me] .shared-items-list .drive-header,
  [data-shared-with-me] .shared-items-list .drive-row {
    grid-template-columns: minmax(220px, 1fr) 90px 180px 120px 140px 160px;
  }

  [data-recents-index] .recents-list .drive-header,
  [data-recents-index] .recents-list .drive-row {
    grid-template-columns: minmax(220px, 1fr) 70px 80px 140px 120px 220px;
  }

  [data-share-links-index] .col-actions,
  [data-shared-with-me] .col-item-actions,
  [data-recents-index] .col-actions,
  [data-folders-index] .col-folder-actions {
    justify-self: end;
  }
}

@media (max-width: 640px) {
  .drive-topbar {
    grid-template-columns: 1fr auto;
    padding: 10px;
  }

  .drive-main {
    padding: 12px 10px 28px;
  }

  .dashboard-page {
    margin: 16px auto;
    padding: 0 10px;
  }

  .share-modal-existing-head,
  .share-modal-existing-item {
    align-items:flex-start;
    flex-direction:column;
  }

  .profile-toggle .profile-name {
    display: none;
  }

  .btn,
  .btn.xsmall {
    width: 100%;
  }

  .drive-head-right .btn,
  .drive-head-left .btn,
  .action-group .btn,
  .action-group .inline-form,
  .action-group .inline-form .btn {
    width: 100%;
  }

  .action-group {
    width: 100%;
  }

  .share-modal-card {
    padding: 0;
  }

  .search-form-input {
    width: 100%;
  }

  .file-preview-card {
    height: min(94vh, 1000px);
  }

  .file-preview-head {
    padding: 14px;
  }

  .file-preview-title {
    white-space: normal;
  }

  .flash {
    top: 10px;
    width: min(calc(100vw - 16px), 520px);
    padding: 10px 12px;
    font-size: 13px;
  }

  [data-folder-show] .cvs-list,
  .cvs-list,
  [data-folders-index] .folders-list,
  [data-share-links-index] .share-links-list,
  [data-shared-with-me] .shared-items-list,
  [data-recents-index] .recents-list,
  [data-share-links-new] .select-files-list {
    min-width: 680px;
  }

  [data-folder-show] .col-cv-actions {
    padding-left: 10px;
  }

  [data-public-share] .drive-scroll {
    overflow: visible;
  }

  [data-public-share] .cvs-list {
    min-width: 0;
    width: 100%;
  }

  [data-public-share] .cvs-list .drive-header {
    display: none;
  }

  [data-public-share] .cvs-list .drive-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-areas:
      "check name actions"
      ". type actions"
      ". size actions"
      ". modified actions";
    gap: 8px 10px;
    margin-top: 10px;
    padding: 12px;
    align-items: start;
  }

  [data-public-share] .col-cv-check { grid-area: check; }
  [data-public-share] .col-cv-name { grid-area: name; }
  [data-public-share] .col-cv-type { grid-area: type; }
  [data-public-share] .col-cv-size { grid-area: size; justify-self: start; }
  [data-public-share] .col-cv-modified { grid-area: modified; }
  [data-public-share] .col-cv-actions { grid-area: actions; justify-self: end; padding-left: 0; }

  [data-public-share] .col-cv-type::before,
  [data-public-share] .col-cv-size::before,
  [data-public-share] .col-cv-modified::before {
    display: block;
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a6673;
  }

  [data-public-share] .col-cv-type::before { content: "Type"; }
  [data-public-share] .col-cv-size::before { content: "Size"; }
  [data-public-share] .col-cv-modified::before { content: "Updated"; }

  [data-public-share] .file-line {
    align-items: flex-start;
    min-width: 0;
  }

  [data-public-share] .file-name,
  [data-public-share] .file-sub {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  [data-public-share] .folder-show-bulk-actions {
    width: 100%;
    gap: 8px;
  }

  .main-footer .container {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ===== Drive table list (folders/show + cvs) ===== */
.cvs-list { min-width: 980px; }
.cvs-list .drive-header,
.cvs-list .drive-row{
  display:grid;
  grid-template-columns: 52px minmax(320px, 1fr) 90px 110px 190px 120px;
  gap: 12px;
  padding: 10px 14px;
  align-items:center;
  font-size: 13px;
  line-height: 1.35;
}
.cvs-list .drive-header{
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(0,0,0,0.02);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.cvs-list .drive-row{ border-bottom: 1px solid rgba(0,0,0,0.06); }
.cvs-list .drive-row:hover{ background: rgba(0,0,0,0.02); }

.file-line{ display:flex; align-items:center; gap:10px; }
.file-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.file-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-sub{ font-size: 11.5px; opacity: 0.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }

.col-cv-size{ justify-self:end; }
.size-num{ font-variant-numeric: tabular-nums; }
.col-cv-actions{ justify-self:end; }
.action-group { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.col-cv-name { min-width: 0; }

/* Polished list surfaces */
.drive-list{
  padding: 10px;
}

.drive-list .drive-header,
.drive-list .drive-row,
[data-folder-show] .cvs-list .drive-header,
[data-folder-show] .cvs-list .drive-row,
.cvs-list .drive-header,
.cvs-list .drive-row,
[data-folders-index] .folders-list .drive-header,
[data-folders-index] .folders-list .drive-row,
[data-share-links-index] .share-links-list .drive-header,
[data-share-links-index] .share-links-list .drive-row,
[data-shared-with-me] .shared-items-list .drive-header,
[data-shared-with-me] .shared-items-list .drive-row,
[data-recents-index] .recents-list .drive-header,
[data-recents-index] .recents-list .drive-row,
[data-share-links-new] .select-files-list .drive-header,
[data-share-links-new] .select-files-list .drive-row{
  border-radius: 14px;
  border-bottom: 0;
}

.drive-list .drive-header,
[data-folder-show] .cvs-list .drive-header,
.cvs-list .drive-header,
[data-folders-index] .folders-list .drive-header,
[data-share-links-index] .share-links-list .drive-header,
[data-shared-with-me] .shared-items-list .drive-header,
[data-recents-index] .recents-list .drive-header,
[data-share-links-new] .select-files-list .drive-header{
  margin-bottom: 8px;
  background: linear-gradient(180deg, #fffafa 0%, #fbf2f4 100%);
  border: 1px solid rgba(135,13,34,0.08);
}

.drive-list .drive-row,
[data-folder-show] .cvs-list .drive-row,
.cvs-list .drive-row,
[data-folders-index] .folders-list .drive-row,
[data-share-links-index] .share-links-list .drive-row,
[data-shared-with-me] .shared-items-list .drive-row,
[data-recents-index] .recents-list .drive-row,
[data-share-links-new] .select-files-list .drive-row{
  position: relative;
  margin-top: 5px;
  background: #fff;
  border: 1px solid rgba(135,13,34,0.08);
  box-shadow: 0 8px 20px rgba(87,18,34,0.035);
}

.drive-list .drive-row:hover,
[data-folder-show] .cvs-list .drive-row:hover,
.cvs-list .drive-row:hover,
[data-folders-index] .folders-list .drive-row:hover,
[data-share-links-index] .share-links-list .drive-row:hover,
[data-shared-with-me] .shared-items-list .drive-row:hover,
[data-recents-index] .recents-list .drive-row:hover,
[data-share-links-new] .select-files-list .drive-row:hover{
  background: linear-gradient(180deg, #ffffff 0%, #fff8f9 100%);
  border-color: rgba(var(--brand-rgb),0.18);
  box-shadow:
    inset 3px 0 0 rgba(var(--brand-rgb),0.30),
    0 12px 26px rgba(87,18,34,0.075);
}

/* Unified list density across dashboard, folder, recents, and shared views */
.drive-list .drive-header,
.drive-list .drive-row,
[data-folder-show] .cvs-list .drive-header,
[data-folder-show] .cvs-list .drive-row,
[data-folders-index] .folders-list .drive-header,
[data-folders-index] .folders-list .drive-row,
[data-shared-with-me] .shared-items-list .drive-header,
[data-shared-with-me] .shared-items-list .drive-row,
[data-recents-index] .recents-list .drive-header,
[data-recents-index] .recents-list .drive-row {
  box-sizing: border-box;
  min-height: 44px;
  padding: 6px 12px;
  align-items: center;
  font-size: 13px;
  line-height: 1.3;
}

.drive-list .drive-header,
[data-folder-show] .cvs-list .drive-header,
[data-folders-index] .folders-list .drive-header,
[data-shared-with-me] .shared-items-list .drive-header,
[data-recents-index] .recents-list .drive-header {
  min-height: 34px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 11.5px;
}

.drive-list .file-line,
.drive-list .folder-link,
[data-folder-show] .file-line,
[data-folders-index] .folder-link,
[data-shared-with-me] .folder-link,
[data-recents-index] .file-line {
  gap: 10px;
  min-width: 0;
}

.drive-list .file-icon-svg,
.drive-list .folder-icon-svg,
[data-folder-show] .file-icon-svg,
[data-folder-show] .folder-icon-svg,
[data-folders-index] .folder-icon-svg,
[data-shared-with-me] .file-icon-svg,
[data-shared-with-me] .folder-icon-svg,
[data-recents-index] .file-icon-svg {
  width: 20px;
  height: 20px;
}

.drive-list .file-name,
.drive-list .folder-name,
[data-folder-show] .file-name,
[data-folders-index] .folder-name,
[data-shared-with-me] .folder-name,
[data-recents-index] .file-name {
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
}

.drive-list .file-sub,
[data-folder-show] .file-sub,
[data-recents-index] .file-sub {
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.25;
}

.drive-list .pill,
[data-folder-show] .pill,
[data-shared-with-me] .shared-type-badge,
[data-shared-with-me] .shared-permission-badge,
[data-recents-index] .pill {
  min-height: 22px;
  padding: 3px 8px;
  font-size: 10.5px;
  line-height: 1;
}

.drive-list .action-group,
[data-shared-with-me] .action-group,
[data-recents-index] .action-group {
  gap: 6px;
}

.drive-list .btn.xsmall,
[data-shared-with-me] .action-group .btn,
[data-recents-index] .action-group .btn {
  min-height: 28px;
  padding: 5px 8px;
  font-size: 12px;
  line-height: 1;
}

.legacy-page-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.legacy-page-card {
  max-width: 640px;
}

.legacy-page-subhead {
  margin: 0 0 14px;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.pager-meta,
.pager-label {
  font-size: 13px;
}

.pager-controls,
.pager-form,
.pager-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pager-form {
  gap: 8px;
}

.pager-links {
  gap: 8px;
}

.pager-pages {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pager-page,
.pager-current {
  min-width: 34px;
  justify-content: center;
  padding-inline: 10px;
}

.pager-current {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}

.pager-ellipsis {
  color: var(--muted);
  font-size: 13px;
  padding: 0 2px;
}

.pager-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.content-page h2 {
  margin-bottom: 6px;
}

.content-page-copy {
  max-width: 820px;
}

.content-page-meta {
  margin-top: 12px;
}

.actions-center {
  text-align: center;
}

.btn-block {
  width: 100%;
}

/* ===============================
   Responsive App Fit
=============================== */
@media (max-width: 820px) {
  .drive-topbar {
    height: auto;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 12px 14px;
  }

  .drive-top-left {
    min-width: 0;
  }

  .drive-top-center {
    grid-column: 1 / -1;
    order: 3;
    width: 100%;
  }

  .drive-top-right {
    justify-content: flex-end;
    align-self: start;
  }

  .drive-searchbar {
    width: 100%;
    min-width: 0;
  }

  .drive-body {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .drive-sidebar {
    min-height: auto;
    position: static;
    padding: 10px;
  }

  .drive-main {
    padding-bottom: 36px;
  }

  .drive-page-head,
  .drive-head-main,
  .drive-head-left,
  .drive-head-right {
    align-items: stretch;
  }

  .drive-head-left,
  .drive-head-right,
  .drive-input,
  .drive-select,
  .search-form-input,
  .admin-search {
    width: 100%;
    min-width: 0;
  }

  .share-result-banner {
    align-items: stretch;
  }

  [data-share-links-index] .drive-scroll,
  [data-shared-with-me] .drive-scroll,
  [data-recents-index] .drive-scroll {
    overflow: visible;
  }

  [data-share-links-index] .share-links-list,
  [data-shared-with-me] .shared-items-list,
  [data-recents-index] .recents-list {
    min-width: 0 !important;
  }

  [data-share-links-index] .share-links-list .drive-header,
  [data-shared-with-me] .shared-items-list .drive-header,
  [data-recents-index] .recents-list .drive-header {
    display: none;
  }

  [data-share-links-index] .share-links-list .drive-row,
  [data-shared-with-me] .shared-items-list .drive-row,
  [data-recents-index] .recents-list .drive-row {
    margin: 12px;
    padding: 16px;
    border: 1px solid rgba(101, 21, 40, 0.12);
    border-radius: 18px;
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,249,250,0.90));
    box-shadow:
      0 12px 24px rgba(77, 18, 33, 0.06),
      inset 0 1px 0 rgba(255,255,255,0.82);
  }

  [data-share-links-index] .share-links-list .drive-row > div,
  [data-shared-with-me] .shared-items-list .drive-row > div,
  [data-recents-index] .recents-list .drive-row > div {
    min-width: 0;
  }

  [data-recents-index] .recent-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "name name"
      "type size"
      "location modified"
      "actions actions";
    gap: 12px;
  }

  [data-recents-index] .col-name { grid-area: name; }
  [data-recents-index] .col-type { grid-area: type; }
  [data-recents-index] .col-size { grid-area: size; }
  [data-recents-index] .col-location { grid-area: location; }
  [data-recents-index] .col-modified { grid-area: modified; }
  [data-recents-index] .col-actions { grid-area: actions; justify-self: stretch; }

  [data-recents-index] .col-type::before,
  [data-recents-index] .col-size::before,
  [data-recents-index] .col-location::before,
  [data-recents-index] .col-modified::before,
  [data-share-links-index] .col-url::before,
  [data-share-links-index] .col-expires::before,
  [data-share-links-index] .col-created::before,
  [data-shared-with-me] .col-item-type::before,
  [data-shared-with-me] .col-item-permission::before,
  [data-shared-with-me] .col-item-owner::before,
  [data-shared-with-me] .col-item-expiry::before {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6673;
  }

  [data-recents-index] .col-type::before { content: "Type"; }
  [data-recents-index] .col-size::before { content: "Size"; }
  [data-recents-index] .col-location::before { content: "Location"; }
  [data-recents-index] .col-modified::before { content: "Updated"; }

  [data-share-links-index] .share-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "folder folder"
      "url url"
      "expires created"
      "actions actions";
    gap: 12px;
  }

  [data-share-links-index] .col-folder { grid-area: folder; }
  [data-share-links-index] .col-url { grid-area: url; }
  [data-share-links-index] .col-expires { grid-area: expires; }
  [data-share-links-index] .col-created { grid-area: created; }
  [data-share-links-index] .col-actions { grid-area: actions; justify-self: stretch; }
  [data-share-links-index] .col-url::before { content: "Details"; }
  [data-share-links-index] .col-expires::before { content: "Expires"; }
  [data-share-links-index] .col-created::before { content: "Created"; }

  [data-shared-with-me] .shared-item-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "name name"
      "type permission"
      "owner expiry"
      "actions actions";
    gap: 12px;
  }

  [data-shared-with-me] .col-item-name { grid-area: name; }
  [data-shared-with-me] .col-item-type { grid-area: type; }
  [data-shared-with-me] .col-item-permission { grid-area: permission; }
  [data-shared-with-me] .col-item-owner { grid-area: owner; }
  [data-shared-with-me] .col-item-expiry { grid-area: expiry; }
  [data-shared-with-me] .col-item-actions { grid-area: actions; justify-self: stretch; }
  [data-shared-with-me] .col-item-type::before { content: "Type"; }
  [data-shared-with-me] .col-item-permission::before { content: "Permission"; }
  [data-shared-with-me] .col-item-owner::before { content: "Shared by"; }
  [data-shared-with-me] .col-item-expiry::before { content: "Expires"; }

  [data-recents-index] .file-line,
  [data-share-links-index] .folder-link,
  [data-shared-with-me] .folder-link,
  [data-share-links-index] .url-line {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  [data-recents-index] .file-name,
  [data-recents-index] .file-sub,
  [data-share-links-index] .folder-name,
  [data-share-links-index] .share-links-targets,
  [data-share-links-index] .url-text,
  [data-recents-index] .location-link,
  [data-shared-with-me] .folder-name,
  [data-shared-with-me] .col-item-owner .muted,
  [data-shared-with-me] .col-item-expiry .muted {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 700px) {
  .drive-topbar {
    margin: 10px 10px 0;
    border-radius: 22px;
  }

  .drive-body {
    padding: 10px;
  }

  .drive-side-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    min-width: 0;
  }

  .drive-side-link {
    min-height: 50px;
    justify-content: flex-start;
    white-space: normal;
  }

  .dashboard-page,
  .admin-shell,
  .share-access-page {
    margin: 0 auto;
    padding: 0;
  }

  .profile-toggle .profile-name {
    display: none;
  }

  .dropdown-menu {
    right: 0;
    left: auto;
    width: min(280px, calc(100vw - 28px));
  }

  .admin-hero,
  .admin-section-head,
  .admin-panel,
  .drive-card,
  .profile-card,
  .share-access-card {
    border-radius: 20px;
  }

  .admin-hero,
  .admin-section-head,
  .admin-panel-form,
  .admin-toolbar-panel {
    padding: 18px;
  }

  .admin-stat-grid {
    grid-template-columns: 1fr;
  }

  .admin-stat-card-wide {
    grid-column: span 1;
  }

  .admin-hero-actions,
  .admin-form-actions,
  .admin-actions,
  .profile-actions,
  .modal-actions,
  .share-access-actions,
  .share-modal-actions,
  .file-preview-actions,
  .action-group,
  [data-share-links-new] .share-links-new-actions,
  [data-share-links-new] .share-links-new-toolbar,
  [data-share-links-new] .share-links-new-split,
  .folder-show-bulk-actions,
  [data-folder-show] .folder-show-bulk-actions,
  [data-folders-index] .dashboard-bulk-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .admin-hero-actions .btn,
  .admin-form-actions .btn,
  .admin-actions .btn,
  .profile-actions .btn,
  .modal-actions .btn,
  .share-access-actions .btn,
  .share-modal-actions .btn,
  .file-preview-actions .btn,
  .action-group .btn,
  .action-group .inline-form,
  .action-group .inline-form .btn,
  [data-share-links-new] .share-links-new-actions .btn,
  [data-share-links-new] .share-links-new-toolbar .btn,
  [data-share-links-new] .share-links-new-toolbar .drive-select,
  [data-share-links-new] .share-links-new-split .btn,
  .folder-show-bulk-actions .btn,
  [data-folder-show] .folder-show-bulk-actions .btn,
  [data-folders-index] .dashboard-bulk-actions .btn,
  [data-folders-index] .dashboard-bulk-actions .inline-form,
  [data-folders-index] .dashboard-bulk-actions .inline-form .btn,
  .share-result-banner .btn {
    width: 100%;
  }

  .drive-scroll {
    overflow: visible;
  }

  [data-folder-show] .cvs-list,
  .cvs-list,
  [data-folders-index] .folders-list,
  [data-share-links-index] .share-links-list,
  [data-shared-with-me] .shared-items-list,
  [data-recents-index] .recents-list,
  [data-share-links-new] .select-files-list,
  .dashboard-table {
    min-width: 0 !important;
  }

  [data-folder-show] .cvs-list .drive-header,
  [data-folders-index] .folders-list .drive-header,
  [data-share-links-index] .share-links-list .drive-header,
  [data-shared-with-me] .shared-items-list .drive-header,
  [data-recents-index] .recents-list .drive-header,
  [data-share-links-new] .select-files-list .drive-header,
  .ratings-table thead {
    display: none;
  }

  [data-folders-index] .folders-list .drive-header,
  [data-folder-show] .cvs-list .drive-header,
  [data-share-links-new] .select-files-list .drive-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 12px 0;
    padding: 12px 16px;
    border: 1px solid rgba(101, 21, 40, 0.12);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,249,250,0.90));
    box-shadow:
      0 12px 24px rgba(77, 18, 33, 0.06),
      inset 0 1px 0 rgba(255,255,255,0.82);
  }

  [data-folders-index] .folders-list .drive-header > :not(:first-child),
  [data-folder-show] .cvs-list .drive-header > :not(:first-child),
  [data-share-links-new] .select-files-list .drive-header > :not(:first-child) {
    display: none;
  }

  [data-folders-index] .folders-list .drive-header::after,
  [data-folder-show] .cvs-list .drive-header::after,
  [data-share-links-new] .select-files-list .drive-header::after {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6673;
  }

  [data-folders-index] .folders-list .drive-header::after { content: "Select folders"; }
  [data-folder-show] .cvs-list .drive-header::after { content: "Select items"; }
  [data-share-links-new] .select-files-list .drive-header::after { content: "Select files"; }

  [data-folder-show] .cvs-list .drive-row,
  [data-folders-index] .folders-list .drive-row,
  [data-share-links-index] .share-links-list .drive-row,
  [data-shared-with-me] .shared-items-list .drive-row,
  [data-recents-index] .recents-list .drive-row,
  [data-share-links-new] .select-files-list .drive-row {
    margin: 12px;
    padding: 16px;
    border: 1px solid rgba(101, 21, 40, 0.12);
    border-radius: 18px;
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,249,250,0.90));
    box-shadow:
      0 12px 24px rgba(77, 18, 33, 0.06),
      inset 0 1px 0 rgba(255,255,255,0.82);
  }

  [data-folder-show] .cvs-list .drive-row > div,
  [data-folders-index] .folders-list .drive-row > div,
  [data-share-links-index] .share-links-list .drive-row > div,
  [data-shared-with-me] .shared-items-list .drive-row > div,
  [data-recents-index] .recents-list .drive-row > div,
  [data-share-links-new] .select-files-list .drive-row > div {
    min-width: 0;
  }

  [data-folders-index] .folders-list .drive-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name check"
      "modified modified"
      "actions actions";
    gap: 12px;
  }

  [data-folders-index] .col-folder-check { grid-area: check; justify-content: flex-end; }
  [data-folders-index] .col-folder-name { grid-area: name; }
  [data-folders-index] .col-folder-modified { grid-area: modified; }
  [data-folders-index] .col-folder-actions { grid-area: actions; justify-self: stretch; }
  [data-folders-index] .col-folder-modified::before {
    content: "Modified";
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6673;
  }

  [data-folder-show] .cvs-list .drive-row,
  [data-share-links-new] .select-files-list .drive-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name check"
      "type size"
      "modified actions";
    gap: 12px;
  }

  [data-folder-show] .col-cv-check,
  [data-share-links-new] .col-check { grid-area: check; justify-self: end; }
  [data-folder-show] .col-cv-name,
  [data-share-links-new] .col-name { grid-area: name; }
  [data-folder-show] .col-cv-type,
  [data-share-links-new] .col-type { grid-area: type; }
  [data-folder-show] .col-cv-size,
  [data-share-links-new] .col-size { grid-area: size; justify-self: stretch; }
  [data-folder-show] .col-cv-modified,
  [data-share-links-new] .col-modified { grid-area: modified; }
  [data-folder-show] .col-cv-actions { grid-area: actions; justify-self: stretch; }

  [data-folder-show] .col-cv-type::before,
  [data-folder-show] .col-cv-size::before,
  [data-folder-show] .col-cv-modified::before,
  [data-share-links-new] .col-type::before,
  [data-share-links-new] .col-size::before,
  [data-share-links-new] .col-modified::before {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6673;
  }

  [data-folder-show] .col-cv-type::before,
  [data-share-links-new] .col-type::before { content: "Type"; }
  [data-folder-show] .col-cv-size::before,
  [data-share-links-new] .col-size::before { content: "Size"; }
  [data-folder-show] .col-cv-modified::before,
  [data-share-links-new] .col-modified::before { content: "Modified"; }

  [data-folder-show] .kebab-wrap {
    display: flex;
    justify-content: flex-end;
  }

  [data-recents-index] .recent-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "name name"
      "type size"
      "location modified"
      "actions actions";
    gap: 12px;
  }

  [data-recents-index] .col-name { grid-area: name; }
  [data-recents-index] .col-type { grid-area: type; }
  [data-recents-index] .col-size { grid-area: size; }
  [data-recents-index] .col-location { grid-area: location; }
  [data-recents-index] .col-modified { grid-area: modified; }
  [data-recents-index] .col-actions { grid-area: actions; justify-self: stretch; }

  [data-recents-index] .col-type::before,
  [data-recents-index] .col-size::before,
  [data-recents-index] .col-location::before,
  [data-recents-index] .col-modified::before {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6673;
  }

  [data-recents-index] .col-type::before { content: "Type"; }
  [data-recents-index] .col-size::before { content: "Size"; }
  [data-recents-index] .col-location::before { content: "Location"; }
  [data-recents-index] .col-modified::before { content: "Updated"; }

  [data-share-links-index] .share-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "folder folder"
      "url url"
      "expires created"
      "actions actions";
    gap: 12px;
  }

  [data-share-links-index] .col-folder { grid-area: folder; }
  [data-share-links-index] .col-url { grid-area: url; }
  [data-share-links-index] .col-expires { grid-area: expires; }
  [data-share-links-index] .col-created { grid-area: created; }
  [data-share-links-index] .col-actions { grid-area: actions; justify-self: stretch; }

  [data-share-links-index] .col-url::before,
  [data-share-links-index] .col-expires::before,
  [data-share-links-index] .col-created::before {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6673;
  }

  [data-share-links-index] .col-url::before { content: "Details"; }
  [data-share-links-index] .col-expires::before { content: "Expires"; }
  [data-share-links-index] .col-created::before { content: "Created"; }

  [data-shared-with-me] .shared-item-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "name name"
      "type permission"
      "owner expiry"
      "actions actions";
    gap: 12px;
  }

  [data-shared-with-me] .col-item-name { grid-area: name; }
  [data-shared-with-me] .col-item-type { grid-area: type; }
  [data-shared-with-me] .col-item-permission { grid-area: permission; }
  [data-shared-with-me] .col-item-owner { grid-area: owner; }
  [data-shared-with-me] .col-item-expiry { grid-area: expiry; }
  [data-shared-with-me] .col-item-actions { grid-area: actions; justify-self: stretch; }

  [data-shared-with-me] .col-item-type::before,
  [data-shared-with-me] .col-item-permission::before,
  [data-shared-with-me] .col-item-owner::before,
  [data-shared-with-me] .col-item-expiry::before {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6673;
  }

  [data-shared-with-me] .col-item-type::before { content: "Type"; }
  [data-shared-with-me] .col-item-permission::before { content: "Permission"; }
  [data-shared-with-me] .col-item-owner::before { content: "Shared by"; }
  [data-shared-with-me] .col-item-expiry::before { content: "Expires"; }

  [data-share-links-index] .share-links-list,
  [data-shared-with-me] .shared-items-list,
  [data-recents-index] .recents-list,
  [data-share-links-index] .share-row,
  [data-shared-with-me] .shared-item-row,
  [data-recents-index] .recent-row {
    width: 100%;
    max-width: 100%;
  }

  [data-recents-index] .recent-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "type"
      "size"
      "location"
      "modified"
      "actions";
  }

  [data-share-links-index] .share-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "folder"
      "url"
      "expires"
      "created"
      "actions";
  }

  [data-shared-with-me] .shared-item-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "type"
      "permission"
      "owner"
      "expiry"
      "actions";
  }

  [data-recents-index] .file-line,
  [data-share-links-index] .folder-link,
  [data-shared-with-me] .folder-link,
  [data-share-links-index] .url-line {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  [data-recents-index] .file-text,
  [data-share-links-index] .col-folder,
  [data-share-links-index] .col-url,
  [data-share-links-index] .col-expires,
  [data-share-links-index] .col-created,
  [data-shared-with-me] .col-item-name,
  [data-shared-with-me] .col-item-owner,
  [data-shared-with-me] .col-item-expiry,
  [data-recents-index] .col-location,
  [data-recents-index] .col-modified {
    min-width: 0;
  }

  [data-recents-index] .file-name,
  [data-recents-index] .file-sub,
  [data-share-links-index] .folder-name,
  [data-share-links-index] .share-links-targets,
  [data-share-links-index] .url-text,
  [data-recents-index] .location-link,
  [data-shared-with-me] .folder-name,
  [data-shared-with-me] .col-item-owner .muted,
  [data-shared-with-me] .col-item-expiry .muted {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  [data-recents-index] .col-size,
  [data-recents-index] .col-actions,
  [data-share-links-index] .col-actions,
  [data-shared-with-me] .col-item-actions {
    justify-self: stretch;
  }

  .ratings-table,
  .ratings-table tbody,
  .ratings-table tr,
  .ratings-table td {
    display: block;
    width: 100%;
  }

  .ratings-table tbody {
    display: grid;
    gap: 12px;
  }

  .ratings-table tr {
    border: 1px solid rgba(101, 21, 40, 0.12);
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,249,250,0.90));
    box-shadow: 0 12px 24px rgba(77, 18, 33, 0.06);
  }

  .ratings-table tbody td {
    padding: 12px 14px;
    border: 0;
    border-top: 1px solid rgba(101, 21, 40, 0.08);
    border-radius: 0;
    background: transparent;
  }

  .ratings-table tbody td:first-child {
    border-top: 0;
  }

  .ratings-table tbody td::before {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6673;
  }

  .ratings-table tbody td:nth-child(1)::before { content: "ID"; }
  .ratings-table tbody td:nth-child(2)::before { content: "CV"; }
  .ratings-table tbody td:nth-child(3)::before { content: "User"; }
  .ratings-table tbody td:nth-child(4)::before { content: "Stars"; }
  .ratings-table tbody td:nth-child(5)::before { content: "Created"; }
  .ratings-table tbody td:nth-child(6)::before { content: "Actions"; }

  .main-footer .container {
    margin: 0 10px 10px;
    border-radius: 18px;
  }
}

@media (max-width: 480px) {
  .drive-side-section {
    grid-template-columns: 1fr;
  }

  [data-recents-index] .recent-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "type"
      "size"
      "location"
      "modified"
      "actions";
  }

  [data-share-links-index] .share-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "folder"
      "url"
      "expires"
      "created"
      "actions";
  }

  [data-shared-with-me] .shared-item-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "type"
      "permission"
      "owner"
      "expiry"
      "actions";
  }

  [data-folder-show] .cvs-list .drive-row,
  [data-share-links-new] .select-files-list .drive-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "check"
      "name"
      "type"
      "size"
      "modified"
      "actions";
  }

  [data-folder-show] .col-cv-check,
  [data-share-links-new] .col-check {
    justify-self: start;
  }
}

.drive-top-left {
  gap: 10px;
}

.drive-mobile-nav-toggle,
.drive-mobile-nav {
  display: none;
}

.drive-mobile-nav-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
}

.drive-mobile-nav-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #111827;
  display: block;
}

body.mobile-nav-open {
  overflow: hidden;
}

@media (max-width: 700px) {
  .drive-mobile-nav-toggle {
    display: inline-flex;
  }

  .drive-sidebar {
    display: none;
  }

  .drive-mobile-nav {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    pointer-events: none;
  }

  .drive-mobile-nav.is-open {
    pointer-events: auto;
  }

  .drive-mobile-nav-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    width: 100%;
    background: rgba(15,23,42,0.40);
    opacity: 0;
    transition: opacity 0.22s ease;
    cursor: pointer;
  }

  .drive-mobile-nav.is-open .drive-mobile-nav-backdrop {
    opacity: 1;
  }

  .drive-mobile-nav-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 88vw);
    padding: 18px 16px 22px;
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-deep) 100%);
    box-shadow: 0 24px 60px rgba(15,23,42,0.18);
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    overflow-y: auto;
  }

  .drive-mobile-nav.is-open .drive-mobile-nav-panel {
    transform: translateX(0);
  }

  .drive-mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
  }

  .drive-mobile-nav-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(255,255,255,0.72);
  }

  .drive-mobile-nav-close {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 14px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15,23,42,0.06);
  }

  .drive-mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .drive-mobile-nav-links .drive-side-link {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
  }

  .drive-mobile-nav-links .drive-side-link.active {
    background: #fff;
    color: var(--brand);
  }

  .drive-page-head {
    margin: 0 0 14px;
    padding: 16px;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 10px 24px rgba(15,23,42,0.05);
  }

  .drive-head-right {
    width: 100%;
  }

  .drive-head-right .drive-input,
  .drive-head-right .drive-select,
  .drive-head-right .btn {
    width: 100%;
  }

  [data-share-links-index] .share-links-section-title,
  [data-shared-with-me] .shared-section-head {
    margin-bottom: 10px;
  }

  [data-shared-with-me] .shared-section-head {
    padding: 0 4px;
  }

  .drive-card {
    overflow: hidden;
  }

  .empty-message {
    margin: 0;
  }
}

@media (max-width: 1360px) {
  [data-share-links-index] .drive-scroll,
  [data-shared-with-me] .drive-scroll,
  [data-recents-index] .drive-scroll {
    overflow: visible;
  }

  [data-share-links-index] .share-links-list,
  [data-shared-with-me] .shared-items-list,
  [data-recents-index] .recents-list {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  [data-share-links-index] .share-links-list .drive-header,
  [data-shared-with-me] .shared-items-list .drive-header,
  [data-recents-index] .recents-list .drive-header {
    display: none;
  }

  [data-share-links-index] .share-links-list .share-row,
  [data-shared-with-me] .shared-items-list .shared-item-row,
  [data-recents-index] .recents-list .recent-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 12px;
    padding: 16px;
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    box-sizing: border-box;
    align-items: start;
    border: 1px solid rgba(101, 21, 40, 0.12);
    border-radius: 18px;
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,249,250,0.90));
    box-shadow:
      0 12px 24px rgba(77, 18, 33, 0.06),
      inset 0 1px 0 rgba(255,255,255,0.82);
  }

  [data-share-links-index] .share-links-list .share-row > div,
  [data-shared-with-me] .shared-items-list .shared-item-row > div,
  [data-recents-index] .recents-list .recent-row > div {
    min-width: 0;
  }

  [data-recents-index] .recents-list .recent-row {
    grid-template-areas:
      "name"
      "type"
      "size"
      "location"
      "modified"
      "actions";
    gap: 14px;
  }

  [data-recents-index] .recents-list .col-name { grid-area: name; }
  [data-recents-index] .recents-list .col-type { grid-area: type; }
  [data-recents-index] .recents-list .col-size { grid-area: size; }
  [data-recents-index] .recents-list .col-location { grid-area: location; }
  [data-recents-index] .recents-list .col-modified { grid-area: modified; }
  [data-recents-index] .recents-list .col-actions {
    grid-area: actions;
    justify-self: stretch;
  }

  [data-share-links-index] .share-links-list .share-row {
    grid-template-areas:
      "folder"
      "url"
      "expires"
      "created"
      "actions";
    gap: 14px;
  }

  [data-share-links-index] .share-links-list .col-folder { grid-area: folder; }
  [data-share-links-index] .share-links-list .col-url { grid-area: url; }
  [data-share-links-index] .share-links-list .col-expires { grid-area: expires; }
  [data-share-links-index] .share-links-list .col-created { grid-area: created; }
  [data-share-links-index] .share-links-list .col-actions {
    grid-area: actions;
    justify-self: stretch;
  }

  [data-shared-with-me] .shared-items-list .shared-item-row {
    grid-template-areas:
      "name"
      "type"
      "permission"
      "owner"
      "expiry"
      "actions";
    gap: 14px;
  }

  [data-shared-with-me] .shared-items-list .col-item-name { grid-area: name; }
  [data-shared-with-me] .shared-items-list .col-item-type { grid-area: type; }
  [data-shared-with-me] .shared-items-list .col-item-permission { grid-area: permission; }
  [data-shared-with-me] .shared-items-list .col-item-owner { grid-area: owner; }
  [data-shared-with-me] .shared-items-list .col-item-expiry { grid-area: expiry; }
  [data-shared-with-me] .shared-items-list .col-item-actions {
    grid-area: actions;
    justify-self: stretch;
  }

  [data-recents-index] .recents-list .col-type::before,
  [data-recents-index] .recents-list .col-size::before,
  [data-recents-index] .recents-list .col-location::before,
  [data-recents-index] .recents-list .col-modified::before,
  [data-share-links-index] .share-links-list .col-url::before,
  [data-share-links-index] .share-links-list .col-expires::before,
  [data-share-links-index] .share-links-list .col-created::before,
  [data-shared-with-me] .shared-items-list .col-item-type::before,
  [data-shared-with-me] .shared-items-list .col-item-permission::before,
  [data-shared-with-me] .shared-items-list .col-item-owner::before,
  [data-shared-with-me] .shared-items-list .col-item-expiry::before {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6673;
  }

  [data-recents-index] .recents-list .col-type::before { content: "Type"; }
  [data-recents-index] .recents-list .col-size::before { content: "Size"; }
  [data-recents-index] .recents-list .col-location::before { content: "Location"; }
  [data-recents-index] .recents-list .col-modified::before { content: "Updated"; }
  [data-share-links-index] .share-links-list .col-url::before { content: "Details"; }
  [data-share-links-index] .share-links-list .col-expires::before { content: "Expires"; }
  [data-share-links-index] .share-links-list .col-created::before { content: "Created"; }
  [data-shared-with-me] .shared-items-list .col-item-type::before { content: "Type"; }
  [data-shared-with-me] .shared-items-list .col-item-permission::before { content: "Permission"; }
  [data-shared-with-me] .shared-items-list .col-item-owner::before { content: "Shared by"; }
  [data-shared-with-me] .shared-items-list .col-item-expiry::before { content: "Expires"; }

  [data-recents-index] .recents-list .file-line,
  [data-share-links-index] .share-links-list .folder-link,
  [data-shared-with-me] .shared-items-list .folder-link,
  [data-share-links-index] .share-links-list .url-line {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  [data-recents-index] .recents-list .file-name,
  [data-recents-index] .recents-list .file-sub,
  [data-share-links-index] .share-links-list .folder-name,
  [data-share-links-index] .share-links-list .share-links-targets,
  [data-share-links-index] .share-links-list .url-text,
  [data-recents-index] .recents-list .location-link,
  [data-shared-with-me] .shared-items-list .folder-name,
  [data-shared-with-me] .shared-items-list .col-item-owner .muted,
  [data-shared-with-me] .shared-items-list .col-item-expiry .muted {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  [data-share-links-index] .share-links-list .url-text,
  [data-recents-index] .recents-list .location-link {
    display: block;
  }

  [data-share-links-index] .share-links-list .action-group,
  [data-shared-with-me] .shared-items-list .action-group,
  [data-recents-index] .recents-list .action-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    width: 100%;
    justify-content: stretch;
    align-items: stretch;
  }

  [data-share-links-index] .share-links-list .action-group .btn,
  [data-share-links-index] .share-links-list .action-group .inline-form,
  [data-share-links-index] .share-links-list .action-group .inline-form .btn,
  [data-shared-with-me] .shared-items-list .action-group .btn,
  [data-shared-with-me] .shared-items-list .action-group .inline-form,
  [data-shared-with-me] .shared-items-list .action-group .inline-form .btn,
  [data-recents-index] .recents-list .action-group .btn,
  [data-recents-index] .recents-list .action-group .inline-form,
  [data-recents-index] .recents-list .action-group .inline-form .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  [data-recents-index] .recents-list .recent-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "type"
      "size"
      "location"
      "modified"
      "actions";
  }

  [data-share-links-index] .share-links-list .share-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "folder"
      "url"
      "expires"
      "created"
      "actions";
  }

  [data-shared-with-me] .shared-items-list .shared-item-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "type"
      "permission"
      "owner"
      "expiry"
      "actions";
  }
}

/* ===============================
   Mobile Fit and Modal Polish
=============================== */
.file-preview-close-button {
  width: 44px;
  min-width: 44px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.file-preview-nav {
  border: 1px solid rgba(var(--brand-rgb),0.22);
  background: rgba(255,255,255,0.94);
  color: var(--brand);
  box-shadow: 0 14px 30px rgba(87,18,34,0.18);
  backdrop-filter: blur(8px);
  font-size: 28px;
  font-weight: 700;
}

.file-preview-nav:hover {
  background: #fff5f7;
  border-color: rgba(var(--brand-rgb),0.42);
  color: var(--brand-hover);
}

@media (max-width: 700px) {
  .drive-topbar {
    position: sticky;
    top: 0;
  }

  .drive-main {
    padding-bottom: 32px;
  }

  .drive-page-head {
    overflow: hidden;
  }

  .drive-head-left,
  .drive-head-right,
  .drive-head-main {
    min-width: 0;
  }

  .folder-show-title,
  .modal-title,
  .share-modal-title,
  .file-preview-title {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .folder-show-breadcrumbs {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .btn,
  .drive-input,
  .drive-select,
  .kebab-btn {
    min-height: 44px;
  }

  .kebab-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .kebab-menu {
    width: min(240px, calc(100vw - 24px));
    max-height: min(420px, calc(100vh - 32px));
    overflow-y: auto;
  }

  .kebab-item {
    min-height: 42px;
    display: flex;
    align-items: center;
  }

  [data-folders-index] .folder-select,
  [data-folder-show] .folder-check,
  [data-folder-show] .cv-check,
  [data-share-links-new] .file-check {
    width: 22px;
    height: 22px;
    accent-color: var(--brand);
  }

  [data-folders-index] .col-folder-actions,
  [data-folder-show] .col-cv-actions {
    position: static;
    padding-left: 0;
    background: transparent;
  }

  .drive-list .file-line,
  .drive-list .folder-link {
    min-height: 44px;
    align-items: center;
  }

  .drive-list .file-name,
  .drive-list .folder-name,
  [data-folder-show] .file-name,
  [data-folders-index] .folder-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .drive-list .file-sub,
  [data-folder-show] .file-sub {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  [data-folders-index] .modal-card,
  [data-folder-show] .modal-card,
  [data-deleted-items] .modal-card,
  .share-modal-card,
  .file-preview-card {
    box-sizing: border-box;
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    border-radius: 20px;
  }

  [data-folders-index] .modal-card,
  [data-folder-show] .modal-card,
  [data-deleted-items] .modal-card {
    overflow-y: auto;
  }

  .share-modal-card {
    padding: 0;
  }

  .modal-head,
  .share-modal-head,
  .file-preview-head {
    gap: 12px;
  }

  .modal-actions,
  .share-modal-actions,
  .file-preview-fallback-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }

  .modal-actions .btn,
  .share-modal-actions .btn,
  .file-preview-fallback-actions .btn {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .share-modal-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  [data-folder-show] .upload-dropzone {
    padding: 14px;
  }

  [data-folder-show] .upload-dropzone-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  [data-folder-show] .upload-dropzone-actions .btn {
    width: 100%;
  }

  [data-folder-show] .upload-file-list-wrap {
    max-height: 30vh;
    overflow-y: auto;
    border: 1px solid rgba(135,13,34,0.10);
    border-radius: 14px;
    padding: 10px 12px;
    background: #fffafa;
  }

  [data-folder-show] .folder-show-move-tree,
  [data-deleted-items] .folder-show-move-tree {
    max-height: 42vh;
  }

  [data-folder-show] .tree-row,
  [data-deleted-items] .tree-row {
    min-height: 44px;
  }

  .file-preview-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .file-preview-kicker {
    color: var(--brand);
  }

  .file-preview-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .file-preview-actions {
    display: inline-grid;
    grid-template-columns: auto 44px;
    gap: 8px;
    align-items: center;
    justify-content: end;
    width: auto;
  }

  .file-preview-actions .btn {
    width: auto;
    min-width: 44px;
    white-space: nowrap;
  }

  .file-preview-actions #file-preview-download {
    padding-left: 12px;
    padding-right: 12px;
  }

  .file-preview-body {
    overflow: hidden;
  }

  .file-preview-nav {
    width: 44px;
    height: 44px;
    font-size: 26px;
  }

  .file-preview-nav-prev {
    left: 8px;
  }

  .file-preview-nav-next {
    right: 8px;
  }

  .file-preview-audio {
    width: calc(100% - 28px);
    margin-top: 24px;
  }
}

@media (max-width: 480px) {
  .modal-actions,
  .share-modal-actions,
  .file-preview-fallback-actions,
  [data-folder-show] .upload-dropzone-actions {
    grid-template-columns: 1fr;
  }

  .file-preview-head {
    grid-template-columns: 1fr;
  }

  .file-preview-actions {
    grid-template-columns: minmax(0, 1fr) 44px;
    width: 100%;
  }

  .file-preview-actions #file-preview-download {
    width: 100%;
  }
}

@media (max-width: 900px) {
  html,
  body,
  .drive-shell,
  .drive-body,
  .drive-main,
  .dashboard-page {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .drive-body,
  .drive-main {
    padding-left: 10px;
    padding-right: 10px;
  }

  .drive-main {
    padding-top: 12px;
  }

  .drive-card,
  .drive-list,
  .drive-row,
  .dashboard-table {
    box-sizing: border-box;
    max-width: 100%;
  }

  .drive-list {
    padding: 0;
  }

  [data-public-share] .drive-scroll,
  [data-deleted-items] .drive-scroll,
  .ratings-card .drive-scroll {
    overflow: visible;
  }

  [data-public-share] .cvs-list,
  [data-deleted-items] .deleted-items-list,
  .ratings-table {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  [data-public-share] .cvs-list .drive-header,
  [data-deleted-items] .deleted-items-list .drive-header,
  .ratings-table thead {
    display: none;
  }

  [data-public-share] .cvs-list .drive-row,
  [data-deleted-items] .deleted-items-list .drive-row {
    display: grid;
    margin: 12px;
    padding: 16px;
    border: 1px solid rgba(101, 21, 40, 0.12);
    border-radius: 18px;
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,249,250,0.90));
    box-shadow:
      0 12px 24px rgba(77, 18, 33, 0.06),
      inset 0 1px 0 rgba(255,255,255,0.82);
  }

  [data-public-share] .cvs-list .drive-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name check"
      "type size"
      "modified actions";
    gap: 12px;
  }

  [data-public-share] .col-cv-check { grid-area: check; justify-self: end; }
  [data-public-share] .col-cv-name { grid-area: name; min-width: 0; }
  [data-public-share] .col-cv-type { grid-area: type; min-width: 0; }
  [data-public-share] .col-cv-size { grid-area: size; justify-self: stretch; min-width: 0; }
  [data-public-share] .col-cv-modified { grid-area: modified; min-width: 0; }
  [data-public-share] .col-cv-actions { grid-area: actions; justify-self: stretch; padding-left: 0; min-width: 0; }

  [data-public-share] .col-cv-type::before,
  [data-public-share] .col-cv-size::before,
  [data-public-share] .col-cv-modified::before,
  [data-deleted-items] .col-type::before,
  [data-deleted-items] .col-location::before,
  [data-deleted-items] .col-deleted::before {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6673;
  }

  [data-public-share] .col-cv-type::before,
  [data-deleted-items] .col-type::before { content: "Type"; }
  [data-public-share] .col-cv-size::before { content: "Size"; }
  [data-public-share] .col-cv-modified::before { content: "Modified"; }
  [data-deleted-items] .col-location::before { content: "Location"; }
  [data-deleted-items] .col-deleted::before { content: "Deleted"; }

  [data-deleted-items] .deleted-item-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "type"
      "location"
      "deleted"
      "actions";
    gap: 12px;
  }

  [data-deleted-items] .col-name { grid-area: name; min-width: 0; }
  [data-deleted-items] .col-type { grid-area: type; min-width: 0; }
  [data-deleted-items] .col-location { grid-area: location; min-width: 0; }
  [data-deleted-items] .col-deleted { grid-area: deleted; min-width: 0; }
  [data-deleted-items] .col-actions { grid-area: actions; justify-self: stretch; min-width: 0; }

  [data-public-share] .file-line,
  [data-deleted-items] .file-line {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  [data-public-share] .file-text,
  [data-deleted-items] .file-text,
  .profile-field {
    min-width: 0;
  }

  [data-public-share] .file-name,
  [data-public-share] .file-sub,
  [data-deleted-items] .file-name,
  [data-deleted-items] .file-sub,
  [data-deleted-items] .col-location .muted,
  .profile-field strong,
  .profile-field span {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .ratings-table,
  .ratings-table tbody,
  .ratings-table tr,
  .ratings-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 900px) {
  [data-folders-index] {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  [data-folders-index] .drive-page-head {
    padding: 14px;
  }

  [data-folders-index] .drive-head-main,
  [data-folders-index] .drive-head-left,
  [data-folders-index] .drive-head-right,
  [data-folders-index] .dashboard-bulk-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    gap: 10px;
    align-items: stretch;
  }

  [data-folders-index] #open-create-folder,
  [data-folders-index] #folder-search,
  [data-folders-index] #folder-sort,
  [data-folders-index] .dashboard-bulk-actions .btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  [data-folders-index] #open-create-folder {
    min-height: 48px;
    border-radius: 14px;
    font-size: 15px;
  }

  [data-folders-index] #folder-search,
  [data-folders-index] #folder-sort {
    min-height: 50px;
    border-radius: 14px;
  }

  [data-folders-index] .drive-card {
    overflow: visible;
  }

  [data-folders-index] .drive-scroll {
    overflow: visible;
  }

  [data-folders-index] .folders-list {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    padding: 0;
  }

  [data-folders-index] .folders-list .drive-header {
    display: none;
  }

  [data-folders-index] .folders-list .folder-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "name check actions"
      "modified modified modified";
    gap: 10px 10px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 14px 14px 13px;
    box-sizing: border-box;
    align-items: center;
  }

  [data-folders-index] .col-folder-name {
    grid-area: name;
    min-width: 0;
  }

  [data-folders-index] .col-folder-check {
    grid-area: check;
    min-width: 0;
    justify-content: center;
  }

  [data-folders-index] .col-folder-modified {
    grid-area: modified;
    min-width: 0;
  }

  [data-folders-index] .col-folder-actions {
    grid-area: actions;
    min-width: 0;
    justify-self: end;
  }

  [data-folders-index] .folder-link {
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 10px;
    background: transparent;
  }

  [data-folders-index] .col-folder-modified::before {
    content: "Modified";
    display: inline;
    margin: 0 8px 0 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6673;
  }

  [data-folders-index] .folder-name,
  [data-folders-index] .col-folder-modified .muted {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  [data-folders-index] .kebab-wrap {
    display: flex;
    justify-content: flex-end;
    width: auto;
  }

  [data-folders-index] .folder-select {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--brand);
  }
}

@media (max-width: 900px) {
  [data-public-share] {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-left: 18px;
    padding-right: 18px;
  }

  [data-public-share] .drive-page-head,
  [data-public-share] .folder-show-head-left,
  [data-public-share] .folder-show-head-right,
  [data-public-share] .folder-show-bulk-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 10px;
    align-items: stretch;
    box-sizing: border-box;
  }

  [data-public-share] .folder-show-title,
  [data-public-share] .folder-show-breadcrumbs,
  [data-public-share] .folder-show-breadcrumbs span,
  [data-public-share] .folder-show-breadcrumbs a {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  [data-public-share] .folder-show-bulk-actions .btn,
  [data-public-share] .folder-show-head-left .btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  [data-public-share] .drive-card,
  [data-public-share] .drive-scroll,
  [data-public-share] .cvs-list {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    overflow: visible;
    box-sizing: border-box;
  }

  [data-public-share] .cvs-list {
    display: grid;
    gap: 10px;
    padding: 0;
  }

  [data-public-share] .cvs-list .drive-header {
    display: none !important;
  }

  [data-public-share] .cvs-list .drive-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "name"
      "type"
      "size"
      "modified"
      "actions"
      "check" !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 14px;
    gap: 11px;
    box-sizing: border-box;
    align-items: start;
  }

  [data-public-share] .col-cv-name { grid-area: name; min-width: 0; }
  [data-public-share] .col-cv-type { grid-area: type; min-width: 0; }
  [data-public-share] .col-cv-size { grid-area: size; min-width: 0; justify-self: stretch; }
  [data-public-share] .col-cv-modified { grid-area: modified; min-width: 0; }
  [data-public-share] .col-cv-actions { grid-area: actions; min-width: 0; justify-self: stretch; padding-left: 0; }
  [data-public-share] .col-cv-check { grid-area: check; min-width: 0; justify-self: start; }

  [data-public-share] .file-line {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  [data-public-share] .file-text {
    min-width: 0;
    max-width: 100%;
  }

  [data-public-share] .file-name,
  [data-public-share] .file-sub,
  [data-public-share] .col-cv-modified .muted,
  [data-public-share] .col-cv-size .muted {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  [data-public-share] .kebab-wrap {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }
}

/* Keep preview modal actions readable on small phones. */
@media (max-width: 640px) {
  .file-preview-card {
    width: min(100%, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    overflow: hidden;
  }

  .file-preview-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .file-preview-title-wrap {
    width: 100%;
    min-width: 0;
  }

  .file-preview-title {
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  .file-preview-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 8px;
    width: 100%;
    min-width: 0;
    align-items: center;
  }

  .file-preview-actions #file-preview-download {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 44px;
    justify-content: center;
    padding: 0 12px;
  }

  .file-preview-actions .file-preview-close-button {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
  }
}

/* ===============================
   Mobile Drive Polish
=============================== */
@media (max-width: 900px) {
  .drive-topbar {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .drive-logo {
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
  }

  .app-logo {
    max-width: min(168px, 42vw);
    height: auto;
    max-height: 34px;
  }

  .drive-page-head {
    gap: 12px;
  }

  .folder-show-head-left,
  [data-folder-show] .folder-show-head-left,
  .folder-show-head-right,
  [data-folder-show] .folder-show-head-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    align-items: stretch;
  }

  .folder-show-breadcrumbs,
  [data-folder-show] .folder-show-breadcrumbs {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  [data-folder-show] .drive-card,
  [data-folder-show] .drive-scroll,
  [data-folder-show] .cvs-list {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    overflow: visible;
    box-sizing: border-box;
  }

  [data-folder-show] .cvs-list {
    display: grid;
    gap: 10px;
    padding: 0;
  }

  [data-folder-show] .cvs-list .drive-header {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    box-sizing: border-box;
  }

  [data-folder-show] .cvs-list .drive-header > :not(:first-child) {
    display: none;
  }

  [data-folder-show] .cvs-list .drive-header::after {
    content: "Select items";
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6673;
  }

  [data-folder-show] .cvs-list .drive-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "name check actions"
      "type size size"
      "modified modified modified";
    gap: 10px 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 14px 12px;
    box-sizing: border-box;
    align-items: center;
  }

  [data-folder-show] .col-cv-check { grid-area: check; justify-self: end; }
  [data-folder-show] .col-cv-name { grid-area: name; min-width: 0; }
  [data-folder-show] .col-cv-type { grid-area: type; min-width: 0; }
  [data-folder-show] .col-cv-size { grid-area: size; justify-self: stretch; min-width: 0; }
  [data-folder-show] .col-cv-modified { grid-area: modified; min-width: 0; }
  [data-folder-show] .col-cv-actions {
    grid-area: actions;
    position: static;
    justify-self: end;
    min-width: 0;
    padding-left: 0;
    background: transparent;
  }

  [data-folder-show] .col-cv-type::before,
  [data-folder-show] .col-cv-size::before,
  [data-folder-show] .col-cv-modified::before {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6673;
  }

  [data-folder-show] .col-cv-type::before { content: "Type"; }
  [data-folder-show] .col-cv-size::before { content: "Size"; }
  [data-folder-show] .col-cv-modified::before { content: "Modified"; }

  [data-folder-show] .kebab-wrap {
    display: flex;
    justify-content: flex-end;
    width: auto;
  }

  [data-folder-show] .folder-show-bulk-actions[style*="inline-flex"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  [data-folder-show] .folder-show-bulk-actions .btn {
    width: 100%;
  }

  [data-folder-show] .cvs-list .file-line {
    align-items: center;
    gap: 10px;
  }

  [data-folder-show] .cvs-list .file-name {
    font-size: 15px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  [data-folder-show] .cvs-list .file-sub {
    font-size: 13px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  [data-folder-show] .col-cv-size {
    justify-self: end;
    text-align: right;
  }

  [data-folder-show] .col-cv-modified {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
  }

  [data-folder-show] .col-cv-type::before,
  [data-folder-show] .col-cv-size::before,
  [data-folder-show] .col-cv-modified::before {
    margin-bottom: 3px;
  }

  [data-folder-show] .col-cv-modified::before {
    margin-bottom: 0;
  }

  [data-folder-show] .cv-check,
  [data-folder-show] .folder-check {
    width: 20px;
    height: 20px;
    margin: 0;
  }

  [data-folder-show] .cvs-list .kebab-btn {
    width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 13px;
  }
}

@media (max-width: 520px) {
  .drive-topbar {
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 18px;
  }

  .drive-mobile-nav-toggle,
  .profile-toggle .avatar {
    width: 40px;
    height: 40px;
  }

  .app-logo {
    max-width: min(142px, 38vw);
  }

  .drive-page-head {
    padding: 14px;
    border-radius: 16px;
  }

  [data-folder-show] .cvs-list .drive-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "name check actions"
      "type size size"
      "modified modified modified";
  }

  [data-folder-show] .col-cv-check {
    justify-self: center;
  }

  [data-folder-show] .folder-show-bulk-actions {
    grid-template-columns: 1fr;
  }

  .share-result-banner {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Final mobile overrides for compact controls shown in folder workflows. */
@media (max-width: 700px) {
  [data-folders-index] .drive-page-head {
    padding: 12px;
    border-radius: 18px;
  }

  [data-folders-index] .drive-head-main,
  [data-folders-index] .drive-head-left,
  [data-folders-index] .drive-head-right {
    gap: 9px;
  }

  [data-folders-index] #open-create-folder {
    min-height: 46px;
    border-radius: 13px;
  }

  [data-folders-index] #folder-search,
  [data-folders-index] #folder-sort {
    min-height: 48px;
    border-radius: 13px;
    padding-inline: 14px;
  }

  [data-folders-index] .folders-list {
    gap: 8px;
  }

  [data-folders-index] .folders-list .folder-row {
    grid-template-columns: 30px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "icon name check actions"
      "meta meta meta meta";
    gap: 8px 10px;
    padding: 13px 12px;
    border-radius: 16px;
  }

  [data-folders-index] .folder-link {
    display: contents;
  }

  [data-folders-index] .folder-link .folder-icon {
    grid-area: icon;
    align-self: center;
  }

  [data-folders-index] .folder-link .folder-name {
    grid-area: name;
    align-self: center;
    font-size: 15px;
    line-height: 1.25;
  }

  [data-folders-index] .col-folder-name {
    display: contents;
  }

  [data-folders-index] .col-folder-modified {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #667085;
    font-size: 13px;
  }

  [data-folders-index] .col-folder-modified::before {
    margin: 0;
    font-size: 10.5px;
  }

  [data-folders-index] .folder-select {
    width: 20px;
    height: 20px;
  }

  [data-folders-index] .kebab-btn {
    width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 13px;
  }

  [data-folders-index] .modal-card,
  [data-folder-show] .modal-card {
    padding: 18px;
    border-radius: 22px;
  }

  [data-folders-index] .modal-head,
  [data-folder-show] .modal-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: start;
    gap: 12px;
  }

  [data-folders-index] .modal-title,
  [data-folder-show] .modal-title {
    font-size: 22px;
    line-height: 1.15;
  }

  [data-folders-index] .modal-head .btn.xsmall,
  [data-folder-show] .modal-head .btn.xsmall {
    width: 44px !important;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0 !important;
    border-radius: 14px;
    font-size: 0;
  }

  [data-folders-index] .modal-head .btn.xsmall::before,
  [data-folder-show] .modal-head .btn.xsmall::before {
    content: "×";
    font-size: 24px;
    line-height: 1;
  }

  [data-folders-index] .folder-show-modal-body,
  [data-folder-show] .folder-show-modal-body,
  .folder-create-modal-body {
    margin-top: 16px;
  }

  [data-folders-index] .folder-show-modal-label,
  [data-folder-show] .folder-show-modal-label,
  .folder-create-modal-label {
    font-size: 13px;
    font-weight: 700;
    color: #475467;
  }

  [data-folders-index] .folder-show-modal-input,
  [data-folder-show] .folder-show-modal-input,
  .folder-create-modal-input {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border-radius: 13px;
    font-size: 16px;
  }

  .share-modal-card {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
  }

  .share-modal-body {
    padding-top: 14px;
  }

  .share-modal-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px 14px;
  }

  .share-modal-actions .btn {
    width: 100%;
    min-height: 46px;
  }

  .share-modal-actions [data-share-confirm] {
    order: -1;
  }

  .pager {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(135,13,34,0.10);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(87,18,34,0.05);
    overflow: hidden;
  }

  .pager-meta {
    text-align: center;
  }

  .pager-controls,
  .pager-form,
  .pager-links {
    width: 100%;
  }

  .pager-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    justify-items: center;
  }

  .pager-form {
    display: inline-grid;
    grid-template-columns: auto minmax(118px, 180px);
    align-items: center;
    width: auto;
    max-width: 100%;
  }

  .pager-form .drive-select {
    width: 180px;
    max-width: calc(100vw - 180px);
    min-width: 0;
    min-height: 42px;
    border-radius: 13px;
  }

  .pager-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .pager-links > .btn {
    flex: 0 0 88px;
    width: 88px;
    min-width: 88px;
    min-height: 40px;
    padding-inline: 8px;
    border-radius: 13px;
    box-sizing: border-box;
  }

  .pager-pages {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    gap: 5px;
    width: auto !important;
    min-width: 0;
  }

  .pager-page,
  .pager-current {
    flex: 0 0 44px;
    width: 44px !important;
    min-width: 44px;
    min-height: 40px;
    padding: 0;
    border-radius: 13px;
    box-sizing: border-box;
  }

  .pager-disabled {
    opacity: 0.42;
    background: #fff;
    box-shadow: none;
  }

  [data-folder-show] .drive-page-head {
    padding: 12px;
  }

  [data-folder-show] .folder-show-head-left {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "back title"
      "back crumbs";
    align-items: center;
    gap: 6px 12px;
  }

  [data-folder-show] .folder-show-head-left > .btn {
    grid-area: back;
    width: auto;
    min-width: 86px;
    min-height: 42px;
    padding-inline: 13px;
    border-radius: 13px;
    align-self: start;
  }

  [data-folder-show] .folder-show-head-left > div {
    display: contents;
  }

  [data-folder-show] .folder-show-title {
    grid-area: title;
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
  }

  [data-folder-show] .folder-show-breadcrumbs {
    grid-area: crumbs;
    font-size: 14px;
    line-height: 1.35;
  }
}

@media (max-width: 420px) {
  .pager-links {
    gap: 6px;
  }

  .pager-links > .btn {
    flex-basis: 76px;
    width: 76px;
    min-width: 76px;
    font-size: 13px;
  }

  .pager-page,
  .pager-current {
    flex-basis: 40px;
    width: 40px !important;
    min-width: 40px;
  }

  .pager-form {
    grid-template-columns: auto minmax(0, 150px);
  }

  .pager-form .drive-select {
    width: 150px;
    max-width: 150px;
  }
}

/* Final public share mobile cards. Keep this after older shared-link rules that use !important. */
@media (max-width: 900px) {
  [data-public-share] .drive-card,
  [data-public-share] .drive-scroll,
  [data-public-share] .public-share-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  [data-public-share] .public-share-list {
    display: grid !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  [data-public-share] .public-share-list .drive-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
  }

  [data-public-share] .public-share-list .drive-header > :not(:first-child) {
    display: none !important;
  }

  [data-public-share] .public-share-list .drive-header::after {
    content: "Select items";
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a6673;
  }

  [data-public-share] .public-share-list .public-share-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    grid-template-areas:
      "name check actions"
      "type size size"
      "modified modified modified" !important;
    gap: 10px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px 12px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    align-items: center !important;
  }

  [data-public-share] .public-share-list .col-cv-name { grid-area: name !important; min-width: 0 !important; }
  [data-public-share] .public-share-list .col-cv-check { grid-area: check !important; justify-self: end !important; align-self: center !important; min-width: 0 !important; }
  [data-public-share] .public-share-list .col-cv-actions { grid-area: actions !important; justify-self: end !important; align-self: center !important; min-width: 0 !important; padding-left: 0 !important; background: transparent !important; }
  [data-public-share] .public-share-list .col-cv-type { grid-area: type !important; min-width: 0 !important; align-self: start !important; }
  [data-public-share] .public-share-list .col-cv-size { grid-area: size !important; min-width: 0 !important; justify-self: end !important; align-self: start !important; text-align: right !important; }
  [data-public-share] .public-share-list .col-cv-modified {
    grid-area: modified !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 6px 8px !important;
    min-width: 0 !important;
  }

  [data-public-share] .public-share-list .col-cv-type::before,
  [data-public-share] .public-share-list .col-cv-size::before,
  [data-public-share] .public-share-list .col-cv-modified::before {
    display: block !important;
    margin-bottom: 3px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #8a6673 !important;
  }

  [data-public-share] .public-share-list .col-cv-type::before { content: "Type" !important; }
  [data-public-share] .public-share-list .col-cv-size::before { content: "Size" !important; }
  [data-public-share] .public-share-list .col-cv-modified::before {
    content: "Modified" !important;
    margin-bottom: 0 !important;
  }

  [data-public-share] .public-share-list .file-line {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    gap: 10px !important;
  }

  [data-public-share] .public-share-list .file-text,
  [data-public-share] .public-share-list .folder-show-title,
  [data-public-share] .public-share-list .col-cv-size .muted,
  [data-public-share] .public-share-list .col-cv-modified .muted {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  [data-public-share] .public-share-list .file-name {
    font-size: 15px !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  [data-public-share] .public-share-list .file-sub {
    font-size: 13px !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  [data-public-share] .public-share-list .cv-check,
  [data-public-share] .public-share-list .folder-check {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    accent-color: var(--brand) !important;
  }

  [data-public-share] .public-share-list .kebab-wrap {
    display: flex !important;
    justify-content: flex-end !important;
    width: auto !important;
  }

  [data-public-share] .public-share-list .kebab-btn {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 13px !important;
  }
}

@media (max-width: 520px) {
  [data-public-share] .public-share-list .public-share-row {
    display: block !important;
    position: relative !important;
    padding: 16px 12px 14px !important;
    min-height: 0 !important;
  }

  [data-public-share] .public-share-list .col-cv-name {
    display: block !important;
    width: 100% !important;
    padding-right: 92px !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
  }

  [data-public-share] .public-share-list .col-cv-check {
    position: absolute !important;
    top: 24px !important;
    right: 64px !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  [data-public-share] .public-share-list .col-cv-actions {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 42px !important;
  }

  [data-public-share] .public-share-list .file-line {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
  }

  [data-public-share] .public-share-list .file-name {
    font-size: 15px !important;
    line-height: 1.25 !important;
    max-width: 100% !important;
  }

  [data-public-share] .public-share-list .file-sub {
    margin-top: 3px !important;
  }

  [data-public-share] .public-share-list .col-cv-type,
  [data-public-share] .public-share-list .col-cv-size {
    display: inline-grid !important;
    gap: 3px !important;
    min-width: 92px !important;
    margin: 0 14px 10px 0 !important;
    vertical-align: top !important;
    text-align: left !important;
  }

  [data-public-share] .public-share-list .col-cv-size {
    justify-self: auto !important;
  }

  [data-public-share] .public-share-list .col-cv-modified {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin-top: 2px !important;
    min-width: 0 !important;
  }

  [data-public-share] .public-share-list .col-cv-modified::before {
    flex: 0 0 auto !important;
  }

  [data-public-share] .public-share-list .col-cv-modified .muted {
    min-width: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 900px) {
  .public-share-layout {
    grid-template-columns: minmax(0, 1020px);
    justify-content: stretch;
  }

  .public-share-sidebar {
    position: static;
    align-self: stretch;
  }
}

@media (max-width: 700px) {
  .profile-photo-field {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .public-share-layout {
    gap: 14px;
  }

  .public-share-description {
    max-width: 100%;
    font-size: 13px;
  }

  .public-share-owner-card {
    padding: 14px;
  }

  .public-share-owner-head {
    align-items: flex-start;
  }
}

/* Final public share layout overrides. Kept last because older public-share rules use high specificity. */
[data-public-share] .public-share-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 860px) minmax(220px, 240px) !important;
  gap: 14px !important;
  align-items: start !important;
  justify-content: center !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
}

[data-public-share] .drive-page-head {
  align-items: flex-start !important;
  margin-bottom: 10px !important;
}

[data-public-share] .folder-show-head-left {
  align-items: flex-start !important;
}

[data-public-share] .folder-show-head-left > .btn {
  flex: 0 0 auto !important;
  margin-top: 2px !important;
}

[data-public-share] .public-share-main {
  min-width: 0 !important;
  max-width: 860px !important;
}

[data-public-share] .drive-card,
[data-public-share] .drive-scroll,
[data-public-share] .public-share-list {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

[data-public-share] .drive-scroll {
  overflow-x: hidden !important;
}

[data-public-share] .public-share-list {
  min-width: 0 !important;
}

[data-public-share] .public-share-list .drive-header,
[data-public-share] .public-share-list .drive-row {
  grid-template-columns: 36px minmax(160px, 1fr) 76px 52px minmax(118px, 148px) 50px !important;
  gap: 8px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

[data-public-share] .public-share-list .col-cv-size,
[data-public-share] .public-share-list .col-cv-modified {
  min-width: 0 !important;
}

[data-public-share] .public-share-list .col-cv-modified .muted,
[data-public-share] .public-share-list .col-cv-size .muted {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

[data-public-share] .public-share-list .file-line {
  min-width: 0 !important;
}

[data-public-share] .public-share-list .file-text {
  min-width: 0 !important;
}

[data-public-share] .public-share-folder-link {
  color: inherit !important;
  text-decoration: none !important;
}

[data-public-share] .public-share-folder-link:hover .file-name {
  color: var(--brand) !important;
}

[data-public-share] .public-share-sidebar {
  align-self: start !important;
  position: sticky !important;
  top: 24px !important;
  bottom: auto !important;
  min-width: 0 !important;
}

[data-public-share] .public-share-owner-card {
  display: block !important;
  padding: 18px !important;
  border: 1px solid rgba(135,13,34,0.10) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #fff 0%, #fffafa 100%) !important;
  box-shadow: 0 18px 44px rgba(31,8,15,0.10) !important;
}

[data-public-share] .public-share-description {
  display: grid !important;
  align-items: start !important;
  margin: 4px 0 26px !important;
  max-width: 680px !important;
}

[data-public-share] {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 3vw, 46px) !important;
}

@media (max-width: 1040px) {
  [data-public-share] .public-share-layout {
    grid-template-columns: minmax(0, 1fr) minmax(200px, 220px) !important;
    gap: 12px !important;
  }

  [data-public-share] .public-share-main {
    max-width: none !important;
  }

  [data-public-share] .public-share-owner-card {
    padding: 14px !important;
  }

  [data-public-share] .public-share-list .drive-header,
  [data-public-share] .public-share-list .drive-row {
    grid-template-columns: 32px minmax(145px, 1fr) 68px 44px minmax(104px, 130px) 44px !important;
    gap: 7px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (max-width: 900px) {
  [data-public-share] {
    padding-inline: clamp(16px, 5vw, 28px) !important;
  }

  [data-public-share] .public-share-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [data-public-share] .public-share-main {
    max-width: none !important;
  }

  [data-public-share] .public-share-sidebar {
    position: static !important;
    align-self: stretch !important;
  }
}