:root{
  --accent:#0b74de;
  --accent-2:#0a5fb8;
  --bg:#0f1724;
  --panel-bg:#ffffff;
  --muted:#556;
  --shadow:0 18px 48px rgba(2,6,23,0.28);
  --left-min:320px;
  --left-max:560px;
}

/* Base */
html,body{height:100%;margin:0;background:var(--bg);font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;color:#111;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}

/* Layout */
.page-wrap{position:relative;z-index:5;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:12px}
.panel{width:100%;max-width:2000px;height:calc(100vh - 24px);background:var(--panel-bg);border-radius:10px;box-shadow:var(--shadow);display:flex;overflow:hidden;transition:all .18s ease}

/* Left column grid (6 rows) */
.left{
  flex:0 0 clamp(var(--left-min), 26vw, var(--left-max));
  min-width:var(--left-min);
  max-width:var(--left-max);
  padding:12px;
  display:grid;
  grid-template-rows: 1.2fr 0.9fr 0.8fr 1.4fr 1.4fr 0.6fr;
  gap:10px;
  border-right:1px solid rgba(0,0,0,0.06);
  background:linear-gradient(180deg,#fff,#fbfbfb);
}
.left.collapsed{flex-basis:120px;min-width:120px;padding:8px;grid-template-rows:0.8fr 0.6fr 0.6fr 1fr 1fr 0.4fr}

/* Logo */
.logo-wrap{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px;background:transparent}
.logo-wrap img{max-height:100%;max-width:100%;height:auto;width:auto;display:block;object-fit:contain}

/* Description + maintenance text */
.desc{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:clamp(14px,1.4vw,18px);padding:6px}
.maintenance-text{color:#d9302a;font-weight:900;font-size:1.05em;margin-bottom:6px;display:block}
.desc-body{color:var(--muted)}

/* Contact */
.contact{display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;color:#0b2f5a;font-size:clamp(18px,2.4vw,30px);text-align:center}
.contact .phone{font-size:1.05em}
.contact .email{font-size:0.9em;margin-top:6px}

/* Carousel */
.carousel{border-radius:8px;background:linear-gradient(180deg,#fff,#f6f6f6);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:6px}
.carousel .imgbox{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:6px}
.carousel img{max-width:100%;max-height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none;transition:transform .28s}
.nav{position:absolute;right:8px;top:8px;display:flex;gap:6px}
.nav-btn{background:rgba(0,0,0,0.06);border:0;padding:6px 8px;border-radius:6px;cursor:pointer;font-weight:700;color:var(--muted)}
.nav-btn:hover{background:rgba(0,0,0,0.12)}

/* Download */
.download{display:flex;align-items:center;justify-content:center}
.btn{display:inline-block;padding:8px 12px;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none;font-weight:700}

/* Right viewer */
.right{flex:1 1 auto;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:420px}
.viewer{flex:1 1 auto;border-radius:8px;background:linear-gradient(180deg,#fff,#f7f7f7);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.img-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:grab;touch-action:none;position:relative}
.img-wrap:active{cursor:grabbing}
#catalogImage{display:block;max-width:none;max-height:none;transform-origin:center center;transition:transform 160ms ease;pointer-events:none}

/* Page flip overlay (for animation) */
.page-flip{
  position:absolute;inset:0;border-radius:6px;background:linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.02));
  transform-origin:left center;pointer-events:none;opacity:0;display:none;
}

/* Controls layout */
.controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px}
.controls-left,.controls-center,.controls-right{display:flex;gap:8px;align-items:center}
.control-primary{
  padding:10px 14px;border-radius:10px;border:0;background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;font-weight:800;cursor:pointer;
  box-shadow:0 6px 18px rgba(11,116,222,0.18);transition:transform .12s,box-shadow .12s;
}
.control-primary:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(11,116,222,0.22)}
.control-secondary{background:transparent;color:var(--accent);border:2px solid rgba(11,116,222,0.12);padding:8px 12px;border-radius:10px;font-weight:700;cursor:pointer}

/* Page indicator */
.page-indicator-wrap{position:absolute;right:18px;top:18px;z-index:20;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.page-indicator{background:rgba(255,255,255,0.95);color:#111;padding:8px 10px;border-radius:10px;font-weight:800;box-shadow:0 8px 20px rgba(0,0,0,0.18)}
.auto-indicator{width:44px;height:6px;border-radius:6px;background:rgba(255,255,255,0.12);overflow:hidden;position:relative}
.auto-indicator::after{content:"";position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width 0.2s linear}

/* Fullscreen overlay */
.catalog-fullscreen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(6,8,10,0.96);visibility:hidden;opacity:0;transition:opacity .18s,visibility .18s}
.catalog-fullscreen.show{visibility:visible;opacity:1}
.fs-img{max-width:98%;max-height:98%;object-fit:contain;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,0.6);transition:transform .12s}
.fs-controls{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;display:flex;gap:10px;z-index:10002}
.fs-controls button{background:rgba(255,255,255,0.12);border:0;color:#fff;padding:12px 14px;border-radius:10px;cursor:pointer;font-weight:800;font-size:15px}
.fs-close{position:fixed;top:18px;right:18px;background:rgba(255,255,255,0.12);border:0;color:#fff;padding:10px 12px;border-radius:8px;cursor:pointer;z-index:10001;font-weight:700}
.fs-restore{position:fixed;top:18px;left:18px;background:rgba(255,255,255,0.12);border:0;color:#fff;padding:10px 12px;border-radius:8px;cursor:pointer;z-index:10001;font-weight:700}

/* --- PROFESSIONAL MINIMAL FS ARROWS --- */
.fs-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10001;

  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  font-weight: 700;
  color: #fff;

  background: rgba(0,0,0,0.35);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(4px);

  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  opacity: 0.45;
  transition: opacity .18s ease, background .18s ease, transform .15s ease;
}
.fs-arrow:hover{
  opacity: 1;
  background: rgba(0,0,0,0.55);
  transform: translateY(-50%) scale(1.05);
}
.fs-arrow:active{
  transform: translateY(-50%) scale(0.92);
}
.fs-arrow.left{left: 12px;}
.fs-arrow.right{right: 12px;}

@media (max-width:900px){
  .fs-arrow{
    width:30px;
    height:30px;
    font-size:16px;
    opacity:0.35;
  }
}

/* Bottom page indicator */
.fs-bottom{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;display:flex;gap:8px;z-index:10001;color:#fff;font-weight:700}

/* Overlay title */
.overlay-title{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:10003;color:#d9302a;font-weight:900;font-size:clamp(12px,1.6vw,18px);pointer-events:none}
.typing{display:inline-block;white-space:nowrap;overflow:hidden;border-right:.12em solid rgba(255,255,255,0.6);animation: typingAnim 2.6s steps(28,end) infinite, blink .9s step-end infinite}

/* typing animation */
@keyframes typingAnim{0%{width:0}50%{width:100%}100%{width:100%}}
@keyframes blink{50%{border-color:transparent}}

/* Watermark */
.watermark{position:fixed;z-index:10000;font-weight:900;font-size:48px;pointer-events:none;opacity:0.12;mix-blend-mode:multiply;transition:all 1s linear;text-transform:uppercase;letter-spacing:6px}

/* Page flip animation */
@keyframes pageFlipOpen {
  0% { transform: perspective(900px) rotateY(0deg); opacity:1; }
  40% { transform: perspective(900px) rotateY(-60deg); opacity:0.95; }
  100% { transform: perspective(900px) rotateY(-100deg); opacity:0; }
}
.page-flip.show { display:block; opacity:1; animation: pageFlipOpen 520ms cubic-bezier(.2,.9,.2,1); }

/* Responsive */
@media (max-width:1000px){
  .panel{flex-direction:column;height:auto}
  .left{width:100%;flex:0 0 auto;border-right:none;border-bottom:1px solid rgba(0,0,0,0.06)}
  .right{min-width:0}
  .watermark{font-size:28px}
}