@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --navy: #101827;
  --navy-soft: #182438;
  --text: #172033;
  --muted: #8490a3;
  --line: #e9edf3;
  --blue: #3978ef;
  --blue-soft: #eaf1ff;
  --radius: 16px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
}

button, a { font: inherit; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; }

.sidebar {
  width: 250px;
  background: var(--navy);
  color: white;
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  padding: 26px 18px 16px;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: white;
  text-decoration: none;
  font: 800 17px 'Manrope', sans-serif;
  letter-spacing: -.5px;
  margin: 0 0 34px 5px;
}

.brand-icon {
  width: 37px;
  height: 37px;
  border-radius: 11px;
  background: linear-gradient(145deg, #5794ff, #2863d9);
  display: grid;
  place-items: center;
  font-size: 20px;
  box-shadow: 0 5px 18px #3978ef45;
}

.brand small {
  display: block;
  font: 400 10px 'DM Sans', sans-serif;
  color: #8d9bb0;
  letter-spacing: .5px;
  margin-top: 2px;
}

.upload-button {
  border: 0;
  border-radius: 10px;
  background: var(--blue);
  color: white;
  height: 46px;
  font-weight: 700;
  box-shadow: 0 5px 16px #3978ef35;
}

.upload-button span {
  font-size: 19px;
  margin-right: 7px;
  vertical-align: -1px;
}

.navigation { margin-top: 32px; }

.nav-label {
  color: #687991;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding-left: 11px;
  margin: 0 0 12px;
}

.nav-item {
  height: 43px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 12px;
  color: #a5b0c1;
  text-decoration: none;
  border-radius: 9px;
  margin: 3px 0;
  transition: .2s;
}

.nav-item:hover, .nav-item.active {
  background: #243651;
  color: white;
}

.nav-item.active { box-shadow: inset 3px 0 #5591ff; }
.nav-item:first-letter { font-size: 17px; }
.second-label { margin-top: 30px; }

.sidebar-bottom { margin-top: auto; }

.plan-card {
  background: var(--navy-soft);
  border: 1px solid #2a3b54;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 17px;
}

.plan-label, .muted {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.plan-card strong {
  display: block;
  font: 700 23px 'Manrope', sans-serif;
  margin: 10px 0;
}

.plan-card strong small {
  color: #9ba9bc;
  font-size: 12px;
  font-weight: 500;
}

.plan-card p {
  color: #94a3b8;
  font-size: 10px;
  margin: 10px 0 0;
}

.progress, .large-progress {
  height: 5px;
  border-radius: 20px;
  background: #33445d;
  overflow: hidden;
}

.progress span, .large-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--blue);
}

.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #29374b;
  padding: 17px 3px 0;
}

.avatar, .top-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #dce8ff;
  color: #2863d9;
  font-weight: 800;
}

.profile strong, .profile small { display: block; }
.profile strong { font-size: 12px; }
.profile small { color: #8d9bb0; font-size: 10px; margin-top: 3px; }
.profile-menu { margin-left: auto; color: #9ba9bc; font-size: 20px; }

.main-content {
  margin-left: 250px;
  padding: 0 42px;
  max-width: 1700px;
}

.topbar {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.breadcrumb { color: #8590a2; font-size: 12px; }
.breadcrumb span { margin: 0 9px; color: #c0c7d2; }

.top-actions { display: flex; align-items: center; gap: 19px; }
.icon-button, .menu-button {
  border: 0;
  background: transparent;
  color: #69778d;
  font-size: 19px;
}

.menu-button { display: none; }
.top-avatar { width: 32px; height: 32px; }

.welcome {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 38px 0 30px;
}

.eyebrow {
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  margin: 0 0 10px;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  font: 800 32px 'Manrope', sans-serif;
  letter-spacing: -1.3px;
  margin-bottom: 7px;
}

h1 span { color: var(--blue); }
.subtitle { color: var(--muted); font-size: 13px; margin-bottom: 0; }
.date-label { color: #9aa4b4; font-size: 10px; letter-spacing: 1px; font-weight: 700; }

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 17px;
}

.section-heading h2 {
  font: 700 16px 'Manrope', sans-serif;
  letter-spacing: -.3px;
  margin-bottom: 5px;
}

.section-heading p {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 0;
}

.plan-badge {
  background: var(--blue-soft);
  color: #3978ef;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .7px;
}

.storage-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 23px 25px 17px;
  box-shadow: 0 5px 24px #17203305;
}

.storage-info { display: flex; justify-content: space-between; align-items: center; }
.storage-number {
  font: 800 34px 'Manrope', sans-serif;
  letter-spacing: -1.5px;
  margin: 8px 0 2px;
}
.storage-number small { font-size: 16px; color: #8c98a9; }
.storage-info p { color: var(--muted); font-size: 11px; margin: 0 0 17px; }
.storage-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 23px;
}

.large-progress { height: 7px; background: #edf0f5; }
.storage-footer {
  display: flex;
  justify-content: space-between;
  color: #8995a7;
  font-size: 10px;
  margin-top: 10px;
}

.content-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
  margin-top: 30px;
}

.files-panel, .activity-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  min-height: 280px;
}

.text-link { color: var(--blue); text-decoration: none; font-size: 11px; font-weight: 700; }

.empty-state { text-align: center; padding: 28px 10px 18px; }
.empty-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #f0f4fb;
  color: #8ba5d0;
  display: grid;
  place-items: center;
  font-size: 25px;
  margin: 0 auto 15px;
}

.empty-state h3 { font: 700 14px 'Manrope', sans-serif; margin-bottom: 7px; }
.empty-state p { color: var(--muted); font-size: 11px; line-height: 1.6; max-width: 260px; margin: 0 auto 16px; }

.secondary-button {
  border: 1px solid #dce5f3;
  background: white;
  color: #3978ef;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 11px;
  font-weight: 700;
}

.activity-empty { text-align: center; padding: 30px 0; color: #a1acbc; }
.activity-empty span { font-size: 23px; }
.activity-empty p { font-size: 11px; margin: 8px 0 0; }

.security-note {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #f3f7ff;
  border-radius: 10px;
  padding: 12px;
  color: #3978ef;
}

.security-note > span { font-size: 20px; }
.security-note strong { font-size: 11px; color: #2c4f85; }
.security-note p { color: #7b8eaa; font-size: 10px; margin: 4px 0 0; }

.footer {
  display: flex;
  justify-content: space-between;
  color: #a0a9b7;
  font-size: 10px;
  padding: 30px 0 22px;
}

@media (max-width: 900px) {
  .main-content { padding: 0 25px; }
  .content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: 270px;
    box-shadow: 15px 0 40px #10182725;
  }

  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; padding: 0 17px; }
  .topbar { height: 62px; }
  .menu-button { display: block; margin-right: 12px; }
  .breadcrumb { margin-right: auto; font-size: 11px; }
  .top-actions { gap: 12px; }
  .welcome { padding: 30px 0 24px; }
  h1 { font-size: 28px; }
  .date-label { display: none; }
  .storage-card { padding: 19px; }
  .content-grid { gap: 15px; margin-top: 23px; }
  .files-panel, .activity-panel { padding: 18px; }
  .footer { font-size: 9px; gap: 12px; }
}