:root{
      --bg:#ffffff;
      --card:#ffffff;
      --ink:#111827;
      --muted:#6b7280;
      --accent:#4aa3ff;
      --danger:#ff5a6a;
      --ok:#22c55e;
      --border:rgba(0,0,0,.12);
      --blue:#2563eb;
    }

    *{box-sizing:border-box}

    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background:#ffffff;
      color:var(--ink);
    }

    header{
      padding:0;
      position:sticky;
      top:0;
      backdrop-filter:blur(10px);
      background:rgba(255,255,255,.94);
      border-bottom:1px solid var(--border);
      z-index:10;
    }

    #mainHeader{
      height:78px;
      transition:height .25s ease, box-shadow .25s ease, background .25s ease;
      overflow:hidden;
    }

    .headerInner{
      height:100%;
      display:flex;
      align-items:center;
      gap:12px;
      padding:10px 12px;
      transition:padding .25s ease, gap .25s ease, justify-content .25s ease;
    }

    .headerLogo{
      width:66px;
      height:auto;
      object-fit:contain;
      flex:0 0 auto;
      display:block;
      transition:width .25s ease, transform .25s ease;
    }

    .headerText{
      min-width:0;
      overflow:hidden;
      transition:opacity .2s ease, transform .2s ease, max-width .2s ease;
      max-width:560px;
    }

    header h1{
      margin:0;
      font-size:13px;
      font-weight:800;
    }

    header p{
      margin:6px 0 0;
      color:var(--muted);
      font-size:11px;
      line-height:1.28;
    }

    #mainHeader.is-compact{
      height:54px;
      box-shadow:0 6px 16px rgba(0,0,0,.08);
    }

    #mainHeader.is-compact .headerInner{
      justify-content:center;
      gap:0;
      padding:6px 12px;
    }

    #mainHeader.is-compact .headerLogo{
      width:46px;
    }

    #mainHeader.is-compact .headerText{
      opacity:0;
      transform:translateY(-8px);
      max-width:0;
      pointer-events:none;
    }

    @media (min-width: 761px){
      #mainHeader{
        height:auto;
        overflow:visible;
      }

      #mainHeader.is-compact{
        height:auto;
        box-shadow:none;
      }

      .headerInner{
        padding:14px 14px 10px;
      }

      .headerLogo{
        width:84px;
      }

      header h1{
        font-size:16px;
      }

      header p{
        font-size:12px;
        line-height:1.35;
      }
    }

    .wrap{
      padding:12px 12px 20px;
      display:grid;
      gap:12px;
    }

    .card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:16px;
      overflow:visible;
      box-shadow:0 8px 22px rgba(0,0,0,.08);
    }

    .canvasTopRow{
      display:flex;
      gap:10px;
      align-items:flex-start;
      justify-content:space-between;
      padding:10px 10px 0;
      flex-wrap:wrap;
      overflow:visible;
    }

    .gridStickyHeader{
      width:100%;
      display:grid;
      gap:8px;
      padding:10px 10px 0;
      margin:0;
      background:transparent;
      border-bottom:none;
      box-shadow:none;
    }

    .canvasWrap{
      position:relative;
      overflow:visible;
      padding-bottom:84px;
    }

    .gridStickyHeader.is-compact{
      padding:10px 10px 0;
      box-shadow:none;
    }

    .bottomActionBar{
      position:absolute;
      left:50%;
      bottom:12px;
      transform:translateX(-50%);
      z-index:40;
      width:min(calc(100% - 24px), 980px);
      padding:8px;
      background:rgba(255,255,255,.96);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      border:1px solid rgba(0,0,0,.08);
      border-radius:16px;
      box-shadow:0 10px 24px rgba(0,0,0,.12);
    }

    .bottomActionBar .unifiedToolbar{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      flex-wrap:wrap;
    }

    .bottomActionBar .toolbarTitle{
      display:none;
    }

    .bottomActionBar button{
      height:40px;
      padding:0 12px;
      font-size:12px;
      border-radius:10px;
      white-space:nowrap;
    }

    .hiddenActionDepot{
      display:none !important;
    }

    .gridStickyTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }

    .badge{
      font-size:12px;
      color:var(--muted);
      display:inline-flex;
      gap:8px;
      align-items:center;
      flex:0 0 auto;
    }

    .dot{
      width:8px;
      height:8px;
      border-radius:999px;
      background:var(--ok);
      display:inline-block;
    }

    .dot.bad{background:var(--danger)}

    button{
      border:1px solid var(--border);
      background:#f8fafc;
      color:var(--ink);
      border-radius:12px;
      padding:10px 12px;
      font-weight:900;
      font-size:13px;
      cursor:pointer;
      touch-action:manipulation;
      white-space:nowrap;
    }

    button.primary{border-color:rgba(74,163,255,.35);background:rgba(74,163,255,.12)}
    button.danger{border-color:rgba(255,90,106,.35);background:rgba(255,90,106,.10)}
    button.big{padding:12px 14px;font-size:13px;border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.10)}
    button.apply{padding:12px 14px;font-size:13px;border-color:rgba(74,163,255,.25);background:rgba(74,163,255,.14)}
    button.center{padding:12px 14px;font-size:13px;border-color:rgba(0,0,0,.10);background:rgba(0,0,0,.04)}
    button.cart{padding:12px 14px;font-size:13px;border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.12)}
    button.secondary{padding:12px 14px;font-size:13px;border-color:rgba(0,0,0,.12);background:#f8fafc}
    button.sendOrderBtn{padding:13px 14px;font-size:13px;border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.14)}

    button:active{transform:translateY(1px)}

    .canvasWrap{
      padding:10px;
      width:100%;
      display:block;
      flex:0 0 100%;
    }

    .svgBox{
      display:block;
      width:100%;
      height:auto;
      min-height:625px;
      aspect-ratio:16/10;
      border-radius:14px;
      border:1px solid var(--border);
      margin-top:10px;
      background:#ffffff;
      touch-action:none;
      user-select:none;
    }

    .canvasWatermark{
      position:absolute;
      inset:10px 6px 84px;
      display:flex;
      align-items:center;
      justify-content:center;
      pointer-events:none;
      z-index:12;
      overflow:hidden;
      border-radius:14px;
    }

    .canvasWatermarkText{
      width:100%;
      min-height:100%;
      display:grid;
      grid-template-columns:repeat(12, minmax(0, 1fr));
      gap:24px 12px;
      align-content:space-evenly;
      align-items:center;
      justify-items:center;
      transform:none;
      font-size:18px;
      font-weight:900;
      line-height:1;
      letter-spacing:.03em;
      color:rgba(15,23,42,.10);
      text-shadow:0 1px 0 rgba(255,255,255,.10);
      user-select:none;
    }

    .canvasWatermarkText span{
      white-space:nowrap;
      opacity:.72;
      transform:rotate(45deg);
      transform-origin:center;
      display:inline-block;
    }

    @media (max-width: 900px){
      .canvasWatermark{
        inset:18px 6px 102px;
        clip-path:inset(0 round 14px);
      }
      .canvasWatermarkText{
        width:100%;
        min-height:100%;
        padding:14px 0;
        box-sizing:border-box;
        grid-template-columns:repeat(8, minmax(0, 1fr));
        gap:18px 10px;
        align-content:center;
        font-size:15px;
      }
    }

    .hintBar{
      padding:10px 12px 0;
      color:var(--muted);
      font-size:12px;
      line-height:1.35;
      width:100%;
      flex:0 0 100%;
    }

    .footerCard{
      padding:12px;
      display:grid;
      gap:12px;
    }

    textarea, input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="datetime-local"], select{
      width:100%;
      padding:10px 10px;
      border-radius:12px;
      border:1px solid var(--border);
      background:#ffffff;
      color:var(--ink);
      font-size:13px;
      outline:none;
    }

    textarea{
      min-height:70px;
      resize:vertical;
    }

    textarea:focus,
    input[type="text"]:focus,
    input[type="number"]:focus,
    input[type="email"]:focus,
    input[type="tel"]:focus,
    input[type="datetime-local"]:focus,
    select:focus{
      border-color:rgba(74,163,255,.6);
    }

    .small{
      font-size:12px;
      color:var(--muted);
      line-height:1.35;
    }

    .toast{
      position:fixed;
      left:50%;
      bottom:14px;
      transform:translateX(-50%);
      background:rgba(17,24,39,.92);
      border:1px solid rgba(255,255,255,.12);
      padding:10px 12px;
      border-radius:12px;
      color:#fff;
      font-size:13px;
      display:none;
      z-index:100;
    }

    #endSheet,
    #orderSheet{
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:9999;
      background:rgba(255,255,255,.98);
      border-top:1px solid rgba(0,0,0,.12);
      border-top-left-radius:18px;
      border-top-right-radius:18px;
      box-shadow:0 -18px 40px rgba(0,0,0,.18);
      transform:translateY(110%);
      transition:transform .18s ease;
      padding:14px 14px 18px;
      max-height:88vh;
      overflow:auto;
    }

    #endBackdrop,
    #orderBackdrop{
      position:fixed;
      inset:0;
      z-index:9998;
      background:rgba(0,0,0,.45);
      display:none;
    }

    .hemGrid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin-top:12px;
    }

    .hemBtn{
      padding:12px 14px;
      border-radius:14px;
      font-weight:900;
      border:1px solid rgba(0,0,0,.12);
      background:#f8fafc;
      color:var(--ink);
      display:flex;
      align-items:center;
      gap:10px;
      text-align:left;
      min-height:74px;
    }

    .hemBtnIcon{
      width:34px;
      height:34px;
      object-fit:contain;
      flex:0 0 34px;
      border-radius:8px;
      background:#fff;
      padding:2px;
      border:1px solid rgba(0,0,0,.08);
    }

    .hemBtnText{
      min-width:0;
      display:block;
      line-height:1.1;
    }

    .hemBtnTextLabel{
      display:block;
    }

    .hemBtn small{
      display:block;
      font-weight:700;
      font-size:12px;
      opacity:.75;
      margin-top:4px;
    }

    .endHeaderMain{
      display:flex;
      align-items:flex-start;
      gap:10px;
      flex-wrap:wrap;
    }

    .endTitleBlock{
      display:flex;
      align-items:flex-start;
      gap:10px;
      flex-wrap:wrap;
    }

    .hemSideWrap{
      display:flex;
      align-items:center;
      margin-top:0;
    }

    .hemSideToggle{
      width:54px;
      height:54px;
      min-height:54px;
      padding:6px;
      border-radius:12px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:2px;
      text-align:center;
      line-height:1;
    }

    .hemSideToggle .sideArrow{
      font-size:16px;
      line-height:1;
    }

    .hemSideToggle .sideLabel{
      font-size:10px;
      font-weight:900;
      line-height:1.05;
    }

    .hemSideToggle small{
      display:none;
    }

    .orderRow{
      display:grid;
      gap:12px;
    }

    .metaGrid{
      display:grid;
      grid-template-columns:1.4fr .8fr 1fr 1fr;
      gap:10px;
    }

    .fieldTitle{
      font-weight:900;
      margin-bottom:6px;
    }

    .cartHeader{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom:4px;
    }

    .cartCount{
      font-size:12px;
      color:var(--muted);
      font-weight:700;
    }

    .cartList{
      display:grid;
      gap:10px;
    }

    .cartItem{
      border:1px solid var(--border);
      border-radius:14px;
      padding:10px;
      display:grid;
      gap:10px;
      background:#fff;
    }

    .cartItemRow{
      display:grid;
      grid-template-columns:120px 1fr;
      gap:10px;
      align-items:start;
    }

    .cartThumb{
      width:120px;
      aspect-ratio:16/10;
      border:1px solid var(--border);
      border-radius:12px;
      overflow:hidden;
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .cartThumb svg{
      width:100%;
      height:100%;
      display:block;
      background:#fff;
    }

    .cartItemTitle{
      font-weight:900;
      font-size:13px;
      margin-bottom:4px;
    }

    .cartItemMeta{
      font-size:12px;
      color:var(--muted);
      line-height:1.45;
      display:grid;
      gap:2px;
    }

    .cartItemBtns{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }

    .emptyCart{
      border:1px dashed var(--border);
      border-radius:14px;
      padding:14px;
      color:var(--muted);
      font-size:13px;
      text-align:center;
      background:#fcfcfd;
    }

    .miniNote{
      font-size:12px;
      color:var(--muted);
    }

    .editingBadge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      font-size:12px;
      color:#1d4ed8;
      font-weight:800;
      margin-top:4px;
    }

    .orderCustomerGrid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin-top:12px;
    }

    .orderSummaryBox{
      margin-top:14px;
      border:1px solid var(--border);
      border-radius:14px;
      padding:12px;
      background:#fcfcfd;
    }

    .orderSummaryTitle{
      font-weight:900;
      margin-bottom:8px;
    }

    .orderSummaryText{
      white-space:pre-wrap;
      font-size:12px;
      line-height:1.45;
      color:var(--ink);
      max-height:260px;
      overflow:auto;
    }

    .sheetButtons{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:14px;
    }

    .extraContactRow{
      display:grid;
      grid-template-columns:1fr 1fr auto;
      gap:10px;
      align-items:end;
      margin-top:10px;
    }

    .extraContactRow button{
      height:42px;
    }

    .colorSelectorBox{
      border:1px solid var(--border);
      border-radius:14px;
      padding:10px;
      background:#fcfcfd;
    }

    .colorSelectorTop{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }

    .selectedColorPill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      background:#fff;
      font-size:12px;
      font-weight:800;
      color:var(--ink);
      min-height:38px;
    }

    .selectedColorDot{
      width:14px;
      height:14px;
      border-radius:999px;
      border:1px solid rgba(0,0,0,.15);
      background:#e5e7eb;
      flex:0 0 auto;
    }

    .colorCatalogWrap{
      overflow:hidden;
      max-height:0;
      opacity:0;
      transition:max-height .25s ease, opacity .2s ease, margin-top .2s ease;
      margin-top:0;
      pointer-events:none;
      width:100%;
      min-width:0;
    }

    .colorCatalogWrap.open{
      max-height:min(62vh, 520px);
      opacity:1;
      margin-top:10px;
      pointer-events:auto;
      overflow:auto;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
      padding-right:2px;
    }

    .colorCatalog{
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:10px;
      width:100%;
      min-width:0;
    }

    .colorSwatch{
      border:1px solid var(--border);
      border-radius:12px;
      overflow:hidden;
      background:#fff;
      cursor:pointer;
      transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
      padding:0;
      text-align:left;
    }

    .colorSwatch:hover{
      transform:translateY(-1px);
      box-shadow:0 6px 14px rgba(0,0,0,.08);
    }

    .colorSwatch.selected{
      border-color:rgba(37,99,235,.75);
      box-shadow:0 0 0 3px rgba(37,99,235,.12);
    }

    .colorSwatchTop{
      height:52px;
      width:100%;
      border-bottom:1px solid rgba(0,0,0,.08);
    }

    .colorSwatchInfo{
      padding:8px;
      display:grid;
      gap:2px;
    }

    .colorSwatchName{
      font-size:12px;
      font-weight:900;
      line-height:1.2;
      white-space:normal;
    }

    .colorSwatchCode{
      font-size:11px;
      color:var(--muted);
      font-weight:700;
    }

    .toolbar{
      width:100%;
      min-width:0;
    }

    .toolbarTitle{
      font-size:11px;
      font-weight:900;
      color:var(--muted);
      padding-left:4px;
      text-transform:uppercase;
      letter-spacing:.4px;
      min-height:14px;
      display:flex;
      align-items:center;
    }

    .unifiedToolbar{
      display:flex;
      align-items:center;
      gap:8px;
      width:100%;
      min-width:0;
      overflow-x:auto;
      overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      padding:10px;
      border-radius:16px;
      border:1px solid var(--border);
      background:#ffffff;
      box-shadow:0 4px 12px rgba(0,0,0,.04);
    }

    .unifiedToolbar::-webkit-scrollbar{
      display:none;
    }

    .unifiedToolbar button{
      flex:0 0 auto;
      min-width:auto;
      height:42px;
      padding:0 12px;
      border-radius:12px;
      font-size:13px;
      font-weight:800;
      white-space:nowrap;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .unifiedToolbar .mainAction{
      min-width:170px;
      font-size:13px;
      font-weight:900;
      padding:0 16px;
    }

    .mobileGhostButton{
      display:none !important;
    }

    @media (max-width: 980px){
      .gridStickyHeader{
        top:0;
        padding:8px 8px 10px;
        gap:8px;
      }

      .unifiedToolbar{
        padding:8px;
      }
    }

    @media (max-width: 760px) and (orientation:portrait){
      .canvasTopRow{
        padding:8px 8px 0;
        gap:8px;
      }

      .gridStickyHeader{
        top:0;
        padding:6px 6px 8px;
        gap:6px;
      }

      .gridStickyTop{
        gap:6px;
      }

      .badge{
        font-size:11px;
      }

      .toolbarTitle{
        font-size:10px;
        min-height:auto;
      }

      .unifiedToolbar{
        gap:6px;
        padding:6px;
      }

      .unifiedToolbar button{
        height:34px;
        padding:0 10px;
        font-size:11px;
        border-radius:10px;
      }

      .unifiedToolbar .mainAction{
        min-width:132px;
        font-size:11px;
        padding:0 12px;
      }

      .hintBar{
        padding:6px 8px 0;
        font-size:10px;
        line-height:1.2;
      }

      .svgBox{
        min-height:420px;
      }

      .metaGrid{
        grid-template-columns:1fr 1fr;
      }
      .cartItemRow{
        grid-template-columns:1fr;
      }
      .cartThumb{
        width:100%;
      }
      .orderCustomerGrid{
        grid-template-columns:1fr;
      }
      .extraContactRow{
        grid-template-columns:1fr;
      }
      .colorCatalog{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 950px) and (orientation:landscape){
      .canvasTopRow{
        padding:4px 6px 0;
        gap:4px;
      }

      .gridStickyHeader{
        top:0;
        padding:4px 6px 6px;
        gap:4px;
      }

      .gridStickyTop{
        display:none;
      }

      .toolbarTitle{
        font-size:9px;
        min-height:auto;
        padding-left:2px;
      }

      .unifiedToolbar{
        gap:4px;
        padding:4px;
      }

      .unifiedToolbar button{
        height:28px;
        padding:0 8px;
        font-size:10px;
        border-radius:8px;
      }

      .unifiedToolbar .mainAction{
        min-width:112px;
        font-size:10px;
        padding:0 10px;
      }

      .hintBar{
        font-size:9px;
        padding:4px 6px 0;
        line-height:1.1;
      }

      .svgBox{
        min-height:260px;
      }
    }

    @media (max-width: 760px){
      .metaGrid{
        grid-template-columns:1fr 1fr;
      }
      .cartItemRow{
        grid-template-columns:1fr;
      }
      .cartThumb{
        width:100%;
      }
      .orderCustomerGrid{
        grid-template-columns:1fr;
      }
      .extraContactRow{
        grid-template-columns:1fr;
      }
      .colorCatalog{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px){
      .colorSelectorBox{
        padding:8px;
      }

      .colorSelectorTop{
        gap:8px;
        align-items:stretch;
      }

      .colorSelectorTop > *{
        min-width:0;
      }

      #btnToggleColorCatalog{
        width:100%;
      }

      .selectedColorPill{
        width:100%;
        min-width:0;
      }

      .colorCatalogWrap.open{
        max-height:min(50vh, 360px);
        margin-top:8px;
      }

      .colorCatalog{
        gap:8px;
      }

      .colorSwatch{
        min-width:0;
      }

      .colorSwatchTop{
        height:42px;
      }

      .colorSwatchInfo{
        padding:7px;
      }

      .colorSwatchName{
        font-size:11px;
        line-height:1.15;
        overflow-wrap:anywhere;
      }

      .colorSwatchCode{
        font-size:10px;
      }
    }

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

@media (max-width: 900px){
  .canvasWrap{
    padding-bottom:132px;
  }

  .bottomActionBar{
    width:calc(100% - 16px);
    bottom:8px;
    padding:6px;
  }

  .bottomActionBar .unifiedToolbar{
    gap:6px;
  }

  .bottomActionBar button{
    height:34px;
    padding:0 10px;
    font-size:11px;
  }
}

@media (max-width: 640px){
  .canvasWrap{
    padding-bottom:152px;
  }

  .bottomActionBar button{
    flex:1 1 calc(50% - 6px);
    min-width:0;
  }
}



    .termsOverlay{
      position:fixed;
      inset:0;
      z-index:20000;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
      background:rgba(15,23,42,.42);
      backdrop-filter:blur(4px);
    }

    .termsOverlay[hidden]{
      display:none !important;
    }

    .termsModal{
      width:min(760px, calc(100vw - 32px));
      max-height:min(86vh, 900px);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      background:#ffffff;
      border:1px solid rgba(15,23,42,.10);
      border-radius:20px;
      box-shadow:0 28px 80px rgba(15,23,42,.28);
    }

    .termsModalHeader{
      padding:18px 20px 12px;
      border-bottom:1px solid rgba(15,23,42,.08);
      background:linear-gradient(180deg, rgba(74,163,255,.08), rgba(255,255,255,0));
    }

    .termsModalHeader h2{
      margin:0 0 6px;
      font-size:22px;
      line-height:1.15;
    }

    .termsModalHeader p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.4;
    }

    .termsModalBody{
      padding:16px 20px;
      overflow:auto;
      display:grid;
      gap:10px;
    }

    .termsModalBody h3{
      margin:4px 0 0;
      font-size:15px;
    }

    .termsModalBody p,
    .termsModalBody li{
      margin:0;
      font-size:13px;
      line-height:1.55;
      color:#1f2937;
    }

    .termsModalBody ul{
      margin:0;
      padding-left:18px;
      display:grid;
      gap:6px;
    }

    .termsNotice{
      padding:12px 14px;
      border-radius:14px;
      background:rgba(74,163,255,.08);
      border:1px solid rgba(74,163,255,.18);
      font-size:13px;
      line-height:1.45;
      color:#1f2937;
    }

    .termsMiniNote{
      margin-top:4px;
      font-size:12px;
      color:var(--muted);
    }

    .termsAcceptRow{
      display:grid;
      grid-template-columns:20px 1fr;
      gap:10px;
      align-items:start;
      padding:14px 20px;
      border-top:1px solid rgba(15,23,42,.08);
      background:#f8fafc;
    }

    .termsAcceptRow input{
      width:18px;
      height:18px;
      margin:2px 0 0;
    }

    .termsAcceptRow label{
      font-size:12px;
      line-height:1.45;
      color:#1f2937;
    }

    .termsModalFooter{
      display:flex;
      justify-content:flex-end;
      gap:10px;
      padding:14px 20px 18px;
      border-top:1px solid rgba(15,23,42,.08);
      background:#ffffff;
    }

    .termsModalFooter button{
      min-width:150px;
    }

    .termsModalFooter .acceptBtn:disabled{
      opacity:.55;
      cursor:not-allowed;
    }

    @media (max-width: 640px){
      .termsOverlay{
        padding:12px;
      }

      .termsModal{
        width:min(100vw - 16px, 760px);
        max-height:88vh;
        border-radius:16px;
      }

      .termsModalHeader,
      .termsModalBody,
      .termsAcceptRow,
      .termsModalFooter{
        padding-left:14px;
        padding-right:14px;
      }

      .termsModalFooter{
        flex-direction:column-reverse;
      }

      .termsModalFooter button{
        width:100%;
        min-width:0;
      }
    }

#mainHeader{
  display:block !important;
  position:sticky;
  top:0;
  z-index:10000;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}

body{
  padding-top:0 !important;
  margin-top:0 !important;
}

.topActionHeader{
  width:100%;
  padding:8px 10px;
}

.topActionHeader .toolbarTitle{
  font-size:11px;
  font-weight:900;
  color:var(--muted);
  padding-left:4px;
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-bottom:6px;
}

.topActionHeader .unifiedToolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:10px;
  border-radius:16px;
  border:1px solid var(--border);
  background:#ffffff;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}

.topActionHeader .unifiedToolbar::-webkit-scrollbar{
  display:none;
}

.topActionHeader .unifiedToolbar button{
  flex:0 0 auto;
  min-width:auto;
  height:42px;
  padding:0 12px;
  border-radius:12px;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  display:flex;
  align-items:center;
  justify-content:center;
}

.topActionHeader .unifiedToolbar .mainAction{
  min-width:170px;
  margin-left:auto;
  font-size:13px;
  font-weight:900;
  padding:0 16px;
}

.topActionHeader.is-compact{
  padding:6px 8px;
}

.topActionHeader.is-compact .toolbarTitle{
  display:none;
}

.topActionHeader.is-compact .unifiedToolbar{
  padding:8px;
  gap:6px;
}

.topActionHeader.is-compact .unifiedToolbar button{
  height:36px;
  padding:0 10px;
  font-size:12px;
  border-radius:10px;
}

.topActionHeader.is-compact .unifiedToolbar .mainAction{
  min-width:145px;
  font-size:12px;
  padding:0 12px;
}

@media (max-width: 760px) and (orientation:portrait){
  .topActionHeader{
    padding:6px;
  }

  .topActionHeader .toolbarTitle{
    font-size:10px;
    margin-bottom:4px;
  }

  .topActionHeader .unifiedToolbar{
    gap:6px;
    padding:6px;
  }

  .topActionHeader .unifiedToolbar button{
    height:34px;
    padding:0 10px;
    font-size:11px;
    border-radius:10px;
  }

  .topActionHeader .unifiedToolbar .mainAction{
    min-width:132px;
    font-size:11px;
    padding:0 12px;
  }

  .topActionHeader.is-compact{
    padding:4px 6px;
  }

  .topActionHeader.is-compact .unifiedToolbar{
    padding:5px;
    gap:5px;
  }

  .topActionHeader.is-compact .unifiedToolbar button{
    height:30px;
    padding:0 8px;
    font-size:10px;
    border-radius:8px;
  }

  .topActionHeader.is-compact .unifiedToolbar .mainAction{
    min-width:116px;
    font-size:10px;
    padding:0 10px;
  }
}

@media (max-width: 950px) and (orientation:landscape){
  .topActionHeader{
    padding:4px 6px;
  }

  .topActionHeader .toolbarTitle{
    display:none;
  }

  .topActionHeader .unifiedToolbar{
    gap:4px;
    padding:4px;
  }

  .topActionHeader .unifiedToolbar button{
    height:28px;
    padding:0 8px;
    font-size:10px;
    border-radius:8px;
  }

  .topActionHeader .unifiedToolbar .mainAction{
    min-width:112px;
    font-size:10px;
    padding:0 10px;
  }
}


    .termsOverlay{
      position:fixed;
      inset:0;
      z-index:20000;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
      background:rgba(15,23,42,.42);
      backdrop-filter:blur(4px);
    }

    .termsOverlay[hidden]{
      display:none !important;
    }

    .termsModal{
      width:min(760px, calc(100vw - 32px));
      max-height:min(86vh, 900px);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      background:#ffffff;
      border:1px solid rgba(15,23,42,.10);
      border-radius:20px;
      box-shadow:0 28px 80px rgba(15,23,42,.28);
    }

    .termsModalHeader{
      padding:18px 20px 12px;
      border-bottom:1px solid rgba(15,23,42,.08);
      background:linear-gradient(180deg, rgba(74,163,255,.08), rgba(255,255,255,0));
    }

    .termsModalHeader h2{
      margin:0 0 6px;
      font-size:22px;
      line-height:1.15;
    }

    .termsModalHeader p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.4;
    }

    .termsModalBody{
      padding:16px 20px;
      overflow:auto;
      display:grid;
      gap:10px;
    }

    .termsModalBody h3{
      margin:4px 0 0;
      font-size:15px;
    }

    .termsModalBody p,
    .termsModalBody li{
      margin:0;
      font-size:13px;
      line-height:1.55;
      color:#1f2937;
    }

    .termsModalBody ul{
      margin:0;
      padding-left:18px;
      display:grid;
      gap:6px;
    }

    .termsNotice{
      padding:12px 14px;
      border-radius:14px;
      background:rgba(74,163,255,.08);
      border:1px solid rgba(74,163,255,.18);
      font-size:13px;
      line-height:1.45;
      color:#1f2937;
    }

    .termsMiniNote{
      margin-top:4px;
      font-size:12px;
      color:var(--muted);
    }

    .termsAcceptRow{
      display:grid;
      grid-template-columns:20px 1fr;
      gap:10px;
      align-items:start;
      padding:14px 20px;
      border-top:1px solid rgba(15,23,42,.08);
      background:#f8fafc;
    }

    .termsAcceptRow input{
      width:18px;
      height:18px;
      margin:2px 0 0;
    }

    .termsAcceptRow label{
      font-size:12px;
      line-height:1.45;
      color:#1f2937;
    }

    .termsModalFooter{
      display:flex;
      justify-content:flex-end;
      gap:10px;
      padding:14px 20px 18px;
      border-top:1px solid rgba(15,23,42,.08);
      background:#ffffff;
    }

    .termsModalFooter button{
      min-width:150px;
    }

    .termsModalFooter .acceptBtn:disabled{
      opacity:.55;
      cursor:not-allowed;
    }

    @media (max-width: 640px){
      .termsOverlay{
        padding:12px;
      }

      .termsModal{
        width:min(100vw - 16px, 760px);
        max-height:88vh;
        border-radius:16px;
      }

      .termsModalHeader,
      .termsModalBody,
      .termsAcceptRow,
      .termsModalFooter{
        padding-left:14px;
        padding-right:14px;
      }

      .termsModalFooter{
        flex-direction:column-reverse;
      }

      .termsModalFooter button{
        width:100%;
        min-width:0;
      }
    }


    .fieldError{
      border-color:rgba(220,38,38,.95) !important;
      box-shadow:0 0 0 3px rgba(220,38,38,.12);
      background:rgba(254,242,242,.98);
    }

    .fieldErrorMsg{
      margin-top:6px;
      color:#b91c1c;
      font-size:12px;
      line-height:1.35;
    }

    .validationModalOverlay{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      padding:20px;
      background:rgba(15,23,42,.58);
      z-index:2147483647;
      backdrop-filter:blur(2px);
    }

    .validationModalOverlay.is-open{
      display:flex;
    }

    .validationModal{
      width:min(520px, calc(100vw - 24px));
      max-height:min(80vh, 640px);
      overflow:auto;
      background:#fff;
      color:#0f172a;
      border-radius:18px;
      box-shadow:0 24px 80px rgba(0,0,0,.35);
      border:1px solid rgba(15,23,42,.08);
      position:relative;
      z-index:2147483647;
    }

    .validationModalHeader,
    .validationModalBody,
    .validationModalFooter{
      padding:18px 20px;
    }

    .validationModalHeader{
      border-bottom:1px solid rgba(15,23,42,.08);
    }

    .validationModalHeader h3{
      margin:0;
      font-size:20px;
    }

    .validationModalBody p{
      margin:0 0 12px;
      font-size:14px;
    }

    .validationModalBody ul{
      margin:0;
      padding-left:20px;
    }

    .validationModalBody li{
      margin:0 0 8px;
      font-size:14px;
    }

    .validationModalFooter{
      border-top:1px solid rgba(15,23,42,.08);
      display:flex;
      justify-content:flex-end;
    }

    .validationModalFooter button{
      border:0;
      border-radius:12px;
      padding:10px 16px;
      font-weight:700;
      cursor:pointer;
      background:#2563eb;
      color:#fff;
    }


    .validationTopNotice{
      position:fixed;
      top:12px;
      left:50%;
      transform:translateX(-50%) translateY(-14px);
      width:min(760px, calc(100vw - 20px));
      display:none;
      opacity:0;
      z-index:2147483647;
      pointer-events:auto;
    }
    .validationTopNotice.is-open{
      opacity:1;
      transform:translateX(-50%) translateY(0);
    }
    .validationTopNoticeInner{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      background:#fff4f4;
      color:#7f1d1d;
      border:2px solid rgba(220,38,38,.28);
      border-radius:16px;
      box-shadow:0 18px 48px rgba(15,23,42,.24);
      padding:14px 14px 12px;
    }
    .validationTopNoticeText{
      min-width:0;
      flex:1;
    }
    .validationTopNoticeText strong{
      display:block;
      font-size:15px;
      margin-bottom:4px;
    }
    #validationTopNoticeIntro{
      font-size:13px;
      line-height:1.35;
      margin-bottom:8px;
    }
    #validationTopNoticeList{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .validationTopNoticeChip{
      display:inline-flex;
      align-items:center;
      min-height:32px;
      padding:6px 10px;
      border-radius:999px;
      background:#fff;
      border:1px solid rgba(220,38,38,.22);
      font-size:13px;
      font-weight:700;
      line-height:1.2;
    }
    .validationTopNoticeClose{
      flex:0 0 auto;
      min-width:72px;
      min-height:40px;
      border:none;
      border-radius:12px;
      background:#dc2626;
      color:#fff;
      font-weight:800;
      cursor:pointer;
    }
    @media (max-width:640px){
      .validationTopNotice{ top:8px; width:calc(100vw - 12px); }
      .validationTopNoticeInner{ padding:12px; gap:10px; }
      .validationTopNoticeClose{ min-width:58px; min-height:38px; }
      .validationTopNoticeChip{ font-size:12px; }
    }