/* ── niemil-ai global styles ──────────────────────────────────────────────── */
:root {
  --bg:       #08080f;
  --bg2:      #0f0f1a;
  --bg3:      #161625;
  --border:   #1e1e2e;
  --border2:  #2a2a3e;
  --text:     #e8e8f0;
  --text2:    #888899;
  --text3:    #555566;
  --accent:   #00c2ff;
  --purple:   #bf5af2;
  --green:    #30d158;
  --orange:   #ff9500;
  --red:      #ff453a;
  --radius:   14px;
  --radius-sm:8px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  font-size:15px;
  line-height:1.6;
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.8}

/* ── Layout ── */
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.container-sm{max-width:680px;margin:0 auto;padding:0 20px}
.container-xs{max-width:480px;margin:0 auto;padding:0 20px}

/* ── Cards ── */
.card{
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
}
.card-sm{padding:16px}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:var(--radius-sm);border:none;
  font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;
  text-decoration:none;white-space:nowrap;
}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,#00c2ff,#0066ff);color:#fff}
.btn-primary:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}
.btn-ghost{background:var(--bg3);border:1px solid var(--border2);color:var(--text2)}
.btn-ghost:hover:not(:disabled){border-color:var(--border2);color:var(--text);background:var(--bg3)}
.btn-danger{background:#ff453a22;border:1px solid #ff453a44;color:var(--red)}
.btn-sm{padding:7px 14px;font-size:13px}
.btn-lg{padding:14px 28px;font-size:16px;border-radius:12px}
.btn-full{width:100%}

/* ── Inputs ── */
.input,.textarea,.select{
  width:100%;background:var(--bg3);border:1px solid var(--border2);
  border-radius:var(--radius-sm);padding:11px 14px;color:var(--text);
  font-size:14px;font-family:inherit;outline:none;transition:border .15s;
}
.input:focus,.textarea:focus,.select:focus{border-color:var(--accent)}
.textarea{resize:vertical;min-height:120px;line-height:1.6}
.select{cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;
}
.input-group{display:flex;flex-direction:column;gap:6px}
.input-group label{font-size:13px;color:var(--text2);font-weight:500}

/* ── Nav ── */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(8,8,15,.85);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:0 20px;
}
.nav-inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:58px;
}
.nav-logo{
  font-size:17px;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.nav-right{display:flex;align-items:center;gap:10px}
.lang-select{
  background:var(--bg3);border:1px solid var(--border2);border-radius:8px;
  color:var(--text2);font-size:13px;padding:6px 28px 6px 10px;cursor:pointer;
  appearance:none;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;
}

/* ── Tool cards ── */
.tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}
.tool-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;cursor:pointer;transition:all .18s;text-decoration:none;color:var(--text);
  display:block;
}
.tool-card:hover{transform:translateY(-3px);border-color:var(--card-color,var(--accent));
  box-shadow:0 8px 30px rgba(0,0,0,.4)}
.tool-emoji{font-size:30px;margin-bottom:10px;display:block}
.tool-name{font-size:15px;font-weight:700;margin-bottom:4px;color:var(--card-color,var(--text))}
.tool-desc{font-size:13px;color:var(--text3);line-height:1.5}

/* ── Section headers ── */
.section-label{
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text3);margin-bottom:14px;
}
.section-label::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── Result box ── */
.result-box{
  background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);
  padding:22px;line-height:1.8;font-size:14.5px;
}
.result-box strong{color:var(--accent);font-weight:700}
.result-box ul{padding-left:18px;margin:6px 0}
.result-box li{margin:4px 0}
.result-box em{font-style:italic;color:var(--text2)}

/* ── Code badge ── */
.code-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg3);border:1px solid var(--border2);border-radius:6px;
  padding:4px 10px;font-family:monospace;font-size:13px;color:var(--text2);
}

/* ── Progress bar ── */
.progress{height:4px;background:var(--bg3);border-radius:2px;overflow:hidden}
.progress-bar{height:100%;background:var(--accent);transition:width .3s}

/* ── Alerts ── */
.alert{border-radius:var(--radius-sm);padding:11px 14px;font-size:13.5px}
.alert-error{background:#ff453a15;border:1px solid #ff453a44;color:var(--red)}
.alert-success{background:#30d15815;border:1px solid #30d15844;color:var(--green)}
.alert-info{background:var(--accent)15;border:1px solid var(--accent)33;color:var(--accent)}

/* ── Loading spinner ── */
.spinner{
  width:20px;height:20px;border:2px solid var(--border2);
  border-top-color:var(--accent);border-radius:50%;
  animation:spin .7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}

.loading-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(8,8,15,.8);backdrop-filter:blur(4px);
  z-index:200;flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
.loading-overlay.active{display:flex}
.loading-text{color:var(--text2);font-size:14px}

/* ── CIA page specific ── */
.cia-header{
  background:linear-gradient(180deg,#0a1628 0%,var(--bg) 100%);
  padding:40px 20px 30px;text-align:center;
  border-bottom:1px solid #0d2040;
}
.cia-logo{
  font-size:48px;margin-bottom:12px;
  filter:drop-shadow(0 0 20px #00c2ff44);
}
.cia-title{
  font-size:28px;font-weight:900;letter-spacing:-.5px;
  background:linear-gradient(135deg,#00c2ff,#0066ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.cia-subtitle{color:#3a5a80;font-size:13px;letter-spacing:.15em;text-transform:uppercase;margin-top:4px}

/* ── Drop zone ── */
.dropzone{
  border:2px dashed var(--border2);border-radius:var(--radius);
  padding:48px 24px;text-align:center;cursor:pointer;transition:all .2s;
  background:var(--bg2);
}
.dropzone:hover,.dropzone.drag-over{border-color:var(--accent);background:var(--accent)05}
.dropzone-icon{font-size:40px;margin-bottom:12px;opacity:.6}
.dropzone-text{color:var(--text2);font-size:14px}
.dropzone-sub{color:var(--text3);font-size:12px;margin-top:6px}
.dropzone img{max-height:200px;max-width:100%;border-radius:10px;object-fit:contain}

/* ── Code entry modal ── */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
  z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal{
  background:var(--bg2);border:1px solid var(--border2);border-radius:20px;
  padding:36px;width:100%;max-width:400px;text-align:center;
}
.modal-logo{font-size:52px;margin-bottom:16px}
.modal-title{font-size:24px;font-weight:800;margin-bottom:6px}
.modal-sub{color:var(--text3);font-size:14px;margin-bottom:24px}
.modal .input{text-align:center;font-size:18px;letter-spacing:3px;text-transform:uppercase;font-weight:700}

/* ── Tabs ── */
.tabs{display:flex;gap:4px;background:var(--bg3);border-radius:10px;padding:4px}
.tab{
  flex:1;padding:9px 16px;border-radius:8px;border:none;background:none;
  color:var(--text3);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;
}
.tab.active{background:var(--bg2);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.3)}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* ── Responsive ── */
@media(max-width:600px){
  .tools-grid{grid-template-columns:1fr 1fr}
  .nav-inner{height:52px}
  .card{padding:16px}
  .modal{padding:24px}
}
@media(max-width:380px){
  .tools-grid{grid-template-columns:1fr}
}

/* ── Animations ── */
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .3s ease forwards}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.pulse{animation:pulse 1.5s ease infinite}