/* CF Cloud — clean light UI with Control Freaks accents */

@font-face {
  font-family: 'Akira';
  src: url('assets/fonts/AkiraExpanded.otf') format('opentype');
  font-weight: 800; font-display: swap;
}
@font-face {
  font-family: 'InterVar';
  src: url('assets/fonts/InterVariable.ttf') format('truetype');
  font-weight: 100 900; font-display: swap;
}

:root {
  --bg:      #F5F2ED;
  --card:    #FFFFFF;
  --ink:     #050510;
  --muted:   #8a8794;
  --line:    #e4e0d8;
  --accent:     #FF3CAC; /* CF signature pink */
  --accent-dark: #D9248C;
  --radius:  12px;
  --display: 'Akira', 'Helvetica Neue', sans-serif;
  --body:    'InterVar', 'Helvetica Neue', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
dialog:not([open]) { display: none !important; }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
html { font-size: 16px; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--body);
  -webkit-font-smoothing: antialiased; min-height: 100vh;
}
button {
  font-family: var(--body); font-size: .875rem; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: .5rem .9rem; border-radius: 8px; transition: background .15s, border-color .15s;
}
button:hover { border-color: var(--ink); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
button.danger { color: var(--accent); border-color: var(--accent); }
button.danger:hover { background: var(--accent); color: #fff; }
button.ghost { border-color: transparent; background: transparent; color: var(--muted); }
button.ghost:hover { color: var(--ink); }
input[type="search"], input[type="text"], input[type="password"], input[type="number"], select {
  font-family: var(--body); font-size: .9rem; padding: .5rem .8rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* iOS auto-zooms the page when a focused input is under 16px — keep inputs at
   16px on touch devices so focusing never triggers the zoom */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.5rem 2rem; width: min(340px, 100%); display: flex; flex-direction: column;
  gap: .9rem; align-items: center; box-shadow: 0 10px 40px rgba(5,5,16,.07);
}
.login-logo { height: 44px; object-fit: contain; }
.login-title { font-family: var(--display); font-size: 1rem; letter-spacing: .12em; }
.login-title span { color: var(--accent); }
.login-card input, .login-card button { width: 100%; }
.login-error { color: var(--accent); font-size: .8rem; min-height: 1em; }

/* ---------- chrome ---------- */
.topbar {
  display: flex; align-items: center; gap: .35rem; padding: .6rem 1.2rem;
  /* keep clear of the iPhone status bar / Dynamic Island in standalone mode */
  padding-top: calc(.6rem + env(safe-area-inset-top, 0px));
  background: var(--ink); color: #F5F2ED; position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: .65rem; white-space: nowrap; }
.brand img { height: 28px; }
.brand span { font-family: var(--display); font-size: .78rem; letter-spacing: .12em; }
.brand b { color: var(--accent); }
.search-wrap {
  display: flex; align-items: center; gap: .45rem; background: #16162a;
  border: 1px solid #26263e; border-radius: 999px; padding: .4rem .9rem;
  color: #8e8ba6; margin-right: .4rem; transition: border-color .15s;
}
.search-wrap:focus-within { border-color: var(--accent); color: #cfccc5; }
.search-wrap input {
  background: none; border: none; padding: 0; color: #fff; width: 150px;
  font-size: .85rem; border-radius: 0;
}
.search-wrap input:focus { outline: none; }
.search-wrap input::placeholder { color: #8e8ba6; }
.top-btn {
  display: inline-flex; align-items: center; gap: .45rem; border: none;
  background: transparent; color: #cfccc5; padding: .45rem .7rem;
  border-radius: 999px; font-size: .85rem;
}
.top-btn:hover { color: #fff; background: #1d1d33; border: none; }

/* breadcrumbs — own row under the topbar */
.crumbs-row {
  display: flex; align-items: center; gap: .65rem; padding: .85rem 1.2rem 0;
}
#backBtn {
  width: 34px; height: 34px; flex: none; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  display: grid; place-items: center; padding: 0;
  box-shadow: 0 1px 3px rgba(5,5,16,.06);
}
#backBtn:hover { border-color: var(--accent); color: var(--accent); }
.crumbs {
  flex: 1; min-width: 0; font-size: .9rem; white-space: nowrap;
  overflow-x: auto; scrollbar-width: none;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: #c9c5bb; margin: 0 .45rem; }
.crumbs .here { color: var(--ink); font-weight: 600; }

.toolbar {
  display: flex; align-items: center; gap: .5rem; padding: .8rem 1.2rem;
  flex-wrap: wrap;
}
.upload-files {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600;
  padding: .55rem 1rem; border-radius: 10px; background: var(--card);
  box-shadow: 0 1px 3px rgba(5,5,16,.06);
}
.upload-files:hover { border-color: var(--accent); color: var(--accent); }
.view-toggle {
  display: inline-flex; background: #eceae4; border-radius: 10px; padding: 3px; gap: 2px;
}
.view-toggle button {
  border: none; background: transparent; padding: .35rem .55rem; border-radius: 8px;
  color: var(--muted); display: grid; place-items: center;
}
.view-toggle button.active { background: var(--card); color: var(--ink);
  box-shadow: 0 1px 3px rgba(5,5,16,.1); }
#sortSel { padding: .45rem .6rem; border-radius: 10px; }
#sortDir { padding: .45rem .5rem; font-size: 1rem; }
.sel-actions { display: flex; align-items: center; gap: .5rem; padding-left: .8rem;
               border-left: 1px solid var(--line); }
.sel-actions span { font-size: .85rem; color: var(--muted); }
.spacer { flex: 1; }
.status { font-size: .8rem; color: var(--muted); }

/* ---------- card grid ---------- */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: .8rem;
}
.card {
  position: relative; display: flex; align-items: center; gap: .9rem;
  background: var(--card); border: 1px solid transparent; border-radius: 16px;
  padding: 1rem 1.1rem; cursor: pointer; min-width: 0;
  box-shadow: 0 1px 3px rgba(5,5,16,.05);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.card:hover { box-shadow: 0 6px 18px rgba(5,5,16,.1); transform: translateY(-1px); }
.card.selected { border-color: var(--accent); background: #fff5fa; }
.card-ico { flex: none; display: grid; place-items: center; }
.card-ico .fico { width: 44px; height: 44px; }
.card-ico .thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; display: block; }
.card-body { flex: 1; min-width: 0; }
.card-name { font-weight: 600; font-size: .95rem; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { color: var(--muted); font-size: .75rem; margin-top: .2rem; }
.card-actions { display: flex; gap: .1rem; flex: none; }
.card-actions button {
  border: none; background: none; padding: .35rem; color: var(--muted);
  display: grid; place-items: center; border-radius: 8px;
}
.card-actions button:hover { color: var(--accent); background: #faf8f4; }
.card-check {
  position: absolute; top: .55rem; left: .55rem; margin: 0;
  opacity: 0; transition: opacity .12s; accent-color: var(--accent);
}
.card:hover .card-check, .card.selected .card-check, .card-check:checked { opacity: 1; }
/* ---------- context menu ---------- */
.menu {
  position: absolute; z-index: 60; width: 160px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: .3rem;
  box-shadow: 0 10px 30px rgba(5,5,16,.15); display: flex; flex-direction: column;
}
.menu button {
  border: none; background: none; text-align: left; padding: .5rem .7rem;
  border-radius: 8px; font-size: .85rem;
}
.menu button:hover { background: #faf8f4; }
.menu button.danger { color: var(--accent); border: none; }
.menu button.danger:hover { background: #fff0f8; color: var(--accent-dark); }

/* ---------- file list ---------- */
main { padding: 0 1.2rem 6rem; position: relative; min-height: 60vh; }
main.dragging { outline: 3px dashed var(--accent); outline-offset: -6px; border-radius: var(--radius); }
.drop-hint {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 10;
  background: rgba(245,242,237,.85); font-family: var(--display); font-size: 1rem;
  letter-spacing: .08em; color: var(--accent); pointer-events: none;
}
table.files { width: 100%; border-collapse: collapse; background: var(--card);
              border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.files { border-style: hidden; box-shadow: 0 0 0 1px var(--line); }
.files th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); padding: .6rem .8rem; border-bottom: 1px solid var(--line);
  background: #faf8f4;
}
.files td { padding: .55rem .8rem; border-bottom: 1px solid #f0ede6; font-size: .9rem; }
.files tbody tr:hover { background: #faf8f4; }
.files tbody tr.selected { background: #ffeaf6; }
.c-check { width: 2rem; }
.c-size { width: 6.5rem; white-space: nowrap; color: var(--muted); }
.c-date { width: 10rem; white-space: nowrap; color: var(--muted); }
.c-act { width: 11.5rem; text-align: right; }
.name-cell { display: flex; align-items: center; gap: .55rem; min-width: 0; cursor: pointer; }
.name-cell .ico { width: 24px; height: 24px; flex: none; display: grid; place-items: center; }
.name-cell .ico .fico { width: 24px; height: 24px; }
.name-cell .ico .thumb { width: 24px; height: 24px; object-fit: cover; border-radius: 6px; display: block; }
.nm-wrap { min-width: 0; display: flex; flex-direction: column; }
.name-cell .nm { overflow-wrap: anywhere; }
.name-cell .meta { display: none; color: var(--muted); font-size: .72rem; margin-top: .15rem; }
.name-cell .meta.show { display: block; }
.name-cell:hover .nm { color: var(--accent); }
.row-actions { display: flex; gap: .15rem; justify-content: flex-end; opacity: 0; }
tr:hover .row-actions { opacity: 1; }
.row-actions button { border: none; background: none; padding: .25rem .4rem; font-size: .85rem;
                      color: var(--muted); }
.row-actions button:hover { color: var(--accent); }
.empty { text-align: center; color: var(--muted); padding: 4rem 1rem; font-size: .95rem; }

/* ---------- upload panel ---------- */
.upload-panel {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: min(380px, calc(100vw - 2rem));
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(5,5,16,.18); z-index: 30; max-height: 50vh;
  display: flex; flex-direction: column;
}
.upload-head { display: flex; justify-content: space-between; align-items: center;
               padding: .7rem .9rem; border-bottom: 1px solid var(--line); font-size: .85rem;
               font-weight: 600; }
#uploadItems { overflow-y: auto; padding: .4rem 0; }
.up-item { padding: .4rem .9rem; font-size: .8rem; }
.up-item .up-name { display: flex; justify-content: space-between; gap: .6rem; }
.up-item .up-name span:last-child { color: var(--muted); white-space: nowrap; }
.up-bar { height: 4px; background: #eee9e0; border-radius: 2px; margin-top: .3rem; overflow: hidden; }
.up-bar i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .2s; }
.up-item.done .up-bar i { background: #2da44e; }
.up-item.error .up-name .pct { color: var(--accent); }
.up-cancel {
  border: none; background: none; color: var(--muted); padding: 0 .1rem;
  font-size: .8rem; line-height: 1; flex: none;
}
.up-cancel:hover { color: var(--accent); border: none; }
.up-item.cancelled .up-name, .up-item.cancelled .pct { color: var(--muted); }
.up-item.cancelled .up-bar i { background: #c9c5bb; }

/* ---------- dialogs ---------- */
dialog {
  /* the global margin reset kills the UA's `margin: auto` that centers <dialog> */
  margin: auto;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem;
  width: min(440px, calc(100vw - 2rem)); background: var(--card); color: var(--ink);
  max-height: calc(100vh - 2.5rem); max-height: calc(100dvh - 2.5rem);
  overflow-y: auto; box-shadow: 0 20px 60px rgba(5, 5, 16, .25);
}
dialog::backdrop { background: rgba(5,5,16,.45); }
dialog h3 { font-size: 1rem; margin-bottom: .9rem; }
dialog .dlg-row { display: flex; gap: .5rem; margin-top: 1rem; justify-content: flex-end; }
dialog input[type="text"], dialog select { width: 100%; }
dialog .share-url { display: flex; gap: .4rem; margin-top: .6rem; }
dialog .share-url input { flex: 1; font-size: .8rem; }
/* feedback badges — comments/approval that arrived via share links */
.fb-badge { display: inline-flex; gap: .35rem; align-items: center; margin-left: .4rem; }
.fb-badge.link { cursor: pointer; }
.fb-badge.link:hover .fb-n { background: rgba(255, 60, 172, .25); }
.fb-n { background: rgba(255, 60, 172, .12); color: var(--accent); border-radius: 6px;
        padding: .05rem .4rem; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.fb-ok { color: #2e8b57; font-weight: 800; font-size: .8rem; }

.share-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0;
             border-bottom: 1px solid #f0ede6; font-size: .82rem; }
.share-row .sp { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.share-row .sx { color: var(--muted); white-space: nowrap; }
/* narrow screens: the path gets its own full line; badges, expiry and the
   buttons flow underneath instead of crushing the name to 1 char per line */
@media (max-width: 640px) {
  .share-row { flex-wrap: wrap; row-gap: .45rem; }
  .share-row .sp { flex: 1 1 100%; }
  .share-row .sx { margin-right: auto; font-size: .76rem; }
}
.folder-pick { max-height: 40vh; overflow-y: auto; border: 1px solid var(--line);
               border-radius: 8px; margin-top: .4rem; }
.folder-pick div { padding: .45rem .7rem; cursor: pointer; font-size: .85rem;
                   border-bottom: 1px solid #f0ede6; }
.folder-pick div:hover { background: #faf8f4; }
.folder-pick div.sel { background: #ffeaf6; color: var(--accent); font-weight: 600; }

/* ---------- converter ---------- */
#convertBtn { display: inline-flex; align-items: center; gap: .5rem; }
.cv-drop {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  border: 2px dashed var(--line); border-radius: 12px; padding: 1.8rem 1rem;
  text-align: center; color: var(--muted); font-size: .9rem;
  transition: border-color .15s, background .15s;
}
.cv-drop.drag { border-color: var(--accent); background: #fff5fa; }
.cv-file { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.cv-file .fico { width: 38px; height: 38px; flex: none; }
.cv-fmeta { min-width: 0; }
.cv-fmeta b { font-size: .9rem; overflow-wrap: anywhere; display: block; }
.cv-fmeta span { color: var(--muted); font-size: .78rem; }
.cv-label { display: block; font-size: .85rem; margin-bottom: .7rem; }
.cv-label select { width: 100%; margin-top: .35rem; }
.cv-opt { display: flex; align-items: center; gap: .6rem; font-size: .85rem; margin-bottom: .6rem; }
.cv-opt input[type=range] { flex: 1; accent-color: var(--accent); }
.cv-opt span { min-width: 2ch; color: var(--muted); }
.cv-note { color: var(--muted); font-size: .78rem; margin-top: .5rem; }
.cv-bar { margin: 1.1rem 0 .55rem; height: 6px; }
.cv-status { font-size: .82rem; color: var(--muted); min-height: 1.2em; }
.cv-error { color: var(--accent-dark); font-size: .9rem; line-height: 1.45; }
.cv-result {
  display: grid; place-items: center; background: #faf8f4;
  border-radius: 10px; padding: .6rem; margin-bottom: .7rem;
}
.cv-result img, .cv-result video { max-width: 100%; max-height: 40vh; border-radius: 8px; }
.cv-result audio { width: 100%; }
.cv-sizes { font-size: .85rem; color: var(--muted); text-align: center; overflow-wrap: anywhere; }

/* ---------- preview lightbox ---------- */
dialog.preview {
  margin: 0; inset: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
  border: none; border-radius: 0; padding: 0; background: transparent;
  display: flex; flex-direction: column;
}
dialog.preview::backdrop { background: rgba(5, 5, 16, .93); }
.pv-top { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; flex: none;
          padding-top: calc(.8rem + env(safe-area-inset-top, 0px)); }
.pv-name {
  flex: 1; min-width: 0; color: #cfccc5; font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-btn {
  display: inline-flex; align-items: center; gap: .45rem; flex: none;
  background: rgba(255, 255, 255, .1); border: none; color: #fff;
  border-radius: 999px; padding: .5rem .85rem; font-size: .85rem;
}
.pv-btn:hover { background: var(--accent); border: none; }
.pv-body {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 1rem 1.2rem;
}
/* hard viewport-based cap: top bar (~60px) + bottom padding never overflow */
.pv-body img, .pv-body video {
  max-width: 100%;
  max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px - env(safe-area-inset-top, 0px));
  object-fit: contain;
  border-radius: 10px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.pv-body iframe {
  width: min(960px, 100%); border: none;
  height: calc(100vh - 110px);
  height: calc(100dvh - 110px - env(safe-area-inset-top, 0px));
  border-radius: 10px; background: #fff;
}
.pv-body pre {
  max-width: min(860px, 100%); overflow: auto;
  max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px - env(safe-area-inset-top, 0px));
  background: var(--card); color: var(--ink); padding: 1.2rem 1.4rem;
  border-radius: 12px; font-size: .8rem; white-space: pre-wrap; width: 100%;
}
.pv-body audio { width: min(480px, 92%); }
@media (max-width: 640px) {
  .pv-top { padding: .6rem .7rem; }
  .pv-btn span { display: none; }
  .pv-body { padding: 0 .6rem .8rem; }
}

@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; gap: .6rem; }
  .card { padding: .8rem .9rem; border-radius: 14px; }
  .card-ico .fico { width: 38px; height: 38px; }
  .card-ico .thumb { width: 38px; height: 38px; }
  .card-check { opacity: 1; }
  /* collapse size/date columns — their info moves under the filename */
  .c-date, .c-size { display: none; }
  .name-cell .meta { display: block; }
  .c-act { width: auto; }
  .files td { padding: .55rem .35rem; }
  .files td:first-child, .files th:first-child { padding-left: .6rem; }
  .files th { padding: .5rem .35rem; }
  main { padding: 0 .6rem 6rem; }
  .toolbar { padding: .7rem .6rem; }
  .topbar { gap: .2rem; padding: .55rem .7rem;
            padding-top: calc(.55rem + env(safe-area-inset-top, 0px)); }
  .top-btn span { display: none; }   /* icon-only buttons on mobile */
  .top-btn { padding: .45rem .5rem; }
  .search-wrap { padding: .35rem .7rem; margin-right: .15rem; }
  .search-wrap input { width: 84px; }
  .brand img { height: 24px; }
  .brand span { display: none; }     /* logo is enough on small screens */
  .crumbs-row { padding: .75rem .7rem 0; gap: .5rem; }
  #backBtn { width: 32px; height: 32px; }
  .row-actions { opacity: 1; gap: .05rem; }
  .row-actions button { padding: .3rem .3rem; }
}