web/styles.css

:root{
  --bg:#FFF7F0;
  --card:#FFFFFF;
  --accent:#FF9AA2;
  --muted:#8A8787;
  --warm:#FFD6A5;
  --shadow: 0 6px 18px rgba(0,0,0,0.06);
}
*{box-sizing:border-box}
body{font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','PingFang SC',"Hiragino Sans GB", 'Microsoft YaHei',sans-serif;background:var(--bg);margin:0;color:#333}
.container{max-width:1100px;margin:18px auto;padding:12px}
.header{display:flex;align-items:center;gap:16px;padding:12px}
.brand h1{margin:0;font-size:28px;color:#ff6b81}
.subtitle{margin:0;color:var(--muted)}
.main{display:flex;gap:18px}
.left{flex:1}
.right{width:260px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}
.card{background:linear-gradient(180deg,#fff 0,#fffefc 100%);border-radius:12px;padding:22px;text-align:center;border:none;cursor:pointer;box-shadow:var(--shadow);font-size:18px;color:#444}
.card:hover{transform:translateY(-3px);transition:.18s}
.page{background:var(--card);padding:14px;border-radius:10px;box-shadow:var(--shadow);min-height:420px}
.mini-board{background:linear-gradient(90deg,var(--warm),#fff);padding:12px;border-radius:10px;box-shadow:var(--shadow)}
.mini-list{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.mini-item{display:flex;align-items:center;gap:10px;padding:8px;background:#fff;border-radius:8px}
.mini-item .rank{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-weight:700}
.mini-item .name{flex:1}
.small-link{background:none;border:none;color:#2f6b6b;cursor:pointer;padding:6px;margin-top:8px}
table{width:100%;border-collapse:collapse}
th,td{padding:8px;border-bottom:1px solid #f0f0f0;text-align:left}
th{background:linear-gradient(90deg,#fff,#fff8f5)}
.rules-table{display:flex;overflow:auto}
.rules-col{min-width:180px;padding:8px;border-radius:8px;background:#fff;margin-right:10px}
.rules-col h4{margin:4px 0 8px 0;color:#ff6b81}
.form-row{display:flex;gap:8px;align-items:center;margin:8px 0}
.form-row select,.form-row input{padding:8px;border-radius:6px;border:1px solid #eee}
.btn{background:var(--accent);color:#fff;border:none;padding:8px 12px;border-radius:8px;cursor:pointer}
.result-card{background:#fff;padding:12px;border-radius:8px}
.crown{width:28px;height:24px}
.footer{text-align:center;color:var(--muted);margin-top:12px}

@media(max-width:900px){.main{flex-direction:column}.right{width:100%}}