/* styles.css — fixes for select dropdown visibility + centered large buttons */

/* Variables */
:root{
  --bg: #071428;
  --panel: #071726;
  --muted: #9aa6b2;
  --accent: #06b6d4;
  --accent-2: #60f0ff;
  --text: #e6eef6;
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --gap: 14px;
  --maxwidth: 1200px;

  --btn-shadow: 0 8px 24px rgba(2,10,20,0.45);
  --btn-sm-shadow: 0 6px 14px rgba(2,10,20,0.35);
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;background:linear-gradient(180deg,var(--bg) 0%, #04111a 100%);color:var(--text);-webkit-font-smoothing:antialiased}
.container{max-width:var(--maxwidth);margin:18px auto;padding:20px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);box-shadow:0 12px 46px rgba(2,6,23,0.6)}

/* Header */
.top{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.brand h1{margin:0;font-size:20px}
.brand .tag{margin:4px 0 0 0;color:var(--muted);font-size:13px}
.toolbar{display:flex;justify-content:space-between;align-items:center}
.selects{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Styled select with custom arrow, no native white background inside most browsers */
.select-group,.select-tool{
  background:linear-gradient(180deg,#052233,#042435);
  border:1px solid rgba(255,255,255,0.04);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  min-width:170px;
  font-size:14px;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow: none;

  /* Remove native appearance to allow consistent styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* custom arrow using data URI SVG (stroke=currentColor) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' stroke='%23e6eef6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right:40px; /* room for arrow */
}

/* Make options more visible where browsers respect it */
select option{
  background-color: #071726;
  color: var(--text);
}

/* On focus/hover give small lift */
.select-group:focus, .select-tool:focus, .select-group:hover, .select-tool:hover{
  transform:translateY(-2px);
  box-shadow: var(--btn-sm-shadow);
  outline: none;
}

/* Options area */
.tool-options{margin-top:8px;padding:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));border-radius:10px;border:1px solid rgba(255,255,255,0.02);display:none;gap:10px;flex-wrap:wrap;box-shadow: 0 8px 30px rgba(2,6,23,0.25)}

/* Main input/output panels - separated from header by margin */
.main{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start;margin-top:22px}
.panel{background:var(--panel);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.panel-title{margin:0;font-size:14px}
.panel-actions{display:flex;gap:8px;align-items:center}

/* Buttons and icons */
button{font-family:inherit;display:inline-flex;align-items:center;gap:8px}
.icon{width:16px;height:16px;flex:0 0 16px;display:inline-block;vertical-align:middle}
.icon-lg{width:20px;height:20px;flex:0 0 20px;display:inline-block;vertical-align:middle}

/* Small button */
.btn-small{
  background:linear-gradient(180deg,#0b2630,#09202a);
  border:1px solid rgba(255,255,255,0.04);
  color:var(--text);
  padding:7px 10px;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: none;
}
.btn-small:hover{ transform:translateY(-3px); box-shadow: var(--btn-sm-shadow); }
.btn-small:active{ transform:translateY(0); opacity:0.94; }

/* Ghost button */
.btn-ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
  padding:9px 12px;
  border-radius:10px;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.btn-ghost:hover{ background:rgba(255,255,255,0.02); transform:translateY(-3px); }

/* Primary large - centered content and equal widths */
.btn-large{
  flex:1;
  padding:14px 18px;
  border-radius:14px;
  font-size:16px;
  font-weight:700;
  border:0;
  cursor:pointer;
  box-shadow:var(--btn-shadow);
  transition:transform .14s ease, box-shadow .14s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  min-height:56px; /* ensure vertical centering */
  line-height:1;
}

/* Primary color */
.btn-primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#002;
}
.btn-primary:hover{ transform:translateY(-4px); box-shadow: 0 18px 40px rgba(6,182,212,0.18); }
.btn-primary:active{ transform:translateY(-1px); }

/* Secondary style */
.btn-secondary{
  background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  border:1px solid rgba(255,255,255,0.06);
  color:var(--text);
}
.btn-secondary:hover{ transform:translateY(-3px); box-shadow: var(--btn-sm-shadow); }
.btn-secondary:active{ transform:translateY(0); }

/* Textarea */
textarea{width:100%;min-height:360px;padding:14px;background:linear-gradient(180deg,#021226,#031826);color:var(--text);border:1px solid rgba(255,255,255,0.04);border-radius:10px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Courier New",monospace;font-size:14px;box-shadow: inset 0 1px 0 rgba(255,255,255,0.02)}

/* Footer */
.footer{margin-top:18px;display:flex;flex-direction:column;gap:12px;align-items:center}
.action-row{display:flex;gap:18px;justify-content:center;width:100%;max-width:760px}
.meta{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:13px;margin-top:6px}
.badge{background:var(--glass);padding:8px;border-radius:10px}
.kbd{background:rgba(255,255,255,0.02);padding:6px;border-radius:6px}

/* Helpers */
.hidden{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Responsive */
@media (max-width:1000px){
  .main{grid-template-columns:1fr;gap:12px}
  textarea{min-height:260px}
  .select-group{min-width:140px}
  .select-tool{min-width:150px}
  .action-row{flex-direction:row;gap:12px}
}
@media (max-width:420px){
  .container{padding:12px}
  textarea{min-height:200px;font-size:14px}
  .btn-large{font-size:15px;padding:12px;border-radius:12px}
  .select-group,.select-tool{min-width:120px;font-size:13px;padding:8px;border-radius:10px}
}