*{
    margin: 0;
    padding: 0;
}
.main-calc{
    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main-calc>div{
    background-color: black;
    width: 500px;
    height: 750px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center
}
.calc{
    width: 95%;
    height: 95%;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.calc-screen{
    width: 99.5%;
    height: 195px;
    border: none;
    border-radius: 15px 15px 0 0;
    background-color: gray;
}
.buttons{
    width: 100%;
    height: calc(100% - 200px);
    display: inline-block;
    border-radius: 0 0 15px 15px;
    justify-content: center;
    align-items: center;
}
.line{
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.number, .operador{
    width: 24%;
    height: 95%;
    border: none;
    border-radius: 10%;
    font-size: 30px;
}
.operador{
    background-color: #ef4444;
    color: white;
}
#equal{
    width: 74%;
    border-radius: 10px;
}
.number:hover{
    background-color: rgb(197, 197, 197);
}
.operador:hover{
    background-color: #b03030;
}
#del{
    border-radius: 0 10% 10% 10%  ;
}
#division{
    border-radius: 10% 0 10% 10% ;
}

/* Substituir a regra .calc-screen existente por esta */
.calc-screen{
    width: 99.5%;
    height: 195px;
    border: none;
    border-radius: 15px 15px 0 0;
    /* visual */
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.15));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow:
      inset 0 6px 20px rgba(0,0,0,0.45),   /* sombra interna para profundidade */
      0 6px 30px rgba(2,6,23,0.45);        /* sombra externa suave */
    border: 1px solid rgba(255,255,255,0.03);

    /* layout do conteúdo da tela */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* mostra o fim da expressão / resultado */
    align-items: flex-end;     /* alinha à direita */
    padding: 18px 20px;
    box-sizing: border-box;

    /* tipografia */
    color: #f8fafc; /* quase branco */
    font-family: 'Segoe UI', Roboto, "Helvetica Neue", Arial, sans-serif;
    /* tamanho responsivo: entre 24px e 56px dependendo do espaço */
    font-size: clamp(24px, 5.8vw, 56px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-align: right;

    /* evita quebra estranha e mantém o fim visível */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* texto pequeno (contexto / expressão anterior) — caso queira usar depois */
.calc-screen .sub {
    font-size: clamp(12px, 1.8vw, 16px);
    opacity: 0.7;
    align-self: flex-end;
    margin-bottom: 6px;
    color: rgba(248,250,252,0.85);
}

/* destaque do resultado — se usar spans internos */
.calc-screen .main {
    font-size: clamp(28px, 6.2vw, 60px);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 0 rgba(255,255,255,0.02);
}

/* animação sutil ao atualizar — requisito: a classe .pulse será adicionada via JS quando desejar feedback */
.calc-screen.pulse {
    animation: screenPulse 320ms ease-out;
}
@keyframes screenPulse {
  0%   { transform: translateY(0); box-shadow: inset 0 6px 18px rgba(0,0,0,0.45); }
  50%  { transform: translateY(-2px); box-shadow: inset 0 10px 30px rgba(0,0,0,0.5); }
  100% { transform: translateY(0); box-shadow: inset 0 6px 18px rgba(0,0,0,0.45); }
}

/* responsividade: ajustar altura em telas pequenas */
@media (max-width: 420px) {
  .main-calc>div { width: 92%; height: 85vh; }
  .calc-screen { height: 160px; padding: 14px; }
  .number, .operador { font-size: 22px; }
}