/* ============================================================
   poemgenius.com — 复刻 poem-generator.org.uk 视觉
   浅灰底 / 青绿圆角按钮 / 紫色下拉导航 / Raleway 字体
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Raleway','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;background:#e6e9ed;color:#222;text-align:center;
}
a{color:#00605d;text-decoration:none}
a:visited{color:#834278}
a:hover{color:#2AC5D6}

/* ---------- 顶部导航 ---------- */
.topbar{background:#fff;border-bottom:2px solid #00605d}
.topbar-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:6px;padding:6px 14px;flex-wrap:wrap;justify-content:center}
.brand{font-family:'McLaren','Comic Sans MS',Verdana,sans-serif;font-size:22px;letter-spacing:2px;color:#00605d;font-weight:700;margin-right:8px;white-space:nowrap}
.brand small{display:block;font-size:9px;letter-spacing:3px;color:#9aa;font-family:'Raleway',sans-serif}
.nav-group{position:relative;display:inline-block}
.dropbtn{background:#534258;color:#fff;padding:8px 16px;font-size:14px;border:none;cursor:pointer;border-radius:4px}
.dropbtn:hover{background:#6b5b82}
.dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;min-width:200px;box-shadow:0 6px 18px rgba(0,0,0,.18);border-radius:0 0 6px 6px;z-index:60;text-align:left}
.nav-group.open .dropdown{display:block}
.dropdown a{display:block;padding:9px 16px;font-size:14px;color:#333;border-bottom:1px solid #f0f0f0}
.dropdown a:hover{background:#2AC5D6;color:#fff}
.dropdown .group-label{display:block;padding:7px 16px;font-size:11px;letter-spacing:2px;color:#999;text-transform:uppercase;background:#f7f7f7}
.search-box{display:inline-flex;align-items:center;gap:4px;margin-left:8px}
.search-box input{border:1px solid #ccc;border-radius:4px;padding:6px 10px;font-size:13px;width:140px}
.search-box button{background:#00605d;color:#fff;border:none;border-radius:20px;padding:6px 14px;font-size:13px;cursor:pointer}
.search-box button:hover{background:#2AC5D6}

/* ---------- 主区 ---------- */
.wrap{max-width:820px;margin:0 auto;padding:16px 12px 30px}
.page-title{font-family:'McLaren',Verdana,sans-serif;font-size:34px;letter-spacing:4px;color:#000;margin:14px 0 4px;line-height:1.2}
.page-desc{color:#444;font-size:16px;max-width:640px;margin:6px auto 14px}
.card{background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.08);padding:20px 24px;margin-bottom:16px;text-align:left}

/* ---------- 表单 ---------- */
.field{margin:14px 0}
.field .f-label{font-size:15px;color:#333;margin-bottom:6px}
.field .f-label .eg{color:#999;font-size:13px}
.field input[type=text]{width:100%;max-width:420px;font-size:18px;padding:6px 10px;border:1px solid #ccc;border-radius:4px;font-family:'Assistant',Verdana,sans-serif;outline:none}
.field input:focus{border-color:#2AC5D6}
.suggest-btn{background:#00605d;color:#fff;border:none;border-radius:20px;padding:5px 16px;font-size:13px;cursor:pointer;margin-left:8px;vertical-align:middle}
.suggest-btn:hover{background:#2AC5D6}
.fill-all{background:#534258;color:#fff;border:none;border-radius:20px;padding:8px 20px;font-size:14px;cursor:pointer;margin:6px 0 10px}
.fill-all:hover{background:#6b5b82}
.generate-btn{background:#00605d;color:#fff;border:none;border-radius:24px;padding:14px 46px;font-size:20px;cursor:pointer;margin:10px auto;display:block;font-weight:600}
.generate-btn:hover{background:#2AC5D6}
.note{font-size:12px;color:#999;margin-top:8px;text-align:center}

/* ---------- 输出 ---------- */
.poem-out{display:none;background:#fdfcf9;border:1px solid #e3e0d8;border-radius:8px;padding:22px 26px;margin:14px 0;text-align:left;font-family:Georgia,'Times New Roman',serif;font-size:18px;line-height:2;color:#222;white-space:pre-line}
.poem-out.show{display:block}
.poem-out .p-title{font-family:'McLaren',Verdana,sans-serif;letter-spacing:2px;font-size:17px;color:#00605d;text-align:center;margin-bottom:10px}
.poem-out .p-note{text-align:center;font-size:12px;color:#999;margin-top:10px;font-family:'Raleway',sans-serif}
.poem-out .ac{font-weight:700;color:#c0392b}
.poem-out .line-1{display:block;margin-left:0}
.poem-out .line-2{display:block;margin-left:1.5em}
.poem-out .line-3{display:block;margin-left:3em}

/* ---------- How to ---------- */
.howto{background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.08);padding:20px 24px;margin-bottom:16px;text-align:left}
.howto h2{color:#00605d;font-size:20px;margin-bottom:10px}
.howto ol{margin:0 0 0 22px}
.howto li{margin:6px 0;color:#444}
.howto p{color:#555;margin:8px 0}
.howto .tip{background:#f0faf9;border-left:4px solid #2AC5D6;padding:10px 14px;font-size:14px;color:#333;margin-top:10px}

/* ---------- 首页卡片 ---------- */
.home-hero{padding:36px 12px 10px}
.home-hero h1{font-family:'McLaren',Verdana,sans-serif;font-size:38px;letter-spacing:3px;margin-bottom:8px}
.home-hero p{color:#444;font-size:17px;max-width:600px;margin:0 auto}
.gen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:22px}
.gen-card{background:#fff;border-radius:8px;padding:18px;box-shadow:0 1px 4px rgba(0,0,0,.08);transition:transform .15s,box-shadow .15s;text-align:left;display:block;color:#333}
.gen-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.12);color:#00605d}
.gen-card .g-name{font-size:17px;font-weight:700;color:#00605d}
.gen-card .g-desc{font-size:13px;color:#777;margin-top:6px;line-height:1.5}
.gen-card .g-arrow{float:right;font-size:18px;color:#ccc}

/* ---------- 页脚 ---------- */
.footer{margin-top:20px;padding:18px 10px;background:#fff;border-top:2px solid #00605d;font-size:13px;color:#666}
.footer a{color:#00605d}
.footer .links{margin-bottom:8px}
.footer .links a{display:inline-block;margin:3px 8px;font-size:12px;color:#888}
.footer .links a:hover{color:#2AC5D6}

@media(max-width:640px){
  .topbar-inner{justify-content:flex-start}
  .page-title{font-size:26px;letter-spacing:2px}
  .generate-btn{width:100%}
}