/* Existing palette and responsive shell are retained. */

.oc-form{display:grid;gap:18px;margin:24px 0}.oc-form label{display:grid;gap:8px;color:var(--muted);font-size:12px}.oc-form .search-input{width:100%}.oc-form button{justify-self:start}.oc-auth{max-width:500px;margin:30px auto}.oc-auth h2{margin-top:20px}.oc-error{color:var(--danger,#c85162);font-size:12px;min-height:1em}.oc-secret{display:block;overflow-wrap:anywhere;white-space:pre-wrap;font-size:13px;padding:18px;background:var(--subtle);border-radius:9px;user-select:all}.oc-file-row{display:grid;grid-template-columns:30px minmax(120px,1fr) 90px;align-items:center;gap:14px;padding:20px;border-bottom:1px solid var(--line)}.oc-file-icon{color:var(--accent)}.oc-file-name{text-align:left;overflow-wrap:anywhere;font-size:12px}.oc-file-actions{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:8px}.oc-file-actions .button{font-size:10px;padding:6px 9px}.oc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.oc-grid .oc-file-row{border-right:1px solid var(--line)}.oc-preview{width:100%;max-height:60vh;object-fit:contain;border-radius:9px}.oc-file-row .muted{font-size:10px}
@media(max-width:600px){.oc-file-row{grid-template-columns:24px minmax(90px,1fr) 65px;padding:14px;gap:10px}.oc-file-actions{grid-column:1/-1}.oc-auth{margin:10px 0}.oc-grid{grid-template-columns:1fr}}

/* Capacity and transfer states share the existing light and dark palette. */
@property --used-share {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.oc-storage-info { display: flex; align-items: center; gap: 18px; width: 100%; }
.oc-storage-info .storage-ring {
  --used-share: var(--target-usage);
  position: relative;
  isolation: isolate;
  border: 0;
  background: conic-gradient(var(--accent) var(--used-share, var(--target-usage)), var(--line) 0);
  animation: oc-fill 850ms ease-out both;
}
.oc-storage-info .storage-ring::before {
  content: '';
  position: absolute;
  inset: 7px;
  background: var(--surface, var(--bg));
  border-radius: 50%;
  z-index: -1;
}
.oc-storage-info .storage-ring strong { font-size: clamp(15px, 2vw, 22px); }
@keyframes oc-fill { from { --used-share: 0%; } to { --used-share: var(--target-usage); } }
.oc-capacity { display: grid; gap: 5px; margin: 10px 0 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.oc-capacity div { display: grid; grid-template-columns: 58px auto; gap: 10px; }
.oc-capacity dt { color: var(--muted); }
.oc-capacity dd { margin: 0; white-space: nowrap; font-weight: 650; }
.oc-storage-status { display: flex; align-items: center; gap: 7px; font-size: 12px; }
[data-storage="online"] :is(.small-dot, .status-dot) { background: var(--success, #38937d); }
[data-storage="offline"] :is(.small-dot, .status-dot) { background: var(--danger, #c85162); }
.mini-track { overflow: hidden; }
.mini-track span { display: block; height: 100%; background: var(--accent); transition: width 600ms ease-out; }
.oc-breadcrumbs, .oc-heading-actions, .oc-upload-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.oc-breadcrumbs .text-link { overflow-wrap: anywhere; text-align: start; }
.oc-recent-heading { margin: 26px 0 12px; }
.oc-recent-heading h2 { font-size: 17px; }
.oc-file-actions .button { font-size: 11px; min-height: 32px; }
.oc-picker-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.oc-upload-picker:focus-within label { outline: 2px solid var(--accent); outline-offset: 2px; }
.selected-files progress { display: block; width: 100%; margin-top: 6px; accent-color: var(--accent); }
.oc-dragging #main, .oc-dragging dialog[open] { outline: 2px dashed var(--accent); outline-offset: -4px; }
.signed-out :is(.search-trigger, .new-button, #navigation, .sidebar-bottom, .nav-caption, footer button) { visibility: hidden; }
[hidden] { display: none !important; }
@media (max-width: 600px) {
  .oc-file-actions .button { min-height: 40px; }
  .oc-heading-actions .button { min-height: 40px; }
  .oc-form .search-input { font-size: 16px; }
  .oc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-grid .oc-file-row { grid-template-columns: 24px minmax(0, 1fr); }
  .oc-grid .oc-file-row > .muted { grid-column: 2; }
  .oc-storage-info { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .oc-storage-info .storage-ring { animation: none; }
  .mini-track span { transition: none; }
}