*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{margin:0;min-height:100vh;background:linear-gradient(180deg,#8fd3ff 0%,#b7f0ff 30%,#fff7c8 100%);color:#17324d;position:relative;padding:20px}
body::before,body::after{content:"";position:fixed;border-radius:50%;z-index:0;pointer-events:none;opacity:.45}
body::before{width:220px;height:220px;top:-70px;left:-50px;background:#ffd66b}
body::after{width:280px;height:280px;right:-80px;bottom:-90px;background:#ff9fd1}
.container{position:relative;z-index:1;max-width:820px;margin:16px auto;padding:22px;background:rgba(255,255,255,.88);backdrop-filter:blur(4px);border:4px solid #fff;border-radius:28px;box-shadow:0 20px 40px rgba(30,76,120,.18)}
.hero{margin-bottom:18px;padding:20px 22px;background:linear-gradient(135deg,#7a5cff,#45c5ff 55%,#7ef0c6);border-radius:24px;color:#fff;box-shadow:inset 0 -4px 0 rgba(255,255,255,.2)}
h1{margin:0 0 8px;font-size:34px;line-height:1.1}
.subtitle{margin:0;font-size:17px;line-height:1.4;color:rgba(255,255,255,.95)}
.panel{padding:18px;background:#fff;border-radius:22px;border:2px solid #eef4ff;box-shadow:0 10px 24px rgba(71,116,167,.08)}
.panel + .panel{margin-top:16px}
.category-list h2,.phrase-list h2{margin:0 0 12px;font-size:24px;color:#21486b}
.categories{display:flex;flex-wrap:wrap;gap:10px}
.category-btn{color:#17324d;border:0;padding:10px 16px;border-radius:999px;cursor:pointer;font-size:16px;font-weight:700;box-shadow:0 6px 0 rgba(23,50,77,.12);transform:translateY(0);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.category-btn:hover,.phrase-btn:hover{transform:translateY(-2px);filter:brightness(1.02)}
.category-btn:active,.phrase-btn:active{transform:translateY(1px)}
.category-btn:nth-child(4n+1){background:#ffd86f}
.category-btn:nth-child(4n+2){background:#86e3ff}
.category-btn:nth-child(4n+3){background:#b8f28f}
.category-btn:nth-child(4n+4){background:#ffb1d8}
.category-btn.is-active{outline:4px solid #21486b;box-shadow:0 7px 0 rgba(33,72,107,.2)}
#phrases{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:10px}
.phrase-item{padding:0}
.phrase-btn{width:100%;text-align:left;background:linear-gradient(135deg,#ffffff,#f5fbff);color:#17324d;border:2px solid #d9ecff;padding:16px 18px;border-radius:18px;cursor:pointer;font-size:18px;font-weight:600;line-height:1.35;box-shadow:0 8px 18px rgba(74,129,186,.12);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.phrase-btn:hover{box-shadow:0 12px 22px rgba(74,129,186,.16)}
button{appearance:none}
@media (max-width:640px){
  body{padding:12px}
  .container{padding:16px;border-radius:22px}
  .hero{padding:18px}
  h1{font-size:28px}
  .subtitle{font-size:15px}
  .category-list h2,.phrase-list h2{font-size:21px}
  .category-btn{font-size:15px;padding:9px 14px}
  .phrase-btn{font-size:17px;padding:14px 15px}
}