:root{
      --bg:#0f172a;
      --panel:#1e293b;
      --panel2:#334155;
      --stroke:#334155;
      --stroke2:#475569;
      --text:#e2e8f0;
      --text2:#cbd5e1;
      --muted:#94a3b8;
      --shadow: 0 20px 50px rgba(0,0,0,0.50);

      --violet:#6366f1;
      --violet2:#4f46e5;
      --violet3:#4338ca;

      --danger:#ef4444;
    }

    @font-face{
      font-family: "Tupo Vyaz";
      src: url("/assets/fonts/tupo-vyaz_regular.woff2") format("woff2"),
           url("/assets/fonts/tupo-vyaz_regular.woff") format("woff");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      background:var(--bg);
      color:var(--text);
      overflow:hidden;
      display:grid;
      grid-template-columns:1fr auto;
      grid-template-rows:1fr;
      height:100vh;
    }

    #map{width:100%;height:100%;grid-column:1;grid-row:1;}

    .panel{
      width: 580px;
      max-width: calc(100vw - 40px);
      overflow-y:visible;
      overflow-x:hidden;
      height:100vh;
      box-sizing:border-box;

      background: var(--panel);
      border: 1px solid var(--stroke);
      border-radius: 12px 0 0 12px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 16px 14px;
      z-index: 50;
      grid-column:2;
      grid-row:1;
    }

    @media (max-width: 860px){
      body{
        grid-template-columns:1fr;
        grid-template-rows:1fr auto;
      }
       .panel{
        grid-column:1;
        grid-row:2;
        width: auto;
        max-height: calc(100vh - 20px);
        overflow:auto;
        border-radius:10px;
        margin:10px;
        padding:10px;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        position:relative;
      }
      .grid3{grid-template-columns:1fr 1fr}
    }
    @media (max-height: 860px) and (min-width: 861px){
      .panel{
        transform: scale(.95);
        transform-origin: top right;
      }
    }

    .box{background: transparent;border: 0;padding: 0;}

    .titleRow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
    .mini{font-size:10px;color:var(--muted);line-height:1.2}

    label{display:block;font-size:11px;color:var(--text2);opacity:.95;margin:6px 0 4px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
    input[type="text"],input[type="number"],select{
      width:100%;height:32px;padding:0 8px;border-radius:8px;border:1px solid var(--stroke2);
      background: var(--panel2);
      color:var(--text2);
      outline:none;
      font-size:12px;
    }
    input:focus,select:focus{
      border-color: var(--violet);
      box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
    }
    input::placeholder{color: rgba(148,163,184,.65)}
    .colorCtrl{
      width:100%;
      height:32px;
      border-radius:8px;
      border:1px solid var(--stroke2);
      background: var(--panel2);
      padding:3px;
      cursor:pointer;
    }
    .colorCtrl::-webkit-color-swatch-wrapper{padding:0}
    .colorCtrl::-webkit-color-swatch{
      border:none;
      border-radius:6px;
    }

    .row{display:flex;gap:6px;align-items:center}
    .btn{
      height:32px;border-radius:8px;border:1px solid var(--stroke2);
      background: rgba(255,255,255,.06);
      color:var(--text2);
      font-weight:850;
      cursor:pointer;
      padding:0 8px;
      white-space:nowrap;
      transition: transform .08s ease, background .15s ease, border-color .15s ease;
    }
    .btn:hover{background: rgba(255,255,255,.10); border-color: var(--violet)}
    .btn:active{transform: translateY(1px)}

    .btnV{
      height:44px;
      width:100%;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.10);
      background: var(--violet);
      color: #fff;
      font-size: 16px;
      font-weight: 950;
      cursor:pointer;
      letter-spacing:.2px;
      transition: transform .08s ease, background .15s ease;
    }
    .btnV:hover{background: var(--violet2)}
    .btnV:active{background: var(--violet3); transform: translateY(1px)}

    .grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
    .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
    .divider{height:1px;background: rgba(255,255,255,.08);margin:8px 0}
    .hint{font-size:11px;color:var(--muted);margin-top:3px}

    .banner{
      margin-top:8px;padding:8px;border-radius:8px;
      border:1px solid rgba(239,68,68,.35);
      background: rgba(239,68,68,.10);
      display:none;font-size:12px;line-height:1.3
    }
    .banner strong{color:var(--danger)}

    .slist{
      position:absolute;
      left:0;
      right:0;
      top:42px;
      background: rgba(30,41,59,.98);
      border:1px solid var(--stroke);
      border-radius: 10px;
      overflow:hidden;
      box-shadow: 0 18px 60px rgba(0,0,0,.55);
      display:none;
      z-index: 9999;
      max-height: 280px;
      overflow:auto;
    }
    .sitem{
      padding:10px 10px;
      cursor:pointer;
      border-top:1px solid rgba(255,255,255,.06);
      font-size:13px;
      line-height:1.22;
      color: var(--text2);
    }
    .sitem:first-child{border-top:0}
    .sitem:hover{background: rgba(255,255,255,.06)}
    .sitem.active{background: rgba(99,102,241,.22)}
    .sitem .subt{display:block;color: rgba(203,213,225,.70);font-size:12px;margin-top:2px}
    .sitem mark{
      background: rgba(99,102,241,.25);
      color: #fff;
      padding: 0 2px;
      border-radius: 4px;
    }

    .cbBlock{
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      border-radius: 8px;
      padding: 6px 8px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px 6px;
    }
    .cb{
      display:flex;align-items:center;gap:6px;
      font-size:12px;color: rgba(226,232,240,.85);
      user-select:none;
      text-transform:none;
      font-weight:600;
      letter-spacing:0;
    }
    .cb input{transform: translateY(1px); accent-color: var(--violet)}
    .cb span{color: var(--muted); font-weight:700; letter-spacing:.2px}

    .previewWrap{
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
      border-radius:8px;
      overflow:hidden;
      height: 200px;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
    }
    iframe#preview{
      width:100%;
      height:100%;
      border:0;
      display:block;
      background: transparent;
    }

    /* Floating logo */
    .floating-logo{
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 150;
      display:flex;
      flex-direction:column;
      gap: 2px;
      pointer-events: none;
    }
    .floating-logo .logo-title{
      font-family: "Tupo Vyaz", sans-serif !important;
      font-size: 40px;
      color: #000;
      letter-spacing: 1px;
      line-height: 1.1;
      text-shadow: 1px 1px 2px rgba(255,255,255,0.30);
      width: fit-content;
    }
    .floating-logo .subtitle{
      font-family: "Tupo Vyaz", sans-serif !important;
      font-size: 22px;
      color: #ef4444;
      font-weight: 600;
      letter-spacing: 1px;
      text-shadow: 1px 1px 1px rgba(255,255,255,0.20);
      margin-top: -2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* About panel */
    .about-panel{
      margin-top: 12px;
      background: var(--panel);
      border: 1px solid var(--stroke);
      border-radius: 12px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 16px;
      text-align: center;
      font-size: 13px;
      line-height: 1.6;
    }
    .about-item{
      margin-bottom: 10px;
      font-size: 12px;
      display:flex;
      align-items:center;
      gap: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .about-item strong{
      color: var(--muted);
      font-weight: 700;
      opacity: .85;
      white-space: nowrap;
    }
    .about-item a{
      color: var(--violet);
      text-decoration:none;
      font-weight:700;
    }
    .about-item a:hover{
      color:#818cf8;
      text-decoration:underline;
    }

    .about-bottom{
      display:flex;
      justify-content: space-between;
      align-items:center;
      gap: 6px;
      margin-top: 2px;
    }

    .about-support-btn{
      width: 32px;
      height: 32px;
      border:none;
      background:transparent;
      cursor:pointer;
      padding:0;
      transition: transform .2s;
    }
    .about-support-btn:hover{ transform: scale(1.15); }
    .about-support-btn img{
      width: 32px;
      height: 32px;
      display:block;
      object-fit: contain;
      animation: heartbeat 1.2s cubic-bezier(0.36,0,0.66,-0.56) infinite;
    }
    @keyframes heartbeat{
      0%,100%{ transform: scale(1); opacity: 1; }
      14%{ transform: scale(1.10); }
      28%{ transform: scale(1.00); }
      42%{ transform: scale(1.15); }
      70%{ transform: scale(1.00); }
    }

    .about-theme-btn{
      width: 28px;
      height: 28px;
      border:none;
      border-radius:6px;
      background: rgba(255,255,255,0.20);
      color:#fff;
      cursor:pointer;
      font-size: 14px;
      font-weight: 900;
      line-height: 1;
    }
    .about-theme-btn:hover{ background: rgba(255,255,255,0.30); }

    .about-version{
      height: 28px;
      padding: 0 10px;
      border-radius: 6px;
      background: rgba(255,255,255,0.20);
      border: 1px solid rgba(255,255,255,0.30);
      color: var(--text);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .5px;
      cursor: not-allowed;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      white-space: nowrap;
      opacity: .9;
    }

    /* Simple modal */
    .modal-backdrop{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.60);
      display:none;
      align-items:center;
      justify-content:center;
      z-index: 1000;
      backdrop-filter: blur(3px);
    }
    .modal-card{
      width: min(520px, calc(100vw - 32px));
      background: var(--panel);
      border: 1px solid var(--stroke);
      border-radius: 12px;
      box-shadow: var(--shadow);
      padding: 16px;
    }
    .modal-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      font-weight: 900;
    }
    .modal-close{
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 8px;
      background: rgba(255,255,255,0.20);
      color: #fff;
      cursor:pointer;
      font-size: 20px;
      line-height: 1;
    }
    .modal-close:hover{ background: rgba(255,255,255,0.30); }
    .modal-card ol{ margin:0; padding-left: 20px; }
    .modal-card li{ margin: 8px 0; font-size: 12px; line-height: 1.4; color: var(--text2); }
    .modal-text{ font-size: 12px; line-height: 1.5; color: var(--text2); }
    .modal-text a{ color: var(--violet); font-weight: 800; text-decoration:none; }
    .modal-text a:hover{ text-decoration:underline; }