:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1d2935;
  background: #f4f6f8;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: #f4f6f8; }
button, input { font: inherit; }
button, label, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.topbar { height: 56px; border-bottom: 1px solid #d9e0e5; background: #fff; }
.topbar__inner {
  width: min(100% - 32px, 920px);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { min-width: 0; display: flex; align-items: center; gap: 10px; color: #1d2935; font-size: 15px; font-weight: 700; text-decoration: none; }
.brand img { flex: 0 0 auto; }
.identity { min-width: 0; display: flex; align-items: center; gap: 8px; color: #536170; font-size: 13px; }
.identity__status { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #1f9d69; box-shadow: 0 0 0 3px #e4f5ed; }
.identity__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity__signout { width: 30px; height: 30px; margin-left: 2px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #687785; cursor: pointer; }
.identity__signout:hover { border-color: #d3dbe1; background: #f5f7f8; color: #243442; }
.identity__signout:focus-visible { outline: 3px solid rgba(23, 105, 170, 0.2); outline-offset: 2px; }
.identity__signout svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

main { width: min(100% - 32px, 820px); margin: 0 auto; padding: 56px 0 80px; }
.auth-panel { min-height: 320px; padding: 48px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #d5dde3; border-radius: 8px; background: #fff; box-shadow: 0 10px 28px rgba(25, 42, 56, 0.07); text-align: center; }
.auth-panel__icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #b9d9cc; border-radius: 8px; background: #f2fbf7; color: #087f5b; }
.auth-panel__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.auth-panel h1 { margin-top: 18px; }
.auth-panel p { max-width: 360px; margin-top: 7px; color: #677583; font-size: 14px; line-height: 1.5; }
.auth-panel__button { margin-top: 24px; }
.view-tabs { height: 42px; margin-bottom: 14px; display: inline-flex; padding: 3px; border: 1px solid #d5dde3; border-radius: 7px; background: #fff; }
.view-tab { min-width: 104px; height: 34px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 5px; background: transparent; color: #61707d; font-size: 13px; font-weight: 700; cursor: pointer; }
.view-tab:hover { color: #243442; }
.view-tab.is-active { background: #eaf5f1; color: #087252; }
.view-tab:focus-visible { outline: 3px solid rgba(23, 105, 170, 0.2); outline-offset: 2px; }
.view-tab svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.workspace { overflow: hidden; border: 1px solid #d5dde3; border-radius: 8px; background: #fff; box-shadow: 0 10px 28px rgba(25, 42, 56, 0.07); }
.workspace__heading { min-height: 96px; padding: 24px 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; border-bottom: 1px solid #e3e8ec; }
h1, h2, p { margin: 0; }
h1 { font-size: 21px; line-height: 1.3; letter-spacing: 0; }
.workspace__heading p { margin-top: 5px; color: #677583; font-size: 14px; }
.expiry { min-height: 30px; padding: 5px 9px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #efd9aa; border-radius: 6px; background: #fff8e9; color: #8b570c; font-size: 12px; font-weight: 700; white-space: nowrap; }
.expiry svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

form { padding: 28px; }
.dropzone { min-height: 244px; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #9eabb6; border-radius: 7px; background: #fafbfc; cursor: pointer; transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease; }
.dropzone:hover, .dropzone:focus-within, .dropzone.is-dragging { border-color: #087f5b; background: #f2fbf7; box-shadow: inset 0 0 0 1px #087f5b; }
.dropzone__icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #c8d1d8; border-radius: 7px; background: #fff; color: #087f5b; }
.dropzone__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dropzone__title { margin-top: 16px; font-size: 15px; font-weight: 700; }
.dropzone__or { margin: 7px 0; color: #7b8793; font-size: 12px; }
.choose-button { min-height: 34px; padding: 7px 12px; border: 1px solid #bdc7cf; border-radius: 6px; background: #fff; color: #263746; font-size: 13px; font-weight: 700; }
#file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.selection { min-height: 68px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; border: 1px solid #d9e0e5; border-radius: 7px; background: #fafbfc; }
.file-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 6px; background: #e8f3fb; color: #1769aa; }
.file-icon svg, .button svg, .icon-button svg, .result__check svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.file-icon svg { width: 21px; height: 21px; }
.file-details { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 3px; }
.file-details strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.file-details span { color: #71808d; font-size: 12px; }

.icon-button { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #687785; cursor: pointer; }
.icon-button:hover { border-color: #d3dbe1; background: #fff; color: #243442; }
.icon-button:focus-visible, .button:focus-visible, .dropzone:focus-within { outline: 3px solid rgba(23, 105, 170, 0.2); outline-offset: 2px; }
.icon-button svg { width: 19px; height: 19px; }

.progress { margin-top: 20px; }
.progress__labels { display: flex; justify-content: space-between; gap: 16px; color: #4e5e6c; font-size: 12px; font-weight: 700; }
.progress__track { height: 7px; margin-top: 8px; overflow: hidden; border-radius: 4px; background: #e5eaee; }
.progress__track span { width: 0; height: 100%; display: block; background: #087f5b; transition: width 120ms ease; }
.message { margin-top: 18px; padding: 11px 13px; border-radius: 6px; font-size: 13px; line-height: 1.45; }
.message--error { border: 1px solid #efc2bd; background: #fff3f1; color: #9b2c23; }
.actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px; }

.button { min-height: 38px; padding: 8px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.button svg { width: 17px; height: 17px; }
.button--primary { border: 1px solid #087252; background: #087f5b; color: #fff; }
.button--primary:hover { background: #076b4d; }
.button--primary:disabled { border-color: #b9c5cd; background: #c5cfd6; cursor: not-allowed; }
.button--secondary { border: 1px solid #bdc7cf; background: #fff; color: #263746; }
.button--secondary:hover { background: #f5f7f8; }

.result { padding: 28px; }
.result__status { display: flex; align-items: center; gap: 13px; }
.result__check { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #e4f5ed; color: #087f5b; }
.result__check svg { width: 22px; height: 22px; stroke-width: 2.3; }
.result h2 { font-size: 17px; letter-spacing: 0; }
.result__status p { margin-top: 4px; color: #677583; font-size: 13px; }
.url-label { margin-top: 24px; display: block; color: #4c5d6b; font-size: 12px; font-weight: 700; }
.url-field { margin-top: 7px; display: flex; }
.url-field input { min-width: 0; height: 42px; flex: 1; padding: 0 12px; border: 1px solid #bdc7cf; border-right: 0; border-radius: 6px 0 0 6px; background: #fafbfc; color: #263746; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.url-field input:focus { outline: 2px solid rgba(23, 105, 170, 0.25); outline-offset: -1px; }
.icon-button--copy { width: 44px; height: 42px; border: 1px solid #bdc7cf; border-radius: 0 6px 6px 0; background: #fff; }
.result__actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px; }

.recent-heading { align-items: center; }
.refresh-button { border-color: #d3dbe1; background: #fff; }
.refresh-button.is-loading svg { animation: spin 800ms linear infinite; }
.recent-toolbar { min-height: 56px; padding: 11px 20px; display: flex; align-items: center; border-bottom: 1px solid #e3e8ec; background: #fafbfc; }
.filter-control { height: 32px; display: inline-flex; padding: 2px; border: 1px solid #d5dde3; border-radius: 6px; background: #fff; }
.filter-button { min-width: 64px; padding: 0 10px; border: 0; border-radius: 4px; background: transparent; color: #687785; font-size: 12px; font-weight: 700; cursor: pointer; }
.filter-button:hover { color: #243442; }
.filter-button.is-active { background: #e8eef2; color: #243442; }
.filter-button:focus-visible { outline: 3px solid rgba(23, 105, 170, 0.2); outline-offset: 2px; }
.upload-list { padding: 0 20px; }
.upload-row { min-height: 74px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; border-bottom: 1px solid #e8ecef; }
.upload-row:last-child { border-bottom: 0; }
.upload-row__main { min-width: 0; display: flex; align-items: center; gap: 12px; }
.upload-row__icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 6px; background: #e8f3fb; color: #1769aa; }
.upload-row--html .upload-row__icon { background: #eaf5f1; color: #087252; }
.upload-row__icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.upload-row__details { min-width: 0; }
.upload-row__name { max-width: 100%; display: block; overflow: hidden; color: #243442; font-size: 13px; font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.upload-row__name:hover { color: #0969da; text-decoration: underline; }
.upload-row__meta { margin-top: 4px; color: #71808d; font-size: 11px; }
.upload-row__date { color: #62717e; font-size: 12px; white-space: nowrap; }
.upload-row__actions { display: flex; gap: 2px; }
.list-state { min-height: 180px; padding: 48px 24px; display: grid; place-items: center; color: #71808d; font-size: 13px; text-align: center; }
.load-more { min-height: 70px; padding: 15px 20px; display: flex; align-items: center; justify-content: center; border-top: 1px solid #e8ecef; }
.load-more__button { min-width: 132px; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 620px) {
  .topbar__inner, main { width: min(100% - 24px, 820px); }
  .identity__email { max-width: 124px; }
  main { padding: 24px 0 48px; }
  .view-tabs { width: 100%; }
  .view-tab { min-width: 0; flex: 1; }
  .workspace__heading { padding: 20px; align-items: center; }
  form, .result { padding: 20px; }
  .dropzone { min-height: 210px; padding: 24px 16px; }
  .result__actions, .actions { flex-direction: column-reverse; }
  .button { width: 100%; }
  .recent-toolbar, .upload-list { padding-right: 14px; padding-left: 14px; }
  .filter-control { width: 100%; }
  .filter-button { min-width: 0; flex: 1; }
  .upload-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 11px 0; }
  .upload-row__date { grid-column: 1; padding-left: 48px; font-size: 11px; }
  .upload-row__actions { grid-column: 2; grid-row: 1 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}