:root{
  /* Brand palette extracted from logo */
  --brand-1: #043d63;
  --brand-2: #044064;
  --brand-3: #527088;
  --brand-4: #95a5b3;
  --white: #f1f3f4;

  --bg: #031c2e;
  --card: rgba(255,255,255,0.045);
  --card-2: rgba(255,255,255,0.06);
  --text: var(--white);
  --muted: #c6d0d8;
  --border: rgba(255,255,255,0.14);

  --primary: #0f7abf;
  --danger: #ff4d4f;
  --ok: #2ecc71;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,0.25);
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 900px at 20% 0%, rgba(15,122,191,0.20), rgba(3,28,46,0) 55%),
    radial-gradient(900px 700px at 80% 20%, rgba(82,112,136,0.18), rgba(3,28,46,0) 60%),
    linear-gradient(145deg, var(--brand-1), var(--bg));
  min-height:100%;
}

.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px;
}

.header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  gap:14px;
  align-items:center;
}

.logo{
  width:72px;
  height:72px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 8px;
}

.brand-text h1{
  margin:0 0 6px 0;
  font-size: 26px;
  letter-spacing: 0.2px;
}

.subtitle{
  margin:0;
  color: var(--muted);
  line-height: 1.45;
  max-width: 820px;
}

.header-actions{display:flex; align-items:center; gap:10px;}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.card h2{margin:0 0 12px 0; font-size: 18px;}
.card h3{margin:0 0 10px 0; font-size: 16px;}

.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .grid{grid-template-columns: 1fr;}
  .header{flex-direction:column; align-items:stretch;}
  .header-actions{justify-content:flex-start;}
  .logo{width:64px; height:64px;}
  .brand-text h1{font-size:22px;}
}

label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size: 14px;
}

label.inline{
  flex-direction: row;
  align-items:center;
  gap: 10px;
}

.muted{color: var(--muted);}

small{color: var(--muted); display:block; margin-top:10px;}
code{background: rgba(0,0,0,0.22); padding:2px 6px; border-radius:8px; border:1px solid rgba(255,255,255,0.10);}

input,select,button,textarea{font:inherit;}

input, select{
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(3, 20, 33, 0.65);
  color: var(--text);
  outline:none;
}

input:focus, select:focus{
  border-color: rgba(15,122,191,0.75);
  box-shadow: 0 0 0 4px rgba(15,122,191,0.18);
}

input::placeholder{color: rgba(198,208,216,0.7);}

.row{display:flex; gap: 12px; align-items:center; flex-wrap:wrap;}
.row-between{justify-content:space-between;}
.gap-sm{gap:8px;}

.btn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(3, 20, 33, 0.6);
  color: var(--text);
  cursor:pointer;
}
.btn:hover{border-color: rgba(255,255,255,0.26);}
.btn:disabled{opacity:0.6; cursor:not-allowed;}

.btn-primary{
  background: linear-gradient(180deg, rgba(15,122,191,1), rgba(10,86,135,1));
  border-color: rgba(15,122,191,0.9);
  color: white;
}
.btn-secondary{background: rgba(3, 20, 33, 0.55);}

.icon-btn{
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
}
.icon-btn:hover{border-color: rgba(255,255,255,0.28);}

.alert{
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.alert.error{border-color: var(--danger); color: #ffd6d6;}
.alert.ok{border-color: var(--ok); color: #d7ffe6;}
.hidden{display:none !important;}

.stack-list{
  display:flex;
  flex-direction:column;
  gap: 12px;
  margin-top: 12px;
}

.stack-item{
  background: var(--card-2);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 12px;
}

.item-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 38px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,122,191,0.18);
  border: 1px solid rgba(15,122,191,0.28);
  color: var(--text);
  font-weight: 600;
}

.item-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 12px;
}
@media (max-width: 900px){
  .item-grid{grid-template-columns: 1fr;}
}

.triple{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px 12px;
}
@media (max-width: 900px){
  .triple{grid-template-columns: 1fr;}
}

.item-grid .inline{
  grid-column: 1 / -1;
  padding-top: 4px;
}

.result-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 980px){
  .result-grid{grid-template-columns: 1fr;}
}

.result-box{
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 12px;
  background: rgba(3, 20, 33, 0.55);
}

.pre{
  background: rgba(3, 12, 20, 0.65);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 12px;
  overflow:auto;
  min-height: 220px;
  white-space: pre-wrap;
}

.footer{
  color: var(--muted);
  margin-top: 16px;
  font-size: 13px;
}

/* Print */
@media print{
  html,body{
    background: #ffffff !important;
    color: #000000 !important;
  }
  .header-actions, .btn, .alert, small, code{
    display:none !important;
  }
  .card-input{
    display:none !important;
  }
  .card, .stack-item, .result-box, .pre{
    box-shadow:none !important;
    background:#ffffff !important;
    color:#000000 !important;
    border: 1px solid #cfcfcf !important;
  }
  .subtitle{color:#000 !important;}
  .logo{box-shadow:none !important; background:#fff !important; border:1px solid #cfcfcf !important;}
  .result-grid{grid-template-columns: 1fr !important;}
  .container{max-width:none; padding:0;}
}