:root{
  --bg:#0b1020;
  --panel:#121a33;
  --panel2:#0f1630;
  --text:#e6f0ff;
  --muted:#9fb0d0;
  --accent:#26d6ff;
  --good:#2bff88;
  --warn:#ffd84a;
  --bad:#ff6a3d;
  --border:#22305f;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --radius:18px;
  --radius2:12px;
  --px: 3px;
  --font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--font);
  color:var(--text);
  background: radial-gradient(900px 600px at 20% 10%, rgba(38,214,255,.18), transparent 60%),
              radial-gradient(900px 600px at 80% 20%, rgba(255,95,215,.12), transparent 55%),
              radial-gradient(900px 600px at 50% 100%, rgba(43,255,136,.10), transparent 60%),
              var(--bg);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:18px}
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(11,16,32,.75);
  border-bottom:1px solid rgba(34,48,95,.6);
}
.brand{display:flex;gap:12px;align-items:center}
.brand img{width:42px;height:42px}
.brand .title{font-weight:800;letter-spacing:.3px}
.brand .sub{font-size:12px;color:var(--muted)}
.row{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.spread{justify-content:space-between}
.topbar-actions{gap:10px}
.btn{
  border:none; cursor:pointer;
  color:var(--text);
  background: linear-gradient(180deg, rgba(38,214,255,.18), rgba(38,214,255,.08));
  padding:10px 12px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(34,48,95,.9);
}
.btn:hover{filter:brightness(1.08)}
.btn.secondary{background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06))}
.btn.danger{background:linear-gradient(180deg, rgba(255,106,61,.22), rgba(255,106,61,.10))}
.btn.good{background:linear-gradient(180deg, rgba(43,255,136,.18), rgba(43,255,136,.08))}
.btn.small{padding:7px 10px; border-radius:10px; font-size:12px}
.card{
  background: linear-gradient(180deg, rgba(18,26,51,.95), rgba(15,22,48,.95));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(34,48,95,.8);
}
.card.pad{padding:18px}
.grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
}
@media (max-width: 860px){
  .grid{grid-template-columns:1fr}
  .hide-sm{display:none !important}
}
.input, select, textarea{
  width:100%;
  background: rgba(11,16,32,.7);
  border:1px solid rgba(34,48,95,.9);
  padding:10px 12px;
  border-radius: 12px;
  color: var(--text);
  outline:none;
}
.input:focus, textarea:focus, select:focus{border-color: rgba(38,214,255,.9); box-shadow:0 0 0 3px rgba(38,214,255,.12)}
.smallmuted{font-size:12px;color:var(--muted);line-height:1.4}
.h1{font-size:22px;font-weight:900;letter-spacing:.3px;margin:0 0 8px}
.h2{font-size:14px;color:var(--muted);margin:0 0 14px}
.hr{height:1px;background:rgba(34,48,95,.7);margin:14px 0}
.table{width:100%; border-collapse:separate; border-spacing:0 10px}
.table th{font-size:12px;color:var(--muted);text-align:left;padding:0 10px}
.tr{
  background: rgba(11,16,32,.55);
  border:1px solid rgba(34,48,95,.75);
  border-radius:14px;
}
.table td{padding:12px 10px; vertical-align:middle}
.table .name{font-weight:800}
.badge{
  font-size:11px; padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(34,48,95,.8);
  color:var(--muted);
  background: rgba(11,16,32,.5);
}
.badge.good{color:#b8ffd7; border-color:rgba(43,255,136,.35)}
.badge.admin{color:#bfe9ff; border-color:rgba(38,214,255,.35)}
.badge.share{color:#ffd6f3; border-color:rgba(255,95,215,.35)}
.toolbar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:12px 14px;
}
.toolbar-left{flex:1; min-width:220px}
.toolbar-right{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end}

.quota-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.quota-top .smallmuted{min-width:0}
.quota-top .toolbar-upload{margin-left:auto}

.toolbar-upload{display:flex; align-items:center; justify-content:flex-end}
.toolbar-upload .u-icon{margin-right:6px}
.quota-box{min-width:220px}
.toolbar-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end}

/* action grouping (desktop/tablet) */
.toolbar-actions .actions-nav,
.toolbar-actions .actions-create,
.toolbar-actions .actions-share{display:flex; gap:8px; align-items:center; flex-wrap:wrap}

.toolbar-actions .actions-share{min-width:140px}


/* selection dock (multi-select actions) */
.selection-dock{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding:10px 12px;
  border-radius: 16px;
  background: rgba(11,16,32,.45);
  border:1px solid rgba(34,48,95,.75);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.selection-dock .sel-left{flex:0 0 auto}
.selection-dock .sel-actions{display:flex; gap:8px; flex:1 1 auto; flex-wrap:wrap; align-items:center}
.selection-dock .sel-close{flex:0 0 auto}

.cell-actions{text-align:right}
.actions-wrap{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.breadcrumbs{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.crumb{font-size:12px;color:var(--muted); padding:6px 10px; border-radius:999px; background: rgba(11,16,32,.45); border:1px solid rgba(34,48,95,.7); cursor:pointer}
.crumb:hover{border-color:rgba(38,214,255,.7); color:var(--text)}
.kbd{font-size:11px;color:var(--muted);border:1px solid rgba(34,48,95,.8);padding:2px 6px;border-radius:6px;background:rgba(11,16,32,.55)}
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:100; display:none;
  align-items:center; justify-content:center; padding:18px;
}
.modal{
  width:min(920px, 100%);
  max-height: min(86vh, 980px);
  overflow:auto;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18,26,51,.98), rgba(15,22,48,.98));
  border:1px solid rgba(34,48,95,.85);
  box-shadow: var(--shadow);
}
.modal header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(34,48,95,.6)}
.modal .content{padding:16px}
.progress{
  height:10px;border-radius:999px;background:rgba(11,16,32,.6);
  border:1px solid rgba(34,48,95,.75); overflow:hidden;
}
.progress > div{height:100%; width:0%; background:linear-gradient(90deg, rgba(38,214,255,.95), rgba(43,255,136,.95));}
.toast{
  position:fixed; bottom:14px; right:14px; z-index:150;
  padding:10px 12px; border-radius:14px;
  background: rgba(11,16,32,.85);
  border:1px solid rgba(34,48,95,.85);
  box-shadow: var(--shadow);
  display:none;
  max-width:min(420px, 90vw);
}
.toast strong{display:block}

/* preview media helpers */
.preview-media{
  max-width:100%;
  height:auto;
  border-radius:14px;
  border:1px solid rgba(34,48,95,.7);
}
.preview-image{
  display:block;
  margin:0 auto;
  max-height:72vh;
  object-fit:contain;
}
.preview-video{
  width:100%;
  max-height:62vh;
}

/* Mobile responsiveness */
@media (max-width: 680px){
  .container{padding:12px}
  .brand img{width:36px;height:36px}
  .topbar .row.spread{gap:10px;align-items:flex-start;flex-direction:column}

  /* topbar actions scroll on very small screens */
  /* compact topbar */
  .container{padding:14px}
  .brand img{width:34px;height:34px}
  .brand .sub{display:none}
  .topbar .row.spread{flex-direction:column;align-items:flex-start;gap:10px}
  .topbar-actions .btn{white-space:nowrap}

  /* compact quota on mobile */
  .quota-box .progress{height:10px}

  .topbar-actions{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;gap:8px;padding-bottom:6px}
  .topbar-actions > *{flex:0 0 auto}
  .topbar-actions .badge{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* main toolbar layout */
  .toolbar{align-items:stretch;flex-direction:column; padding:10px 12px; gap:8px}
  .toolbar-left{min-width:0}
  .toolbar-right{width:100%;justify-content:flex-start; gap:8px}
  .quota-box{width:100%;min-width:0}

  /* Upload stays in the top quota row (no FAB) */
  .toolbar-upload{position:static}
  .toolbar-upload #btnUpload{min-width:0}

  /* toolbar actions: compact strip on mobile (scrollable) */
  .toolbar-actions{
    width:100%;
    display:flex;
    gap:8px;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:6px;
    -webkit-overflow-scrolling:touch;
    border:1px solid rgba(34,48,95,.65);
    border-radius:14px;
    background: rgba(11,16,32,.38);
  }
  .toolbar-actions::-webkit-scrollbar{height:6px}
  .toolbar-actions::-webkit-scrollbar-thumb{background:rgba(34,48,95,.65);border-radius:10px}
  .toolbar-actions > div{flex:0 0 auto;display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
  /* no visual separators (they looked messy on small screens) */
  .toolbar-actions > div + div{padding-left:0;border-left:none}
  /* remove desktop min-widths so groups don't create huge gaps on mobile */
    .toolbar-actions .actions-share{min-width:unset}
  .toolbar-actions .btn{white-space:nowrap}



  /* selection dock as floating bottom bar on mobile */
  .selection-dock{position:fixed;left:12px;right:12px;bottom:12px;margin:0;z-index:80;backdrop-filter:blur(10px)}
  .selection-dock .sel-actions{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .selection-dock .sel-actions .btn{flex:0 0 auto}
  body.has-selection{padding-bottom:120px}

  /* action cells stack nicely */
  .cell-actions{text-align:left !important}
  .actions-wrap{justify-content:flex-start}

  /* table becomes card-like */
  .table{display:block}
  .table thead{display:none}
  .table tbody{display:block}
  .table tr.tr{display:block;margin:0 0 10px 0;border-radius:14px}
  .table td{display:block;padding:10px 12px}
  .table td:nth-child(1){width:auto}
  .table td:last-child{text-align:left}
  .hide-sm{display:none !important}

  /* full-screen modals on mobile */
  .modal{width:100%;max-height:92vh;border-radius:16px}
  .modal header{flex-wrap:wrap;gap:10px;position:sticky;top:0;background:rgba(18,26,51,.98)}
  .modal .content{padding:12px}
  .progress{height:12px}
  .btn.small{font-size:11px;padding:6px 9px}
}

/* Pagination bar (bottom) */
.pagebar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px 2px}
.pagebar #pageInfo{flex:1;min-width:0;padding:0}
.pagebar .pager-btns{display:flex;gap:6px;flex:0 0 auto}
@media (max-width: 680px){
  .pagebar{padding:10px 0 0}
  .pagebar .pager-btns .btn{padding:8px 10px}
}


/* clickable file/folder name */
.name-link{
  display:block;
  width:100%;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  color:var(--text);
  font: inherit;
  font-weight:900;
  line-height:1.25;
  text-align:left;
  cursor:pointer;
}
.name-link:hover{ text-decoration: underline; }
.name-link:focus{ outline:none; box-shadow:0 0 0 3px rgba(38,214,255,.12); border-radius:10px; }