*,*::before,*::after{box-sizing:border-box}
html,body,main,header,footer{margin:0;padding:0}

/* ========== Base & Typography ========== */
body{
  background:#0a0e17;
  color:#e2e8f0;
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background-image:
    radial-gradient(ellipse at 50% 0%,rgba(0,149,176,.06) 0%,transparent 60%),
    radial-gradient(ellipse at 80% 20%,rgba(240,144,0,.04) 0%,transparent 50%);
}

/* ========== Header ========== */
header{
  width:100%;
  display:flex;
  justify-content:center;
  padding:12px 16px 0;
}

/* ========== Main Layout ========== */
main{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  padding:20px 16px 40px;
}

div#app{
  width:100%;
  max-width:480px;
  display:flex;
  flex-direction:column;
  gap:28px;
}

/* ========== Calculator Body ========== */
#calculator{
  background:linear-gradient(180deg,#383838 0%,#2a2a2a 40%,#1f1f1f 100%);
  border-radius:20px;
  padding:20px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 4px 6px rgba(0,0,0,.3),
    0 12px 40px rgba(0,0,0,.55),
    0 0 80px rgba(0,149,176,.04);
  position:relative;
  transition:box-shadow .4s ease;
}
#calculator:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 4px 6px rgba(0,0,0,.3),
    0 12px 40px rgba(0,0,0,.55),
    0 0 100px rgba(0,149,176,.07);
}

/* ========== Display ========== */
#display{
  background:linear-gradient(180deg,#c8d6b8 0%,#b4c4a0 100%);
  border-radius:10px;
  padding:20px 16px 12px 16px;
  margin-bottom:16px;
  position:relative;
  min-height:88px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border:2px solid #3d3d3d;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.05);
}

#expression-line{
  font-size:15px;
  color:#4a5a3e;
  text-align:right;
  min-height:22px;
  word-break:break-all;
  line-height:1.3;
  overflow-wrap:anywhere;
  font-family:'Space Mono','Courier New',monospace;
  letter-spacing:.5px;
}

#result-line{
  font-size:38px;
  color:#1e2e14;
  text-align:right;
  font-weight:700;
  line-height:1.15;
  word-break:break-all;
  overflow-wrap:anywhere;
  font-family:'Space Mono','Courier New',monospace;
  transition:font-size .15s ease;
}
#result-line.small{font-size:26px}
#result-line.xsmall{font-size:19px}

#angle-indicator{
  position:absolute;
  top:8px;
  right:14px;
  font-size:11px;
  font-weight:700;
  color:#4a5a3e;
  font-family:'Space Mono','Courier New',monospace;
  letter-spacing:1px;
}

#error-indicator{
  position:absolute;
  top:8px;
  left:14px;
  font-size:11px;
  font-weight:700;
  color:#c0392b;
  font-family:'Space Mono','Courier New',monospace;
}
#error-indicator.hidden{display:none}

/* ========== Keypad Grid ========== */
#keypad{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:7px;
}

.key{
  border:none;
  border-radius:8px;
  font-size:17px;
  font-weight:600;
  cursor:pointer;
  padding:12px 4px;
  color:#fff;
  transition:transform .1s ease,filter .1s ease,box-shadow .1s ease;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  outline:none;
  font-family:'Space Grotesk','DM Sans',sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  position:relative;
  overflow:hidden;
}
.key::after{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,transparent 100%);
  border-radius:8px 8px 0 0;
  pointer-events:none;
}
.key:active{
  transform:scale(.93);
  filter:brightness(.7);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.3);
}

/* Number keys */
.key-num{
  background:linear-gradient(180deg,#5a5a5a 0%,#444 100%);
  box-shadow:0 2px 0 #333,0 3px 6px rgba(0,0,0,.25);
}
.key-num:hover{background:linear-gradient(180deg,#6a6a6a 0%,#505050 100%)}

/* Operator keys */
.key-op{
  background:linear-gradient(180deg,#f8a020 0%,#e08800 100%);
  color:#fff;
  box-shadow:0 2px 0 #b87000,0 3px 6px rgba(0,0,0,.25);
}
.key-op:hover{background:linear-gradient(180deg,#fbb040 0%,#e89810 100%)}
.key-op-wide{grid-column:span 3}

/* Equals key */
.key-eq{
  background:linear-gradient(180deg,#60b860 0%,#409040 100%);
  color:#fff;
  box-shadow:0 2px 0 #307030,0 3px 6px rgba(0,0,0,.25);
}
.key-eq:hover{background:linear-gradient(180deg,#70c870 0%,#50a050 100%)}

/* Scientific function keys */
.key-func{
  background:linear-gradient(180deg,#0088a0 0%,#006880 100%);
  color:#fff;
  font-size:14px;
  box-shadow:0 2px 0 #005060,0 3px 6px rgba(0,0,0,.25);
}
.key-func:hover{background:linear-gradient(180deg,#009ab5 0%,#007590 100%)}

/* Inverse function keys */
.key-inv{
  font-size:12px;
  background:linear-gradient(180deg,#007088 0%,#005870 100%);
}
.key-inv:hover{background:linear-gradient(180deg,#008098 0%,#006880 100%)}

/* Control keys (AC/DEL) */
.key-ctrl{
  background:linear-gradient(180deg,#a04848 0%,#803030 100%);
  color:#fff;
  font-size:14px;
  box-shadow:0 2px 0 #602020,0 3px 6px rgba(0,0,0,.25);
}
.key-ctrl:hover{background:linear-gradient(180deg,#b05858 0%,#903838 100%)}

/* Parenthesis keys */
.key-paren{
  background:linear-gradient(180deg,#5a5a5a 0%,#444 100%);
  color:#f8a020;
  font-weight:700;
  box-shadow:0 2px 0 #333,0 3px 6px rgba(0,0,0,.25);
}

/* Wide keys */
.key-wide{grid-column:span 2}

/* ========== Feature Section ========== */
#features{
  background:linear-gradient(180deg,rgba(30,41,59,.7) 0%,rgba(15,23,42,.8) 100%);
  border-radius:16px;
  padding:28px 24px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 4px 24px rgba(0,0,0,.3);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:fadeInUp .5s ease both;
  animation-delay:.1s;
}
#features h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:22px;
  font-weight:700;
  color:#f1f5f9;
  margin:0 0 20px;
  letter-spacing:-.3px;
  position:relative;
  display:inline-block;
}
#features h2::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  width:40px;
  height:3px;
  background:linear-gradient(90deg,#0095b0,#22c55e);
  border-radius:2px;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.feature-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:18px 16px;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.feature-card:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
  transform:translateY(-2px);
}
.feature-icon{
  width:28px;
  height:28px;
  color:#0095b0;
  margin-bottom:10px;
  flex-shrink:0;
}
.feature-card h3{
  font-family:'Space Grotesk',sans-serif;
  font-size:15px;
  font-weight:600;
  color:#e2e8f0;
  margin:0 0 4px;
  letter-spacing:-.2px;
}
.feature-card p{
  font-size:13px;
  color:#94a3b8;
  line-height:1.5;
  margin:0;
}

/* ========== Scenarios Section ========== */
#scenarios{
  background:linear-gradient(180deg,rgba(30,41,59,.7) 0%,rgba(15,23,42,.8) 100%);
  border-radius:16px;
  padding:28px 24px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 4px 24px rgba(0,0,0,.3);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:fadeInUp .5s ease both;
  animation-delay:.2s;
}
#scenarios h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:22px;
  font-weight:700;
  color:#f1f5f9;
  margin:0 0 20px;
  letter-spacing:-.3px;
  position:relative;
  display:inline-block;
}
#scenarios h2::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  width:40px;
  height:3px;
  background:linear-gradient(90deg,#f09000,#22c55e);
  border-radius:2px;
}

.scenario-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.scenario-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  border-radius:12px;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.scenario-item:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.1);
  transform:translateX(3px);
}

.scenario-icon-wrapper{
  width:40px;
  height:40px;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(0,149,176,.2) 0%,rgba(34,197,94,.1) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.scenario-icon-wrapper svg{
  width:20px;
  height:20px;
  color:#0095b0;
}

.scenario-content h4{
  font-family:'Space Grotesk',sans-serif;
  font-size:15px;
  font-weight:600;
  color:#e2e8f0;
  margin:0 0 2px;
}
.scenario-content p{
  font-size:13px;
  color:#94a3b8;
  line-height:1.5;
  margin:0;
}

/* ========== Footer ========== */
footer{
  width:100%;
  padding:16px 16px 20px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.04);
}
.page-info{
  font-size:12px;
  color:#64748b;
  font-family:'DM Sans',sans-serif;
}
.page-info a{
  color:#0095b0;
  text-decoration:none;
  transition:color .2s ease;
}
.page-info a:hover{
  color:#00b8d4;
}

/* ========== Animations ========== */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* ========== Responsive ========== */
@media(max-width:480px){
  #calculator{
    border-radius:16px;
    padding:14px;
  }
  #keypad{gap:5px}
  .key{
    font-size:15px;
    padding:10px 2px;
    min-height:42px;
    border-radius:6px;
  }
  .key-func{font-size:11px}
  .key-inv{font-size:10px}
  .key-ctrl{font-size:12px}
  #display{
    padding:10px 12px;
    min-height:72px;
    margin-bottom:12px;
    border-radius:8px;
  }
  #result-line{font-size:30px}
  #result-line.small{font-size:21px}
  #result-line.xsmall{font-size:16px}
  #expression-line{font-size:13px}
  #angle-indicator{font-size:10px;top:6px;right:10px}
  #error-indicator{font-size:10px;top:6px;left:10px}

  div#app{gap:22px;padding:0 4px}
  #features,#scenarios{
    padding:20px 16px;
    border-radius:12px;
  }
  #features h2,#scenarios h2{font-size:19px}
  .feature-grid{gap:8px}
  .feature-card{padding:14px 12px}
  .feature-card p{font-size:12px}
  .scenario-item{padding:12px 14px;gap:10px}
  .scenario-icon-wrapper{width:36px;height:36px;border-radius:8px}
  .scenario-icon-wrapper svg{width:18px;height:18px}
  .scenario-content h4{font-size:14px}
  .scenario-content p{font-size:12px}
}

@media(max-width:360px){
  #calculator{
    border-radius:12px;
    padding:10px;
  }
  #keypad{gap:4px}
  .key{
    font-size:13px;
    padding:8px 1px;
    min-height:36px;
    border-radius:5px;
  }
  .key-func{font-size:10px}
  .key-inv{font-size:9px}
  .key-ctrl{font-size:10px}
  #display{
    padding:8px 10px;
    min-height:60px;
    margin-bottom:10px;
  }
  #result-line{font-size:26px}
  #result-line.small{font-size:18px}
  #result-line.xsmall{font-size:14px}
  #expression-line{font-size:12px}

  div#app{gap:18px}
  #features,#scenarios{
    padding:16px 12px;
    border-radius:10px;
  }
  #features h2,#scenarios h2{font-size:17px}
  .feature-grid{grid-template-columns:1fr;gap:6px}
  .feature-card{padding:12px}
  .scenario-item{padding:10px 12px}
}

/* ========== Reduced Motion ========== */
@media(prefers-reduced-motion:reduce){
  *,#features,#scenarios,.key,.feature-card,.scenario-item{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}