body {
    background: linear-gradient(180deg, #15181e 0%, #232837 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
}
.app-card {
    background: #181c29;
    border-radius: 22px;
    box-shadow: 0 8px 36px rgba(50,90,180,0.14);
    padding: 34px 28px 20px;
    width: 330px;
    max-width: 96vw;
    text-align: center;
    position: relative;
    z-index: 2;
}
.logo-block {
    margin-bottom: 12px;
}
.logo-text {
    color: #fff;
    font-weight: bold;
    font-size: 1.6em;
    letter-spacing: 0.04em;
}
.subtitle {
    color: #b8b8c9;
    font-size: 1em;
    margin-bottom: 36px;
}
.main-btn {
    width: 100%;
    padding: 15px 0;
    margin-bottom: 16px;
    background: linear-gradient(90deg, #0d68ff 0%, #36b6ff 100%);
    color: #fff;
    font-size: 1.14em;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 500;
    box-shadow: 0 2px 16px rgba(0,120,255,0.08);
    transition: background 0.23s, transform 0.12s;
}
.main-btn:hover {
    background: linear-gradient(90deg, #0656d6 0%, #27a3ea 100%);
    transform: translateY(-2px) scale(1.03);
}
.main-btn.alt {
    background: #252d47;
    color: #bbe1ff;
    margin-bottom: 32px;
}
.main-btn.alt:hover {
    background: #20263a;
    color: #fff;
}
.footer {
    margin-top: 16px;
    color: #555d6d;
    font-size: 0.9em;
}
.modal {
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    display: none;
    background: rgba(20,24,38,0.76);
    align-items: center;
    justify-content: center;
    z-index: 11;
    animation: fadeInBg 0.22s;
}
@keyframes fadeInBg { from { background: rgba(20,24,38,0); } to { background: rgba(20,24,38,0.76); } }
.modal.open { display: flex; }
.modal-content {
    background: #fff;
    border-radius: 18px;
    padding: 28px 22px 18px;
    min-width: 260px;
    max-width: 88vw;
    color: #181c29;
    text-align: left;
    position: relative;
    box-shadow: 0 12px 44px rgba(35,40,55,0.14);
    animation: popIn 0.19s cubic-bezier(.23,.9,.6,1.8);
    max-height: 76vh;
    overflow-y: auto;
}
@keyframes popIn { from { opacity:0; transform: scale(.92);} to {opacity:1; transform:scale(1);} }
.modal-title {
    font-weight: bold;
    font-size: 1.25em;
    margin-bottom: 8px;
    color: #223;
}
.close-btn {
    position: absolute;
    top: 10px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.18em;
    color: #888da8;
    cursor: pointer;
    transition: color 0.16s;
}
.close-btn:hover { color: #0d68ff; }
@media (max-width: 400px) {
    .app-card { padding: 20px 3vw 10px; }
    .modal-content { padding: 18px 2vw 12px;}
}
.calc-btn {
    background: #f3f6fc;
    color: #223355;
    border: none;
    border-radius: 8px;
    font-size: 1.2em;
    font-weight: bold;
    padding: 10px 0;
    transition: background .12s;
    cursor: pointer;
    box-shadow: 0 1px 4px #eaf2ff;
}
.calc-btn:active {
    background: #e3edfd;
}
.calc-op {
    color: #ff4343;
    font-weight: bold;
}
@keyframes shake {
  0% { transform: translate(2px, 0); }
  10% { transform: translate(-2px, 0); }
  20% { transform: translate(4px, 0); }
  30% { transform: translate(-4px, 0); }
  40% { transform: translate(4px, 0); }
  50% { transform: translate(-4px, 0); }
  60% { transform: translate(2px, 0); }
  70% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 0); }
  90% { transform: translate(-2px, 0); }
  100% { transform: translate(0, 0); }
}
.shake {
  animation: shake 0.7s linear;
}