/* --- STYL PODSTAWOWY --- */
    html { margin:0; width:100%; height:100%; max-width:100%; overflow:hidden !important; background:#111; overscroll-behavior:none; }
    *, *::before, *::after { box-sizing:border-box; }
    body { margin:0; overflow:hidden; background:#111; font-family:var(--ui-font, "Lato", sans-serif); display:flex; transition: all 0.3s ease; height: 100vh; }
    body { width:100%; max-width:100%; min-width:0; overflow:hidden !important; overscroll-behavior:none; }
    body, button, input, select, textarea { font-family:var(--ui-font, "Lato", sans-serif); }

    /* ==================== BOOT OVERLAY ==================== */
    #boot-overlay{ position:fixed; inset:0; z-index:999999; display:flex; align-items:center; justify-content:center; background:#fff; transition:opacity .35s ease, visibility .35s ease; }
    #boot-overlay .boot-inner{ width:min(720px, 92vw); text-align:center; padding:24px 16px; }
    #boot-overlay .boot-logo{ width:min(520px, 78vw); height:auto; display:block; margin:0 auto 18px; }
    #boot-overlay .boot-title{ font-size:22px; font-weight:900; letter-spacing:.2px; color:#111; }
    #boot-overlay .boot-percent{ margin-top:10px; font-size:44px; font-weight:1000; letter-spacing:1px; color:#c62828; }
    #boot-overlay .boot-bar{ margin:18px auto 0; width:min(520px, 78vw); height:14px; border-radius:999px; background:#eef0f5; overflow:hidden; border:1px solid #e3e6ee; }
    #boot-overlay .boot-bar-fill{ height:100%; width:0%; background:#c62828; transition:width .2s ease; }

    /* buffer scene until ready */
    #canvas-wrap{ opacity:0; transition:opacity .25s ease; }
    body.boot-done #canvas-wrap{ opacity:1; }
    body.boot-done #boot-overlay{ opacity:0; visibility:hidden; pointer-events:none; }
    
    #sidebar { width:420px; background:#fff; height:100vh; display:flex; flex-direction:column; z-index:10; border-right:1px solid #333; transition: margin-left 0.3s ease, transform 0.3s ease; flex-shrink: 0; }
    
    .header { padding:25px 20px; background:#212121; color:#fff; text-align: center; border-bottom: 4px solid #c62828; }
    .header h1 { margin:0; font-size:22px; text-transform:uppercase; letter-spacing:2px; font-weight: 800; }
    .header span { font-size:11px; color:#e0e0e0; font-weight:400; text-transform:uppercase; letter-spacing: 1px; }
    
    .content { padding:20px; flex-grow:1; overflow-y:auto; background:#f5f5f5; -webkit-overflow-scrolling: touch; }
    
    .footer { padding:20px; background:#fff; border-top:1px solid #eee; margin-top:auto; display:flex; flex-direction:column; gap:10px; flex-shrink: 0; }

    .ctrl { margin-bottom:15px; }
    label { display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:700; color:#444; margin-bottom:5px; text-transform:uppercase; width: 100%; }
    input[type=range] { width:100%; cursor:pointer; accent-color:#c62828; }
    .val-badge { background:#c62828; color:#fff; padding:2px 6px; border-radius:3px; font-size:10px; font-weight:600; }
    input[type="checkbox"], input[type="radio"] { accent-color: #c62828; transform: scale(1.1); cursor: pointer; margin-right: 8px; }
    .price-badge { color: #2e7d32; font-weight: 800; font-size: 11px; background: rgba(46, 125, 50, 0.1); padding: 2px 6px; border-radius: 4px; margin-left: 5px; display: none; }
    
    .color-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:15px; margin-bottom:15px; }
    .color-item { display:flex; flex-direction:column; align-items:center; cursor:pointer; }
    .swatch { width:40px; height:40px; border-radius: 4px; border:2px solid #ddd; transition:0.2s; position:relative; box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); }
    .swatch.active { border-color:#c62828; transform:scale(1.15); border-width:3px; z-index:2; }
    .swatch.rgb-pick { background: linear-gradient(135deg, red, orange, yellow, green, blue, indigo, violet); }
    .color-name { font-size:9px; text-align:center; margin-top:5px; color:#444; font-weight:600; line-height:1.2; text-transform: uppercase;}
    
    details { background:#fff; border:1px solid #e0e0e0; border-radius:4px; margin-bottom:8px; overflow:hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
    summary { padding:14px; font-weight:700; font-size:12px; text-transform:uppercase; cursor:pointer; background:#fff; border-bottom:1px solid #f0f0f0; color: #333; transition: 0.2s; list-style: none; display: flex; justify-content: space-between; align-items: center; }
    summary::-webkit-details-marker { display: none; }
    summary:after { content: '+'; font-size: 16px; font-weight: bold; color: #888; }
    details[open] summary:after { content: '-'; color: #c62828; }
    
    .row-complex { padding:12px; border-bottom:1px solid #f0f0f0; display:flex; flex-direction:column; gap:5px; }
    .row-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .row-lbl { display:flex; align-items:center; font-size:12px; font-weight:600; cursor:pointer; color:#333; flex-grow: 1; }
    .btn-small { padding:5px 10px; background:#444; color:white; border:none; border-radius:2px; font-size:10px; font-weight:bold; cursor:pointer; text-transform:uppercase; transition: 0.2s; white-space:nowrap;}
    .btn-small:hover { background:#c62828; }

    /* Screen type quick buttons (10% / 5% / 1%) */
    .btn-chip{
      appearance:none;
      border:1px solid #d6d6d6;
      background:#fff;
      color:#333;
      border-radius:999px;
      padding:6px 10px;
      font-size:11px;
      font-weight:800;
      cursor:pointer;
      line-height:1;
      transition:0.15s;
      user-select:none;
    }
    .btn-chip:hover{ border-color:#c62828; }
    .btn-chip.active{
      border-color:#c62828;
      background:#c62828;
      color:#fff;
    }
    
    .light-group { border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 10px; }
    .light-slider-wrap { padding-left: 25px; margin-top: 5px; display: none; }
    .light-slider-wrap.visible { display: block; }
    
    .btn-main { width:100%; padding:15px; background:#c62828; color:#fff; border:none; font-weight:800; text-transform:uppercase; letter-spacing: 1px; cursor:pointer; transition:0.3s; border-radius: 2px; display:flex; justify-content:center; align-items:center; gap:8px; font-size: 12px; }
    .btn-main:hover { background:#b71c1c; box-shadow: 0 4px 12px rgba(198, 40, 40, 0.3); }
    .btn-dark { background:#333; } .btn-dark:hover { background:#111; }
    .btn-share { background:#2e7d32; } .btn-share:hover { background:#1b5e20; }
    .btn-share.copied { background:#1b5e20; border:1px dashed #fff; }
    .btn-ar { background:#0288d1; } .btn-ar:hover { background:#01579b; }

    #canvas-wrap { flex-grow:1; position:relative; background:#87CEEB; width: 100%; height: 100vh; overflow: hidden; }

    /* WebXR AR: keep DOM overlay transparent so it doesn't cover the camera feed */
    body.in-ar,
    body.in-ar #canvas-wrap,
    body.in-ar #canvas-wrap canvas {
        background: transparent !important;
    }
    #loader { position:absolute; top:0; left:0; width:100%; height:100%; background:#212121; color:#fff; display:flex; justify-content:center; align-items:center; z-index:99; transition:0.5s; pointer-events:none; font-family: var(--ui-font, "Lato", sans-serif); text-transform: uppercase; letter-spacing: 2px;}
    
    #price-display { position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.95); padding: 15px 25px; border-radius: 4px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 50; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; border-left: 5px solid #c62828; display: flex; flex-direction: column; align-items: flex-end; }
    #price-display:hover { transform: scale(1.02); }
    .price-label { font-size: 10px; text-transform: uppercase; color: #666; font-weight: 700; letter-spacing: 1px; }
    .price-amount { font-size: 24px; font-weight: 800; color: #212121; margin-top: 2px; }

    #ui-toggle-btn { position: absolute; top: 20px; left: 20px; width: 40px; height: 40px; background: rgba(255,255,255,0.9); border: 1px solid #ccc; border-radius: 4px; cursor: pointer; z-index: 100; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); transition: 0.2s; color: #333; }
    #ui-toggle-btn:hover { background: #fff; transform: scale(1.05); }

    /* MODALE */
    .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
    .modal-content { background: #fff; width: 500px; max-width: 90%; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); overflow: hidden; animation: slideIn 0.3s ease-out; position: relative; }
    @keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .modal-header { background: #212121; color: #fff; padding: 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 4px solid #c62828; }
    .modal-header h2 { margin: 0; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; }
    .close-modal { cursor: pointer; font-size: 24px; color: #aaa; transition: 0.2s; }
    .close-modal:hover { color: #fff; }
    
    .cart-body { padding: 20px; background: #f9f9f9; }
    .cart-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #eee; font-size: 13px; color: #444; font-weight: 600; }
    .cart-row:last-child { border-bottom: none; }
    .cart-row span:last-child { font-weight: 800; color: #212121; }
    .cart-total { margin-top: 20px; padding-top: 15px; border-top: 2px solid #ddd; display: flex; justify-content: space-between; font-size: 18px; font-weight: 800; color: #c62828; }
    .modal-footer { padding: 20px; text-align: center; background: #fff; border-top: 1px solid #eee; }

    /* ZAPYTANIE OFERTOWE */
    .inquiry-body { padding: 20px; background: #f9f9f9; }
    .inquiry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .field label { display: block; font-size: 11px; font-weight: 800; letter-spacing: .3px; color: #555; margin-bottom: 6px; text-transform: uppercase; }
    .field input, .field textarea { width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; padding: 10px 12px; font-size: 13px; outline: none; background: #fff; }
    .field input:focus, .field textarea:focus { border-color: #c62828; box-shadow: 0 0 0 3px rgba(198,40,40,0.12); }
    .inquiry-summary { margin-top: 16px; }
    .inquiry-summary-title { font-size: 11px; font-weight: 900; color: #333; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
    #inq_summary { width: 100%; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px; padding: 10px 12px; font-size: 12px; background: #fff; }
    .inquiry-summary-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
    .inq-status { margin-top: 14px; padding: 12px 14px; border-radius: 4px; font-size: 13px; font-weight: 700; }
    .inq-status.ok { background: rgba(46,125,50,0.10); border: 1px solid rgba(46,125,50,0.35); color: #1b5e20; }
    .inq-status.err { background: rgba(198,40,40,0.10); border: 1px solid rgba(198,40,40,0.35); color: #b71c1c; }

    @media (max-width: 700px){
      .inquiry-grid { grid-template-columns: 1fr; }
    }

    #qr-container { display: flex; flex-direction: column; align-items: center; padding: 30px; text-align: center; }
    #qr-code { margin: 20px 0; padding: 15px; background: white; border: 1px solid #eee; border-radius: 4px; }
    #qr-hint { font-size: 12px; color: #666; max-width: 80%; line-height: 1.5; }
    
    /* --- MOBILE AR ACTION BUTTON --- */
    #mobile-ar-bar { display: none; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 2000; width: 90%; max-width: 400px; }
    .ar-action-btn { 
        width: 100%; padding: 18px; 
        background: #333; color: #aaa; 
        font-size: 14px; font-weight: 800; 
        border: none; border-radius: 50px; 
        text-transform: uppercase; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
        transition: all 0.3s;
        display: flex; justify-content: center; align-items: center; gap: 10px;
        pointer-events: none;
    }
    .ar-action-btn.ready { 
        background: #c62828; color: white; 
        pointer-events: auto; cursor: pointer; 
        animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    @keyframes popIn { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

    body.fullscreen #sidebar { margin-left: -420px; }
    body.fullscreen #ui-toggle-btn { left: 20px; background: rgba(255,255,255,0.6); }

    @media (max-width: 900px){
      html, body { width: 100%; max-width: 100vw; height: var(--app-vh, var(--vvh, 100dvh)); max-height: var(--app-vh, var(--vvh, 100dvh)); overflow: hidden !important; overscroll-behavior: none; }
      body { position: fixed; inset: 0; flex-direction: column; display: flex; min-height: var(--app-vh, var(--vvh, 100dvh)); height: var(--app-vh, var(--vvh, 100dvh)); max-height: var(--app-vh, var(--vvh, 100dvh)); overflow: hidden !important; touch-action: pan-y; }
      #canvas-wrap { width: 100%; max-width: 100vw; height: 45%; flex: 0 0 45%; order: 1; position: relative; display: block; overflow: hidden; }
      #sidebar { width: 100%; max-width: 100vw; height: auto; flex: 1 1 auto; min-height: 0; order: 2; border-right: none; border-top: 4px solid #c62828; margin-left: 0; box-shadow: 0 -5px 20px rgba(0,0,0,0.1); display: block; overflow-y: auto; overflow-x: hidden; padding-bottom: 0; overscroll-behavior: contain; touch-action: pan-y; }
      .content { padding: 12px; height: auto; overflow-y: visible; overflow-x: hidden; flex-grow: 0; max-width: 100%; }
      .footer { position: static; margin-top: 0; padding-bottom: 30px; }
      #sidebar .header { display: none; }
      summary { padding: 12px; font-size: 13px; }
      .ctrl { margin-bottom: 10px; }
      #price-display { top: 10px; right: 10px; padding: 8px 12px; max-width: 60%; transform: scale(0.9); transform-origin: top right; }
      .price-label { font-size: 9px; }
      .price-amount { font-size: 16px; margin-top:0; }
      #ui-toggle-btn { display: none; }
      body.fullscreen #sidebar { display:none !important; margin-left: 0; } 
      body.fullscreen #canvas-wrap { flex: 1 1 100% !important; height: var(--app-vh, var(--vvh, 100dvh)) !important; min-height: var(--app-vh, var(--vvh, 100dvh)) !important; }
    }
  /* =========================
   UI (client-facing polish)
   ========================= */
:root{
  --bg: #0b0c0f;
  --panel: #f6f7f9;
  --card: #ffffff;
  --text: #111318;
  --muted: #5b6270;
  --line: #e6e8ee;
  --accent: #c62828;  /* Dopler red (subtle) */
  --accent2:#111318;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0,0,0,.18);
  --shadow2: 0 6px 18px rgba(0,0,0,.12);
}

body{ background: var(--bg); font-family: var(--ui-font, "Lato", system-ui, -apple-system, Arial, sans-serif); }

/* Brand overlay (top-left on canvas) */
#brand-bar{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 220;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(230,232,238,.9);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(8px);
}
#brand-bar img{ height: 34px; display:block; }

/* Sidebar */
#sidebar{
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.header{
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fb 100%);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding: 16px 18px;
}
.header .brand{
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  column-gap: 14px;
}
.brand-logo-wrap{
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-logo{
  max-height: 38px;
  width: auto;
  display: block;
}
.brand-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.brand-title{
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--text);
}
.brand-sub{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.font-picker-wrap{
  margin-top: 12px;
  margin-left: 70px;
}
.font-picker-label{
  display:block;
  width:auto;
  margin:0 0 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.font-picker-select{
  width: 100%;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  outline: none;
  box-shadow: 0 1px 0 rgba(17,19,24,.04);
}
.font-picker-select:focus{
  border-color: rgba(198,40,40,.65);
  box-shadow: 0 0 0 4px rgba(198,40,40,.10);
}
@media (max-width: 900px){
  .font-picker-wrap{
    margin-top: 10px;
    margin-left: 0;
  }
}

/* Content */
.content{
  background: var(--panel);
  padding: 14px;
}
details{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  box-shadow: 0 1px 0 rgba(17,19,24,.04);
}
summary{
  padding: 14px 14px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text);
  background: transparent;
  border-bottom: 1px solid rgba(230,232,238,.7);
}
details[open] summary{ border-bottom-color: rgba(230,232,238,1); }
summary:after{ color: #8a92a3; }
details[open] summary:after{ color: var(--accent); }

label{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
}
.val-badge{
  background: rgba(17,19,24,.92);
  border-radius: 10px;
  padding: 3px 8px;
  font-size: 10px;
}
input[type=range]{ accent-color: var(--accent); }
.price-badge{
  border-radius: 10px;
  padding: 2px 8px;
}

/* Buttons */
.footer{
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: 14px;
  gap: 10px;
}
.btn-main{
  border-radius: 999px;
  padding: 14px 16px;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: 11px;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
.btn-main:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.16); transform: translateY(-1px); }
.btn-dark{ background: #111318; }
.btn-dark:hover{ background: #0a0b0d; }
.btn-share{ background: #1f6f3a; }
.btn-share:hover{ background: #165a2e; }
.btn-ar{ background: var(--accent); }
.btn-ar:hover{ background: #a91f1f; }

/* Price card */
#price-display{
  position: absolute;
  overflow: hidden;
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,249,252,.98));
  padding: 12px 12px 10px;
  width: fit-content;
  min-width: 0;
  max-width: none;
  transition: background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.price-label{
  color: var(--muted);
}
.price-amount{
  color: var(--text);
  line-height: 1.05;
}
#price-display::before{
  content:none;
}
#price-display::after{
  content:"Kliknij, aby\A zobaczyć szczegóły";
  display:inline-block;
  align-self:center;
  width:max-content;
  margin-top:5px;
  padding-top:6px;
  border-top:1px solid rgba(17,19,24,.08);
  color:var(--accent);
  font-size:12px;
  font-weight:800;
  line-height:1.15;
  letter-spacing:0;
  text-align:center;
  white-space:pre-line;
  pointer-events:none;
}
#price-display:hover{
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(252,247,247,1));
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
  border-left-color:#a91f1f;
  cursor:pointer;
}
@media (max-width: 900px){
  #price-display{
    border-radius:12px;
    width: fit-content;
    min-width: 0;
    max-width: none;
    padding: 9px 10px 8px;
  }
  #price-display::before{
    top:8px;
    right:8px;
    width:16px;
    height:16px;
    font-size:10px;
  }
  #price-display::after{
    width:max-content;
    margin-top:5px;
    padding-top:6px;
    font-size:10px;
  }
}

/* Toggle button */
#ui-toggle-btn{
  border-radius: var(--radius);
  border: 1px solid rgba(230,232,238,.9);
  box-shadow: var(--shadow2);
}

/* Modals */
.modal-content{
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.modal-header{
  border-bottom: 4px solid var(--accent);
}


.modal-overlay{
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}
.modal-content{
  display: flex;
  flex-direction: column;
  width: min(500px, calc(100vw - 32px));
  max-width: min(92vw, 720px);
  max-height: calc(100dvh - 32px);
}
.modal-header,
.modal-footer{
  flex: 0 0 auto;
}
.cart-body,
.inquiry-body,
#qr-container,
.ar-help-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#inquiry-modal .modal-content{
  width: min(640px, calc(100vw - 32px)) !important;
  max-width: min(92vw, 640px) !important;
}
@media (max-height: 860px) and (min-width: 1025px){
  .modal-overlay{
    align-items: flex-start;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .modal-content{
    margin: 0 auto;
    max-height: calc(100dvh - 32px);
  }
}


/* Mobile tweaks */
@media (max-width: 900px){
  #brand-bar{ top: 10px; left: 10px; padding: 8px 10px; }
  #brand-bar img{ height: 28px; }
  .header{ display:none; } /* keep mobile minimal */
  .content{ padding: 10px; }
  details{ border-radius: 12px; }
  #price-display{ border-radius: 12px; }
}


/* =========================
   UI fixes (scrollbar + toggle arrow + mobile safe area)
   ========================= */

/* Red scrollbar (sidebar/content) */
#sidebar, .content{
  scrollbar-width: thin;
  scrollbar-color: var(--accent) rgba(0,0,0,0.12);
}
#sidebar::-webkit-scrollbar, .content::-webkit-scrollbar{ width: 10px; }
#sidebar::-webkit-scrollbar-track, .content::-webkit-scrollbar-track{ background: rgba(0,0,0,0.08); border-radius: 10px; }
#sidebar::-webkit-scrollbar-thumb, .content::-webkit-scrollbar-thumb{
  background: var(--accent);
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.65);
}

/* Remove mobile dynamic AR bar */
#mobile-ar-bar{ display:none !important; }

/* Toggle arrow button (desktop) */
#ui-toggle-btn{
  position: fixed;
  top: 50%;
  left: 420px;                 /* krawędź panelu */
  transform: translate(0, -50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--accent);
  border: 1px solid rgba(0,0,0,0.08);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}
#ui-toggle-btn:hover{ transform: translate(0, -50%) scale(1.05); }

/* When sidebar hidden – button sticks to left edge */
body.fullscreen #ui-toggle-btn{
  left: 16px;
  transform: translateY(-50%);
}

/* Mobile: show arrow (down/up) and ensure last button isn't cut */
@media (max-width: 900px){
  body{ height: 100dvh; }
  #ui-toggle-btn{
    display:flex !important;
    top: auto;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    transform: translateX(-50%);
    width: 54px;
    height: 54px;
    font-size: 22px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.25);
  }
  #ui-toggle-btn:hover{ transform: translateX(-50%) scale(1.03); }

  /* Keep the scroll ending right after the last action button. */
  #sidebar{ padding-bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 10px)) !important; }
  .footer{ padding-bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 14px)) !important; }
  #btn-share{ margin-bottom: 0 !important; }

  /* Fullscreen on mobile: hide UI and give canvas full height */
  body.fullscreen #sidebar{ display:none !important; flex:0 0 0 !important; height:0 !important; }
  body.fullscreen #canvas-wrap{ flex:1 1 100% !important; flex-basis:100% !important; height:var(--app-vh, var(--vvh, 100dvh)) !important; min-height:var(--app-vh, var(--vvh, 100dvh)) !important; }
}

/* Ensure initial icon is correct */


/* =========================
   UI tab (fullscreen toggle)
   ========================= */
#ui-tab{
  position: fixed;
  top: 50%;
  left: 420px;              /* dokładnie przy krawędzi panelu */
  transform: translate(0, -50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  z-index: 1500;
  cursor: pointer;
  transition: transform .2s ease, left .3s ease, top .3s ease, bottom .3s ease;
}
#ui-tab:hover{ transform: translate(0, -50%) scale(1.05); }
#ui-tab:active{ transform: translate(0, -50%) scale(.98); }
#ui-tab .ui-tab-icon{ display:flex; align-items:center; justify-content:center; }
#ui-tab svg{ display:block; }

body.fullscreen #ui-tab{
  left: 14px;               /* “kwadracik” zostaje przy krawędzi ekranu */
  transform: translate(0, -50%);
}
body.fullscreen #ui-tab svg{
  transform: rotate(180deg); /* chevron w prawo (otwórz panel) */
}

/* Desktop: sidebar off-canvas */
body.fullscreen #sidebar{ margin-left: -420px; }

/* Mobile behavior: hide panel down, tab at bottom-center */
@media (max-width: 900px){
  #ui-tab{
    left: 50%;
    /*
      Zawsze przy krawędzi UI (górna krawędź panelu #sidebar).
      Mobile ma dynamiczny viewport (Safari/Chrome), dlatego pozycja
      jest liczona w JS i zapisywana w zmiennej CSS: --sidebarTopPx.
    */
    top: calc(var(--sidebarTopPx, 45dvh) - 22px);
    bottom: auto;
    transform: translate(-50%, 0);
  }
  #ui-tab:hover{ transform: translate(-50%, 0) scale(1.05); }
  #ui-tab:active{ transform: translate(-50%, 0) scale(.98); }

  /* Chevron points down when panel is open */
  #ui-tab svg{ transform: rotate(-90deg); } /* left-chevron -> down */

  body.fullscreen #ui-tab{
    bottom: 14px;
    left: 50%;
    transform: translate(-50%, 0);
  }
  body.fullscreen #ui-tab svg{
    transform: rotate(90deg); /* up */
  }

  /* Zamiast margin-left w mobile chowamy panel w dół */
  #sidebar{ transition: transform .3s ease; }
  body.fullscreen #sidebar{ display:none !important; transform: translateY(100%); margin-left: 0; flex:0 0 0 !important; height:0 !important; }
  body.fullscreen #canvas-wrap{ flex:1 1 100% !important; flex-basis:100% !important; height:var(--app-vh, var(--vvh, 100dvh)) !important; min-height:var(--app-vh, var(--vvh, 100dvh)) !important; }

  /* Dodatkowy zapas na dół (pasek przeglądarki) */
  #sidebar{ padding-bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 10px)) !important; }
  .footer{ padding-bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 14px)) !important; }
}

/* Scrollbar (WebKit) – czerwony uchwyt */
#sidebar::-webkit-scrollbar,
.content::-webkit-scrollbar{ width: 10px; }
#sidebar::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb{
  background: var(--accent);
  border-radius: 10px;
  border: 3px solid rgba(255,255,255,.65);
}
#sidebar::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track{
  background: rgba(0,0,0,.06);
  border-radius: 10px;
}

/* =========================
   Desktop fullscreen sequencing (canvas behind UI)
   ========================= */
@media (min-width: 901px){
  body{ position: relative; }
  /* When overlay mode is active, sidebar is removed from flex flow and overlays canvas */
  body.ui-overlay #sidebar{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin-left: 0 !important;
    transform: translateX(0);
    z-index: 60;
    box-shadow: 6px 0 18px rgba(0,0,0,0.25);
  }
  /* Fullscreen: sidebar slides off-canvas but stays out of layout, canvas spans full width */
  body.fullscreen #sidebar{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin-left: 0 !important;
    transform: translateX(-100%);
    z-index: 60;
    box-shadow: none;
  }
  /* While returning from fullscreen, we temporarily show sidebar as overlay before shrinking canvas */
  body.fullscreen.ui-overlay #sidebar{
    transform: translateX(0);
    box-shadow: 6px 0 18px rgba(0,0,0,0.25);
  }

  /* Ensure canvas can use full viewport width when sidebar is not in flow */
  body.fullscreen #canvas-wrap,
  body.ui-overlay #canvas-wrap{
    width: 100vw;
  }
}


/* Hide UI toggle tab when modal is open */
body.modal-open #ui-tab{opacity:0 !important; pointer-events:none !important;}

/* ==========================
   Form validation
   ========================= */
input.is-invalid, textarea.is-invalid{
  border-color:#c62828 !important;
  box-shadow:0 0 0 3px rgba(198,40,40,.18) !important;
}


    .btn-big{
      width:100%;
      padding:12px 14px;
      border-radius:10px;
      border:2px solid #c62828;
      background:#fff;
      color:#111;
      font-weight:800;
      letter-spacing:0.2px;
      text-transform:uppercase;
      cursor:pointer;
      transition:0.2s;
    }
    .btn-big:hover{ background:#c62828; color:#fff; }
    

/* --- Day/Night button polish --- */
.btn-icon{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  font-weight:900;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.6px;
  cursor:pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.btn-icon:hover{ background:#f7f7f9; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.14); }
.btn-icon:active{ transform: translateY(0px); box-shadow: 0 6px 16px rgba(0,0,0,.10); }

body.nightmode .btn-icon{
  background:#111318;
  color:#fff;
  border-color: rgba(255,255,255,.16);
}

/* ===== Tymczasowy panel sterowania terenem (prawy górny róg) ===== */
.temp-terrain-panel{
  position: fixed;
  right: 14px;
  top: 14px;
  z-index: 9999;
  width: 260px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  backdrop-filter: blur(8px);
  font-family: inherit;
  user-select: none;
}
.temp-terrain-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 10px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.4px;
}
.temp-terrain-btn{
  border: none;
  background: #eaeaea;
  width: 28px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
}
.temp-terrain-body{
  padding: 0 10px 10px 10px;
}
.temp-terrain-panel.collapsed .temp-terrain-body{ display:none; }
.temp-terrain-body label{
  display:block;
  font-size: 12px;
  margin: 8px 0 6px 0;
}
.temp-terrain-body label .val{
  float:right;
  font-weight: 700;
}
.temp-terrain-body input[type="range"]{
  width: 100%;
}


/* Hard-disable temp terrain debug UI */
.temp-terrain-body, #temp-terrain-panel, .temp-terrain-panel { display:none !important; }


/* UI spacing fixes */
#gridFabric{ margin-bottom: 6px !important; }
#btnNight{ margin-bottom: 12px !important; }
.btn-chip{ margin-top: 0px !important; }

/* TEMP LOGO PANEL */
.temp-logo-panel{
  position: fixed;
  right: 16px;
  top: 92px;
  width: 300px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  padding: 10px 10px 8px 10px;
  z-index: 9999;
  backdrop-filter: blur(6px);
}
.temp-logo-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
}
.temp-logo-title{
  font-weight:800;
  letter-spacing:0.03em;
  font-size:12px;
}
.temp-logo-toggle{
  width:28px;height:28px;border-radius:10px;
  border:1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.04);
  cursor:pointer;
}
.temp-logo-body label{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  margin: 8px 0 4px 0;
}
.temp-logo-body .val{ font-weight:700; opacity:0.7; }
.temp-logo-body input[type="range"]{ width:100%; }
.temp-logo-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}
.temp-logo-check{ font-size:12px; display:flex; align-items:center; gap:8px; }
.temp-logo-reset{
  border:none;
  background:#111;
  color:#fff;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
}

/* --- Mobile gestures: allow OrbitControls pinch-zoom, prevent page scroll/zoom on canvas --- */
#canvas-wrap, #canvas-wrap canvas {
  touch-action: none;
  -ms-touch-action: none;
  overscroll-behavior: none;
}
#canvas-wrap canvas{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:100%;
}

@media (max-width: 900px){
  html, body{
    width:100%;
    height:var(--app-vh, var(--vvh, 100dvh));
    max-height:var(--app-vh, var(--vvh, 100dvh));
    max-width:100vw;
    overflow:hidden !important;
    overscroll-behavior:none;
  }
  body{
    position:fixed;
    inset:0;
    min-width:0;
    min-height:var(--app-vh, var(--vvh, 100dvh));
    touch-action:pan-y;
  }
  #boot-overlay,
  #canvas-wrap,
  #canvas-wrap canvas,
  #sidebar,
  #mobile-ar-bar,
  .modal-overlay{
    max-width:100vw !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }
  #canvas-wrap,
  #canvas-wrap canvas,
  #sidebar{
    width:100% !important;
  }
  #sidebar,
  #sidebar .content,
  #sidebar .footer,
  #sidebar details,
  #sidebar summary,
  #sidebar .row-complex,
  #sidebar .row-head,
  #sidebar .row-lbl,
  #sidebar label{
    max-width:100%;
    min-width:0;
    overflow-x:hidden;
  }
  #sidebar{
    left:0;
    right:0;
    min-height:0;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .btn-main,
  .btn-icon,
  .ar-action-btn,
  input,
  textarea,
  select{
    max-width:100%;
    min-width:0;
  }
  #ui-tab{
    max-width:calc(100vw - 24px);
  }
  #price-display{
    max-width:calc(100vw - 20px) !important;
    right:max(10px, env(safe-area-inset-right, 0px)) !important;
  }
  body.fullscreen #canvas-wrap,
  body.ui-overlay #canvas-wrap{
    width:100% !important;
    max-width:100vw !important;
  }
  body.fullscreen #canvas-wrap{
    flex:1 1 100% !important;
    flex-basis:100% !important;
    height:var(--app-vh, var(--vvh, 100dvh)) !important;
    min-height:var(--app-vh, var(--vvh, 100dvh)) !important;
  }
  body.fullscreen #sidebar{
    display:none !important;
    flex:0 0 0 !important;
    height:0 !important;
  }
}


/* AR exit button (Android WebXR) */
.ar-exit{
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 99999;
  border: none;
  border-radius: 16px;
  padding: 10px 14px;
  font-weight: 700;
  background: rgba(0,0,0,0.75);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.ar-exit:active{ transform: scale(0.98); }



/* --- AR modal fixes --- */
body.ar-open #ui-tab{
  display:none !important;
}

/* Android button green */
#btnArAndroid{
  background:#2ecc71 !important;
  border-color:#2ecc71 !important;
  color:#fff !important;
}


/* Locked AR button (wrong platform) */
#btnArIOS.ar-locked,
#btnArAndroid.ar-locked{
  background:#e0e0e0 !important;
  border-color:#c9c9c9 !important;
  color:#777 !important;
  cursor:not-allowed !important;
  opacity:1 !important;
  position:relative;
  padding-left:44px !important;
}

#btnArIOS.ar-locked::before,
#btnArAndroid.ar-locked::before{
  content:"AR";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px; font-weight:800; letter-spacing:.08em;
  line-height:1;
}



/* AR single button (blue) */
.btn-blue{
  background:#1e88e5 !important;
  border-color:#1e88e5 !important;
  color:#fff !important;
}
.btn-blue:hover{
  filter:brightness(0.95);
}



/* AR controls overlay (Android WebXR) */
.ar-controls{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: max(12px, env(safe-area-inset-bottom, 0px) + 6px);
  z-index: 10029;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
.ar-controls-group{
  pointer-events: auto;
  background: rgba(0,0,0,0.52);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 18px;
  padding: 12px;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
}
.ar-controls-title{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.86);
  margin-bottom: 8px;
  text-align: center;
}
.ar-dpad{
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(3, 56px);
  gap: 8px;
  align-items: center;
  justify-items: center;
}
.ar-dpad-center{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
  font-weight: 900;
  letter-spacing: .08em;
  user-select: none;
}
.ar-rotate-group{ min-width: 140px; }
.ar-rotate-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ar-ctrl-btn{
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 16px;
  background: rgba(255,255,255,0.96);
  color: #111;
  font-size: 28px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.24);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.ar-ctrl-btn:active, .ar-ctrl-btn.is-holding{
  transform: scale(0.97);
  background: #c62828;
  color: #fff;
}
.ar-rot-btn{ width: 100%; font-size: 30px; }

.ar-controls-subtitle{ margin-top: 12px; }
.ar-height-row{ margin-bottom: 2px; }
@media (max-width: 700px){
  .ar-controls{ bottom: 10px; gap: 10px; }
  .ar-controls-group{ padding: 10px; border-radius: 16px; }
  .ar-dpad{ grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); gap: 6px; }
  .ar-dpad-center, .ar-ctrl-btn{ width: 50px; height: 50px; border-radius: 14px; }
  .ar-ctrl-btn{ font-size: 24px; }
  .ar-rot-btn{ font-size: 28px; }
  .ar-rotate-group{ min-width: 128px; }
}

/* --- AR HUD panel (Android WebXR) --- */
.ar-hud-logo{
  position:fixed;
  top:max(16px, env(safe-area-inset-top, 0px) + 10px);
  left:max(16px, env(safe-area-inset-left, 0px) + 10px);
  z-index:10030;
  width:56px;
  height:56px;
  border:none;
  border-radius:16px;
  background:rgba(255,255,255,0.92);
  box-shadow:0 8px 24px rgba(0,0,0,0.22);
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color: transparent;
}
.ar-hud-logo img{ max-width:100%; max-height:100%; display:block; }
.ar-hud-logo{
  background:rgba(17,19,24,0.72);
  color:#fff;
  padding:0;
}
.ar-hud-logo .ar-settings-icon{
  font-size:24px;
  line-height:1;
  display:block;
  font-weight:400;
  letter-spacing:0;
  transform:translateY(-1px);
}
#iconSunMoon{
  min-width:48px;
  display:inline-block;
  text-align:center;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.ar-hud-logo.is-active{
  background:rgba(198,40,40,0.92);
}
.ar-dpad-center{
  background:rgba(255,255,255,0.18);
  padding:4px;
}
.ar-dpad-center img{
  width:42px;
  max-width:84%;
  height:auto;
  display:block;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,0.22));
}

.ar-hud-panel{
  position:fixed;
  top:max(82px, env(safe-area-inset-top, 0px) + 76px);
  left:max(16px, env(safe-area-inset-left, 0px) + 10px);
  width:min(360px, calc(100vw - 20px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));
  max-height:min(72vh, calc(100vh - 120px));
  overflow:auto;
  z-index:10031;
  background:rgba(255,255,255,0.42);
  color:#111;
  border-radius:18px;
  box-shadow:0 12px 32px rgba(0,0,0,0.26);
  padding:14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(14px);
}
.ar-hud-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.ar-hud-title{ font-size:15px; font-weight:900; text-transform:uppercase; letter-spacing:.4px; }
.ar-hud-close{
  width:34px; height:34px; border:none; border-radius:10px; font-size:24px; line-height:1;
  background:#111; color:#fff; display:flex; align-items:center; justify-content:center;
}
.ar-hud-section{ border-top:1px solid rgba(0,0,0,0.08); padding-top:12px; margin-top:12px; }
.ar-hud-section:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.ar-hud-section-title{ font-size:12px; font-weight:900; text-transform:uppercase; color:#555; margin-bottom:10px; }
.ar-hud-range-label{ display:flex; justify-content:space-between; gap:12px; font-size:13px; font-weight:700; margin-bottom:8px; }
.ar-hud-range{ width:100%; }
.ar-hud-rows{ display:flex; flex-direction:column; gap:10px; }
.ar-hud-row{
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:14px;
  padding:10px;
}
.ar-hud-row-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ar-hud-row-title{ font-size:13px; font-weight:800; color:#222; }
.ar-hud-switch{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:#444; }
.ar-hud-switch input{ width:18px; height:18px; }
.ar-hud-actions{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.ar-hud-btn{
  border:none; border-radius:10px; padding:9px 10px; font-size:12px; font-weight:800;
  background:rgba(255,255,255,0.46); color:#1d2430; min-width:0;
}
.ar-hud-btn.is-active{ background:#111; color:#fff; }
.ar-hud-slider-wrap{ margin-top:8px; display:none; }
.ar-hud-slider-wrap.is-visible{ display:block; }
.ar-hud-slider-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; font-weight:700; color:#444; margin-bottom:6px; }

body.in-ar .ar-hud-logo, body.in-ar .ar-hud-panel, body.in-ar .ar-exit{
  pointer-events:auto;
}
body.in-ar #brand-bar{
  display:none !important;
}


@media (max-width: 700px){
  .ar-hud-logo{
    top:max(10px, env(safe-area-inset-top, 0px) + 6px);
    left:max(10px, env(safe-area-inset-left, 0px) + 6px);
    width:50px;
    height:50px;
    border-radius:14px;
    padding:7px;
  }
  .ar-hud-panel{
    top:max(68px, env(safe-area-inset-top, 0px) + 62px);
    left:max(10px, env(safe-area-inset-left, 0px) + 6px);
    right:max(10px, env(safe-area-inset-right, 0px) + 6px);
    width:auto;
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 150px);
    border-radius:16px;
    padding:12px;
  }
  .ar-hud-header{
    gap:10px;
    margin-bottom:8px;
  }
  .ar-hud-title{
    font-size:13px;
    letter-spacing:.25px;
  }
  .ar-hud-close{
    width:32px;
    height:32px;
    border-radius:9px;
    font-size:22px;
    flex:0 0 32px;
  }
  .ar-hud-section{
    padding-top:10px;
    margin-top:10px;
  }
  .ar-hud-section-title{
    font-size:11px;
    margin-bottom:8px;
  }
  .ar-hud-range-label{
    font-size:12px;
    gap:8px;
    flex-wrap:wrap;
  }
  .ar-hud-rows{
    gap:8px;
  }
  .ar-hud-row{
    border-radius:12px;
    padding:9px;
  }
  .ar-hud-row-top{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .ar-hud-row-title{
    font-size:12px;
  }
  .ar-hud-switch{
    width:100%;
    justify-content:space-between;
    gap:10px;
    font-size:11px;
  }
  .ar-hud-switch input{
    width:20px;
    height:20px;
    flex:0 0 20px;
  }
  .ar-hud-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px;
    margin-top:8px;
  }
  .ar-hud-btn{
    width:100%;
    min-height:38px;
    padding:10px 8px;
    border-radius:10px;
    font-size:11px;
    line-height:1.15;
  }
  .ar-hud-slider-meta{
    font-size:11px;
    margin-bottom:5px;
  }
  .ar-hud-range{
    width:100%;
    accent-color:#c62828;
  }
}

@media (max-width: 380px){
  .ar-hud-panel{
    top:max(64px, env(safe-area-inset-top, 0px) + 58px);
    padding:10px;
    border-radius:14px;
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 138px);
  }
  .ar-hud-title{
    font-size:12px;
  }
  .ar-hud-section-title,
  .ar-hud-switch,
  .ar-hud-slider-meta,
  .ar-hud-btn,
  .ar-hud-row-title,
  .ar-hud-range-label{
    font-size:10px;
  }
  .ar-hud-btn{
    min-height:36px;
    padding:9px 6px;
  }
}

body.in-ar .ar-controls{ pointer-events:none; }
body.in-ar .ar-controls .ar-controls-group{ pointer-events:auto; }

body.in-ar #sidebar{
  display:flex !important;
  position:fixed !important;
  top:max(72px, env(safe-area-inset-top, 0px) + 66px);
  left:max(10px, env(safe-area-inset-left, 0px) + 6px);
  right:max(10px, env(safe-area-inset-right, 0px) + 6px);
  width:auto !important;
  max-width:420px;
  height:auto !important;
  max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 150px);
  z-index:10031;
  border:1px solid rgba(255,255,255,0.20);
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,0.16) !important;
  box-shadow:0 18px 40px rgba(0,0,0,0.28);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
body.in-ar #sidebar.ar-settings-hidden{
  display:none !important;
}
body.in-ar #sidebar .header,
body.in-ar #sidebar .content,
body.in-ar #sidebar .footer{
  background:transparent !important;
}
body.in-ar #sidebar .header{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,0.16);
}
body.in-ar #sidebar .header .brand{
  grid-template-columns:1fr;
}
body.in-ar #sidebar .brand-logo-wrap{
  display:none;
}
body.in-ar #sidebar .content{
  padding:12px;
  overflow:auto;
}
body.in-ar #sidebar .footer{
  display:none !important;
}
body.in-ar #sidebar details{
  background:rgba(255,255,255,0.14) !important;
  border-color:rgba(255,255,255,0.20);
  box-shadow:none;
}
body.in-ar #sidebar summary{
  background:transparent !important;
}
body.in-ar #sidebar .brand-title,
body.in-ar #sidebar .brand-sub,
body.in-ar #sidebar summary,
body.in-ar #sidebar label,
body.in-ar #sidebar .row-lbl,
body.in-ar #sidebar .color-name,
body.in-ar #sidebar .btn-chip,
body.in-ar #sidebar .btn-main{
  color:#16202b;
}
body.in-ar #sidebar .btn-main{
  background:rgba(255,255,255,0.55);
  box-shadow:none;
}
body.in-ar #sidebar .btn-main.btn-ar{
  background:rgba(2,136,209,0.18);
  color:#0f4971;
}
body.in-ar #sidebar .btn-main.btn-dark{
  background:rgba(17,19,24,0.14);
  color:#111318;
}
body.in-ar #sidebar .btn-main.btn-share{
  background:rgba(31,111,58,0.18);
  color:#134723;
}
body.in-ar #sidebar .content::-webkit-scrollbar{ width:6px; }

@media (max-width: 700px){
  body.in-ar #sidebar{
    top:max(66px, env(safe-area-inset-top, 0px) + 60px);
    max-width:none;
    max-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 138px);
    border-radius:16px;
  }
  .ar-dpad-center img{
    width:38px;
  }
}


/* Mobile inquiry modal polish */
@media (max-width: 760px){
  #inquiry-modal{
    align-items: flex-start;
    padding: 10px;
    box-sizing: border-box;
  }
  #inquiry-modal .modal-content{
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 20px);
    margin: 0;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
  }
  #inquiry-modal .modal-header{
    padding: 14px 16px;
  }
  #inquiry-modal .modal-header h2{
    font-size: 16px;
    letter-spacing: .6px;
  }
  #inquiry-modal .inquiry-body{
    padding: 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
  }
  #inquiry-modal .inquiry-grid{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  #inquiry-modal .field{
    min-width: 0;
  }
  #inquiry-modal .field label{
    font-size: 11px;
    margin-bottom: 6px;
  }
  #inquiry-modal .field input,
  #inquiry-modal .field textarea,
  #inquiry-modal #inq_summary{
    font-size: 16px;
    padding: 12px 12px;
    border-radius: 10px;
  }
  #inquiry-modal .field textarea,
  #inquiry-modal #inq_summary{
    min-height: 112px;
  }
  #inquiry-modal .inquiry-summary{
    margin-top: 14px;
  }
  #inquiry-modal .inquiry-summary-title{
    margin-bottom: 8px;
  }
  #inquiry-modal .inquiry-summary-actions{
    justify-content: stretch;
  }
  #inquiry-modal .inquiry-summary-actions .btn-main{
    width: 100%;
  }
  #inquiry-modal #inq_consent_wrap{
    margin-top: 12px !important;
  }
  #inquiry-modal #inq_consent_wrap label{
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  #inquiry-modal #inq_consent_wrap input{
    width: 20px !important;
    height: 20px !important;
    margin-top: 1px !important;
  }
  #inquiry-modal .inq-status{
    margin-top: 12px;
    font-size: 13px;
  }
  #inquiry-modal .modal-footer{
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }
  #inquiry-modal .modal-footer .btn-main{
    width: 100%;
    margin: 0;
  }
}

.font-picker-wrap{display:none!important;}