/* /var/www/ebook/public/assets/media-shell.css */

:root{
  --bg0:#111214;
  --bg1:#17181b;
  --bg2:#1f2024;
  --bg3:#2a2c31;
  --txt:#e7e9ee;
  --mut:#a8adb9;
  --mut2:#7e8596;
  --acc:#2aa6ff;
  --acc2:#1f7dd6;
  --ok:#2ecc71;
  --warn:#e74c3c;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --r: 14px;
  --r2: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:linear-gradient(180deg,#0f1012 0%, #141519 100%);
  color:var(--txt);
}

/* Layout */
.ms{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height:100vh;
}

/* Scrim (mobile nav overlay) */
.msScrim{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index:140;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.msScrim.isOpen{
  opacity:1;
  pointer-events:auto;
}
.msNoScroll, .msNoScroll body{
  overflow:hidden !important;
}

/* Sidebar */
.msSide{
  background:linear-gradient(180deg,#141519 0%, #111214 100%);
  border-right:1px solid rgba(255,255,255,.06);
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  padding:14px 12px;
  z-index:150;
}
.msBrand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 10px 16px;
}
.msLogo{
  width:42px;height:42px;border-radius:12px;
  background: radial-gradient(circle at 30% 30%, #2aa6ff 0%, #1b5c9b 45%, #0f1012 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), var(--shadow);
}
.msBrandTxt .t1{font-weight:700; letter-spacing:.2px}
.msBrandTxt .t2{font-size:12px;color:var(--mut); margin-top:2px}

.msNav{display:flex;flex-direction:column; gap:6px; padding:6px}
.msNavSep{
  height:1px; background:rgba(255,255,255,.08);
  margin:10px 6px;
}

.msLink{
  display:flex; gap:10px; align-items:center;
  padding:10px 10px;
  border-radius:12px;
  color:var(--txt);
  text-decoration:none;
  background:transparent;
  transition: all .15s ease;
}
.msLink:hover{background:rgba(255,255,255,.06)}
.msLinkActive{
  background:rgba(42,166,255,.14);
  box-shadow: inset 0 0 0 1px rgba(42,166,255,.20);
}
.msIco{
  width:18px; height:18px; display:grid; place-items:center;
  color:rgba(231,233,238,.9);
}
.msIco svg{width:18px;height:18px}
.msLinkTxt{font-weight:600; font-size:14px; line-height:1.1}
.msLinkMeta{font-size:12px; color:var(--mut2); margin-top:2px}

/* Main */
.msMain{min-width:0; background:transparent}
.msTop{
  position:sticky;
  top:0;
  z-index:120;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(23,24,27,.92) 0%, rgba(23,24,27,.78) 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.msTopInner{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
}

/* Buttons */
.msBtn{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:var(--txt);
  border-radius:12px;
  padding:10px 12px;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: all .15s ease;
  white-space:nowrap;
}
.msBtn:hover{background:rgba(255,255,255,.08)}
.msBtnPrimary{
  background:rgba(42,166,255,.18);
  border-color:rgba(42,166,255,.25);
}
.msBtnPrimary:hover{background:rgba(42,166,255,.24)}
.msBtnIcon{
  width:40px; height:40px;
  padding:0;
  justify-content:center;
  border-radius:14px;
}
.msBtn svg{width:18px;height:18px}
.msBtnTiny{
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
}

/* Mobile hamburger button: hidden on desktop */
.msNavBtn{display:none}

/* Search */
.msSearch{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:12px 14px;
  max-width:680px;
  position:relative;
  z-index:130;
}
.msSearchIco{display:flex; align-items:center; opacity:.85}
.msSearch svg{width:18px;height:18px;color:rgba(231,233,238,.8)}

.msSearchWrap{
  position:relative;
  flex:1;
  min-width:0;
}
.msSearch input{
  width:100%;
  border:0; outline:0;
  background:transparent;
  color:var(--txt);
  font-size:14px;
  line-height:20px;
  padding:6px 2px;
  min-width:0;
}
.msSearch input::placeholder{color:rgba(231,233,238,.60); opacity:1;}

.msActions{
  display:flex;
  align-items:center;
  gap:10px;
}
.msViewToggles{display:flex; gap:8px;}

/* Search suggest dropdown */
.msSuggest{
  position:absolute;
  left:-10px;
  right:-10px;
  top:calc(100% + 10px);
  background:rgba(10,12,18,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
  z-index:9999;
  display:none;
  max-height:min(60vh, 520px);
  overflow:auto;
}
.msSuggest.isOpen{display:block;}

.msSugHead{
  padding:10px 12px;
  font-weight:1000;
  font-size:12px;
  letter-spacing:.4px;
  opacity:.85;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}
.msSugHead:first-child{border-top:none;}

.msSugItem{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  text-decoration:none;
  color:rgba(255,255,255,.92);
  border-top:1px solid rgba(255,255,255,.06);
}
.msSugItem:hover{background:rgba(255,255,255,.06);}

.msSugImg{
  width:40px; height:54px;
  border-radius:12px;
  overflow:hidden;
  flex:0 0 auto;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  font-weight:1000;
  opacity:.85;
}
.msSugImg img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  max-width:100%;
  max-height:100%;
}

.msSugTxt{min-width:0;}
.msSugTitle{
  font-weight:900;
  font-size:13px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.msSugSub{
  font-size:12px;
  line-height:1.25;
  opacity:.75;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.msSugEmpty{padding:12px; opacity:.75; font-size:13px;}

/* Content area */
.msContent{
  position:relative;
  padding:16px 18px 26px;
}

/* Right alpha bar */
.msAlpha{
  position:fixed;
  right:10px;
  top:112px;
  z-index:40;
  background:rgba(20,21,25,.85);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:10px 6px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.msAlpha a{
  width:30px;height:22px;
  border-radius:10px;
  display:grid;place-items:center;
  text-decoration:none;
  color:rgba(231,233,238,.78);
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
}
.msAlpha a:hover{background:rgba(255,255,255,.06)}
.msAlpha a.isActive{
  background:rgba(42,166,255,.20);
  color:#eaf6ff;
  box-shadow: inset 0 0 0 1px rgba(42,166,255,.28);
}

/* Grid / List */
.pGrid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:12px;
}
@media (max-width:1400px){ .pGrid{grid-template-columns:repeat(5,1fr)} }
@media (max-width:1220px){ .pGrid{grid-template-columns:repeat(4,1fr)} }

.pCard{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  color:var(--txt);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.pCard:hover{
  transform: translateY(-2px);
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.12);
}
.pCover{
  aspect-ratio: 2/3;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  position:relative;
  overflow:hidden;
}
.pCover img{width:100%;height:100%;object-fit:cover;display:block}
.pCorner{
  position:absolute;
  right:0; top:0;
  width:0;height:0;
  border-top:18px solid var(--warn);
  border-left:18px solid transparent;
  opacity:.95;
}
.pMeta{padding:10px 10px 12px}
.pTitle{font-weight:800;font-size:13px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pSub{margin-top:5px;font-size:12px;color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pBar{
  margin-top:10px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
}
.pBar i{
  display:block;
  height:100%;
  background: linear-gradient(90deg, #2ecc71, #1f7dd6);
}

/* List view */
.pList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pRow{
  display:grid;
  grid-template-columns: 78px 1fr 180px 110px;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  text-decoration:none;
  color:var(--txt);
}
.pRow:hover{background:rgba(255,255,255,.05)}
.pRowCover{
  width:78px; aspect-ratio:2/3;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
}
.pRowCover img{width:100%;height:100%;object-fit:cover;display:block}
.pRowTitle{font-weight:800}
.pRowSub{color:var(--mut); margin-top:4px; font-size:12px}
.pPills{display:flex;gap:6px;flex-wrap:wrap}
.pPill{
  font-size:11px;
  color:rgba(231,233,238,.86);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  padding:4px 8px;
  border-radius:999px;
}
.mut{color:var(--mut); font-size:13px}

/* Filter drawer */
.msFilterPanel{
  position:fixed;
  right:18px;
  top:88px;
  width:360px;
  max-width: calc(100vw - 36px);
  background:rgba(20,21,25,.96);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:14px;
  z-index:160;
  display:none;
}
.msFilterPanel.open{display:block}
.msFilterTitle{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.msFilterTitle .h{font-weight:900}
.msFormRow{display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:10px}
.msLabel{font-size:12px;color:var(--mut)}
.msInput, .msSelect{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--txt);
  padding:10px 10px;
  border-radius:12px;
  outline:none;
}
.msInput:focus, .msSelect:focus{
  border-color:rgba(42,166,255,.35);
  box-shadow:0 0 0 3px rgba(42,166,255,.10);
}
.msFilterActions{
  display:flex; gap:10px; margin-top:12px;
}
.msBtnBlock{flex:1; justify-content:center}

/* Pagination */
.pagination{display:flex;gap:8px;flex-wrap:wrap; margin-top:14px}
.pagination a, .pagination span{
  padding:8px 10px;
  border-radius:12px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--txt);
  font-size:13px;
}
.pagination .active span{
  background:rgba(42,166,255,.18);
  border-color:rgba(42,166,255,.25);
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 980px){
  .ms{grid-template-columns: 1fr}
  .msAlpha{display:none}

  /* Off-canvas sidebar */
  .msSide{
    position:fixed;
    top:0;
    left:0;
    width:min(86vw, 330px);
    height:100vh;
    transform:translateX(-110%);
    transition:transform .18s ease;
    box-shadow: 0 20px 60px rgba(0,0,0,.55);
    border-right:1px solid rgba(255,255,255,.08);
  }
  .msSide.isOpen{transform:translateX(0);}

  /* Topbar becomes 2-row */
  .msTopInner{
    flex-wrap:wrap;
    gap:10px;
    padding:12px 12px;
  }

  .msNavBtn{display:inline-flex;}

  .msSearch{
    order:3;
    flex:1 1 100%;
    max-width:none;
    padding:12px 14px;
  }

  .msActions{
    order:4;
    width:100%;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom:2px;
  }
  .msActions::-webkit-scrollbar{height:6px}
  .msActions::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10); border-radius:999px}

  .msViewToggles{flex:0 0 auto}

  /* Suggest: full width under input */
  .msSuggest{
    left:0;
    right:0;
    max-height:min(55vh, 520px);
  }

  /* Content padding tighter */
  .msContent{padding:14px 12px 22px;}
}

@media (max-width: 720px){
  .pGrid{grid-template-columns:repeat(2,1fr)}

  /* List view: compact */
  .pRow{
    grid-template-columns: 66px 1fr;
    gap:10px;
  }
  .pRow .pPills{display:none;}
  .pRow .pBar{display:none;}
  .pRowCover{width:66px;}

  /* Filters: bottom-sheet */
  .msFilterPanel{
    left:12px;
    right:12px;
    top:auto;
    bottom:12px;
    width:auto;
    max-width:none;
    max-height: calc(100vh - 24px);
    overflow:auto;
    border-radius:18px;
  }
}

@media (max-width: 420px){
  .msBtn{padding:9px 10px; font-size:12px;}
  .msBtnIcon{width:38px;height:38px;}
  .msSearch{padding:11px 13px;}
  .msSugImg{width:38px;height:52px;}
}

/* /var/www/ebook/public/assets/media-shell.css */

/* Loader overlay */
.msLoader{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(12,13,16,.85);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: opacity .18s ease, visibility .18s ease;
}
.msLoader.isOff{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.msLoaderInner{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:18px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.msSpinner{
  width:42px;
  height:42px;
  border-radius:999px;
  border:4px solid rgba(255,255,255,.18);
  border-top-color: rgba(42,166,255,.90);
  animation: msSpin .8s linear infinite;
}
@keyframes msSpin{ to{ transform: rotate(360deg);} }
.msLoaderTxt{ font-weight:800; font-size:13px; opacity:.9; }

/* Back to top */
.msBackTop{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:120;
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(20,21,25,.85);
  color:rgba(255,255,255,.9);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  cursor:pointer;
  display:none;
}
.msBackTop.isOn{ display:block; }
.msBackTop:hover{ background:rgba(20,21,25,.95); }