html, body {
        background: #f3f9fe;
        margin: 0; padding: 0;
        font-family: "Segoe UI", Arial, sans-serif;
        color: #193147;
      }
      .container {
        max-width: 410px;
        margin: 36px auto;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 6px 24px #0c7fc226;
        padding: 32px 16px 18px;
        display: flex; flex-direction: column;
      }
      .logo {
        font-size: 1.32em; font-weight: bold;
        color: #178ce7; text-align: center;
        margin-bottom: 10px; letter-spacing: -1px;
      }
      .desc {
        text-align: center; color: #227188;
        margin-bottom: 21px; font-size: 1.06em;
      }
      .control-row {
        display: flex; justify-content: center;
        gap: 11px; margin-bottom: 15px;
        flex-wrap: wrap; align-items: center;
      }
      .style-select {
        border-radius: 6px;
        border: 1.3px solid #cae6fa;
        padding: 7px 11px; font-size: 1.02em;
        background: #fafdff; color: #1878b3;
        transition: border 0.13s;
      }
      .gen-btn {
        background: linear-gradient(90deg,#178ce7,#19b16e);
        color:#fff; border:none; border-radius:11px;
        font-size:1.09em; font-weight:bold;
        padding:10px 16px; cursor:pointer;
        box-shadow:0 2px 12px #178ce733;
        transition:background .18s,box-shadow .18s;
      }
      .gen-btn:active {
        background: linear-gradient(90deg,#14589c,#18c68a);
      }
      .nick-list {
        display:flex; flex-direction:column;
        gap:13px; margin-bottom:16px;
      }
      .result-row {
        display:flex; align-items:center;
        background:#f2faff; border-radius:10px;
        border:1.2px solid #cae6fa;
        padding:10px 9px; font-size:1.13em;
        font-weight:500; box-shadow:0 2px 7px #197a9033;
      }
      .nickname-text {
        flex:1; text-align:left;
        color:#106fc9; margin-right:8px;
      }
      .copy-btn {
        background: linear-gradient(90deg,#18c68a,#1794e7);
        color:#fff; border:none; border-radius:6px;
        padding:7px 13px; cursor:pointer;
        font-size:1em; font-weight:bold;
        transition:background .14s;
      }
      .copy-btn:active {
        background: linear-gradient(90deg,#119e6d,#178ce7);
      }
      .hint {
        color:#18b88a; font-size:0.97em;
        margin-bottom:10px; text-align:center;
        min-height:24px;
      }
      .footer {
        color:#789; text-align:center;
        font-size:0.94em; margin-top:15px;
      }
      @media(max-width:600px){
        .container{max-width:99vw;padding:13px 2vw;}
        .result-row{font-size:1em;}
      }
      #backBtn {
        position:fixed; left:50%; bottom:32px;
        transform:translateX(-50%);
        background:#1875d1; color:#fff;
        font-weight:700; border:none;
        border-radius:2rem; padding:.58em 1.5em;
        box-shadow:0 4px 16px #1875d133;
        font-size:1.09em; text-decoration:none;
        cursor:pointer; letter-spacing:.01em;
        transition:background .15s,transform .12s;
        z-index:2000;
      }
      #backBtn:hover {
        background:#0e4775;
        transform:translateX(-50%) scale(1.04);
      }
      @media(max-width:600px){
        #backBtn{bottom:18px;font-size:.98em;padding:.48em 1em;}
      }