@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --primary: #6C63FF;
  --secondary: #43B5FF;
  --bg-light: #F7F9FC;
  --bg-white: #ffffff;
  --text-dark: #222222;
  --text-light: #666666;
  --shadow-soft: 0 6px 24px rgba(108,99,255,0.08);
  --shadow-hover: 0 10px 30px rgba(108,99,255,0.12);
  --border-radius: 14px;
  --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}

/* Base layout */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(135deg,var(--bg-light) 0%, #E8ECF1 100%);
  color:var(--text-dark);
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  max-width:980px;
  margin:24px auto;
  padding:20px;
}

.main-content{
  background:var(--bg-white);
  border-radius:var(--border-radius);
  padding:24px;
  box-shadow:var(--shadow-soft);
}

/* Shared header / brand */
.site-header{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:18px;
}
.site-logo{
  width:48px;
  height:48px;
  border-radius:10px;
  display:inline-grid;
  place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;
  font-weight:700;
  box-shadow:var(--shadow-soft);
}
.site-title{
  font-size:clamp(20px,3.6vw,28px);
  font-weight:700;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.site-subtitle{
  color:var(--text-light);
  font-size:14px;
  margin-top:2px;
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:10px;border:0;cursor:pointer;transition:var(--transition);font-weight:600}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:var(--shadow-soft)}
.btn-secondary{background:var(--bg-light);color:var(--text-dark);border:1px solid #E8ECF1}
.btn:active{transform:translateY(1px)}

/* Utilities */
.result-card{border-radius:12px;background:linear-gradient(135deg,var(--bg-light),#fff);padding:16px;border:1px solid #E8ECF1}

/* Accessibility */
:focus{outline:none}
:focus-visible{outline:3px solid rgba(108,99,255,0.18);outline-offset:2px}

@media (max-width:768px){
  .container{padding:14px;margin:16px}
  .site-logo{width:44px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}