:root{
      --bg:#f5f7fa;
      --surface:#ffffff;
      --card:#ffffff;
      --muted:#64748b;
      --accent:#4F9CF9;
      --accent-2:#3b82f6;
      --accent-gradient: #4F9CF9;
      --accent-gradient-hover: #3b82f6;
      --success:#10b981;
      --radius:12px;
      --gap:20px;
      --page-max-width:1280px;
      --side-padding:24px;
      --text:#1e293b;
      --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
      --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
      --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
      --shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
      --glow: 0 2px 8px rgba(79,156,249,0.2);
    }
    /* consistent box-sizing to keep borders/padding from shifting layout */
    *, *::before, *::after { box-sizing: border-box; }

    html, body { height:100%; margin:0; }
    body{
      margin:0;
      font-family: Inter, "Segoe UI", Roboto, -apple-system, system-ui, "Helvetica Neue", Arial;
      background: #f5f7fa;
      color: #1e293b;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
      padding:0;
      overflow-x:hidden;
      position:relative;
    }
    body::before{
      display:none;
    }

    /* top navigation (chkr.cc-like) */
    .topbar{
      position:sticky;
      top:0;
      width:100%;
      background: rgba(255,255,255,0.98);
      color:#1a1a1a;
      box-shadow: var(--shadow-md);
      z-index:100;
      border-bottom:1px solid rgba(255,255,255,0.2);
    }
    .topbar .inner{
      max-width:var(--page-max-width);
      margin:0 auto;
      display:flex;
      align-items:center;
      padding:16px var(--side-padding);
      gap:8px;
    }
    /* enforce readable text color across common elements */
    body, .card, .app-header, .topbar, .container, .output-area, textarea, select, option, button, label, h1, p, td, th {
      color: var(--text) !important;
    }
    .brand{
      font-weight:700;
      font-size:18px;
      letter-spacing:-0.01em;
      color:#4F9CF9;
    }
    .navlinks{ margin-left:auto; display:flex; gap:20px; font-size:14px; color:#64748b; }
    .navlinks a{ color:inherit; text-decoration:none; opacity:0.8; transition: opacity 0.15s ease; }
    .navlinks a:hover{ opacity:1; color:#4F9CF9; text-decoration:none; }

    /* header card below nav */
    .app-header{
      max-width:calc(var(--page-max-width) - 40px);
      margin:24px var(--side-padding) 24px;
      padding:24px 28px;
      background: #ffffff;
      border-radius:12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      border:1px solid #e2e8f0;
      position:relative;
      overflow:hidden;
      z-index:1;
      transition: box-shadow 0.2s ease;
    }
    .app-header:hover{
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .app-header::before{
      display:none;
    }
    .app-header::after{
      display:none;
    }
    @media (min-width:1340px){
      .app-header{ margin-left:auto; margin-right:auto; }
    }
    .app-header-inner{ display:flex; align-items:center; gap:20px; position:relative; z-index:1; }
    .app-logo{
      width:48px;
      height:48px;
      flex-shrink:0;
    }
    .app-text-content{
      display:flex;
      flex-direction:column;
      gap:8px;
      flex:1;
    }
    .app-title{ 
      margin:0; 
      font-size:24px; 
      font-weight:700; 
      color:#1e293b;
      letter-spacing:-0.02em;
      line-height:1.2;
    }
    .app-subtitle{ margin:0; color:#64748b; font-size:14px; max-width:980px; line-height:1.6; }
    .app-subtitle code{ 
      background: #e0f2fe; 
      padding:3px 8px; 
      border-radius:6px; 
      color:#0369a1; 
      font-weight:600;
      border:1px solid #bae6fd;
    }

    /* layout */
    .container{
      max-width:calc(var(--page-max-width) - 40px);
      margin:8px var(--side-padding) 36px;
      display:grid;
      grid-template-columns:340px 1fr;
      gap:var(--gap);
      align-items:stretch;
    }
    @media (min-width:1340px){
      .container{ margin-left:auto; margin-right:auto; }
    }
    .container.has-data{ grid-template-columns:340px 1fr; }
    @media (max-width:980px){
      .container{ grid-template-columns:1fr; margin:14px var(--side-padding) 36px; }
    }

    .card{
      background: #ffffff;
      border-radius:12px;
      padding:20px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      border:1px solid #e2e8f0;
      width:100%;
      height:100%;
      display:flex;
      flex-direction:column;
      transition: box-shadow 0.2s ease;
      position:relative;
      overflow:hidden;
    }
    .card::before{
      display:none;
    }
    .card:hover{
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .input-card{
      overflow:visible;
      z-index:20;
    }
    .input-card .format-select{
      z-index:30;
    }

    /* input area */
    h1{ 
      margin:0 0 16px 0; 
      font-size:18px; 
      font-weight:700; 
      color:#1e293b;
      letter-spacing:-0.01em;
    }
    label{ 
      display:block; 
      font-size:13px; 
      color:#64748b; 
      margin-bottom:8px;
      font-weight:500;
    }
    textarea#input{
      width:100%;
      height:clamp(320px, 42vh, 460px);
      resize:none;
      overflow:auto;
      padding:16px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
      font-size:13px;
      line-height:1.6;
      border-radius:8px;
      border:1.5px solid #e2e8f0;
      background: #ffffff;
      color:#1e293b;
      flex:1;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }
    textarea#input:focus{
      outline:none;
      border-color: #4F9CF9;
      box-shadow: 0 0 0 3px rgba(79,156,249,0.1);
      background: #ffffff;
    }
    .controls{ 
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:10px; 
      align-items:center; 
      margin-top:0; 
      padding-top:0;
      width:100%;
    }
    @media (max-width:720px){
      textarea#input{ height:clamp(300px, 48vh, 420px); }
      .output-area{ height:clamp(300px, 48vh, 420px); }
    }
    @media (max-height:850px) and (min-width:721px){
      .app-header{
        margin-top:14px;
        margin-bottom:14px;
        padding:18px 22px;
      }
      .app-header-inner{ gap:16px; }
      .app-logo{ width:42px; height:42px; }
      .app-text-content{ gap:4px; }
      .container{ margin-top:6px; }
    }
    .controls .btn{
      height:42px;
      width:100%;
      min-width:0;
    }
    /* format buttons (inside toolbar) — hidden, replaced by .fmt-seg */
    .fmt-btn{ display:none; }
    /* segmented format control */
    .fmt-seg{ display:flex; align-items:center; background:#e9eef5; border-radius:10px; padding:4px; gap:2px; margin-bottom:12px; }
    .fmt-seg-btn{ flex:1; height:34px; border:none; background:transparent; border-radius:8px; font-size:12px; font-weight:600; color:#64748b !important; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:0 14px; transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; letter-spacing:0.01em; }
    .fmt-seg-btn:hover{ background:rgba(255,255,255,0.55); color:#334155 !important; }
    .fmt-seg-btn.active{ background:#ffffff; color:#4F9CF9 !important; box-shadow:0 1px 4px rgba(0,0,0,0.13), 0 0 0 1px rgba(0,0,0,0.04); }
    .btn{
      background: #ffffff;
      color:#334155;
      border:1.5px solid #cbd5e1;
      padding:0 18px;
      border-radius:8px;
      cursor:pointer;
      font-weight:700;
      font-size:13px;
      letter-spacing:0.01em;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      box-shadow: var(--shadow-sm);
      transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
      position:relative;
      overflow:hidden;
      white-space:nowrap;
    }
    .btn > * {
      position:relative;
      z-index:1;
    }
    .btn::before{
      display:none;
    }
    .btn:hover{
      background: #f1f5f9;
      border-color: #94a3b8;
      box-shadow: var(--shadow-md);
    }
    .btn:active{
      transform: scale(0.98);
    }
    .btn:focus-visible{
      outline:none;
      box-shadow: 0 0 0 3px rgba(79,156,249,0.2);
      border-color:#4F9CF9;
    }
    .btn.primary{ 
      color:#ffffff; 
      background: #4F9CF9;
      border:none;
      box-shadow: 0 3px 8px rgba(79,156,249,0.28);
    }
    .btn.primary::before{
      display:none;
    }
    .btn.primary:hover{
      background: #3b82f6;
      box-shadow: 0 6px 12px rgba(79,156,249,0.32);
    }
    .btn.secondary{ 
      background:#ffffff;
      color:#334155; 
      border:1.5px solid #cbd5e1;
      box-shadow:var(--shadow-sm);
    }
    .btn.secondary:hover{
      background:#f8fafc;
      color:#1d4ed8;
      border-color:#93c5fd;
    }
    .format-select{ 
      margin-left:0; 
      display:flex; 
      align-items:center; 
      font-size:14px; 
      min-width:0;
      width:100%;
      position:relative;
    }
    .small{ font-size:13px; color:var(--muted); margin-top:10px; }
    .format-select .native-format-select{
      position:absolute;
      opacity:0;
      pointer-events:none;
      width:1px;
      height:1px;
    }
    .format-dropdown-trigger{
      background: #ffffff;
      color: #0f172a;
      border:1.5px solid #cbd5e1;
      padding:10px 14px;
      border-radius:8px;
      font-size:13px;
      font-weight:700;
      cursor:pointer;
      width:100%;
      min-width:140px;
      max-width:100%;
      text-align:left;
      box-shadow: var(--shadow-sm);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .format-dropdown-trigger:hover{
      border-color:#94a3b8;
      box-shadow: var(--shadow-md);
    }
    .format-dropdown-trigger:focus-visible{
      outline:none;
      box-shadow: 0 0 0 3px rgba(79,156,249,0.1);
      border-color:#4F9CF9;
    }
    .format-dropdown-trigger .format-value{
      display:flex;
      align-items:center;
      gap:8px;
      min-width:0;
      flex:1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .format-dropdown-trigger .format-caret{
      color:#64748b;
      font-size:11px;
      flex-shrink:0;
      transition:transform 0.16s ease;
    }
    .format-select.open .format-dropdown-trigger .format-caret{
      transform:rotate(180deg);
    }
    .format-dropdown-menu{
      position:absolute;
      left:0;
      right:auto;
      top:calc(100% + 6px);
      background:#ffffff;
      border:1.5px solid #cbd5e1;
      border-radius:10px;
      box-shadow: var(--shadow-xl);
      z-index:1300;
      padding:6px;
      display:none;
      min-width:100%;
      width:max-content;
      max-width:min(460px, calc(100vw - 24px));
      max-height:240px;
      overflow-x:hidden;
      overflow-y:auto;
      box-sizing:border-box;
    }
    .format-select.open .format-dropdown-menu{
      display:block;
      animation: dropdownFadeIn 0.14s ease;
    }
    .format-select.open-up .format-dropdown-menu{
      top:auto;
      bottom:calc(100% + 6px);
      animation: dropdownFadeInUp 0.14s ease;
    }
    @keyframes dropdownFadeIn{
      from{ opacity:0; transform:translateY(-4px); }
      to{ opacity:1; transform:translateY(0); }
    }
    @keyframes dropdownFadeInUp{
      from{ opacity:0; transform:translateY(4px); }
      to{ opacity:1; transform:translateY(0); }
    }
    .format-dropdown-option{
      width:100%;
      border:none;
      background:#ffffff;
      color:#0f172a;
      font-size:13px;
      font-weight:700;
      border-radius:7px;
      padding:9px 10px;
      text-align:left;
      cursor:pointer;
      display:flex;
      align-items:center;
      gap:8px;
      transition: background-color 0.15s ease, color 0.15s ease;
      box-sizing:border-box;
      white-space:normal;
      overflow-wrap:anywhere;
      line-height:1.3;
    }
    .format-dropdown-option span:last-child{
      flex:1;
      min-width:0;
    }
    .format-dropdown-option:hover,
    .format-dropdown-option:focus-visible{
      background:#eff6ff;
      color:#1d4ed8;
      outline:none;
    }
    .format-dropdown-option.selected{
      background:#dbeafe;
      color:#1d4ed8;
      box-shadow: inset 0 0 0 1px #93c5fd;
    }
    .format-dropdown-icon{
      width:18px;
      text-align:center;
      flex-shrink:0;
    }
    /* ensure label contrast */
    .format-select label{ color:#1e293b; margin-right:6px; font-weight:600; }

    /* output area */
    .toolbar{
      display:flex;
      align-items:center;
      gap:8px;
      padding-bottom:10px;
      margin-bottom:10px;
      border-bottom:1.5px solid #e2e8f0;
    }
    .toolbar-title{
      font-size:17px;
      font-weight:700;
      color:#1e293b;
      margin:0;
      flex-shrink:0;
    }
    .toolbar-spacer{ flex:1; }
    .toolbar .toolbar-btn{
      height:34px;
      padding:0 14px;
      border-radius:8px;
      font-size:12px;
      font-weight:600;
      border:1.5px solid #e2e8f0;
      background:#f8fafc;
      color:#475569;
      box-shadow:none;
      display:inline-flex;
      align-items:center;
      gap:5px;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
      letter-spacing:0.01em;
      white-space:nowrap;
      cursor:pointer;
    }
    .toolbar .toolbar-btn:hover{
      background:#eff6ff;
      border-color:#93c5fd;
      color:#1d4ed8;
    }
    .toolbar .toolbar-btn.secondary{
      background:#f8fafc;
      color:#64748b;
    }
    .toolbar .toolbar-btn.secondary:hover{
      background:#eff6ff;
      border-color:#93c5fd;
      color:#1d4ed8;
    }
    .toolbar .toolbar-btn:focus-visible,
    .row-copy-btn:focus-visible{
      outline:none;
      box-shadow:0 0 0 3px rgba(79,156,249,0.2);
    }
    .output-area{
      height:clamp(320px, 42vh, 460px);
      padding:16px;
      border-radius:8px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
      font-size:13px;
      overflow:auto;
      border:1.5px solid #e2e8f0;
      box-shadow: var(--shadow-sm);
      background: #fafafa;
      flex:none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .output-area:focus-within{
      border-color: #4F9CF9;
      box-shadow: 0 0 0 3px rgba(79,156,249,0.1);
    }

    /* table styles */
    .output-area .table-wrapper{
      max-height: 100%;
      overflow:auto;
      border-radius:8px;
      padding:8px;
      background: #ffffff;
      border:1px solid #e2e8f0;
    }
    .output-area .styled-table{
      width:100%;
      border-collapse:separate;
      border-spacing:0 6px;
      table-layout: fixed;
      min-width:760px;
    }
    .output-area .styled-table th, .output-area .styled-table td{
      border:none;
      padding:10px 12px;
      text-align:left;
      font-size:13px;
      color:#1e293b;
      background: transparent;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .output-area .styled-table tbody td{
      border-top:1px solid #e2e8f0;
      border-bottom:1px solid #e2e8f0;
    }
    .output-area .styled-table tbody td:first-child{
      border-left:1px solid #e2e8f0;
      border-top-left-radius:7px;
      border-bottom-left-radius:7px;
    }
    .output-area .styled-table tbody td:last-child{
      border-right:1px solid #e2e8f0;
      border-top-right-radius:7px;
      border-bottom-right-radius:7px;
    }
    .output-area .styled-table thead th{
      position:sticky; top:0; z-index:3;
      font-weight:700;
      background: #4F9CF9;
      color:#ffffff;
      text-transform:uppercase;
      letter-spacing:0.05em;
      font-size:11px;
      border-bottom:2px solid #3b82f6;
    }
    .output-area .styled-table tbody tr:nth-child(odd) td{ 
      background: #eef6ff;
    }
    .output-area .styled-table tbody tr:nth-child(even) td{ 
      background: #fbfdff;
    }
    .output-area .styled-table tbody tr{
      transition: background-color 0.15s ease;
    }
    .output-area .styled-table tbody tr:hover td{ 
      background: #dbeeff;
      border-color:#bfdbfe;
    }
    .output-area .styled-table th.col-email, .output-area .styled-table td.col-email{ width:180px; }
    .output-area .styled-table th.col-stt, .output-area .styled-table td.col-stt{
      width:58px;
      text-align:center;
      font-weight:700;
      user-select:none;
    }
    .output-area .styled-table th.col-password, .output-area .styled-table td.col-password{ width:140px; }
    .output-area .styled-table th.col-token, .output-area .styled-table td.col-token{ width:auto; min-width:300px; }
    .output-area .styled-table th.col-id, .output-area .styled-table td.col-id{ width:200px; }
    .output-area .styled-table th.col-tokenid, .output-area .styled-table td.col-tokenid{ width:auto; min-width:380px; }
    .output-area .styled-table th.col-action, .output-area .styled-table td.col-action{ width:100px; text-align:center; }
    .row-copy-btn{
      height:30px;
      padding:0 12px;
      border-radius:6px;
      border:1px solid #bfdbfe;
      background:#eff6ff;
      color:#1d4ed8;
      font-size:11px;
      font-weight:700;
      cursor:pointer;
      letter-spacing:0.01em;
      transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    }
    .row-copy-btn:hover{
      background:#dbeafe;
      border-color:#93c5fd;
      transform:translateY(-1px);
    }
    /* pipe-list rows (Pipe Simple / Pipe Full) */
    .pipe-list{ list-style:none; margin:0; padding:4px 0; }
    .pipe-list-item{
      display:flex;
      align-items:center;
      gap:10px;
      padding:8px 10px;
      border-radius:7px;
      border:1px solid #e2e8f0;
      margin-bottom:5px;
      background:#ffffff;
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }
    .pipe-list-item:nth-child(odd){ background:#eef6ff; }
    .pipe-list-item:hover{ background:#dbeeff; border-color:#bfdbfe; }
    .pipe-list-item .pipe-index{
      width:30px;
      height:24px;
      flex:0 0 30px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:6px;
      background:#dbeafe;
      color:#1d4ed8;
      font-size:11px;
      font-weight:800;
      line-height:1;
      user-select:none;
    }
    .pipe-list-item .pipe-text{
      flex:1;
      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
      font-size:12px;
      color:#1e293b;
      word-break:break-all;
      line-height:1.5;
      cursor:pointer;
      user-select:text;
    }
    .pipe-list-item .pipe-text:hover{ color:#1d4ed8; }
    .pipe-list-item .row-copy-btn{ flex-shrink:0; }
    @media (max-width:720px){
      .format-dropdown-menu{ max-height:200px; }
      .toolbar .toolbar-btn{ min-width:84px; }
      .controls .btn{ min-width:92px; }
    }
    @media (max-width:1200px){
      .output-area .styled-table{ min-width:700px; }
      .output-area .styled-table th,
      .output-area .styled-table td{ padding:9px 10px; }
      .output-area .styled-table th.col-email, .output-area .styled-table td.col-email{ width:160px; }
      .output-area .styled-table th.col-stt, .output-area .styled-table td.col-stt{ width:52px; }
      .output-area .styled-table th.col-password, .output-area .styled-table td.col-password{ width:120px; }
      .output-area .styled-table th.col-token, .output-area .styled-table td.col-token{ min-width:240px; }
      .output-area .styled-table th.col-id, .output-area .styled-table td.col-id{ width:160px; }
      .output-area .styled-table th.col-action, .output-area .styled-table td.col-action{ width:92px; }
    }
    @media (max-width:1024px){
      .toolbar{ gap:8px; }
      .toolbar .toolbar-btn{
        min-width:74px;
        padding:0 12px;
        font-size:11px;
      }
      .output-area .styled-table{ min-width:640px; }
      .output-area .styled-table th,
      .output-area .styled-table td{ font-size:12px; }
      .output-area .styled-table th.col-token, .output-area .styled-table td.col-token{ min-width:210px; }
    }

    /* copy popup & highlight */
    .copy-popup{
      position:fixed; right:24px; top:90px;
      background: #ffffff;
      color:#4F9CF9; 
      padding:12px 18px; 
      border-radius:8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      border:1.5px solid #bae6fd;
      z-index:10000; opacity:0; transform:translateY(-10px); 
      transition: opacity 0.15s ease, transform 0.15s ease;
      max-width:calc(100vw - 48px); font-size:13px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
      font-weight:600;
    }
    @media (max-width:480px){
      .copy-popup{
        left:12px;
        right:12px;
        max-width:calc(100vw - 24px);
      }
    }
    .copy-popup.show{ opacity:1; transform:translateY(0); }
    .styled-table td.copied{ 
      background: #dbeafe !important; 
      transition: background-color 0.15s ease; 
      color:#1e293b;
    }
    .styled-table.copied-all{ 
      box-shadow:0 0 0 3px rgba(79,156,249,0.2); 
      transition: box-shadow 0.15s ease; 
    }

    /* subtle custom scrollbar */
    .output-area .table-wrapper::-webkit-scrollbar, .output-area::-webkit-scrollbar, textarea::-webkit-scrollbar{
      height:10px; width:10px;
    }
    .output-area .table-wrapper::-webkit-scrollbar-thumb, .output-area::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb{
      background: #cbd5e1;
      border-radius:5px;
    }
    .output-area .table-wrapper::-webkit-scrollbar-thumb:hover, .output-area::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover{
      background: #94a3b8;
    }
    .output-area .table-wrapper::-webkit-scrollbar-track, .output-area::-webkit-scrollbar-track, textarea::-webkit-scrollbar-track{
      background: #f1f5f9;
      border-radius:5px;
    }

    /* History Modal */
    .history-modal{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(15,23,42,0.5);
      z-index:10000;
      align-items:center;
      justify-content:center;
      padding:20px;
      opacity:0;
      transition: opacity 0.2s ease;
    }
    .history-modal.show{ 
      display:flex;
      opacity:1;
    }
    .history-content{
      background:#ffffff;
      border-radius:12px;
      box-shadow: 0 20px 25px rgba(0,0,0,0.15);
      border:1px solid #e2e8f0;
      width:100%;
      max-width:min(900px, 90vw);
      max-height:90vh;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      transform: scale(0.98);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .history-modal.show .history-content{
      transform: scale(1);
    }
    .history-header{
      padding:20px 24px;
      border-bottom:1.5px solid #e2e8f0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      background: #4F9CF9;
      position:relative;
    }
    .history-header::before{
      display:none;
    }
    .history-header h2,
    .history-header button{
      position:relative;
      z-index:1;
    }
    .history-header h2{
      margin:0;
      font-size:20px;
      font-weight:700;
      color:#ffffff;
      letter-spacing:-0.01em;
    }
    .history-close{
      background:rgba(255,255,255,0.2);
      border:none;
      font-size:24px;
      cursor:pointer;
      color:#ffffff;
      padding:0;
      width:36px;
      height:36px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius:8px;
      transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    }
    .history-close:hover{
      background:rgba(255,255,255,0.3);
      color:#ffffff;
      transform: rotate(90deg);
    }
    .history-body{
      padding:20px 24px;
      overflow-y:auto;
      flex:1;
    }
    .history-empty{
      text-align:center;
      padding:40px 20px;
      color:#6c757d;
      font-size:14px;
    }
    .history-item{
      background:#f8fafc;
      border:1.5px solid #e2e8f0;
      border-radius:8px;
      padding:14px 16px;
      margin-bottom:10px;
      transition: box-shadow 0.15s ease, background-color 0.15s ease;
      position:relative;
      overflow:hidden;
    }
    .history-item::before{
      display:none;
    }
    .history-item:hover{
      background:#ffffff;
      border-color:#4F9CF9;
      box-shadow: 0 2px 8px rgba(79,156,249,0.1);
    }
    .history-item-header{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .history-item-info{
      flex:1;
      min-width:280px;
    }
    .history-item-time{
      font-size:12px;
      font-weight:600;
      color:#1e293b;
      margin-bottom:4px;
      letter-spacing:0.02em;
    }
    .history-item-stats{
      font-size:11px;
      color:#64748b;
      line-height:1.5;
    }
    .history-item-actions{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
    }
    .history-btn{
      padding:6px 12px;
      border-radius:6px;
      border:1.5px solid #e2e8f0;
      background:#ffffff;
      color:#64748b;
      font-size:11px;
      font-weight:600;
      cursor:pointer;
      transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
      box-shadow: var(--shadow-sm);
      position:relative;
      overflow:hidden;
      white-space:nowrap;
    }
    .history-btn::before{
      display:none;
    }
    .history-btn > * {
      position:relative;
      z-index:1;
    }
    .history-btn:hover{
      background:#f8fafc;
      transform:translateY(-1px);
      box-shadow: var(--shadow-md);
      border-color:#cbd5e1;
    }
    .history-btn.primary{
      background: #4F9CF9;
      color:#ffffff;
      border:none;
      box-shadow: 0 2px 4px rgba(79,156,249,0.2);
    }
    .history-btn.primary:hover{
      background: #3b82f6;
      box-shadow: 0 4px 8px rgba(79,156,249,0.3);
      transform:translateY(-1px);
    }
    .history-btn.danger{
      background:#ffffff;
      color:#ef4444;
      border-color:#fecaca;
    }
    .history-btn.danger:hover{
      background:#fef2f2;
      color:#dc2626;
      border-color:#ef4444;
    }
    .history-clear-all{
      margin-top:20px;
      padding-top:20px;
      border-top:1px solid #e0e0e0;
      text-align:center;
    }
    #historySearch, #historySort, #historyFilterFormat, #historyFilterStatus, #historyFilterDateFrom, #historyFilterDateTo{
      color:#1e293b;
      background:#ffffff;
      border:1.5px solid #e2e8f0;
      border-radius:6px;
      padding:6px 10px;
      font-size:12px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      box-shadow: var(--shadow-sm);
    }
    #historySearch:focus, #historySort:focus, #historyFilterFormat:focus, #historyFilterStatus:focus, #historyFilterDateFrom:focus, #historyFilterDateTo:focus{
      outline:none;
      box-shadow:0 0 0 3px rgba(79,156,249,0.1);
      border-color:#4F9CF9;
      background:#ffffff;
    }
    .history-preview{
      margin-top:6px;
      padding:6px 8px;
      background:#ffffff;
      border-radius:6px;
      border:1px solid #e2e8f0;
      font-size:10px;
      color:#64748b;
      max-height:48px;
      overflow:hidden;
      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
      line-height:1.4;
    }
    .history-preview-line{
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      margin-bottom:1px;
    }
    .history-preview-line:last-child{
      margin-bottom:0;
    }
    .history-pagination{
      display:flex;
      gap:6px;
      align-items:center;
      justify-content:center;
      margin-top:16px;
      padding-top:16px;
      border-top:1px solid #e2e8f0;
    }
    .history-pagination-btn{
      padding:6px 12px;
      border-radius:6px;
      border:1.5px solid #e2e8f0;
      background:#ffffff;
      color:#64748b;
      font-size:11px;
      font-weight:600;
      cursor:pointer;
      transition: background-color 0.15s ease, transform 0.15s ease;
      box-shadow: var(--shadow-sm);
      min-width:36px;
    }
    .history-pagination-btn:hover:not(:disabled){
      background:#f8fafc;
      transform:translateY(-1px);
      box-shadow: var(--shadow-md);
      border-color:#cbd5e1;
    }
    .history-pagination-btn:disabled{
      opacity:0.4;
      cursor:not-allowed;
      transform:none !important;
    }
    .history-pagination-btn.active{
      background: #4F9CF9;
      color:#ffffff;
      border:none;
      box-shadow: 0 2px 4px rgba(79,156,249,0.2);
    }
    .history-actions-bar{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
      margin-bottom:12px;
    }
    .history-filter-section{
      background:#f8fafc;
      padding:12px;
      border-radius:8px;
      margin-bottom:12px;
      border:1.5px solid #e2e8f0;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
    }
    .history-filter-row{
      display:flex;
      gap:6px;
      align-items:center;
      flex-wrap:wrap;
      margin-bottom:6px;
    }
    .history-filter-row:last-child{
      margin-bottom:0;
    }
    .history-filter-label{
      font-size:11px;
      font-weight:600;
      color:#64748b;
      min-width:70px;
    }

    /* ===== TABS NAV ===== */
    .tabs-nav{
      max-width:calc(var(--page-max-width) - 40px);
      margin:0 var(--side-padding) 0;
      display:flex;
      gap:3px;
      background:#e9eef5;
      border-radius:12px;
      padding:4px;
      width:fit-content;
    }
    @media (min-width:1340px){
      .tabs-nav{ margin-left:auto; margin-right:auto; }
    }
    .tab-btn{
      background:transparent;
      border:none;
      padding:9px 20px;
      font-size:13.5px;
      font-weight:600;
      color:#64748b !important;
      cursor:pointer;
      border-radius:9px;
      display:inline-flex;
      align-items:center;
      gap:7px;
      transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
      white-space:nowrap;
      letter-spacing:0.01em;
    }
    .tab-btn:hover{
      color:#334155 !important;
      background:rgba(255,255,255,0.55);
    }
    .tab-btn.active{
      color:#4F9CF9 !important;
      background:#ffffff;
      box-shadow:0 1px 4px rgba(0,0,0,0.13), 0 0 0 1px rgba(0,0,0,0.04);
    }
    .tab-panel{ display:none; }
    .tab-panel.active{ display:block; }

    /* ===== CHECKOUT TAB ===== */
    .checkout-wrap{
      max-width:700px;
      margin:24px var(--side-padding) 36px;
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    @media (min-width:1340px){
      .checkout-wrap{ margin-left:auto; margin-right:auto; }
    }
    .co-card{
      background:#ffffff;
      border:1px solid #e2e8f0;
      border-radius:12px;
      box-shadow:0 1px 3px rgba(0,0,0,0.08);
      padding:20px;
    }
    .co-card:hover{
      box-shadow:0 4px 6px rgba(0,0,0,0.1);
    }
    .co-card-header{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:14px;
    }
    .co-step-pill{
      min-width:30px;
      height:22px;
      border-radius:7px;
      border:1px solid #bfdbfe;
      background:#eff6ff;
      color:#4F9CF9;
      font-size:11px;
      font-weight:700;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
    }
    .co-card-title{
      margin:0;
      font-size:14px;
      font-weight:700;
      color:#1e293b !important;
    }
    .co-label{
      display:block;
      margin-bottom:6px;
      font-size:11px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:0.04em;
      color:#334155 !important;
    }
    .co-textarea{
      width:100%;
      resize:none;
      border-radius:10px;
      border:1.5px solid #e2e8f0;
      padding:12px 14px;
      font-size:13px;
      line-height:1.5;
      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      color:#1e293b !important;
      background:#ffffff;
      transition:border-color 0.2s ease, box-shadow 0.2s ease;
      height:72px;
    }
    .co-textarea:focus{
      outline:none;
      border-color:#4F9CF9;
      box-shadow:0 0 0 3px rgba(79,156,249,0.13);
    }
    .co-textarea::placeholder{ color:#94a3b8; }
    .co-textarea-ro{
      background:#f8fafc;
      height:100px;
    }
    .co-divider{
      display:flex;
      align-items:center;
      gap:8px;
      color:#64748b;
      font-size:11px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:0.08em;
    }
    .co-divider::before,.co-divider::after{
      content:"";
      flex:1;
      height:1px;
      background:#e2e8f0;
    }
    .co-btn-primary{
      width:100%;
      height:42px;
      border-radius:10px;
      border:none;
      background:linear-gradient(135deg,#4F9CF9 0%,#3b82f6 100%);
      color:#ffffff !important;
      font-size:13px;
      font-weight:700;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      box-shadow:0 3px 8px rgba(79,156,249,0.28);
      transition:all 0.2s ease;
      margin-top:4px;
    }
    .co-btn-primary:hover{
      background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);
      box-shadow:0 6px 12px rgba(79,156,249,0.35);
      transform:translateY(-1px);
    }
    .co-btn-primary:active{ transform:translateY(0); }
    .co-actions-row{
      display:flex;
      gap:8px;
      margin-top:4px;
    }
    .co-btn-ghost{
      flex:1;
      height:38px;
      border-radius:8px;
      border:1.5px solid #bfdbfe;
      background:#eff6ff;
      color:#4F9CF9 !important;
      font-size:13px;
      font-weight:700;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      transition:all 0.2s ease;
    }
    .co-btn-ghost:hover{
      background:#4F9CF9;
      border-color:#4F9CF9;
      color:#ffffff !important;
    }
    .co-btn-ghost.co-copied{
      background:#4F9CF9;
      border-color:#4F9CF9;
      color:#ffffff !important;
    }
    .co-status{
      min-height:16px;
      font-size:12px;
      font-weight:500;
      color:#64748b !important;
      margin-top:8px;
    }
    .co-status.co-ok{ color:#4F9CF9 !important; }
    .co-status.co-err{ color:#dc2626 !important; }

    /* ===== REFUND CALCULATOR TAB ===== */
    .rf-wrap{
      max-width:calc(var(--page-max-width) - 40px);
      margin:24px var(--side-padding) 36px;
      display:flex;
      flex-direction:column;
      gap:20px;
    }
    @media (min-width:1340px){
      .rf-wrap{ margin-left:auto; margin-right:auto; }
    }
    .rf-heading-card,
    .rf-card{
      background:#ffffff;
      border:1px solid #e2e8f0;
      border-radius:12px;
      box-shadow:0 1px 3px rgba(0,0,0,0.08);
      transition:box-shadow 0.2s ease;
    }
    .rf-heading-card:hover,
    .rf-card:hover{ box-shadow:0 4px 6px rgba(0,0,0,0.1); }
    .rf-heading-card{
      padding:20px 22px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .rf-heading-copy{ min-width:0; }
    .rf-heading-title{
      margin:0;
      display:flex;
      align-items:center;
      gap:10px;
      font-size:20px;
      line-height:1.3;
      font-weight:700;
      color:#1e293b !important;
    }
    .rf-heading-title svg{ color:#10b981; flex-shrink:0; }
    .rf-heading-subtitle{
      margin:5px 0 0;
      color:#64748b !important;
      font-size:13px;
    }
    .rf-grid{
      display:grid;
      grid-template-columns:minmax(0, 7fr) minmax(320px, 5fr);
      gap:20px;
      align-items:start;
    }
    .rf-column{
      display:flex;
      flex-direction:column;
      gap:20px;
      min-width:0;
    }
    .rf-card{ padding:20px; }
    .rf-card-title{
      margin:0 0 18px;
      display:flex;
      align-items:center;
      gap:9px;
      font-size:15px;
      font-weight:700;
      color:#1e293b !important;
    }
    .rf-card-title svg{ color:#4F9CF9; flex-shrink:0; }
    .rf-form{ display:flex; flex-direction:column; gap:18px; }
    .rf-form-row{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:16px;
    }
    #tab-refund .rf-field{ min-width:0; }
    #tab-refund .rf-label{
      display:block;
      margin:0 0 7px;
      color:#334155 !important;
      font-size:12px;
      font-weight:700;
    }
    .rf-input,
    .rf-select{
      display:block;
      width:100%;
      height:42px;
      padding:9px 12px;
      border:1.5px solid #e2e8f0;
      border-radius:9px;
      background:#ffffff;
      color:#1e293b !important;
      font:500 13px/1.4 Inter, "Segoe UI", sans-serif;
      transition:border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .rf-input:focus,
    .rf-select:focus{
      outline:none;
      border-color:#4F9CF9;
      box-shadow:0 0 0 3px rgba(79,156,249,0.12);
    }
    .rf-input.rf-input-emphasis{
      color:#b45309 !important;
      border-color:#fcd34d;
      font-weight:700;
    }
    .rf-help{
      display:block;
      margin-top:5px;
      color:#94a3b8 !important;
      font-size:10.5px;
    }
    .rf-presets{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      margin-top:8px;
    }
    #tab-refund .rf-preset{
      min-height:27px;
      padding:4px 9px;
      border:1px solid #dbe3ed;
      border-radius:7px;
      background:#f8fafc;
      color:#475569 !important;
      font-size:11px;
      font-weight:600;
      cursor:pointer;
      transition:all 0.18s ease;
    }
    #tab-refund .rf-preset:hover{
      border-color:#93c5fd;
      background:#eff6ff;
      color:#2563eb !important;
      transform:translateY(-1px);
    }
    #tab-refund .rf-preset.rf-preset-active{
      border-color:#bfdbfe;
      background:#eff6ff;
      color:#2563eb !important;
    }
    #tab-refund .rf-preset.rf-preset-warn{
      border-color:#fde68a;
      background:#fffbeb;
      color:#b45309 !important;
    }
    .rf-rounding{
      padding-top:16px;
      border-top:1px solid #e2e8f0;
    }
    .rf-rounding-label{
      margin:0 0 9px;
      color:#64748b !important;
      font-size:11px;
      font-weight:600;
    }
    .rf-rounding-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:8px;
    }
    #tab-refund .rf-radio-option{
      display:flex;
      align-items:flex-start;
      gap:7px;
      min-height:52px;
      margin:0;
      padding:10px;
      border:1px solid #e2e8f0;
      border-radius:8px;
      background:#f8fafc;
      color:#475569 !important;
      font-size:11px;
      font-weight:600;
      cursor:pointer;
    }
    .rf-radio-option:hover{ border-color:#bfdbfe !important; background:#eff6ff !important; }
    .rf-radio-option input{ margin:2px 0 0; accent-color:#4F9CF9; flex-shrink:0; }
    .rf-result-card{
      position:relative;
      overflow:hidden;
      border-color:#a7f3d0;
      background:linear-gradient(180deg,#ffffff 0%,#f0fdf9 100%);
    }
    .rf-result-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:16px;
    }
    .rf-result-label{
      display:inline-flex;
      align-items:center;
      padding:5px 9px;
      border:1px solid #a7f3d0;
      border-radius:7px;
      background:#ecfdf5;
      color:#047857 !important;
      font-size:10.5px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:0.04em;
    }
    .rf-daily-price{
      color:#64748b !important;
      font-size:11px;
      font-weight:600;
      text-align:right;
    }
    .rf-result-center{ margin:8px 0 18px; text-align:center; }
    .rf-result-caption{
      margin-bottom:4px;
      color:#64748b !important;
      font-size:10.5px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:0.05em;
    }
    .rf-result-amount{
      color:#059669 !important;
      font-size:clamp(30px, 4vw, 42px);
      font-weight:800;
      line-height:1.2;
      letter-spacing:-0.03em;
      overflow-wrap:anywhere;
    }
    .rf-result-currency{
      color:#10b981 !important;
      font-size:18px;
      font-weight:700;
      letter-spacing:0;
    }
    .rf-summary{
      padding:13px;
      border:1px solid #e2e8f0;
      border-radius:9px;
      background:rgba(255,255,255,0.8);
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .rf-summary-row{
      display:flex;
      justify-content:space-between;
      gap:14px;
      color:#64748b !important;
      font-size:11.5px;
    }
    .rf-summary-row strong{
      color:#334155 !important;
      font-weight:700;
      text-align:right;
    }
    .rf-summary-row.rf-summary-total{
      margin-top:2px;
      padding-top:9px;
      border-top:1px solid #e2e8f0;
      color:#334155 !important;
      font-weight:700;
    }
    .rf-summary-total strong{ color:#0284c7 !important; }
    .rf-actions{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:8px;
      margin-top:14px;
    }
    .rf-actions .rf-btn-primary{ grid-column:1 / -1; }
    #tab-refund .rf-btn,
    #tab-refund .rf-btn-primary,
    #tab-refund .rf-btn-danger{
      min-height:38px;
      padding:8px 12px;
      border-radius:8px;
      font:700 12px/1.3 Inter, "Segoe UI", sans-serif;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      transition:all 0.18s ease;
    }
    #tab-refund .rf-btn{
      border:1.5px solid #bfdbfe;
      background:#eff6ff;
      color:#2563eb !important;
    }
    #tab-refund .rf-btn:hover{ background:#dbeafe; border-color:#93c5fd; }
    #tab-refund .rf-btn-primary{
      border:1.5px solid #059669;
      background:linear-gradient(135deg,#10b981,#059669);
      color:#ffffff !important;
      box-shadow:0 3px 8px rgba(16,185,129,0.22);
    }
    #tab-refund .rf-btn-primary:hover{
      background:linear-gradient(135deg,#059669,#047857);
      box-shadow:0 5px 12px rgba(16,185,129,0.3);
      transform:translateY(-1px);
    }
    #tab-refund .rf-btn-danger{
      border:1px solid #fecdd3;
      background:#fff1f2;
      color:#e11d48 !important;
    }
    #tab-refund .rf-btn-danger:hover{ background:#ffe4e6; border-color:#fda4af; }
    #tab-refund .rf-btn svg,
    #tab-refund .rf-btn-primary svg,
    #tab-refund .rf-btn-danger svg{ flex-shrink:0; }
    .rf-bank-card{ padding:16px 18px; }
    .rf-bank-toggle{
      width:100%;
      padding:0;
      border:0;
      background:transparent;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color:#334155 !important;
      font-size:12px;
      font-weight:700;
      cursor:pointer;
    }
    .rf-bank-toggle-copy{ display:flex; align-items:center; gap:8px; }
    .rf-bank-toggle-copy svg{ color:#4F9CF9; }
    .rf-bank-chevron{ transition:transform 0.2s ease; }
    .rf-bank-toggle[aria-expanded="true"] .rf-bank-chevron{ transform:rotate(180deg); }
    .rf-bank-config{
      display:flex;
      flex-direction:column;
      gap:12px;
      padding-top:14px;
      margin-top:14px;
      border-top:1px solid #e2e8f0;
    }
    .rf-history-card{ padding:0; overflow:hidden; }
    .rf-history-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:17px 20px;
      border-bottom:1px solid #e2e8f0;
    }
    .rf-history-title{
      display:flex;
      align-items:center;
      gap:8px;
      margin:0;
      color:#1e293b !important;
      font-size:14px;
      font-weight:700;
    }
    .rf-history-title svg{ color:#f59e0b; }
    .rf-history-meta{ display:flex; align-items:center; gap:12px; }
    .rf-history-summary{ color:#059669 !important; font-size:11px; font-weight:700; }
    .rf-history-scroll{ overflow-x:auto; }
    .rf-history-table{
      width:100%;
      min-width:720px;
      border-collapse:collapse;
      font-size:11.5px;
    }
    .rf-history-table th{
      padding:11px 14px;
      background:#f8fafc;
      border-bottom:1px solid #e2e8f0;
      color:#64748b !important;
      font-size:10px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:0.04em;
      text-align:left;
    }
    .rf-history-table td{
      padding:12px 14px;
      border-bottom:1px solid #eef2f7;
      color:#475569 !important;
      vertical-align:middle;
    }
    .rf-history-table tbody tr:last-child td{ border-bottom:0; }
    .rf-history-table tbody tr:hover td{ background:#f8fafc; }
    .rf-history-table .rf-cell-center{ text-align:center; }
    .rf-history-table .rf-cell-right{ text-align:right; }
    .rf-history-table .rf-cell-name{ color:#1e293b !important; font-weight:700; }
    .rf-history-table .rf-cell-days{ color:#b45309 !important; font-weight:700; }
    .rf-history-table .rf-cell-refund{ color:#059669 !important; font-weight:800; }
    .rf-empty{ padding:24px !important; text-align:center; color:#94a3b8 !important; font-style:italic; }
    #tab-refund .rf-icon-btn{
      width:30px;
      height:30px;
      padding:0;
      border:1px solid transparent;
      border-radius:7px;
      background:transparent;
      color:#94a3b8 !important;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }
    #tab-refund .rf-icon-btn:hover{ border-color:#fecdd3; background:#fff1f2; color:#e11d48 !important; }
    .rf-modal{
      position:fixed;
      inset:0;
      z-index:220;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px;
      background:rgba(15,23,42,0.66);
      backdrop-filter:blur(5px);
    }
    .rf-modal-card{
      position:relative;
      width:100%;
      max-width:370px;
      padding:22px;
      border:1px solid #e2e8f0;
      border-radius:14px;
      background:#ffffff;
      box-shadow:0 24px 55px rgba(15,23,42,0.28);
      text-align:center;
    }
    .rf-modal-close{ position:absolute; top:10px; right:10px; }
    .rf-modal-title{
      margin:0 30px 16px;
      color:#1e293b !important;
      font-size:15px;
      font-weight:700;
    }
    .rf-qr-frame{
      display:inline-flex;
      padding:10px;
      border:1px solid #e2e8f0;
      border-radius:12px;
      background:#ffffff;
      box-shadow:inset 0 1px 3px rgba(0,0,0,0.05);
    }
    .rf-qr-image{ display:block; width:224px; height:224px; object-fit:contain; }
    .rf-qr-details{ margin:14px 0; display:flex; flex-direction:column; gap:4px; }
    .rf-qr-details p{ margin:0; font-size:11.5px; color:#64748b !important; }
    .rf-qr-details .rf-qr-bank{ color:#2563eb !important; font-weight:700; }
    .rf-qr-details .rf-qr-amount{ color:#059669 !important; font-size:15px; font-weight:800; }
    .rf-toast{
      position:fixed;
      right:20px;
      bottom:20px;
      z-index:240;
      max-width:min(360px, calc(100vw - 40px));
      padding:11px 14px;
      border-radius:9px;
      background:#059669;
      color:#ffffff !important;
      box-shadow:0 12px 30px rgba(15,23,42,0.22);
      display:flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      font-weight:700;
      transform:translateY(0);
      opacity:1;
      transition:opacity 0.2s ease, transform 0.2s ease;
    }
    .rf-hidden{ display:none !important; }
    .rf-toast.rf-toast-hidden{ opacity:0; transform:translateY(18px); pointer-events:none; }
    @media (max-width:900px){
      .rf-grid{ grid-template-columns:1fr; }
    }
    @media (max-width:720px){
      .tabs-nav{
        width:calc(100% - (var(--side-padding) * 2));
        max-width:none;
        overflow-x:auto;
      }
      .tabs-nav .tab-btn{ flex:0 0 auto; padding:9px 14px; }
      .rf-wrap{ margin-top:14px; }
      .rf-heading-card{ align-items:flex-start; }
      .rf-history-header{ align-items:flex-start; flex-direction:column; }
      .rf-history-meta{ width:100%; justify-content:space-between; }
    }
    @media (max-width:560px){
      .rf-heading-card{ flex-direction:column; }
      .rf-heading-card .rf-btn{ width:100%; }
      .rf-form-row,
      .rf-rounding-grid{ grid-template-columns:1fr; }
      .rf-actions{ grid-template-columns:1fr; }
      .rf-actions .rf-btn-primary{ grid-column:auto; }
      .rf-summary-row{ flex-direction:column; gap:2px; }
      .rf-summary-row strong{ text-align:left; }
      .rf-history-meta{ align-items:flex-start; flex-direction:column; }
      .rf-history-meta .rf-btn-danger{ width:100%; }
      .rf-qr-image{ width:200px; height:200px; }
    }

/* Application hardening and accessibility additions */
.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.is-hidden{ display:none !important; }
.input-hint{ margin:6px 0; font-size:11px; color:#64748b !important; }
.co-step-pill-secondary{ background:#dbeafe; }
.output-count{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  margin-left:7px;
  padding:2px 8px;
  border-radius:999px;
  background:#e2e8f0;
  color:#475569 !important;
  font-size:11px;
  font-weight:700;
  vertical-align:middle;
}
button:disabled{
  cursor:not-allowed !important;
  opacity:.48;
  transform:none !important;
  box-shadow:none !important;
}
.btn.compact{ min-height:36px; padding:6px 10px; font-size:11px; }
.diagnostics-panel{
  margin:10px 0 0;
  padding:10px 12px;
  border:1px solid #fed7aa;
  border-radius:9px;
  background:#fff7ed;
}
.diagnostics-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.diagnostics-header strong{ color:#9a3412 !important; font-size:12px; }
.diagnostics-list{ margin:7px 0 0; padding-left:19px; color:#7c2d12; font-size:11.5px; }
.diagnostics-list li + li{ margin-top:3px; }
.connection-status{
  max-width:calc(var(--page-max-width) - 40px);
  margin:-10px auto 14px;
  padding:9px 14px;
  border:1px solid #fcd34d;
  border-radius:9px;
  background:#fffbeb;
  color:#92400e !important;
  font-size:12px;
  font-weight:600;
}
.history-modal[hidden]{ display:none; }
.history-modal:not([hidden]){ display:flex; opacity:1; visibility:visible; }
.history-modal:not([hidden]) .history-content{ transform:translateY(0) scale(1); }
.history-body{ display:flex; flex-direction:column; gap:14px; }
.history-privacy{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:13px 14px;
  border:1px solid #fbbf24;
  border-radius:10px;
  background:#fffbeb;
}
.history-privacy strong{ color:#92400e !important; }
.history-privacy p{ margin:3px 0 0; color:#78350f !important; font-size:12px; }
.history-consent-label{ display:flex; align-items:center; gap:8px; min-height:44px; margin:0; padding:8px 0; white-space:nowrap; font-weight:700; }
.history-consent-label input{ width:20px; height:20px; }
.history-warning{ padding:10px 12px; border:1px solid #fecaca; border-radius:8px; background:#fef2f2; color:#991b1b !important; font-size:12px; }
.history-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.history-filters{ display:grid; grid-template-columns:minmax(180px,1fr) 160px 170px; gap:10px; }
.history-filters label{ margin:0; font-size:11px; font-weight:700; }
.history-filters input,
.history-filters select{ width:100%; min-height:44px; margin-top:4px; padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; }
.history-summary{ color:#64748b !important; font-size:12px; font-weight:600; }
.history-list{ display:flex; flex-direction:column; gap:10px; }
.history-item-title{ margin:0; font-size:13px; color:#1e293b !important; overflow-wrap:anywhere; }
.history-item-meta{ margin:3px 0 0; color:#64748b !important; font-size:11px; }
.history-item .history-preview{ margin-top:10px; }
.history-item-actions button{ min-height:40px; }
.history-pagination button{ min-width:42px; min-height:42px; }
.rf-validation{ padding:9px 11px; border:1px solid #fecaca; border-radius:8px; background:#fef2f2; color:#b91c1c !important; font-size:12px; font-weight:600; }
.rf-input[aria-invalid="true"]{ border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.1); }
.rf-qr-status{ margin:9px 0 0; color:#64748b !important; font-size:11.5px; }
.rf-qr-status.rf-qr-error{ color:#b91c1c !important; font-weight:700; }
.rf-history-actions{ display:flex; justify-content:center; gap:6px; }
.rf-history-actions .rf-btn{ min-height:36px; padding:6px 9px; font-size:11px; }
.copyable-cell,
.pipe-text{ cursor:pointer; }
.clipboard-helper{
  position:fixed;
  left:-9999px;
  top:0;
  width:1px;
  height:1px;
  opacity:0;
}
.app-toast{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:300;
  max-width:min(390px, calc(100vw - 40px));
  padding:11px 14px;
  border-radius:9px;
  background:#059669;
  color:#fff !important;
  box-shadow:0 12px 30px rgba(15,23,42,.22);
  font-size:12px;
  font-weight:700;
  opacity:0;
  pointer-events:none;
  transform:translateY(14px);
  transition:opacity .16s ease, transform .16s ease;
}
.app-toast-visible{ opacity:1; transform:translateY(0); }
.app-toast-error,
.rf-toast.rf-toast-error{ background:#b91c1c; }
.modal-open{ overflow:hidden; }
.copyable-cell:focus-visible,
.pipe-text:focus-visible{ outline:3px solid rgba(79,156,249,.35); outline-offset:-3px; }
.rf-modal:not(.rf-hidden) .rf-modal-card{ animation:rf-modal-in .16s ease-out; }
@keyframes rf-modal-in{ from{ opacity:0; transform:translateY(8px) scale(.98); } }

@media (pointer:coarse), (max-width:720px){
  button,
  .btn,
  .history-btn,
  .fmt-seg-btn,
  .rf-preset,
  .rf-btn,
  .rf-btn-primary,
  .rf-btn-danger,
  .rf-icon-btn,
  .co-btn-ghost,
  .co-btn-primary{ min-height:44px; }
  .copyable-cell,
  .pipe-text{ min-height:44px; display:flex; align-items:center; }
  input:not([type="radio"]):not([type="checkbox"]),
  select{ min-height:44px; }
}
@media (max-width:720px){
  .history-privacy{ align-items:flex-start; flex-direction:column; }
  .history-filters{ grid-template-columns:1fr; }
  .toolbar{ flex-wrap:wrap; }
  .toolbar-title{ flex:1 0 100%; }
  .toolbar-spacer{ display:none; }
  .rf-history-table thead{ display:none; }
  .rf-history-table,
  .rf-history-table tbody,
  .rf-history-table tr,
  .rf-history-table td{ display:block; width:100%; }
  .rf-history-table tr{ padding:10px; border-bottom:1px solid #e2e8f0; }
  .rf-history-table td{ padding:5px 0; border:0; text-align:left !important; }
  .rf-history-table td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:2px;
    color:#64748b;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
  }
  .rf-history-actions{ justify-content:flex-start; }
}
@media (max-height:760px) and (min-width:721px){
  .app-header{ margin-top:12px; margin-bottom:12px; padding:15px 20px; }
  .tabs-nav{ margin-bottom:12px; }
  textarea#input,
  .output-area{ height:clamp(280px, 38vh, 360px); min-height:280px; }
}