/* ==========================================================================
   OnlyAgent — app design system (matches the onlyagent.us landing page)
   src/assets/css/onlyagent-theme.css  ·  link LAST in the shells.
   Visual only — no JS/crypto changes. Restyles the WebCrypt app into a
   card-based, professional dark UI.
   ========================================================================== */

:root{
  --bg:#070b10; --bg-2:#0c131c; --panel:#0f1822; --panel-2:#13202c;
  --line:#1d2a38; --line-2:#26384a; --text:#e8eef5; --muted:#93a3b5;
  --accent:#3ad6c4; --accent-2:#2f8fff; --danger:#ff6b6b; --ok:#3ad6c4;
  --radius:16px; --radius-sm:11px; --max:980px;
  --grad:linear-gradient(135deg,var(--accent),var(--accent-2));
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1000px 520px at 82% -8%,rgba(47,143,255,.13),transparent 60%),
    radial-gradient(860px 520px at 4% 2%,rgba(58,214,196,.10),transparent 55%),
    var(--bg);
  background-attachment:fixed;min-height:100vh;
}
a{color:var(--accent);text-decoration:none;transition:.15s}
a:hover{color:var(--accent-2)}
h1,h2,h3,h4,h5,h6{margin:0;letter-spacing:-.02em;font-weight:700;line-height:1.18}
p{margin:0 0 1rem}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}
::selection{background:rgba(58,214,196,.28)}
font{font-size:inherit!important}

/* ---------- top nav (custom .oa-nav, replaces Bootstrap navbar) ---------- */
.oa-nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:rgba(7,11,16,.8);border-bottom:1px solid var(--line)}
.oa-nav .inner{max-width:var(--max);margin:0 auto;height:62px;display:flex;
  align-items:center;justify-content:space-between;padding:0 22px;gap:16px}
.oa-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--text)}
.oa-brand:hover{color:var(--text)}
.oa-brand .oa-dot{flex:none;width:22px;height:22px;border-radius:6px;background:var(--grad)}
.oa-brand img{height:30px;width:auto;display:block}
.oa-navlinks{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.oa-navlinks a{color:var(--muted);font-size:14px;font-weight:500;padding:8px 12px;border-radius:9px}
.oa-navlinks a:hover{color:var(--text);background:var(--panel)}
.oa-navlinks a.active{color:var(--text);background:var(--panel);border:1px solid var(--line)}
.oa-navlinks a i{margin-right:6px;color:var(--accent)}
.oa-navlinks .sep{width:1px;height:22px;background:var(--line);margin:0 6px}
@media(max-width:680px){.oa-navlinks a span{display:none}.oa-navlinks a i{margin:0}}

/* legacy bootstrap navbar fallback (in case a page still uses it) */
.navbar.bg-dark{background:rgba(7,11,16,.8)!important;border-bottom:1px solid var(--line)}
.navbar .navbar-brand,.navbar a{color:var(--muted)!important}
.navbar .navbar-brand:hover{color:var(--text)!important}
.navbar .fa{color:var(--accent)}

/* ---------- layout ---------- */
.oa-main{max-width:var(--max);margin:0 auto;padding:0 22px 90px}
.oa-page-head{text-align:center;padding:46px 0 30px}
.oa-page-head .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:var(--accent);background:rgba(58,214,196,.08);border:1px solid rgba(58,214,196,.25);
  padding:6px 13px;border-radius:999px;margin-bottom:16px}
.oa-page-head h1{font-size:clamp(26px,4.4vw,40px);font-weight:800}
.oa-page-head p{color:var(--muted);max-width:56ch;margin:14px auto 0;font-size:17px}

/* ---------- card (wraps tool forms + content) ---------- */
.oa-card,#container.oa-content{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;margin:0 auto;max-width:680px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
#container.oa-content{display:block}
#container fieldset{background:transparent;border:0;padding:0;margin:0}
#container h4{font-size:16px;font-weight:600;color:var(--muted);text-align:center;margin:0 auto 22px;max-width:50ch}
#container h4 font{font-size:16px!important}
#container h3{font-size:15px;color:var(--text);margin-bottom:10px;font-weight:600}
#container > div > h1{font-size:18px;color:var(--muted);text-align:center}

/* ---------- form controls ---------- */
label{display:block;color:var(--text);font-weight:500;font-size:14px;margin:0 0 7px}
input[type="text"],input[type="email"],input[type="password"],input[type="search"],
input:not([type]),textarea,select,.form-control{
  width:100%;background:var(--bg-2)!important;color:var(--text)!important;
  border:1px solid var(--line)!important;border-radius:var(--radius-sm)!important;
  padding:13px 15px!important;font-family:var(--sans);font-size:15px;margin-bottom:14px;
  transition:border-color .18s, box-shadow .18s;
}
textarea{min-height:54px;resize:vertical;line-height:1.5}
#message{min-height:150px}
input::placeholder,textarea::placeholder{color:var(--muted)!important;opacity:1}
input:focus,textarea:focus,select:focus,.form-control:focus,input.focus,textarea.focus{
  outline:none!important;border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(58,214,196,.15)!important;background:var(--bg-2)!important;color:var(--text)!important;
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 19px,calc(100% - 14px) 19px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px!important}
select option{background:var(--panel);color:var(--text)}
fieldset{border:0;padding:0;margin:0}
input[readonly]{background:var(--panel-2)!important;color:var(--accent)!important;font-family:var(--mono)}

/* radio groups -> pill segment look */
#action,form#action{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px;color:var(--muted)}
#action label,center label{display:inline-flex;align-items:center;gap:7px;margin:0;
  background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--text);font-size:14px;cursor:pointer}
input[type="radio"],input[type="checkbox"]{accent-color:var(--accent);width:auto;margin:0}
center{display:block}

/* file input */
input[type="file"]{width:100%;color:var(--muted);background:var(--bg-2);border:1px dashed var(--line-2);
  border-radius:var(--radius-sm);padding:18px;cursor:pointer;margin-bottom:14px}
input[type="file"]::file-selector-button{background:var(--panel-2);color:var(--text);border:1px solid var(--line);
  border-radius:9px;padding:9px 15px;margin-right:14px;cursor:pointer;font-family:var(--sans);font-weight:600}
input[type="file"]::file-selector-button:hover{border-color:var(--accent)}
.block,.block-inner{background:transparent;border:0;padding:0;margin:0 0 14px}
.block .block-inner{padding:0}
.outline{border:0!important}
#filedetails,#results{color:var(--muted);font-size:14px}

/* ---------- buttons ---------- */
.btn,button,#onlykey_start,#submit,a.oa-btn{
  font-family:var(--sans);font-weight:700;font-size:15px;border-radius:var(--radius-sm);
  padding:13px 20px;cursor:pointer;transition:.15s;border:1px solid transparent;display:inline-flex;
  align-items:center;justify-content:center;gap:8px;
}
/* primary submit / search */
button[type="submit"],#onlykey_start,#submit,.btn-success,.oa-btn-primary{
  width:100%;background:var(--grad)!important;color:#04121a!important;border:0!important;
  box-shadow:0 10px 26px rgba(47,143,255,.22);margin-top:6px;
}
button[type="submit"]:hover,#onlykey_start:hover,#submit:hover,.btn-success:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-secondary,.btn-light,.btn-default{background:var(--panel-2)!important;border:1px solid var(--line)!important;color:var(--text)!important;width:auto}
.btn-danger{background:var(--danger)!important;color:#1a0606!important;border:0!important}
/* generic non-action buttons */
button{background:var(--panel-2);color:var(--text);border:1px solid var(--line)}
button:hover{border-color:var(--accent)}

/* ---------- home page (.oa-tools grid) ---------- */
.oa-hero{text-align:center;padding:54px 0 8px}
.oa-hero h1{font-size:clamp(30px,5.2vw,50px);font-weight:800;max-width:16ch;margin:0 auto}
.oa-hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.oa-hero p{color:var(--muted);font-size:18px;max-width:54ch;margin:18px auto 0}
.oa-tools{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:40px 0}
@media(max-width:680px){.oa-tools{grid-template-columns:1fr}}
.oa-tool{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;transition:.18s;color:var(--text)}
.oa-tool:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.35);color:var(--text)}
.oa-tool .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:20px;
  color:#04121a;background:var(--grad);margin-bottom:16px}
.oa-tool h3{font-size:19px;margin-bottom:6px}
.oa-tool p{color:var(--muted);font-size:14.5px;margin:0}
.oa-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}

/* fancy-icons header on tool pages */
#fancy-icons{margin:8px 0 0;font-size:22px}
#fancy-icons .fa{color:var(--accent)}
#fancy-icons .fi-b{color:var(--muted)}
.app-head img{filter:drop-shadow(0 8px 30px rgba(58,214,196,.22))}

/* console / code (password-generator) */
pre{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;overflow:auto;margin-top:6px}
pre code,code{color:var(--accent);font-family:var(--mono);background:transparent}
#messages,#header_messages,#terminal_messages{color:var(--accent)}
.xterm-viewport,.xterm-screen{background:var(--bg-2)!important;border-radius:10px}

/* ---------- modals ---------- */
.modal-content{background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;color:var(--text)!important;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.modal-header,.modal-footer{border-color:var(--line)!important}
.modal-title{color:var(--text)}
.modal-footer button{width:auto}
.close{color:var(--muted);text-shadow:none;opacity:.8}
.close:hover{color:var(--text)}

/* tokenizer chips */
.tokenfield,.tokenizer{background:var(--bg-2)!important;border:1px solid var(--line)!important;border-radius:var(--radius-sm)!important;padding:6px!important;margin-bottom:14px}
.token,.tokenfield .token{background:rgba(58,214,196,.14)!important;border:1px solid rgba(58,214,196,.35)!important;color:var(--text)!important;border-radius:8px!important}
.token .close{color:var(--accent)}

/* alerts */
.alert-success{background:rgba(58,214,196,.1)!important;border:1px solid rgba(58,214,196,.35)!important;color:var(--text)!important;border-radius:var(--radius-sm)}
.alert-danger,.text-danger{color:var(--danger)!important}
.alert-warning{background:rgba(255,172,2,.08)!important;border:1px solid rgba(255,172,2,.3)!important;color:#ffce6a!important;border-radius:var(--radius-sm)}

/* ---------- footer ---------- */
.oa-footer{border-top:1px solid var(--line);padding:34px 22px;margin-top:30px}
.oa-footer .inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.oa-footer a{color:var(--muted)}.oa-footer a:hover{color:var(--text)}

/* scrollbar */
*{scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--line-2)}