:root{
    --bg-0:#0A0E14;
    --bg-1:#111722;
    --bg-2:#161D2B;
    --panel:#141B27;
    --panel-border:#232D3F;
    --hairline:#1E2836;
    --text-hi:#E9EEF5;
    --text-mid:#8C99AD;
    --text-low:#5A6578;
    --accent:#5EEAD4;
    --accent-dim:#2E6E63;
    --accent-glow:rgba(94,234,212,0.16);
    --amber:#F0B849;
    --danger:#F0665E;
    --mono:'JetBrains Mono',monospace;
    --sans:'Inter',sans-serif;
    --radius:10px;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{height:100%;}
  body{
    background:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(94,234,212,0.06), transparent 60%),
      radial-gradient(ellipse 700px 400px at 100% 10%, rgba(94,234,212,0.04), transparent 55%),
      var(--bg-0);
    color:var(--text-hi);
    font-family:var(--sans);
    min-height:100%;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--accent);color:var(--bg-0);}

  a,button,input{font-family:inherit;}

  /* ---------- top bar ---------- */
  .topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:22px 40px;
    border-bottom:1px solid var(--hairline);
    background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
  }
  .brand{display:flex;align-items:center;gap:12px;}
  .brand-mark{
    width:34px;height:34px;border-radius:8px;
    background:linear-gradient(135deg, var(--accent), #2FB3A0);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 1px rgba(94,234,212,0.3), 0 4px 18px var(--accent-glow);
  }
  .brand-mark svg{width:18px;height:18px;}
  .brand-name{font-weight:800;font-size:15.5px;letter-spacing:0.06em;}
  .brand-name span{color:var(--accent);}
  .brand-sub{font-size:11px;color:var(--text-low);letter-spacing:0.08em;margin-top:1px;font-family:var(--mono);text-transform:uppercase;}

  .status-pill{
    display:flex;align-items:center;gap:8px;
    padding:7px 14px;border-radius:100px;
    border:1px solid var(--panel-border);
    background:var(--panel);
    font-family:var(--mono);font-size:11.5px;color:var(--text-mid);
  }
  .status-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse 2.4s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}

  /* ---------- layout ---------- */
  .shell{
    max-width:1180px;margin:0 auto;
    padding:56px 40px 100px;
    display:grid;grid-template-columns:1.15fr 0.85fr;gap:28px;
  }
  @media(max-width:920px){.shell{grid-template-columns:1fr;padding:32px 20px 60px;}}

  .hero{grid-column:1/-1;margin-bottom:44px;}
  .hero-eyebrow{
    font-family:var(--mono);font-size:12px;color:var(--accent);
    letter-spacing:0.14em;text-transform:uppercase;margin-bottom:14px;
    display:flex;align-items:center;gap:10px;
  }
  .hero-eyebrow::before{content:'';width:22px;height:1px;background:var(--accent);}
  .hero h1{
    font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.12;letter-spacing:-0.02em;
    max-width:680px;
  }
  .hero h1 em{font-style:normal;color:var(--accent);}
  .hero p{margin-top:16px;color:var(--text-mid);font-size:15px;max-width:520px;line-height:1.6;}

  /* signature: live hexdump strip */
  .hexstrip{
    margin-top:28px;height:46px;border-radius:8px;
    background:var(--bg-1);border:1px solid var(--hairline);
    overflow:hidden;position:relative;display:flex;align-items:center;
    font-family:var(--mono);font-size:12px;color:var(--text-low);
    white-space:nowrap;
  }
  .hexstrip-track{display:flex;padding-left:16px;gap:10px;animation:scrollhex 22s linear infinite;}
  .hexstrip.encrypting .hexstrip-track{animation-duration:4s;color:var(--accent);}
  @keyframes scrollhex{from{transform:translateX(0);}to{transform:translateX(-50%);}}

  /* ---------- panel base ---------- */
  .panel{
    background:var(--panel);
    border:1px solid var(--panel-border);
    border-radius:var(--radius);
    padding:26px;
  }
  .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
  .panel-title{font-size:13px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-hi);}
  .panel-title span{color:var(--text-low);font-weight:500;text-transform:none;letter-spacing:0;margin-left:8px;font-family:var(--mono);font-size:11.5px;}

  /* ---------- mode toggle ---------- */
  .mode-toggle{
    display:flex;background:var(--bg-1);border:1px solid var(--panel-border);
    border-radius:8px;padding:3px;gap:3px;
  }
  .mode-toggle button{
    flex:1;padding:10px 0;border:none;background:transparent;color:var(--text-mid);
    font-size:13px;font-weight:600;border-radius:6px;cursor:pointer;transition:.15s;
  }
  .mode-toggle button.active{background:var(--accent);color:var(--bg-0);}
  .mode-toggle button:not(.active):hover{color:var(--text-hi);}

  /* ---------- dropzone ---------- */
  .dropzone{
    margin-top:18px;
    border:1.5px dashed var(--panel-border);
    border-radius:var(--radius);
    padding:38px 20px;
    text-align:center;
    cursor:pointer;
    transition:.18s;
    position:relative;
  }
  .dropzone:hover, .dropzone.drag{
    border-color:var(--accent);
    background:var(--accent-glow);
  }
  .dropzone svg{width:30px;height:30px;color:var(--text-low);margin-bottom:12px;}
  .dropzone:hover svg, .dropzone.drag svg{color:var(--accent);}
  .dropzone-title{font-size:14px;font-weight:600;color:var(--text-hi);}
  .dropzone-sub{font-size:12px;color:var(--text-low);margin-top:5px;font-family:var(--mono);}
  #fileInput{display:none;}

  .filelist{margin-top:16px;display:flex;flex-direction:column;gap:8px;}
  .file-row{
    display:flex;align-items:center;gap:12px;
    background:var(--bg-1);border:1px solid var(--hairline);border-radius:8px;
    padding:10px 12px;
  }
  .file-ico{
    width:32px;height:32px;border-radius:6px;flex-shrink:0;
    background:var(--bg-2);display:flex;align-items:center;justify-content:center;color:var(--accent);
  }
  .file-ico svg{width:16px;height:16px;}
  .file-meta{flex:1;min-width:0;}
  .file-name-row{display:flex;align-items:center;gap:6px;}
  .file-name{
    font-size:13px;font-weight:600;color:var(--text-hi);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;
  }
  .file-rename-btn{
    background:none;border:none;color:var(--text-low);cursor:pointer;padding:2px;
    display:flex;align-items:center;flex-shrink:0;
  }
  .file-rename-btn:hover{color:var(--accent);}
  .file-rename-btn svg{width:13px;height:13px;}
  .file-size{font-size:11px;color:var(--text-low);font-family:var(--mono);margin-top:2px;}
  .file-rename-input{
    background:var(--bg-2);border:1px solid var(--accent);border-radius:5px;
    color:var(--text-hi);font-size:13px;padding:3px 7px;width:100%;max-width:220px;
    font-family:var(--sans);
  }
  .file-remove{
    background:none;border:none;color:var(--text-low);cursor:pointer;flex-shrink:0;
    padding:4px;border-radius:5px;display:flex;
  }
  .file-remove:hover{color:var(--danger);background:rgba(240,102,94,0.1);}
  .file-remove svg{width:15px;height:15px;}

  /* ---------- fields ---------- */
  .field{margin-top:18px;}
  .field label{
    display:block;font-size:11.5px;font-weight:600;color:var(--text-mid);
    letter-spacing:0.04em;text-transform:uppercase;margin-bottom:8px;
  }
  .pw-wrap{position:relative;}
  .pw-wrap input{
    width:100%;background:var(--bg-1);border:1px solid var(--panel-border);
    border-radius:8px;padding:12px 42px 12px 14px;color:var(--text-hi);
    font-size:14px;font-family:var(--mono);transition:.15s;
  }
  .pw-wrap input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
  .pw-toggle{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);
    background:none;border:none;color:var(--text-low);cursor:pointer;padding:4px;
  }
  .pw-toggle:hover{color:var(--accent);}
  .pw-toggle svg{width:17px;height:17px;}

  .pw-strength{display:flex;gap:4px;margin-top:9px;}
  .pw-strength i{flex:1;height:3px;border-radius:2px;background:var(--hairline);transition:.2s;}
  .pw-strength-label{font-size:11px;color:var(--text-low);margin-top:7px;font-family:var(--mono);}

  .field-hint{font-size:11.5px;color:var(--text-low);margin-top:7px;line-height:1.5;}

  /* ---------- primary action ---------- */
  .primary-btn{
    width:100%;margin-top:24px;padding:15px;border:none;border-radius:8px;
    background:var(--accent);color:var(--bg-0);font-weight:700;font-size:14px;
    letter-spacing:0.02em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;
    transition:.15s;box-shadow:0 6px 24px var(--accent-glow);
  }
  .primary-btn:hover{background:#79f2df;transform:translateY(-1px);}
  .primary-btn:disabled{background:var(--panel-border);color:var(--text-low);cursor:not-allowed;box-shadow:none;transform:none;}
  .primary-btn svg{width:16px;height:16px;}

  .progress-wrap{margin-top:14px;display:none;}
  .progress-wrap.show{display:block;}
  .progress-track{height:4px;background:var(--bg-1);border-radius:3px;overflow:hidden;}
  .progress-fill{height:100%;width:0%;background:var(--accent);transition:width .2s;}
  .progress-label{font-size:11px;color:var(--text-low);font-family:var(--mono);margin-top:8px;display:flex;justify-content:space-between;}

  /* ---------- results ---------- */
  .result-actions{margin-top:16px;display:flex;flex-direction:column;gap:8px;}
  .result-row{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:var(--bg-1);border:1px solid var(--hairline);border-radius:8px;padding:11px 13px;
  }
  .result-row-name{font-size:12.5px;font-family:var(--mono);color:var(--text-hi);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .icon-btn{
    background:var(--bg-2);border:1px solid var(--panel-border);border-radius:6px;
    padding:7px 9px;color:var(--text-mid);cursor:pointer;display:flex;align-items:center;gap:6px;
    font-size:11.5px;font-weight:600;flex-shrink:0;transition:.15s;
  }
  .icon-btn:hover{color:var(--accent);border-color:var(--accent-dim);}
  .icon-btn svg{width:13px;height:13px;}

  .bundle-actions{display:flex;gap:8px;margin-top:12px;}
  .bundle-actions .icon-btn{flex:1;justify-content:center;padding:10px;}

  /* ---------- side rail ---------- */
  .rail{display:flex;flex-direction:column;gap:20px;}
  .spec-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:10px 0;border-bottom:1px solid var(--hairline);font-size:12.5px;
  }
  .spec-row:last-child{border-bottom:none;}
  .spec-key{color:var(--text-low);font-family:var(--mono);}
  .spec-val{color:var(--text-hi);font-weight:600;font-family:var(--mono);}

  .backend-select{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
  .backend-opt{
    display:flex;align-items:center;gap:10px;padding:11px 12px;
    border:1px solid var(--panel-border);border-radius:8px;cursor:pointer;transition:.15s;
    background:var(--bg-1);
  }
  .backend-opt.active{border-color:var(--accent);background:var(--accent-glow);}
  .backend-opt.disabled{opacity:0.45;cursor:not-allowed;}
  .backend-dot{width:8px;height:8px;border-radius:50%;background:var(--panel-border);flex-shrink:0;}
  .backend-opt.active .backend-dot{background:var(--accent);box-shadow:0 0 6px var(--accent);}
  .backend-text{flex:1;}
  .backend-name{font-size:13px;font-weight:600;color:var(--text-hi);}
  .backend-desc{font-size:11px;color:var(--text-low);margin-top:1px;font-family:var(--mono);}
  .backend-tag{
    font-size:9.5px;font-weight:700;letter-spacing:0.05em;padding:3px 7px;border-radius:4px;
    background:var(--bg-2);color:var(--text-low);text-transform:uppercase;flex-shrink:0;
  }
  .backend-opt.active .backend-tag{background:var(--accent);color:var(--bg-0);}

  .log-panel{font-family:var(--mono);font-size:11.5px;line-height:1.9;color:var(--text-mid);max-height:220px;overflow-y:auto;}
  .log-panel .log-line{white-space:pre-wrap;word-break:break-all;}
  .log-panel .log-line.ok{color:var(--accent);}
  .log-panel .log-line.warn{color:var(--amber);}
  .log-panel .log-line.err{color:var(--danger);}
  .log-panel::-webkit-scrollbar{width:6px;}
  .log-panel::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:3px;}

  .toast{
    position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--bg-2);border:1px solid var(--panel-border);border-radius:8px;
    padding:12px 18px;font-size:13px;color:var(--text-hi);display:flex;align-items:center;gap:10px;
    opacity:0;pointer-events:none;transition:.25s;box-shadow:0 12px 30px rgba(0,0,0,0.4);z-index:100;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  .toast.err{border-color:rgba(240,102,94,0.4);}
  .toast-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;}
  .toast.err .toast-dot{background:var(--danger);}

  footer{
    max-width:1180px;margin:0 auto;padding:0 40px 50px;
    display:flex;justify-content:space-between;color:var(--text-low);font-size:11.5px;font-family:var(--mono);
  }
  @media(max-width:920px){footer{padding:0 20px 40px;flex-direction:column;gap:8px;}}