:root{
  --bg:#0b1220; --panel:#0f1724; --muted:#9aa4b2; --text:#e6eef6; --accent:#3ddc84; --accent2:#5ab3ff;
  --radius:8px; --glass: rgba(255,255,255,0.03);
  --card-shadow: 0 8px 18px rgba(2,6,23,0.18);
}
html,body{height:100%}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.app{max-width:1400px;margin:8px auto;padding:8px;min-height:calc(100vh - 28px);display:flex;flex-direction:column}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:10px;background:var(--panel);box-shadow:0 6px 16px rgba(2,6,23,0.12);z-index:6}
.brand{display:flex;gap:6px;align-items:center}
.logo{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-weight:700;color:var(--panel)}
.title{font-size:15px;font-weight:700;color:var(--text)}
.subtitle{font-size:11px;color:var(--muted)}
.top-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* Buttons & small controls */
.btn{padding:6px 10px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.06);cursor:pointer;font-size:13px;color:var(--text)}
.btn:hover{background:rgba(255,255,255,0.02)}
.iconBtn{padding:6px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.04);cursor:pointer;color:var(--text)}
.iconBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,0.02)}

/* pills */
.view-pills{display:flex;gap:6px;align-items:center}
.pill{padding:6px 10px;border-radius:999px;background:var(--glass);border:0;cursor:pointer;color:var(--text);font-weight:600;font-size:13px}
.pill:hover{background:rgba(255,255,255,0.04)}
.pill.active{background:linear-gradient(90deg,var(--accent),var(--accent2));color:var(--panel)}

/* theme toggle */
.theme-toggle{display:flex;align-items:center;gap:8px}
.switch{position:relative;display:inline-block;width:64px;height:34px}
.switch input{opacity:0;width:0;height:0;position:absolute}
.slider{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:34px;display:flex;align-items:center;padding:4px;background:transparent;border:1px solid rgba(255,255,255,0.06)}
.knob{width:26px;height:26px;border-radius:14px;background:linear-gradient(180deg,#ffffff10,#00000008);display:grid;place-items:center;font-size:14px;transition:transform .14s cubic-bezier(.2,.9,.3,1);box-shadow:0 6px 14px rgba(2,6,23,0.18)}
.switch input:checked + .slider .knob{transform:translateX(30px)}
.modeLabel{color:var(--text);font-size:13px}

/* layout */
.main{display:grid;grid-template-columns:1fr 340px;gap:6px;margin-top:12px;flex:1;min-height:0}
.explorer{position:relative;padding:10px;border-radius:10px;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.explorer::before{content:'';position:absolute;inset:0;border-radius:10px;background:linear-gradient(180deg, rgba(90,120,160,0.05), rgba(0,0,0,0.04));pointer-events:none;z-index:0}
.explorer-header{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:3}
.left-controls{display:flex;gap:6px;align-items:center}
.breadcrumb{background:transparent;padding:6px 8px;border-radius:8px;min-height:30px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;max-width:72vw}
.breadcrumb .crumb{cursor:pointer;padding:3px 6px;border-radius:6px;white-space:nowrap;font-size:13px;color:var(--text)}
.breadcrumb .crumb:hover{background:rgba(255,255,255,0.02)}

.explorer-actions{display:flex;gap:8px;align-items:center;position:relative;z-index:3}
.explorer-actions input{padding:7px;border-radius:8px;border:0;background:rgba(255,255,255,0.02);color:var(--text);font-size:14px}
.explorer-actions input::placeholder{color:var(--muted)}

/* folder view */
.folder-view-wrap{flex:1;min-height:0;overflow:auto;margin-top:10px;padding-right:6px;position:relative;z-index:2;scroll-behavior:smooth}
.folder-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;padding-bottom:10px;min-height:10%;align-items:stretch;grid-auto-rows:1fr;grid-auto-flow:dense}

/* cards */
.card{padding:8px;border-radius:10px;background:var(--panel);display:flex;flex-direction:column;gap:6px;cursor:pointer;box-shadow:var(--card-shadow);transition:transform .09s ease, box-shadow .09s ease;font-size:13px;margin-bottom:5px;height:100%;}
.card.item-animate{opacity:0;transform:translateY(6px);}
.card.item-animate.show{opacity:1;transform:none;transition:opacity .18s ease, transform .18s ease}

.folder-card{display:flex;align-items:center;gap:8px}
.folder-card .folder-icon{font-size:16px;padding:6px;background:rgba(255,255,255,0.02);border-radius:8px}
.folder-card strong{color:var(--text)}
.item-card{display:flex;gap:8px;align-items:center}
.item-card strong{color:var(--text)}
.item-card .small{white-space:normal;word-wrap:break-word;overflow:visible;line-height:1.3;}

.folder-card,.item-card{height:100%;}
.item-card>div:last-child{flex:1;min-width:0;}
.item-card .small.muted{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  word-break:break-all;
  line-height:1.4;
}

/* details panel - labels left, values right */
.details{background:var(--panel);padding:12px;border-radius:10px;min-height:480px;position:relative;overflow:auto;box-shadow:0 8px 20px rgba(2,6,23,0.12)}
.details-inner{display:flex;flex-direction:column;gap:10px;align-items:flex-start;width:100%;text-align:left}
.big-icon{width:100px;height:72px;border-radius:12px;display:grid;place-items:center;font-size:30px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.03))}
.details-inner h2{color:var(--text);margin:0;word-wrap:break-word;width:100%;font-size:18px;text-align:left}
.details-inner .small{color:var(--muted);word-wrap:break-word;width:100%;font-size:12px;text-align:left}
.props{width:100%;display:grid;gap:8px}
.prop-row{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:8px;border-radius:8px;background:rgba(255,255,255,0.01);font-size:13px}
.prop-row .k{font-weight:700;color:var(--text);white-space:nowrap;text-align:left}
.prop-row .prop-value{word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;line-height:1.6;text-align:right;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.prop-row .prop-text{color:var(--text)}
.prop-link{padding:6px 10px;border-radius:8px;background:rgba(255,255,255,0.02);cursor:pointer;border:1px solid rgba(255,255,255,0.03);font-size:12px;text-decoration:none;color:var(--accent2);display:inline-block;word-wrap:break-word;word-break:break-all;transition:all .1s ease}
.prop-link:hover{filter:brightness(1.2);background:rgba(255,255,255,0.04);transform:translateY(-1px)}
.prop-tag{padding:5px 10px;border-radius:8px;background:rgba(255,255,255,0.02);color:var(--accent2);font-size:12px;display:inline-block;font-weight:500;border:1px solid rgba(255,255,255,0.03);white-space:nowrap}
.desc{color:var(--text);word-wrap:break-word;width:100%;line-height:1.5;padding:10px;border-radius:8px;background:rgba(255,255,255,0.01);font-size:13px;text-align:left}

/* modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.6);z-index:80}
.modal.open{display:flex}
.modal .box{background:var(--panel);padding:12px;border-radius:10px;width:920px;max-width:96%;height:auto;max-height:84vh;overflow:auto}
.modal h3{color:var(--text);margin:0 0 12px 0}

/* theme list */
.theme-list{display:flex;flex-direction:row;gap:10px;max-height:60vh;overflow:auto;padding-right:6px;flex-wrap:wrap}
.theme-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;background:var(--panel);box-shadow:var(--card-shadow)}
.theme-row .theme-name{flex:0 0 220px;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.theme-row .swatches-row{display:flex;gap:12px;align-items:center;flex:1;min-width:0}
.swatch-group{display:flex;flex-direction:column;gap:6px;min-width:0}
.swatch-label{font-size:12px;color:var(--muted);margin-bottom:4px}
.swatches{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.swatch{width:28px;height:28px;border-radius:6px;border:1px solid rgba(0,0,0,0.12);flex:0 0 auto}
.apply-wrap{flex:0 0 120px;display:flex;justify-content:center;align-items:center}
.apply-wrap .applyTheme{width:100%;max-width:120px;padding:8px 12px}

/* small screens */
@media (max-width:900px){
  .main{grid-template-columns:1fr}
  .details{order:2}
  .theme-row{flex-wrap:wrap;white-space:normal}
  .swatches-row{flex:1 1 auto}
  .card{max-height:none}
}

@media (max-width: 768px){
  .theme-row{flex-direction:column;align-items:stretch}
  .theme-row .theme-name{flex:0 0 auto;width:auto}
  .apply-wrap{align-self:flex-end;flex:0 0 auto;margin-top:6px}
  .apply-wrap .applyTheme{max-width:180px}
  .swatch{width:34px;height:34px}
  .modal .box{max-width:96%;width:96%;padding:12px}
}