:root{
  --bg:#090b0f;--panel:#10131a;--panel2:#151922;--line:#242a36;--line2:#303746;
  --text:#f5f7fb;--muted:#8f98a8;--soft:#c9d0db;--accent:#f4f7ff;--danger:#ff6b78;
  --radius:18px;--shadow:0 24px 80px rgba(0,0,0,.42)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,select{font:inherit}
button{color:inherit}
.hidden{display:none!important}
.muted{color:var(--muted)}
.eyebrow{font-size:11px;letter-spacing:.18em;color:#8d96a6;margin:0 0 8px}
.error{min-height:20px;color:#ff8791;font-size:13px}
.login-shell{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;padding:24px}
.login-glow{position:absolute;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(104,123,255,.25),transparent 66%);filter:blur(30px);top:-280px;right:-200px}
.login-card{position:relative;width:min(430px,100%);padding:42px;border:1px solid rgba(255,255,255,.11);border-radius:28px;background:rgba(18,21,29,.84);backdrop-filter:blur(24px);box-shadow:var(--shadow)}
.login-card h1{font-size:38px;line-height:1;margin:8px 0 12px;letter-spacing:-.04em}
.login-card>label,.stack-form label{display:grid;gap:8px;margin-top:18px;color:#cfd5df;font-size:13px}
input,select{border:1px solid var(--line2);background:#0d1016;color:var(--text);border-radius:12px;padding:13px 14px;outline:none}
input:focus,select:focus{border-color:#707b92;box-shadow:0 0 0 3px rgba(112,123,146,.12)}
.primary,.ghost,.danger-outline,.nav button,.admin-button,.view-toggle button,.topbar button,.section-title button,.profile button,.details button,.modal button{border:0;cursor:pointer}
.primary{background:var(--accent);color:#0b0d11;border-radius:12px;padding:12px 16px;font-weight:750}
.primary:hover{filter:brightness(.92)}
.large{width:100%;margin-top:22px;padding:14px}
.ghost{background:#171b24;border:1px solid var(--line)!important;border-radius:12px;padding:11px 14px}
.danger-outline{width:100%;margin-top:20px;padding:12px;border:1px solid rgba(255,107,120,.35)!important;background:transparent;color:#ff8d97;border-radius:12px}
.brand-mark{width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,#fff,#929db4);display:grid;place-items:center;color:#10131a;font-weight:900;font-size:20px;box-shadow:0 10px 30px rgba(255,255,255,.13)}
.brand-mark.small{width:38px;height:38px;border-radius:12px;font-size:16px}
.app{min-height:100vh;display:grid;grid-template-columns:270px minmax(0,1fr);background:var(--bg)}
.sidebar{height:100vh;position:sticky;top:0;border-right:1px solid var(--line);padding:20px 16px 14px;display:flex;flex-direction:column;background:linear-gradient(180deg,#11141b,#0c0f14)}
.brand-row{display:flex;align-items:center;gap:12px;padding:0 8px 22px}
.brand-row strong{display:block;font-size:15px}
.brand-row span{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.nav{display:grid;gap:4px}
.nav button,.admin-button{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;background:transparent;border-radius:10px;color:#aeb6c4;text-align:left}
.nav button:hover,.nav button.active,.admin-button:hover{background:#191e28;color:#fff}
.nav button span{width:18px;text-align:center;color:#818a9c}
.section-title{display:flex;justify-content:space-between;align-items:center;padding:22px 10px 8px;color:#747e8f;text-transform:uppercase;font-size:10px;letter-spacing:.13em}
.section-title button{background:transparent;font-size:18px;color:#99a3b3}
.folder-tree{overflow:auto;max-height:34vh;padding-right:2px}
.tree-row{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:9px;color:#aeb6c4;font-size:13px;cursor:pointer;white-space:nowrap;overflow:hidden}
.tree-row:hover,.tree-row.active{background:#191e28;color:#fff}
.tree-row span:last-child{overflow:hidden;text-overflow:ellipsis}
.admin-wrap{margin-top:3px}
.storage-card{margin-top:auto;border:1px solid var(--line);background:#11151d;border-radius:14px;padding:13px}
.storage-row{display:flex;justify-content:space-between;color:#aab2c0;font-size:11px;margin-bottom:9px}
.progress{height:5px;background:#252b35;border-radius:99px;overflow:hidden}
.progress div{height:100%;width:0;background:linear-gradient(90deg,#e9edf6,#77839a);transition:width .3s}
.profile{display:flex;align-items:center;gap:10px;margin-top:12px;padding:9px 4px 0}
.avatar{width:34px;height:34px;border-radius:11px;background:#202633;display:grid;place-items:center;font-weight:800}
.profile-copy{min-width:0;flex:1}
.profile-copy strong,.profile-copy span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-copy strong{font-size:12px}.profile-copy span{font-size:10px;color:var(--muted);margin-top:3px}
.profile button{background:transparent;color:#7c8697}
.workspace{min-width:0;display:flex;flex-direction:column;height:100vh}
.topbar{height:74px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 24px;background:rgba(9,11,15,.9);backdrop-filter:blur(16px);position:sticky;top:0;z-index:10}
.search-wrap{display:flex;align-items:center;gap:9px;flex:1;max-width:560px;background:#11151c;border:1px solid var(--line);border-radius:12px;padding:0 12px}
.search-wrap input{border:0;background:transparent;width:100%;padding:11px 0;box-shadow:none}
.owner-wrap{display:flex;align-items:center;gap:8px;color:#8f98a8;font-size:11px}
.owner-wrap select{padding:9px 34px 9px 10px;max-width:180px}
.upload-label{cursor:pointer;white-space:nowrap}
.content-head{display:flex;justify-content:space-between;align-items:flex-end;padding:24px 28px 18px}
.content-head h2{font-size:26px;letter-spacing:-.03em;margin:5px 0 4px}
.content-head p{margin:0;font-size:12px}
.breadcrumb{display:flex;gap:7px;align-items:center;min-height:18px;font-size:11px;color:#8a94a5}
.breadcrumb button{border:0;background:transparent;color:#8a94a5;padding:0;cursor:pointer}
.breadcrumb button:hover{color:#fff}
.view-toggle{display:flex;border:1px solid var(--line);border-radius:10px;padding:3px;background:#10131a}
.view-toggle button{width:34px;height:30px;border-radius:7px;background:transparent;color:#707b8d}
.view-toggle button.active{background:#252b36;color:#fff}
.content-area{position:relative;flex:1;overflow:auto;padding:0 28px 28px}
.items.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:14px}
.item-card{position:relative;border:1px solid var(--line);background:#11151c;border-radius:16px;padding:14px;min-height:145px;cursor:pointer;transition:.15s ease;overflow:hidden}
.item-card:hover,.item-card.selected{transform:translateY(-2px);border-color:#4b5568;background:#151a23}
.item-icon{height:74px;border-radius:12px;background:linear-gradient(145deg,#1a202b,#10141b);display:grid;place-items:center;font-size:34px;margin-bottom:12px;overflow:hidden}
.item-icon img,.item-icon video{width:100%;height:100%;object-fit:cover}
.item-name{font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-sub{font-size:10px;color:#7f8999;margin-top:5px}
.favorite-star{position:absolute;right:10px;top:9px;background:rgba(9,11,15,.72);border:0;color:#ffd66d;width:26px;height:26px;border-radius:8px;cursor:pointer}
.items.list{display:grid;gap:5px}
.items.list .item-card{min-height:0;display:grid;grid-template-columns:44px minmax(0,1fr) 110px 120px;align-items:center;padding:9px 12px;border-radius:11px}
.items.list .item-icon{height:38px;width:38px;margin:0;font-size:20px;border-radius:9px}
.items.list .item-sub{margin:0;text-align:right}
.items.list .favorite-star{position:static;justify-self:end}
.empty{height:50vh;display:grid;place-items:center;align-content:center;text-align:center;color:#7f8999}
.empty>div{font-size:52px}.empty h3{color:#dfe4ec;margin:12px 0 4px}.empty p{margin:0}
.drop-overlay{position:absolute;inset:0;border:2px dashed #778399;border-radius:18px;background:rgba(14,18,25,.9);display:grid;place-items:center;z-index:20;font-size:22px}
.details{position:fixed;right:0;top:0;width:350px;height:100vh;background:#11151c;border-left:1px solid var(--line);z-index:30;padding:18px;box-shadow:-20px 0 60px rgba(0,0,0,.35);overflow:auto}
.details-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.details-head button,.modal-head button{background:transparent;font-size:24px;color:#8d97a7}
.preview{height:230px;border-radius:16px;background:#0b0e13;display:grid;place-items:center;overflow:hidden;font-size:60px;border:1px solid var(--line)}
.preview img,.preview video,.preview iframe{width:100%;height:100%;object-fit:contain;border:0}
.details h3{font-size:18px;overflow-wrap:anywhere}
.detail-meta{display:grid;gap:9px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;color:#a6afbd;font-size:12px}
.meta-row{display:flex;justify-content:space-between;gap:20px}
.detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.detail-actions button{padding:11px;border-radius:11px;background:#1a202a;color:#dce2eb}
.detail-actions .danger{color:#ff8792;background:#26171b}
.modal{width:min(560px,92vw);border:1px solid var(--line2);border-radius:22px;background:#11151c;color:#fff;padding:22px;box-shadow:var(--shadow)}
.modal.wide{width:min(820px,94vw)}
.modal::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(5px)}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start}
.modal-head h2{margin:0 0 18px}
.user-create{display:grid;grid-template-columns:1fr 1.4fr 90px auto;gap:8px;margin-bottom:14px}
.users-list,.logs-list{display:grid;gap:7px;max-height:55vh;overflow:auto}
.user-row,.log-row{border:1px solid var(--line);border-radius:12px;padding:11px;display:grid;grid-template-columns:minmax(0,1fr) 100px 110px 90px;gap:10px;align-items:center}
.user-row strong,.user-row span{display:block}.user-row span{font-size:11px;color:var(--muted);margin-top:4px}
.user-row input{padding:8px}
.user-row button{background:#202632;padding:8px;border-radius:9px}
.log-row{grid-template-columns:140px 1fr 150px;font-size:11px;color:#aab2bf}
.temporary{padding:12px;background:#1b2531;border:1px solid #344255;border-radius:12px;margin:10px 0;color:#dce7f6;word-break:break-all}
.stack-form{display:grid}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#eff2f7;color:#10131a;padding:12px 16px;border-radius:12px;z-index:100;box-shadow:var(--shadow);font-weight:650;font-size:13px}
.mobile-only{display:none}
@media(max-width:950px){
  .app{grid-template-columns:230px minmax(0,1fr)}
  .owner-wrap span{display:none}.topbar{padding:0 14px}.content-head,.content-area{padding-left:18px;padding-right:18px}
}
@media(max-width:760px){
  .app{display:block}.sidebar{position:fixed;left:-280px;z-index:50;width:270px;transition:left .2s}.sidebar.open{left:0}
  .workspace{height:100vh}.mobile-only{display:block!important;background:transparent;font-size:21px}
  .topbar{height:auto;min-height:68px;flex-wrap:wrap;padding:10px 12px}.search-wrap{order:3;flex-basis:100%;max-width:none}
  .owner-wrap{margin-left:auto}.ghost{display:none}.content-head{padding-top:16px}
  .items.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .details{width:100%;top:auto;bottom:0;height:78vh;border-left:0;border-top:1px solid var(--line);border-radius:22px 22px 0 0}
  .user-create{grid-template-columns:1fr}.user-row{grid-template-columns:1fr}.log-row{grid-template-columns:1fr}
}

.item-card{user-select:none;-webkit-user-select:none;touch-action:manipulation}
.item-card.dragging{opacity:.42;transform:scale(.97)}
.item-card.drop-target{border-color:#f4f7ff!important;box-shadow:0 0 0 3px rgba(244,247,255,.18);transform:translateY(-3px) scale(1.01)}
.folder-glyph{font-size:38px}
.drag-ghost{position:fixed;z-index:9999;transform:translate(-50%,-120%);max-width:210px;padding:10px 13px;border-radius:12px;background:#f4f7ff;color:#0b0d11;font-size:12px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;box-shadow:0 16px 48px rgba(0,0,0,.48)}
.touch-dragging{overflow:hidden;overscroll-behavior:none}
.upload-status{position:fixed;right:24px;bottom:24px;z-index:120;width:min(360px,calc(100vw - 28px));padding:14px 15px;border:1px solid #303746;border-radius:15px;background:rgba(17,21,28,.96);backdrop-filter:blur(18px);box-shadow:var(--shadow)}
.upload-status-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}.upload-status-row span{color:#aab3c2}
.upload-progress{height:7px;margin-top:11px;background:#252b35;border-radius:99px;overflow:hidden}.upload-progress div{height:100%;width:0;background:#f4f7ff;border-radius:inherit;transition:width .15s linear}
@media(max-width:760px){.upload-status{right:14px;bottom:14px}.item-icon{height:94px}}


/* Crafted Cloud V1.3 — dossiers tactiles */

.item-more {
  position: absolute;
  left: 10px;
  top: 9px;
  z-index: 3;
  border: 0;
  background: rgba(9, 11, 15, .76);
  color: #d5dbe5;
  width: 32px;
  height: 26px;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 1px;
}

.folder-preview {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.folder-glyph {
  font-size: 38px;
  color: #f1f4fa;
}

.folder-collage {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 2px;
  background: #0c1016;
}

.folder-collage img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
}

.folder-collage-1 {
  grid-template-columns: 1fr;
}

.folder-collage-2 {
  grid-template-columns: 1fr 1fr;
}

.folder-collage-3,
.folder-collage-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.folder-collage-3 > *:first-child {
  grid-row: 1 / 3;
}

.folder-mini {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #161c25;
  color: #eef2f8;
  font-size: 22px;
}

.folder-mini-text {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
}

.folder-count-badge {
  position: absolute;
  right: 7px;
  bottom: 7px;
  background: rgba(5, 7, 10, .82);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 750;
  backdrop-filter: blur(8px);
}

.item-card.drop-target {
  border-color: #e7ebf3;
  box-shadow: 0 0 0 3px rgba(231, 235, 243, .16);
}

.move-dialog {
  width: min(520px, 94vw);
  padding-bottom: 16px;
}

.move-destinations {
  display: grid;
  gap: 7px;
  max-height: 58vh;
  overflow: auto;
  padding-right: 3px;
}

.move-destination {
  width: 100%;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: #171c25;
  color: #eef2f8;
  border-radius: 12px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.move-destination strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.move-destination small {
  color: var(--muted);
  font-size: 10px;
}

.move-destination.current {
  opacity: .48;
  cursor: default;
}

@media (max-width: 760px) {
  .item-card {
    touch-action: manipulation;
  }

  .item-more {
    width: 34px;
    height: 30px;
  }

  .move-dialog {
    width: calc(100vw - 20px);
    margin: auto 10px 10px;
    max-height: 86vh;
  }

  .move-destinations {
    max-height: 64vh;
  }
}


/* Crafted Cloud V1.4 — stockage et sélection */

.storage-quick {
  min-width: 126px;
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: 8px 11px;
  border: 1px solid var(--line) !important;
  border-radius: 12px;
  background: #11151c;
  color: #fff;
}

.storage-quick span {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.storage-quick strong {
  font-size: 11px;
}

.storage-quick.storage-warning {
  border-color:
    rgba(255, 194, 92, .5) !important;
}

.account-storage {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.storage-dashboard-title {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.storage-detail {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #171c25;
  padding: 12px;
}

.storage-detail.warning {
  border-color:
    rgba(255, 194, 92, .42);
}

.storage-detail.danger {
  border-color:
    rgba(255, 107, 120, .46);
}

.storage-detail-head,
.storage-detail-values {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.storage-detail-head strong {
  font-size: 12px;
}

.storage-detail-head span {
  color: #eef2f8;
  font-size: 11px;
  font-weight: 750;
}

.storage-detail-values {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

.storage-detail-bar {
  height: 7px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #282f3b;
}

.storage-detail-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #f3f5f9,
      #7f8ba1
    );
}

.storage-detail.warning
.storage-detail-bar i {
  background:
    linear-gradient(
      90deg,
      #ffe4a6,
      #d99b37
    );
}

.storage-detail.danger
.storage-detail-bar i {
  background:
    linear-gradient(
      90deg,
      #ffb0b7,
      #e95867
    );
}

.storage-safety {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.storage-loading {
  color: var(--muted);
  font-size: 12px;
}

.select-mode-btn {
  border: 1px solid var(--line) !important;
  border-radius: 10px;
  padding: 9px 12px;
  background: #11151c;
  color: #cbd2de;
  cursor: pointer;
}

.select-mode-btn.active {
  background: #eef2f8;
  color: #0c1016;
}

.selection-check {
  position: absolute;
  left: 10px;
  top: 9px;
  z-index: 5;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 2px solid #7b8596;
  border-radius: 9px;
  background: rgba(7, 9, 13, .78);
  color: #0c1016;
  font-weight: 900;
}

.item-card.multi-selected {
  border-color: #edf1f7;
  box-shadow:
    0 0 0 3px rgba(237, 241, 247, .14);
}

.item-card.multi-selected
.selection-check {
  background: #edf1f7;
  border-color: #edf1f7;
}

.selection-bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 80;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line2);
  border-radius: 16px;
  background: rgba(17, 21, 28, .94);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.selection-bar strong {
  padding: 0 8px;
  font-size: 12px;
  white-space: nowrap;
}

.selection-bar button {
  border: 0;
  border-radius: 10px;
  background: #222936;
  color: #eef2f8;
  padding: 10px 12px;
  cursor: pointer;
}

.selection-bar button.danger {
  color: #ff9ca5;
  background: #2b181d;
}

.selection-bar button:disabled {
  opacity: .35;
  cursor: default;
}

@media(max-width: 760px) {
  .storage-quick {
    order: 2;
    min-width: 0;
    margin-left: auto;
    padding: 7px 9px;
  }

  .storage-quick span {
    display: none;
  }

  .storage-quick strong {
    font-size: 10px;
  }

  .owner-wrap {
    margin-left: 0;
  }

  .select-mode-btn {
    padding: 8px 10px;
    font-size: 11px;
  }

  .selection-bar {
    left: 10px;
    right: 10px;
    bottom: 10px;
    transform: none;
    display: grid;
    grid-template-columns:
      1fr 1fr 1fr 1fr;
  }

  .selection-bar strong {
    grid-column: 1 / -1;
    text-align: center;
  }

  .selection-bar button {
    padding: 11px 5px;
    font-size: 11px;
  }
}


/* Crafted Cloud V1.5 — aperçu original */

#preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #080a0e;
}

.content-head > div:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* Crafted Cloud V1.0 — finition finale */
.app-loader{position:fixed;inset:0;z-index:20000;display:flex;align-items:center;justify-content:center;gap:14px;background:#090b0f;transition:opacity .3s ease,visibility .3s ease}.app-loader.leaving{opacity:0;visibility:hidden}.app-loader strong,.app-loader span{display:block}.app-loader strong{font-size:15px}.app-loader span{margin-top:4px;color:var(--muted);font-size:11px}.app-loader .brand-mark{animation:ccLoaderPulse 1.15s ease-in-out infinite alternate}@keyframes ccLoaderPulse{to{transform:scale(1.055);filter:brightness(1.08)}}
.search-clear{display:grid;place-items:center;width:28px;height:28px;flex:0 0 auto;border:0;border-radius:8px;background:#202631;color:#aeb6c4;cursor:pointer}.search-clear:hover{color:#fff;background:#2a3240}
.folder-download-btn{border:1px solid var(--line)!important;border-radius:10px;padding:9px 12px;background:#171c25;color:#dce2eb;cursor:pointer;white-space:nowrap}.folder-download-btn:hover{border-color:#4b5669!important;background:#202632}.folder-download-btn:disabled{opacity:.55;cursor:wait}
.item-card{isolation:isolate;transition:transform .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease;animation:ccItemIn .24s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--cc-index,0) * 16ms)}@keyframes ccItemIn{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}
.item-icon{position:relative;height:112px;background:#0b0e13;isolation:isolate}.items.grid .item-icon{margin:-2px -2px 12px}.item-icon::before{content:"";position:absolute;inset:-12px;z-index:-2;background-image:var(--cc-media-url);background-size:cover;background-position:center;filter:blur(18px) saturate(.85);opacity:.55;transform:scale(1.12)}.item-icon::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,8,12,.12),rgba(6,8,12,.34))}
.cc-media-thumb{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;background:#0a0d12}.cc-media-thumb img,.cc-media-thumb video{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain!important;object-position:center;background:transparent;opacity:0;transition:opacity .24s ease,transform .3s ease}.cc-media-thumb.loaded img,.cc-media-thumb video{opacity:1}.item-card:hover .cc-media-thumb img{transform:scale(1.018)}.cc-video-thumb video{opacity:1}.cc-play-badge{position:absolute;z-index:2;display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(4,6,9,.66);backdrop-filter:blur(10px);font-size:14px;padding-left:2px}.cc-file-glyph{position:relative;z-index:1;font-size:28px;font-weight:800;letter-spacing:.02em}
.items.list .item-icon{height:42px;width:42px;margin:0}.items.list .cc-play-badge{width:24px;height:24px;font-size:9px}.items.list .item-card{animation-duration:.18s}
.folder-preview,.folder-collage{border-radius:10px}.folder-collage img{object-fit:cover!important}.folder-count-badge{z-index:3}
.empty{animation:ccEmptyIn .3s ease both}@keyframes ccEmptyIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.details{transform:translateX(0);animation:ccPanelIn .22s cubic-bezier(.2,.8,.2,1) both}@keyframes ccPanelIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.modal[open]{animation:ccModalIn .2s cubic-bezier(.2,.8,.2,1) both}@keyframes ccModalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.preview{background:#07090d}.preview img{object-fit:contain!important}.upload-status{animation:ccToastIn .2s ease both}@keyframes ccToastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:760px){.content-head{align-items:center;gap:8px;flex-wrap:wrap}.content-head>div:first-child{flex:1 1 100%}.folder-download-btn{order:2;flex:1 1 auto;font-size:11px;padding:8px 10px}.cc-sort{order:3;flex:1 1 130px;min-width:0}.select-mode-btn{order:4}.view-toggle{order:5}.item-icon{height:128px}.items.grid{gap:10px}.item-card{padding:10px;border-radius:14px}.item-name{font-size:12px}.item-sub{font-size:9px}.favorite-star{right:7px;top:7px}.item-more{left:7px;top:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}