:root{ --bg:#161616; --card:#222; --text:#f2f2f2; --muted:#bdbdbd; --border:#333; --accent:#00e5a8 }
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Kufi Arabic",sans-serif;
  display:flex; flex-direction:column;
}
.appbar{position:sticky; top:0; display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; background:#0f0f0f; border-bottom:1px solid var(--border); z-index:10}
h1{margin:0; font-size:1.1rem}
.wrap{width:100%; max-width:1000px; margin-inline:auto; padding:16px; display:grid; gap:16px}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.3)}
.row{display:flex; gap:8px; align-items:center}
.row.center{justify-content:center}
.row.end{justify-content:flex-end}
.row.space-between{justify-content:space-between; width:100%}
input[type="text"], input[type="search"]{
  flex:1; padding:12px 14px; background:#1d1d1d; color:var(--text); border:1px solid var(--border); border-radius:12px;
}
input.search.small{padding:10px 12px; max-width:220px}
button, .btn{
  background:var(--accent); color:#101010; border:none; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px
}
button.link{background:transparent; color:var(--text); border:none; cursor:pointer}
button:disabled{opacity:.6; cursor:not-allowed}
.list{list-style:none; padding:0; margin:10px 0 0}
.list li{display:flex; gap:8px; align-items:center; justify-content:space-between; padding:10px; border-bottom:1px dashed var(--border)}
.list li .txt{flex:1}
.list li .del{background:#ff5252; color:#fff}
.timer{font-size:2.6rem; font-weight:800; text-align:center; padding:12px 0}
.tabs{display:flex; gap:8px; padding:8px 16px; border-bottom:1px solid var(--border); background:#121212; position:sticky; top:52px; z-index:9}
.tab{background:#1c1c1c; color:var(--text); border:1px solid var(--border); padding:8px 12px; border-radius:999px; cursor:pointer}
.tab.active{background:var(--accent); color:#101010; border-color:transparent}
.tabpane{display:none}
.tabpane.active{display:block}
.foot{padding:12px; text-align:center; color:var(--muted)}

.files-grid{display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:12px; margin-top:12px}
.filecard{background:#1b1b1b; border:1px solid var(--border); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:8px}
.filecard .meta{font-size:.85rem; color:var(--muted)}
.filecard .name{font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.filecard .row.wrap{flex-wrap:wrap}
.badge{background:#2d2d2d; border:1px solid var(--border); border-radius:999px; padding:2px 8px; font-size:.75rem; color:var(--muted)}

.dialog{border:none; border-radius:16px; padding:0; width:min(920px, 96vw)}
.dialog::backdrop{background:rgba(0,0,0,.6)}
.dialog .dialog-head{padding:10px 12px; border-bottom:1px solid var(--border); background:#111}
.dialog .viewer-body, .dialog .editor-body{padding:12px}
#textEditor{width:100%; padding:12px; background:#111; color:var(--text); border:1px solid var(--border); border-radius:12px}

.viewer-body iframe, .viewer-body embed{width:100%; height:70vh; border:none; background:#111}
.viewer-body img{max-width:100%; height:auto; display:block; margin:auto}
.viewer-body audio{width:100%}

@media(min-width:820px){
  .wrap{grid-template-columns:1fr 1fr}
  #tab-files{grid-column: 1 / -1}
}