:root {
  color-scheme: dark;
  font-family: "Manrope", Arial, sans-serif;
  --bg: #07101d;
  --bg-deep: #050b15;
  --panel: #0c1727;
  --panel-light: #101d2f;
  --line: rgba(161, 183, 211, 0.11);
  --muted: #75849b;
  --text: #f4f7fd;
  --accent: #8b70ff;
  --accent-light: #aa98ff;
  --cyan: #43c8e8;
  --green: #55d99b;
  --orange: #ffb865;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); }
button { font: inherit; color: inherit; cursor: pointer; }
.app-shell { min-height: 100vh; display: flex; background: radial-gradient(circle at 84% 0%, rgba(54, 69, 121, .14), transparent 26%), var(--bg); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 246px; display: flex; flex-direction: column; padding: 26px 16px 18px; background: var(--bg-deep); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 34px; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; background: linear-gradient(145deg, #967fff, #6550e2); border-radius: 11px; box-shadow: 0 8px 20px rgba(105, 79, 226, .28); }
.brand-mark svg { width: 23px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand strong { display: block; font-size: 15px; letter-spacing: -.4px; }
.brand span { display: block; margin-top: 2px; color: #6f7c91; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; }
.main-nav { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; color: #8492a9; font-size: 13px; font-weight: 600; text-align: left; background: transparent; border: 0; border-radius: 8px; transition: .2s ease; }
.nav-item svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.active, .nav-item:hover { color: #e4e0ff; background: rgba(139, 112, 255, .12); }
.nav-item.active::before { position: absolute; left: -16px; width: 3px; height: 20px; background: var(--accent); border-radius: 0 3px 3px 0; content: ""; }
.nav-count { margin-left: auto; color: #9f8bff; font-size: 11px; }
.nav-label { margin: 23px 12px 8px; color: #506078; font-size: 9px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.storage-plan { display: block; width: 100%; margin-bottom: 16px; padding: 13px; text-align: left; background: linear-gradient(135deg, rgba(139, 112, 255, .16), rgba(139, 112, 255, .06)); border: 1px solid rgba(145, 122, 255, .18); border-radius: 10px; }
.plan-title, .plan-caption, .plan-size { display: block; }
.plan-title { font-size: 12px; font-weight: 800; }
.plan-icon { color: #a895ff; }
.plan-caption, .plan-size { margin-top: 8px; color: #8490a8; font-size: 10px; }
.progress { display: block; height: 3px; margin-top: 10px; overflow: hidden; background: #202a3f; border-radius: 3px; }
.progress span { display: block; width: 68%; height: 100%; background: var(--accent); border-radius: inherit; }
.profile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 4px; text-align: left; background: transparent; border: 0; }
.avatar { display: grid; width: 34px; height: 34px; place-items: center; color: #d5ceff; font-size: 10px; font-weight: 700; background: #292050; border-radius: 50%; }
.profile strong, .profile small { display: block; }
.profile strong { font-size: 11px; }
.profile small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.profile svg { width: 15px; fill: var(--muted); }
.content { width: calc(100% - 246px); margin-left: 246px; padding: 27px 33px 36px; }
.topbar, .panel-heading, .stat-meta { display: flex; align-items: center; justify-content: space-between; }
.eyebrow { margin: 0 0 7px; color: #6f7f96; font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; }
h1, h2, p { margin: 0; }
h1 { font-size: 25px; letter-spacing: -.8px; }
h2 { font-size: 15px; letter-spacing: -.35px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.icon-button, .outline-button, .primary-button { display: inline-flex; align-items: center; justify-content: center; height: 38px; border-radius: 8px; transition: .2s ease; }
.icon-button { position: relative; width: 38px; background: var(--panel); border: 1px solid var(--line); }
.icon-button svg, .outline-button svg, .primary-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification-dot { position: absolute; top: 8px; right: 9px; width: 6px; height: 6px; background: #ff765f; border: 1px solid var(--panel); border-radius: 50%; }
.outline-button, .primary-button { gap: 7px; padding: 0 14px; font-size: 12px; font-weight: 700; }
.outline-button { color: #d8dfeb; background: var(--panel); border: 1px solid var(--line); }
.primary-button { background: linear-gradient(135deg, #9279ff, #755ce9); border: 0; box-shadow: 0 9px 22px rgba(105, 80, 222, .22); }
.icon-button:hover, .outline-button:hover { background: #17253a; }
.primary-button:hover { transform: translateY(-1px); filter: brightness(1.09); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 29px; }
.stat-card, .panel { background: linear-gradient(145deg, rgba(16, 29, 47, .96), rgba(10, 21, 36, .96)); border: 1px solid var(--line); border-radius: 12px; }
.stat-card { min-height: 169px; padding: 16px; }
.stat-icon { display: grid; width: 34px; height: 34px; margin-bottom: 18px; place-items: center; border-radius: 9px; }
.stat-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.purple { color: #9e8cff; background: rgba(139, 112, 255, .14); }
.cyan { color: var(--cyan); background: rgba(67, 200, 232, .12); }
.orange { color: var(--orange); background: rgba(255, 184, 101, .12); }
.green { color: var(--green); background: rgba(85, 217, 155, .12); }
.stat-meta span { color: #8593a9; font-size: 11px; font-weight: 600; }
.stat-meta b, .chart-legend strong { color: var(--green); font-size: 10px; }
.stat-meta .neutral { color: var(--orange); }
.stat-card > strong { display: block; margin-top: 7px; font-size: 24px; letter-spacing: -.8px; }
.stat-card small { color: #a8b3c3; font-size: 13px; }
.stat-card p, .panel-heading p { margin-top: 6px; color: #697890; font-size: 10px; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); gap: 14px; margin-top: 14px; }
.panel { overflow: hidden; }
.panel-heading { padding: 17px 18px; border-bottom: 1px solid var(--line); }
.text-button { color: #a796ff; font-size: 11px; font-weight: 700; background: transparent; border: 0; }
.text-button span { padding-left: 5px; font-size: 16px; }
.bucket-row { display: grid; grid-template-columns: 36px 1fr 70px 70px 20px; align-items: center; gap: 12px; width: 100%; padding: 13px 17px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); }
.bucket-row:last-child { border-bottom: 0; }
.bucket-row:hover, .file-row:not(.file-header):hover { background: rgba(121, 102, 209, .08); }
.bucket-icon { display: grid; width: 32px; height: 32px; place-items: center; font-size: 11px; font-weight: 800; border-radius: 9px; }
.bucket-icon.violet { color: #a995ff; background: rgba(139, 112, 255, .14); }
.bucket-icon.blue { color: #62caec; background: rgba(67, 200, 232, .12); }
.bucket-icon.coral { color: #ffac8c; background: rgba(255, 139, 108, .12); }
.bucket-icon.green { color: #68dfa8; background: rgba(85, 217, 155, .12); }
.bucket-main strong, .bucket-main small { display: block; }
.bucket-main strong { font-size: 12px; }
.bucket-main small { margin-top: 4px; color: #718097; font-size: 10px; }
.bucket-size { color: #aab5c5; font-size: 11px; }
.bucket-bar { height: 3px; background: #1a2940; border-radius: 2px; }
.bucket-bar span { display: block; height: 100%; background: #846dff; border-radius: inherit; }
.more { color: #77869c; font-size: 12px; letter-spacing: 1px; }
.icon-button.small { width: 29px; height: 29px; }
.chart { position: relative; height: 198px; padding: 16px 18px 0 42px; }
.chart-labels { position: absolute; top: 13px; bottom: 18px; left: 14px; display: flex; flex-direction: column; justify-content: space-between; color: #67768d; font-size: 9px; }
.chart-lines { position: absolute; inset: 16px 17px 20px 43px; display: flex; flex-direction: column; justify-content: space-between; }
.chart-lines i { border-top: 1px dashed rgba(133, 151, 179, .13); }
.chart svg { position: relative; width: 100%; height: 150px; overflow: visible; }
.area { fill: url(#chartFill); }
.line { fill: none; stroke: #927aff; stroke-width: 3; stroke-linecap: round; }
.chart-days { display: flex; justify-content: space-between; color: #697890; font-size: 9px; }
.chart-legend { display: flex; align-items: center; justify-content: space-between; padding: 5px 18px 14px 44px; color: #8290a6; font-size: 10px; }
.chart-legend i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: #8b70ff; border-radius: 50%; }
.files-panel { margin-top: 14px; }
.file-row { display: grid; grid-template-columns: 1.5fr .75fr .55fr .7fr 20px; align-items: center; width: 100%; min-height: 52px; padding: 0 18px; color: #9eabbd; font-size: 11px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); }
.file-row:last-child { border-bottom: 0; }
.file-header { min-height: 36px; color: #65748a; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.file-name { display: flex; align-items: center; gap: 10px; }
.file-name strong { color: #dbe2ec; font-size: 11px; }
.file-type { display: grid; width: 27px; height: 27px; place-items: center; font-size: 7px; font-style: normal; font-weight: 800; border-radius: 6px; }
.file-type.image { color: #57d6a1; background: rgba(85, 217, 155, .12); }
.file-type.video { color: #9d8bff; background: rgba(139, 112, 255, .14); }
.file-type.archive { color: #ffbc76; background: rgba(255, 184, 101, .12); }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 4px 0; color: #65748a; font-size: 10px; }
.site-footer div { display: flex; gap: 16px; }
.site-footer button { padding: 0; color: #71819a; font-size: 10px; background: transparent; border: 0; transition: color .2s ease; }
.site-footer button:hover { color: #a796ff; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; visibility: hidden; background: rgba(2, 6, 13, .7); opacity: 0; backdrop-filter: blur(8px); transition: .22s ease; }
.modal-backdrop.open { visibility: visible; opacity: 1; }
.modal { position: relative; width: min(100%, 410px); padding: 30px 32px 26px; text-align: center; background: linear-gradient(145deg, #142239, #0d192a); border: 1px solid rgba(163, 183, 213, .18); border-radius: 16px; box-shadow: 0 22px 70px rgba(0, 0, 0, .42); transform: translateY(10px) scale(.98); transition: .22s ease; }
.open .modal { transform: none; }
.modal-close { position: absolute; top: 12px; right: 12px; display: grid; width: 30px; height: 30px; place-items: center; color: #8290a5; background: transparent; border: 0; border-radius: 6px; }
.modal-close:hover { background: rgba(255, 255, 255, .06); }
.modal-close svg { width: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.modal-symbol { display: grid; width: 56px; height: 56px; margin: 0 auto 16px; place-items: center; color: #ffbb70; background: rgba(255, 184, 101, .11); border: 1px solid rgba(255, 184, 101, .2); border-radius: 50%; }
.modal-symbol svg { width: 29px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.modal-kicker { color: #9a87ff; font-size: 9px; font-weight: 800; letter-spacing: 1.7px; text-transform: uppercase; }
.modal h2 { margin-top: 8px; font-size: 20px; }
.modal-copy { margin-top: 11px; color: #8997ac; font-size: 12px; line-height: 1.7; }
.modal-action { width: 100%; height: 42px; margin-top: 22px; font-size: 12px; font-weight: 800; background: linear-gradient(135deg, #9279ff, #755ce9); border: 0; border-radius: 8px; }
@media (max-width: 1120px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .workspace-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sidebar { position: static; width: 64px; padding: 20px 10px; }
  .brand { padding: 0 4px 28px; }
  .brand > div:last-child, .nav-item:not(.active)::after, .nav-item { font-size: 0; }
  .nav-item { justify-content: center; padding: 11px 0; }
  .nav-item svg { width: 18px; height: 18px; }
  .nav-item.active::before { left: -10px; }
  .nav-count, .nav-label, .sidebar-bottom { display: none; }
  .content { width: calc(100% - 64px); margin-left: 0; padding: 21px 16px; }
  .topbar { align-items: flex-start; gap: 16px; }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .outline-button, .primary-button { width: 38px; padding: 0; font-size: 0; }
  .stats-grid { grid-template-columns: 1fr; margin-top: 22px; }
  .bucket-row { grid-template-columns: 36px 1fr 60px 15px; }
  .bucket-bar { display: none; }
  .files-table { min-width: 640px; }
  .files-panel { overflow-x: auto; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .site-footer div { flex-direction: column; gap: 8px; }
}