*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0F172A;--bg-secondary:#1E293B;--bg-tertiary:#334155;--bg-elevated:#475569;
  --text:#F8FAFC;--text-secondary:#94A3B8;--text-muted:#64748B;
  --accent:#22C55E;--accent-glow:rgba(34,197,94,0.15);--accent-subtle:rgba(34,197,94,0.06);
  --border:rgba(71,85,105,0.4);--border-hover:rgba(71,85,105,0.7);
  --destructive:#EF4444;
  --amber:#FBBF24;--pink:#F472B6;--green:#22C55E;
  --shadow:0 20px 60px -15px rgba(0,0,0,0.5);
  --radius:12px;
}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased}

/* Header */
.header{padding:0 20px;height:54px;background:var(--bg-secondary);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:20px;position:relative}
.header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-glow),transparent)}
.header-brand{display:flex;align-items:center;gap:12px}
.header-logo{width:32px;height:32px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 0 16px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,0.15)}
.header-logo svg{width:16px;height:16px;color:#fff;fill:none;stroke:currentColor;stroke-width:2.5}
.header h1{font-size:14px;font-weight:600;letter-spacing:-0.3px;color:var(--text)}
.tab-bar{display:flex;gap:2px;background:rgba(15,23,42,0.6);padding:3px;border-radius:10px;border:1px solid var(--border)}
.tab-btn{padding:6px 18px;border-radius:8px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-size:12px;font-weight:600;font-family:inherit;transition:all .2s ease}
.tab-btn.active{background:var(--bg-tertiary);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,0.3)}
.tab-btn:hover:not(.active){color:var(--text-secondary)}
.header-meta{display:flex;align-items:center;gap:10px;margin-left:auto}
.info-pill{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);background:var(--accent-subtle);padding:5px 12px;border-radius:6px;border:1px solid rgba(34,197,94,0.12);display:none;font-weight:500;text-shadow:0 0 8px var(--accent-glow)}
.btn-reset{padding:6px 14px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text-muted);cursor:pointer;font-size:12px;font-weight:500;font-family:inherit;transition:all .2s}
.btn-reset:hover{background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.3);color:var(--destructive)}

/* Main */
.main{flex:1;display:flex;overflow:hidden}

/* Sidebar */
.sidebar{width:228px;min-width:140px;max-width:450px;background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;position:relative}
.sidebar-resizer{position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:col-resize;z-index:20}
.sidebar-resizer:hover,.sidebar-resizer.active{background:var(--accent);opacity:.4;border-radius:3px}
.sidebar-header{padding:18px 18px 12px;font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px}
.file-tree{flex:1;overflow-y:auto;padding:0 8px 12px}
.file-tree::-webkit-scrollbar{width:4px}
.file-tree::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:2px}
.file-tree:empty::after{content:'Drop files to start';display:flex;align-items:center;justify-content:center;height:140px;font-size:12px;color:var(--text-muted);opacity:.6}
.tree-item{padding:7px 10px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:9px;border-radius:8px;transition:all .12s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-secondary);margin:1px 0}
.tree-item:hover{background:var(--bg-tertiary);color:var(--text)}
.tree-item.active{background:var(--accent-subtle);color:var(--accent);font-weight:600;text-shadow:0 0 8px var(--accent-glow)}
.tree-icon{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
.tree-icon.folder{background:rgba(251,191,36,0.1);color:var(--amber)}
.tree-icon.json{background:rgba(34,197,94,0.08);color:var(--green)}
.tree-icon.img{background:rgba(244,114,182,0.08);color:var(--pink)}
.tree-name{overflow:hidden;text-overflow:ellipsis}
.tree-indent{width:14px;flex-shrink:0}

/* Canvas */
.canvas-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:var(--bg);background-image:radial-gradient(ellipse at 50% 40%,rgba(34,197,94,0.02) 0%,transparent 60%)}

/* Drop zone */
.drop-zone{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;z-index:10;transition:all .3s ease}
.drop-zone.hidden{display:none}
.drop-zone.dragging{background:var(--accent-subtle)}
.drop-zone.dragging::after{content:'';position:absolute;inset:28px;border:2px dashed rgba(34,197,94,0.4);border-radius:20px;animation:glow-pulse 2s ease-in-out infinite}
@keyframes glow-pulse{0%,100%{opacity:.3;box-shadow:inset 0 0 20px var(--accent-glow)}50%{opacity:1;box-shadow:inset 0 0 40px var(--accent-glow)}}
.drop-visual{width:88px;height:88px;border-radius:24px;background:var(--bg-secondary);border:1px solid var(--border-hover);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,0.02);transition:all .4s cubic-bezier(.4,0,.2,1)}
.drop-visual svg{width:36px;height:36px;stroke:var(--text-secondary);fill:none;stroke-width:1.5;transition:all .3s ease}
.drop-zone:not(.dragging):hover .drop-visual{transform:translateY(-4px);box-shadow:var(--shadow),0 0 30px var(--accent-glow);border-color:rgba(34,197,94,0.3)}
.drop-zone:not(.dragging):hover .drop-visual svg{stroke:var(--accent)}
.drop-text{text-align:center}
.drop-text h2{font-size:18px;font-weight:600;margin-bottom:6px;letter-spacing:-0.4px}
.drop-text p{font-size:13px;color:var(--text-muted);font-weight:400}
.drop-hint{font-size:11px;color:var(--text-muted);opacity:.7;margin-top:-8px;letter-spacing:.2px}
.float-browse{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:10px;background:var(--bg-secondary);border:1px solid var(--border-hover);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:15;opacity:.6}
.float-browse:hover{opacity:1;background:var(--accent);border-color:var(--accent);box-shadow:0 4px 16px var(--accent-glow)}
.float-browse:hover svg{stroke:#fff}
.float-browse svg{width:18px;height:18px;stroke:var(--text-secondary);fill:none;pointer-events:none}
.float-browse .select-menu{top:calc(100% + 8px);right:0;left:auto;transform:none}
.float-browse .select-menu.show{animation:menuFadeRight .15s ease}
@keyframes menuFadeRight{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.drop-actions{position:relative;margin-top:12px}
.select-btn{padding:10px 22px;border-radius:10px;border:1px solid var(--border-hover);background:var(--bg-secondary);color:var(--text);cursor:pointer;font-size:13px;font-weight:500;font-family:inherit;transition:all .25s ease;display:flex;align-items:center;gap:8px}
.select-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-1px);box-shadow:0 6px 20px var(--accent-glow)}
.select-btn svg{width:15px;height:15px}
.select-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:var(--bg-secondary);border:1px solid var(--border-hover);border-radius:12px;overflow:hidden;display:none;min-width:200px;box-shadow:var(--shadow);z-index:100}
.select-menu.show{display:block;animation:menuFade .15s ease}
@keyframes menuFade{from{opacity:0;transform:translateX(-50%) translateY(4px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.select-menu label{display:flex;align-items:center;gap:11px;padding:11px 16px;font-size:13px;cursor:pointer;transition:all .12s;color:var(--text-secondary);font-weight:400}
.select-menu label:hover{background:var(--bg-tertiary);color:var(--text)}
.select-menu label svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.select-menu input{display:none}

/* Preview */
.preview-container,.img-preview-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.preview-container.hidden,.img-preview-container.hidden{display:none}
#lottie-player{width:80%;height:80%;max-width:560px;max-height:560px;border-radius:16px}
.img-preview-container{flex-direction:column;gap:0;padding:28px}
.img-preview-wrap{flex:1;display:flex;align-items:center;justify-content:center;width:100%;min-height:0;position:relative;background-color:#0f172a;background-image:linear-gradient(rgba(148,163,184,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,0.08) 1px,transparent 1px);background-size:20px 20px;background-position:var(--grid-offset-x, 0) var(--grid-offset-y, 0)}
.img-grid-label{position:absolute;top:6px;left:6px;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text-muted);opacity:.6;pointer-events:none}
.img-preview-wrap img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;outline:1px solid rgba(34,197,94,0.3)}
.img-dimension-label{position:absolute;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-muted);background:rgba(15,23,42,0.8);padding:2px 6px;border-radius:4px;pointer-events:none;white-space:nowrap}
.img-dimension-label.width-label{transform:translateX(-50%)}
.img-dimension-label.height-label{transform:translateY(-50%)}

/* Image zoom overlay */
.img-zoom-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.92);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;pointer-events:none}
.img-zoom-overlay.active{opacity:1;pointer-events:all}
.img-zoom-overlay img{max-width:none;max-height:none;cursor:grab;transition:transform .1s ease;border-radius:0;box-shadow:none}
.img-zoom-overlay img.dragging{cursor:grabbing;transition:none}
.img-zoom-controls{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;gap:8px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;padding:6px 12px;align-items:center}
.img-zoom-controls button{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;transition:all .15s}
.img-zoom-controls button:hover{border-color:var(--accent);color:var(--accent)}
.img-zoom-controls span{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--text-secondary);min-width:48px;text-align:center}
.img-zoom-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:10px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .15s}
.img-zoom-close:hover{background:var(--destructive);border-color:var(--destructive);color:#fff}
.img-info-panel{width:100%;max-width:640px;margin-top:20px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:14px 22px;display:flex;flex-wrap:wrap;gap:10px 30px}
.img-info-item{display:flex;flex-direction:column;gap:3px}
.img-info-item .label{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;font-weight:500}
.img-info-item .value{font-size:14px;color:var(--text);font-weight:600}

/* Controls */
.controls{padding:10px 20px;background:var(--bg-secondary);border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.controls.hidden{display:none}
.ctrl-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .15s ease}
.ctrl-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-subtle)}
.ctrl-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 12px var(--accent-glow)}
.progress-wrap{flex:1;display:flex;align-items:center;gap:12px}
.progress-bar{flex:1;height:4px;background:var(--bg-tertiary);border-radius:100px;cursor:pointer;overflow:hidden;transition:height .15s}
.progress-bar:hover{height:6px}
.progress-fill{height:100%;background:var(--accent);border-radius:100px;width:0%;transition:width .05s linear;box-shadow:0 0 8px var(--accent-glow)}
.progress-time{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted);min-width:56px;text-align:center;font-variant-numeric:tabular-nums}
.speed-select{font-family:'JetBrains Mono',monospace;background:var(--bg);border:1px solid var(--border);color:var(--text-secondary);padding:5px 8px;border-radius:6px;font-size:11px;cursor:pointer}
.bg-control{display:flex;gap:5px;margin-left:6px}
.bg-dot{width:16px;height:16px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .2s ease;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08)}
.bg-dot:hover{transform:scale(1.2)}
.bg-dot.active{border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.bg-dot.white{background:#fafafa}
.bg-dot.gray{background:#64748B}
.bg-dot.dark{background:#0F172A}
.bg-dot.checker{background:repeating-conic-gradient(#334155 0% 25%,#1E293B 0% 50%) 50%/8px 8px}

/* Video */
.video-preview-container{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:28px}
.video-preview-container.hidden{display:none}
#video-player{max-width:90%;max-height:70%;border-radius:12px;box-shadow:0 12px 48px rgba(0,0,0,0.4);background:#000}
#video-player:not([src]){display:none}

/* File preview */
.file-preview-container{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.file-preview-container.hidden{display:none}
.file-preview-header{padding:12px 22px;background:var(--bg-secondary);border-bottom:1px solid var(--border);font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-secondary);display:flex;flex-wrap:wrap;gap:8px 24px;flex-shrink:0}
.file-preview-header .fph-item{display:flex;gap:6px}
.file-preview-header .fph-label{color:var(--text-muted)}
.file-preview-header .fph-value{color:var(--text);font-weight:500}
.file-content{flex:1;overflow:auto;padding:16px 0;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.7;color:var(--text);white-space:pre;tab-size:2;counter-reset:line}
.file-content::-webkit-scrollbar,.file-hex::-webkit-scrollbar{width:6px;height:6px}
.file-content::-webkit-scrollbar-thumb,.file-hex::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:3px}
.file-content .line{counter-increment:line;display:block;padding:0 20px 0 64px;position:relative;min-width:max-content}
.file-content .line::before{content:counter(line);position:absolute;left:0;width:44px;text-align:right;color:var(--text-muted);font-size:11px;user-select:none;-webkit-user-select:none}
.file-content .line:hover{background:var(--bg-secondary)}
.file-content .line.hl{background:var(--accent-subtle)}

/* JSON syntax highlighting */
.json-key{color:#7dd3fc}
.json-string{color:#86efac}
.json-number{color:#fbbf24}
.json-bool{color:#c084fc}
.json-null{color:#f87171;font-style:italic}
.file-hex{flex:1;overflow:auto;padding:16px 20px;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.7;color:var(--text)}
.file-hex .hex-line{display:block}
.file-hex .hex-offset{color:var(--accent);margin-right:16px}
.file-hex .hex-bytes{color:var(--text)}
.file-hex .hex-ascii{color:var(--text-muted);margin-left:16px}

/* Document (PDF/EPUB) */
.doc-preview-container{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.doc-preview-container.hidden{display:none}
#doc-iframe{flex:1;width:100%;border:none;background:#fff}
#doc-embed{flex:1;width:100%;border:none;display:none;min-height:0}

/* SQLite viewer */
.sqlite-viewer{flex:1;overflow:auto;padding:20px}
.sqlite-viewer h3{font-size:13px;font-weight:600;color:var(--accent);margin:20px 0 8px;padding:6px 0;border-bottom:1px solid var(--border)}
.sqlite-viewer h3:first-child{margin-top:0}
.sqlite-viewer .table-schema{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted);margin-bottom:10px;padding:6px 10px;background:var(--bg);border-radius:6px;border:1px solid var(--border)}
.sqlite-viewer table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:24px}
.sqlite-viewer th{background:var(--bg-tertiary);color:var(--text-secondary);font-weight:600;text-align:left;padding:8px 12px;border:1px solid var(--border);font-family:'JetBrains Mono',monospace;font-size:11px;position:sticky;top:0}
.sqlite-viewer td{padding:6px 12px;border:1px solid var(--border);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:11px;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;cursor:default}
.sqlite-viewer td:hover{overflow:visible;white-space:normal;word-break:break-all;background:var(--bg-secondary);z-index:10}
.sqlite-viewer td.cell-expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);max-width:80vw;max-height:60vh;overflow:auto;white-space:pre-wrap;word-break:break-all;background:var(--bg-secondary);border:1px solid var(--accent);border-radius:10px;padding:16px;z-index:1000;box-shadow:0 20px 60px rgba(0,0,0,0.6);cursor:text;user-select:text;-webkit-user-select:text}
.sqlite-viewer tr:hover td{background:var(--bg-secondary)}
.sqlite-viewer td,.sqlite-viewer th{user-select:text;-webkit-user-select:text}
.sqlite-viewer .row-count{font-size:11px;color:var(--text-muted);margin-left:8px;font-weight:400}

/* Sidebar toggle button — hidden on desktop */
.sidebar-toggle{display:none;width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.sidebar-toggle svg{width:18px;height:18px}
.sidebar-toggle:hover{border-color:var(--accent);color:var(--accent)}

/* Sidebar backdrop — hidden on desktop */
.sidebar-backdrop{display:none}

/* =====================================================
   MOBILE RESPONSIVE — max-width: 768px
   ===================================================== */
@media (max-width: 768px) {

  /* Header */
  .header{padding:0 12px;gap:10px;height:50px}
  .header-brand h1{font-size:13px}
  .header-logo{width:28px;height:28px;border-radius:7px}
  .header-logo svg{width:13px;height:13px}
  .tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-shrink:1;min-width:0}
  .tab-bar::-webkit-scrollbar{display:none}
  .tab-btn{padding:5px 12px;font-size:11px;white-space:nowrap}
  .header-meta{gap:6px}
  .info-pill{font-size:10px;padding:4px 8px}
  .btn-reset{padding:5px 10px;font-size:11px}

  /* Sidebar toggle — visible on mobile */
  .sidebar-toggle{display:flex}

  /* Sidebar — off-canvas drawer */
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:260px;max-width:80vw;z-index:1000;transform:translateX(-100%);transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:none}
  .sidebar.open{transform:translateX(0);box-shadow:8px 0 30px rgba(0,0,0,0.5)}
  .sidebar-resizer{display:none}

  /* Sidebar backdrop */
  .sidebar-backdrop{display:none;position:fixed;inset:0;z-index:999;background:rgba(0,0,0,0.5);transition:opacity .25s}
  .sidebar-backdrop.active{display:block}

  /* Main area */
  .main{flex:1;overflow:hidden}

  /* Drop zones */
  .drop-zone{gap:18px;padding:16px}
  .drop-visual{width:64px;height:64px;border-radius:18px}
  .drop-visual svg{width:28px;height:28px}
  .drop-text h2{font-size:15px}
  .drop-text p{font-size:11px}
  .drop-hint{font-size:10px}
  .select-btn{padding:8px 16px;font-size:12px}

  /* Image info panel — single column */
  .img-info-panel{padding:10px 14px;gap:8px 16px;border-radius:10px;flex-direction:column;max-width:none;margin-top:12px;flex-shrink:0}
  .img-info-item .value{font-size:13px}
  .img-info-item .label{font-size:8px}

  /* Image preview — scrollable */
  .img-preview-container{position:relative;inset:auto;width:100%;height:100%;padding:12px;padding-bottom:env(safe-area-inset-bottom, 20px);overflow-y:scroll;-webkit-overflow-scrolling:touch;justify-content:flex-start}

  /* File preview — horizontal scroll */
  .file-content{font-size:12px;overflow-x:auto}
  .file-content .line{padding:0 12px 0 48px}
  .file-content .line::before{width:36px;font-size:10px}
  .file-hex{font-size:11px;overflow-x:auto;padding:12px}
  .file-preview-header{padding:10px 14px;font-size:10px;gap:6px 14px}

  /* Video preview — scrollable */
  .video-preview-container{position:relative;inset:auto;width:100%;height:100%;padding:12px;padding-bottom:env(safe-area-inset-bottom, 20px);overflow-y:scroll;-webkit-overflow-scrolling:touch;justify-content:flex-start}
  #video-player{max-width:100%;max-height:60vh;max-height:60dvh;flex-shrink:0}

  /* Lottie preview — scrollable on small screens */
  .preview-container{overflow-y:scroll;-webkit-overflow-scrolling:touch}

  /* SQLite viewer — horizontal scroll */
  .sqlite-viewer{padding:12px;overflow-x:auto}
  .sqlite-viewer table{min-width:600px}

  /* Controls bar */
  .controls{padding:8px 12px;gap:6px;flex-wrap:wrap}
  .ctrl-btn{width:30px;height:30px;font-size:12px}
  .speed-select{font-size:10px;padding:4px 6px}
  .bg-control{gap:4px}
  .bg-dot{width:14px;height:14px}

  /* Image zoom overlay */
  .img-zoom-overlay img{max-width:100vw}
  .img-zoom-controls{bottom:16px;padding:4px 8px;gap:6px;border-radius:8px}
  .img-zoom-controls button{width:28px;height:28px;font-size:14px}
  .img-zoom-controls span{font-size:11px;min-width:40px}
  .img-zoom-close{top:12px;right:12px;width:36px;height:36px;font-size:18px}

  /* Float browse button */
  .float-browse{width:36px;height:36px;top:10px;right:10px}

  /* Lottie player */
  #lottie-player{width:90%;height:70%;max-width:none;max-height:none}

  /* Document preview */
  .doc-preview-container{overflow-x:auto}
}