:root{
  --bg:#05080b;
  --bg2:#070d12;
  --panel:rgba(8,14,18,.72);
  --panel2:rgba(4,10,14,.82);

  --text:#b7fff0;
  --muted:rgba(183,255,240,.65);

  --cyan:#55e7ff;
  --cyan2:#19c7ff;
  --cyan3:#0aa3d6;

  --border:rgba(85,231,255,.35);
  --border2:rgba(85,231,255,.22);
  --glow:rgba(85,231,255,.35);

  --shadow:0 0 0 1px var(--border2), 0 0 18px rgba(0,0,0,.45);
  --radius:10px;

  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

#archive-app{
  position:relative;
  min-height:78vh;
  font-family:var(--mono);
  color:var(--text);
  padding:18px;
  background:
    radial-gradient(1200px 600px at 30% -20%, rgba(85,231,255,.10), transparent 55%),
    radial-gradient(900px 500px at 110% 20%, rgba(85,231,255,.08), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow:hidden;
}

/* subtle scanlines */
#archive-app:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.00),
    rgba(255,255,255,.00) 2px,
    rgba(0,0,0,.22) 3px
  );
  opacity:.35;
  mix-blend-mode:overlay;
}

/* faint grid */
#archive-app:after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(85,231,255,.06) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(85,231,255,.06) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.35;
}

/* ===== TOP HUD BAR ===== */
.dp-hud{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:rgba(0,0,0,.35);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
}

.dp-hud .hud-left,
.dp-hud .hud-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.dp-hud .hud-mid{
  flex:1;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

.dp-hud .hud-title{
  display:inline-flex;
}
.dp-hud .hud-nav{
  display:flex;
  align-items:center;
  gap:8px;
}

.hud-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 8px;
  border:1px solid var(--border2);
  border-radius:999px;
  background:rgba(0,0,0,.35);
  font-size:11px;
  letter-spacing:.6px;
  color:var(--muted);
}

.hud-chip b{
  color:var(--cyan);
  font-weight:700;
  letter-spacing:1px;
}

.hud-link{
  display:inline-flex;
  align-items:center;
  padding:6px 9px;
  border:1px solid var(--border2);
  border-radius:6px;
  background:rgba(0,0,0,.25);
  font-size:11px;
  letter-spacing:1px;
  color:rgba(183,255,240,.8);
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  font-family:var(--mono);
  appearance:none;
}
.hud-link:hover{
  border-color:rgba(85,231,255,.65);
  box-shadow:0 0 0 1px rgba(85,231,255,.2), 0 0 14px rgba(85,231,255,.12);
  color:var(--cyan);
}

.hud-tab{
  display:inline-flex;
  align-items:center;
  padding:6px 9px;
  border:1px solid var(--border2);
  border-radius:6px;
  background:rgba(0,0,0,.25);
  font-size:11px;
  letter-spacing:1px;
  color:rgba(183,255,240,.8);
  text-transform:uppercase;
}

.hud-tab.active{
  border-color:rgba(85,231,255,.65);
  box-shadow:0 0 0 1px rgba(85,231,255,.2), 0 0 14px rgba(85,231,255,.12);
  color:var(--cyan);
}

.hud-meter{
  width:150px;
  height:8px;
  border-radius:99px;
  border:1px solid var(--border2);
  overflow:hidden;
  background:rgba(0,0,0,.25);
}
.hud-meter > i{
  display:block;
  height:100%;
  width:40%;
  background:linear-gradient(90deg, rgba(85,231,255,.15), rgba(85,231,255,.85));
}

/* ===== MAIN LAYOUT ===== */
.dp-grid{
  position:relative;
  z-index:2;
  margin-top:14px;
  display:grid;
  grid-template-columns: 280px 1fr 320px;
  gap:14px;
  align-items:stretch;
}

/* panels */
.dp-panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  min-height:560px;
}

.dp-panel .panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  background:rgba(0,0,0,.40);
  border-bottom:1px solid var(--border2);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--cyan);
  cursor:pointer;
}
.panel-collapse{
  flex-shrink:0;
  width:20px;
  height:20px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  color:var(--cyan);
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.panel-collapse:hover{
  color:rgba(85,231,255,1);
}
.dp-panel.is-collapsed .panel-body{
  display:none !important;
}
.dp-panel.is-collapsed .panel-title{
  border-bottom:none;
}
.dp-panel.is-collapsed{
  min-height:auto !important;
}
@media (max-width: 768px){
  .dp-panel.is-collapsed{
    min-width:auto;
    max-width:100%;
  }
  .dp-hud{
    flex-direction:column;
    align-items:stretch;
  }
  .dp-hud .hud-left{
    flex-direction:column;
    align-items:flex-start;
    width:100%;
  }
  .dp-hud .hud-title{
    width:100%;
  }
  .dp-hud .hud-title .hud-chip{
    white-space:nowrap;
  }
  .dp-hud .hud-mid{
    order:3;
    flex:0;
  }
  .dp-hud .hud-right{
    order:2;
    justify-content:flex-start;
  }
}
@media (max-width: 1080px){
  .dp-panel .panel-title{
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(85,231,255,.25);
  }
  .panel-collapse{
    color:#55e7ff;
    font-size:14px;
    width:24px;
    height:24px;
  }
}

.panel-title .title-meta{
  color:rgba(183,255,240,.6);
  font-size:10px;
  letter-spacing:1px;
}

.panel-body{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

/* left terminal log */
.dp-log{
  padding:10px 10px 12px;
  font-size:11px;
  line-height:1.35;
  color:rgba(183,255,240,.85);
  height:calc(100% - 44px);
  overflow:auto;
  white-space:pre;
}
.dp-log .dim{ color:rgba(183,255,240,.55); }
.dp-log .ok{ color:rgba(85,231,255,.9); }
.dp-log .warn{ color:rgba(255,210,120,.9); }
.dp-log .err{ color:rgba(255,120,120,.9); }

.dp-log::-webkit-scrollbar{ width:10px; }
.dp-log::-webkit-scrollbar-thumb{
  background:rgba(85,231,255,.18);
  border:1px solid rgba(85,231,255,.25);
  border-radius:99px;
}

/* ===== LEFT: foldable directory tree (session-item style) ===== */
.dir-tree{
  padding:10px;
  font-size:11px;
  overflow:auto;
}
.dir-tree .tree-list{
  list-style:none;
  margin:0;
  padding:0;
}
.dir-tree .tree-item{
  margin:0 0 8px 0;
}
.dir-tree .tree-item-compact{
  margin:0 0 4px 0;
}
.dir-tree .tree-item-compact .tree-row{
  padding:4px 6px;
  font-size:10px;
}
.dir-tree .tree-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid rgba(85,231,255,.22);
  border-radius:10px;
  cursor:pointer;
  background:rgba(0,0,0,.18);
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
  color:rgba(183,255,240,.85);
}
.dir-tree .tree-row:hover{
  border-color:rgba(85,231,255,.55);
  box-shadow:0 0 10px rgba(85,231,255,.12), 0 0 0 1px rgba(0,0,0,.25) inset;
  color:var(--cyan);
}
.dir-tree .tree-toggle{
  width:14px;
  font-size:10px;
  color:var(--cyan);
  flex-shrink:0;
}
.dir-tree .tree-name{
  flex:1;
}

/* ===== CENTER: path bar (win-bar style) + directory contents (session-item style) ===== */
.path-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:rgba(0,0,0,.45);
  border-bottom:1px solid var(--border2);
  flex-shrink:0;
}
.path-display{
  flex:1;
  display:flex;
  align-items:center;
  padding:6px 8px;
  border:1px solid var(--border2);
  border-radius:8px;
  background:rgba(0,0,0,.25);
  font-size:11px;
  color:rgba(183,255,240,.85);
  letter-spacing:.5px;
}
.path-back{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border:1px solid rgba(85,231,255,.25);
  border-radius:8px;
  background:rgba(0,0,0,.25);
  font-size:10px;
  color:rgba(183,255,240,.9);
  text-transform:uppercase;
  cursor:pointer;
  font-family:var(--mono);
}
.path-back:hover{
  border-color:rgba(85,231,255,.6);
  box-shadow:0 0 12px rgba(85,231,255,.12);
}
.path-sort{
  display:none;
  font-family:var(--mono);
  font-size:10px;
  padding:6px 10px;
  border-radius:9px;
  border:1px solid rgba(85,231,255,.25);
  background:rgba(0,0,0,.18);
  color:rgba(183,255,240,.9);
  cursor:pointer;
  text-transform:uppercase;
}
.path-sort:hover{
  border-color:rgba(85,231,255,.6);
  box-shadow:0 0 12px rgba(85,231,255,.12);
}
.dir-contents{
  flex:1;
  padding:12px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
  background:rgba(10,14,18,.55);
}
.content-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.content-list.is-hidden{
  display:none;
}
.home-dashboard{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.home-intro{
  padding:10px;
  border:1px solid var(--border2);
  border-radius:10px;
  background:rgba(0,0,0,.20);
  color:rgba(183,255,240,.8);
  font-size:11px;
}
.home-box{
  border:1px solid rgba(85,231,255,.18);
  border-radius:10px;
  background:rgba(0,0,0,.20);
  overflow:hidden;
}
.home-box-title{
  padding:10px;
  border-bottom:1px solid rgba(85,231,255,.18);
  color:var(--cyan);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
}
.activity-grid{
  display:grid;
  grid-template-columns:repeat(14, 1fr);
  gap:2px;
  justify-content:stretch;
  padding:10px;
}
.activity-cell{
  width:85%;
  aspect-ratio:1 / 1;
  border-radius:3px;
  background:transparent;
  border:1px solid rgba(85,231,255,.12);
  cursor:pointer;
}
.activity-cell[data-level="1"]{ background:rgba(85,231,255,.18); }
.activity-cell[data-level="2"]{ background:rgba(85,231,255,.32); }
.activity-cell[data-level="3"]{ background:rgba(85,231,255,.5); }
.activity-cell[data-level="4"]{ background:rgba(85,231,255,.7); }
.activity-cell.is-missing{
  background:linear-gradient(135deg, rgba(85,231,255,.2), rgba(85,231,255,.2) 50%, rgba(25,199,255,.55) 50%, rgba(25,199,255,.55));
  border-color:rgba(25,199,255,.7);
}
.activity-detail{
  padding:8px 10px 10px;
  font-size:10px;
  color:rgba(183,255,240,.65);
  border-top:1px solid rgba(85,231,255,.18);
}
.activity-summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  margin:0 10px 10px;
  font-size:10px;
  color:rgba(183,255,240,.9);
  background:rgba(85,231,255,.08);
  border:1px solid rgba(85,231,255,.22);
  border-radius:8px;
  letter-spacing:0.5px;
}
.activity-summary strong{
  color:rgba(85,231,255,.95);
  font-weight:600;
}
.home-table{
  width:100%;
  border-collapse:collapse;
  font-size:10px;
}
.home-table th,
.home-table td{
  border:1px solid rgba(85,231,255,.18);
  padding:4px 6px;
  text-align:left;
  color:rgba(183,255,240,.75);
}
.home-table th:nth-child(1),
.home-table td:nth-child(1){
  width:70%;
}
.home-table th:nth-child(2),
.home-table td:nth-child(2){
  width:30%;
  text-align:right;
}
.home-table th{
  color:rgba(85,231,255,.9);
  background:rgba(0,0,0,.18);
  letter-spacing:1px;
  text-transform:uppercase;
}
.home-table tbody tr:hover td{
  color:var(--cyan);
  background:rgba(85,231,255,.08);
  cursor:pointer;
}
.file-preview{
  padding:12px;
  border:1px solid var(--border2);
  border-radius:10px;
  background:rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.file-preview.is-hidden{
  display:none;
}
.preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.preview-back{
  font-family:var(--mono);
  font-size:10px;
  padding:6px 10px;
  border-radius:9px;
  border:1px solid rgba(85,231,255,.25);
  background:rgba(0,0,0,.18);
  color:rgba(183,255,240,.9);
  cursor:pointer;
}
.preview-back:hover{
  border-color:rgba(85,231,255,.6);
  box-shadow:0 0 12px rgba(85,231,255,.12);
}
.preview-title{
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--cyan);
}
.preview-empty{
  font-size:11px;
  color:rgba(183,255,240,.6);
}
.preview-image{
  max-width:100%;
  border:1px solid rgba(85,231,255,.22);
  border-radius:10px;
  background:rgba(0,0,0,.25);
}
.preview-text{
  margin:0;
  padding:10px;
  border:1px solid rgba(85,231,255,.22);
  border-radius:10px;
  background:rgba(0,0,0,.25);
  color:rgba(183,255,240,.85);
  font-size:11px;
  line-height:1.45;
  max-height:50vh;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-x:hidden;
}
/* Wiki-style rendered Markdown for index entries */
.preview-wiki{
  margin:0;
  padding:14px 16px;
  border:1px solid rgba(85,231,255,.22);
  border-radius:10px;
  background:rgba(0,0,0,.25);
  color:rgba(183,255,240,.85);
  font-size:12px;
  line-height:1.6;
  max-height:60vh;
  overflow:auto;
}
.preview-wiki h2{
  margin:1.2em 0 0.5em;
  padding-bottom:4px;
  border-bottom:1px solid rgba(85,231,255,.25);
  color:var(--cyan);
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.preview-wiki h2:first-child{margin-top:0;}
.preview-wiki h3{
  margin:1em 0 0.4em;
  color:rgba(85,231,255,.95);
  font-size:12px;
}
.preview-wiki p{
  margin:0.6em 0;
}
.preview-wiki ul,.preview-wiki ol{
  margin:0.6em 0;
  padding-left:1.5em;
}
.preview-wiki li{margin:0.25em 0;}
.preview-wiki strong{color:var(--cyan);font-weight:700;}
.preview-wiki em{color:rgba(183,255,240,.9);font-style:italic;}
.preview-wiki a{
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px dotted rgba(85,231,255,.5);
}
.preview-wiki a:hover{border-bottom-style:solid;color:rgba(85,231,255,.95);}
.preview-wiki blockquote{
  margin:0.8em 0;
  padding:8px 12px 8px 14px;
  border-left:3px solid rgba(85,231,255,.4);
  background:rgba(0,0,0,.2);
  color:rgba(183,255,240,.75);
  font-style:italic;
}
.preview-wiki code{
  padding:2px 5px;
  border-radius:4px;
  background:rgba(0,0,0,.3);
  font-family:var(--mono);
  font-size:11px;
}
.preview-wiki pre code{
  display:block;
  padding:10px;
  overflow-x:auto;
}
.preview-wiki hr{
  margin:1.2em 0;
  border:none;
  border-top:1px solid rgba(85,231,255,.2);
}
.preview-edit{
  width:100%;
  min-height:50vh;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(85,231,255,.22);
  border-radius:10px;
  color:rgba(183,255,240,.9);
  font-family:var(--mono);
  font-size:11px;
  padding:10px;
  resize:vertical;
}
.preview-link{
  font-size:10px;
  color:rgba(85,231,255,.95);
  text-decoration:none;
  border:1px solid rgba(85,231,255,.25);
  padding:4px 8px;
  border-radius:8px;
  background:rgba(85,231,255,.08);
  display:inline-block;
  width:max-content;
}
.preview-link:hover{
  border-color:rgba(85,231,255,.6);
  box-shadow:0 0 12px rgba(85,231,255,.12);
}

.left-info{
  padding:10px;
  border-bottom:1px solid var(--border2);
  background:rgba(0,0,0,.25);
}
.left-info-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  color:rgba(183,255,240,.85);
}
.left-info-name{
  flex:1;
  color:var(--cyan);
}
.left-info-type{
  width:70px;
  text-align:left;
  color:rgba(183,255,240,.7);
}
.left-info-size{
  width:70px;
  text-align:right;
  color:rgba(183,255,240,.7);
}
.left-info-empty{
  font-size:10px;
  color:rgba(183,255,240,.55);
}
.content-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(85,231,255,.22);
  border-radius:10px;
  cursor:pointer;
  background:rgba(0,0,0,.18);
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
  color:rgba(183,255,240,.85);
  font-size:11px;
}
.content-row.content-header{
  background:rgba(0,0,0,.35);
  border-color:rgba(85,231,255,.35);
  color:var(--cyan);
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:default;
}
.content-row.content-header:hover{
  border-color:rgba(85,231,255,.35);
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
}
.content-row:hover{
  border-color:rgba(85,231,255,.55);
  box-shadow:0 0 10px rgba(85,231,255,.12), 0 0 0 1px rgba(0,0,0,.25) inset;
  color:var(--cyan);
}
.content-icon{
  width:14px;
  height:12px;
  position:relative;
  display:inline-block;
  border:1px solid rgba(85,231,255,.55);
  border-radius:3px;
  background:rgba(85,231,255,.06);
  box-shadow:0 0 8px rgba(85,231,255,.12);
}
.content-icon.is-dir{
  border-radius:3px 3px 2px 2px;
}
.content-icon.is-dir::before{
  content:"";
  position:absolute;
  top:-4px;
  left:1px;
  width:8px;
  height:4px;
  border:1px solid rgba(85,231,255,.55);
  border-bottom:none;
  border-radius:3px 3px 0 0;
  background:rgba(85,231,255,.08);
}
.content-icon.is-file{
  border-radius:2px;
}
.content-icon.is-video{
  border-radius:2px;
}
.content-icon.is-video::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  margin:-3px 0 0 -2px;
  width:0;
  height:0;
  border:3px solid transparent;
  border-left-color:rgba(85,231,255,.9);
  border-right:none;
}
.content-icon.is-image{
  border-radius:2px;
}
.content-icon.is-image::before{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  right:2px;
  bottom:2px;
  border:1px solid rgba(85,231,255,.5);
  border-radius:1px;
  background:rgba(85,231,255,.12);
}
.content-icon.is-image::after{
  content:"";
  position:absolute;
  top:4px;
  left:4px;
  width:3px;
  height:3px;
  background:rgba(85,231,255,.4);
  border-radius:1px;
}
.content-icon.is-audio{
  border-radius:2px;
}
.content-icon.is-audio::before{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:1px;
  height:8px;
  background:rgba(85,231,255,.6);
  border-radius:1px;
  box-shadow:2px 0 0 0 rgba(85,231,255,.6), 4px 0 0 0 rgba(85,231,255,.5);
}
.content-icon.is-doc{
  border-radius:2px;
}
.content-icon.is-doc::before{
  content:"";
  position:absolute;
  top:1px;
  left:2px;
  right:2px;
  bottom:2px;
  border:1px solid rgba(85,231,255,.45);
  border-radius:1px;
  background:rgba(85,231,255,.08);
}
.content-icon.is-doc::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  right:3px;
  height:1px;
  background:rgba(85,231,255,.4);
  box-shadow:0 2px 0 0 rgba(85,231,255,.35);
}
.content-name{
  flex:1;
  min-width:0;
}
.content-type{
  width:90px;
  text-align:left;
  color:rgba(183,255,240,.7);
}
.content-size{
  width:90px;
  text-align:right;
  color:rgba(183,255,240,.7);
}
.content-category{
  width:80px;
  text-align:left;
  color:rgba(183,255,240,.7);
  font-variant-numeric:tabular-nums;
  letter-spacing:.5px;
}
.releases-table{
  width:100%;
  border-collapse:collapse;
  font-size:10px;
}
.releases-table th,
.releases-table td{
  border:1px solid rgba(85,231,255,.18);
  padding:3px 6px;
  text-align:left;
  color:rgba(183,255,240,.75);
}
.releases-table th:nth-child(1),
.releases-table td:nth-child(1){
  width:50px;
  font-variant-numeric:tabular-nums;
}
.releases-table th:nth-child(2),
.releases-table td:nth-child(2){
  min-width:0;
}
.releases-table th:nth-child(3),
.releases-table td:nth-child(3){
  width:100px;
}
.releases-table th{
  color:rgba(85,231,255,.9);
  background:rgba(0,0,0,.18);
  letter-spacing:1px;
  text-transform:uppercase;
}
.releases-table tbody tr:hover .releases-name-cell{
  color:var(--cyan);
  cursor:pointer;
}
.releases-table .releases-name-cell:hover{
  background:rgba(85,231,255,.08);
}
.releases-list{
  list-style:none;
  margin:0;
  padding:0;
}
.releases-list li{
  margin:4px 0;
}
.releases-link{
  display:block;
  width:100%;
  text-align:left;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:4px 0;
  color:rgba(183,255,240,.85);
  font-family:inherit;
  font-size:11px;
}
.releases-link:hover{
  color:var(--cyan);
}

/* ===== RIGHT: info panel (kv / dp-stats style) ===== */
.info-panel{
  padding:10px;
  overflow:auto;
}
.info-placeholder{
  color:rgba(183,255,240,.55);
  font-size:11px;
  font-style:italic;
}

.desc-box{
  margin-top:10px;
  padding:10px;
  border:1px solid rgba(85,231,255,.18);
  border-radius:10px;
  background:rgba(0,0,0,.20);
}
.desc-title{
  color:rgba(85,231,255,.9);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:6px;
}
.desc-header{
  font-size:12px;
  letter-spacing:1px;
  color:var(--cyan);
  margin-bottom:6px;
}
.desc-body{
  font-size:11px;
  color:rgba(183,255,240,.75);
  line-height:1.4;
}
.desc-edit-label{
  font-size:10px;
  letter-spacing:1px;
  color:rgba(183,255,240,.65);
  margin-top:6px;
}
.desc-edit{
  width:100%;
  min-height:70px;
  margin-top:6px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(85,231,255,.22);
  border-radius:8px;
  color:rgba(183,255,240,.9);
  font-family:var(--mono);
  font-size:11px;
  padding:8px;
  resize:vertical;
}
.preview-save-status{
  font-size:11px;
  margin-top:8px;
  padding:6px 10px;
  border-radius:8px;
}
.preview-save-ok{
  color:rgba(100,255,150,.95);
  background:rgba(0,80,40,.25);
  border:1px solid rgba(100,255,150,.3);
}
.preview-save-err{
  color:rgba(255,120,100,.95);
  background:rgba(80,20,0,.25);
  border:1px solid rgba(255,120,100,.3);
}
.desc-save{
  margin-top:10px;
  font-family:var(--mono);
  font-size:10px;
  padding:6px 10px;
  border-radius:9px;
  border:1px solid rgba(85,231,255,.25);
  background:rgba(0,0,0,.18);
  color:rgba(183,255,240,.9);
  cursor:pointer;
  text-transform:uppercase;
}
.desc-save:hover{
  border-color:rgba(85,231,255,.6);
  box-shadow:0 0 12px rgba(85,231,255,.12);
}
.save-status{
  margin-top:6px;
  font-size:10px;
  color:rgba(183,255,240,.75);
}
.desc-link{
  display:inline-block;
  margin-top:8px;
  font-size:10px;
  color:rgba(85,231,255,.95);
  text-decoration:none;
  border:1px solid rgba(85,231,255,.25);
  padding:4px 8px;
  border-radius:8px;
  background:rgba(85,231,255,.08);
  cursor:pointer;
  font-family:var(--mono);
  appearance:none;
}
.desc-link:hover{
  border-color:rgba(85,231,255,.6);
  box-shadow:0 0 12px rgba(85,231,255,.12);
}

/* session list */
.sessions{
  background:rgba(0,0,0,.25);
  border:1px solid var(--border2);
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.sessions h4{
  margin:0;
  padding:10px 10px;
  border-bottom:1px solid rgba(85,231,255,.18);
  font-size:12px;
  letter-spacing:2px;
  color:var(--cyan);
  text-transform:uppercase;
}
.session-list{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
}
.session-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 8px;
  border:1px solid rgba(85,231,255,.22);
  border-radius:10px;
  background:rgba(0,0,0,.18);
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
}
.session-item .label{
  font-size:11px;
  color:rgba(183,255,240,.85);
}
.session-item .tag{
  font-size:10px;
  color:rgba(183,255,240,.65);
  border:1px solid rgba(85,231,255,.18);
  padding:2px 6px;
  border-radius:999px;
}
.session-item button{
  font-family:var(--mono);
  font-size:10px;
  padding:4px 8px;
  border-radius:7px;
  border:1px solid rgba(85,231,255,.25);
  background:rgba(85,231,255,.08);
  color:rgba(183,255,240,.9);
  cursor:pointer;
}
.session-item button:hover{
  border-color:rgba(85,231,255,.55);
  box-shadow:0 0 10px rgba(85,231,255,.12);
}

/* chat area */
.chat{
  background:rgba(0,0,0,.20);
  border:1px solid var(--border2);
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.chat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-bottom:1px solid rgba(85,231,255,.18);
  background:rgba(0,0,0,.18);
}
.chat-head .title{
  font-size:12px;
  letter-spacing:2px;
  color:var(--cyan);
  text-transform:uppercase;
}
.chat-head .meta{
  font-size:10px;
  color:rgba(183,255,240,.6);
  letter-spacing:1px;
}
.chat-body{
  flex:1;
  padding:12px;
  overflow:auto;
  font-size:12px;
  color:rgba(183,255,240,.8);
}
.chat-body .placeholder{
  opacity:.75;
  text-align:center;
  margin-top:28px;
  letter-spacing:1px;
}
.chat-foot{
  border-top:1px solid rgba(85,231,255,.18);
  padding:10px;
  display:flex;
  gap:10px;
  align-items:center;
}
.chat-input{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(85,231,255,.22);
  border-radius:10px;
  padding:8px 10px;
  background:rgba(0,0,0,.22);
}
.chat-input input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  color:rgba(183,255,240,.9);
  font-family:var(--mono);
  font-size:11px;
}
.chat-actions{
  display:flex;
  gap:8px;
}
.chat-actions button{
  font-family:var(--mono);
  font-size:10px;
  padding:6px 10px;
  border-radius:9px;
  border:1px solid rgba(85,231,255,.25);
  background:rgba(0,0,0,.18);
  color:rgba(183,255,240,.9);
  cursor:pointer;
}
.chat-actions button.primary{
  background:rgba(85,231,255,.10);
}
.chat-actions button:hover{
  border-color:rgba(85,231,255,.6);
  box-shadow:0 0 12px rgba(85,231,255,.12);
}

/* right stats */
.dp-stats{
  padding:10px 10px 12px;
  height:calc(100% - 44px);
  overflow:auto;
}
.kv{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:6px 10px;
  font-size:11px;
  padding:10px;
  border:1px solid rgba(85,231,255,.18);
  border-radius:10px;
  background:rgba(0,0,0,.20);
  margin-bottom:10px;
}
.kv b{ color:rgba(85,231,255,.95); font-weight:700; }
.kv span{ color:rgba(183,255,240,.75); }

.tbl{
  width:100%;
  border-collapse:collapse;
  font-size:10px;
  margin:10px 0;
}
.tbl th, .tbl td{
  border:1px solid rgba(85,231,255,.18);
  padding:6px 6px;
  text-align:left;
  color:rgba(183,255,240,.75);
}
.tbl th{
  color:rgba(85,231,255,.9);
  background:rgba(0,0,0,.18);
  letter-spacing:1px;
  text-transform:uppercase;
}

.proc{
  margin-top:10px;
  border:1px solid rgba(85,231,255,.18);
  border-radius:10px;
  overflow:hidden;
  background:rgba(0,0,0,.20);
}
.proc .ph{
  padding:10px;
  border-bottom:1px solid rgba(85,231,255,.18);
  color:rgba(85,231,255,.9);
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
}
.proc pre{
  margin:0;
  padding:10px;
  font-size:10px;
  line-height:1.35;
  color:rgba(183,255,240,.75);
  overflow:auto;
}

/* responsive */
@media (max-width: 1080px){
  .dp-grid{ grid-template-columns:1fr; }
  .dp-panel{ min-height:auto; }
  .dp-panel .dp-window{ min-height:560px; }
}