﻿ :root{
 --brand:   #00968e;   /* 官网主色 */
 --brand-dark: #007f78;
 --brand-deep: #005e59;
 --brand-soft: #e3f4f2;
 --brand-line: #c3e6e1;
 --gold:    #e0963d;   /* 表扬入口点缀色 */
 --gold-dark:  #c47f24;
 --gold-soft:  #fdf1e1;
 --ink: #263a38;
 --muted:   #6c807e;
 --bg:  #f4faf8;
 --card:    #ffffff;
 --shadow:  0 10px 30px rgba(0,110,100,.10);
  }
.panel{
   position:relative;z-index:2;

 padding:34px 34px 40px;
  }
  .panel-head{text-align:center;margin-bottom:8px}
  .panel-head .en{font-size:12px;letter-spacing:4px;color:#9db5b1;text-transform:uppercase}
  .panel-head h2{font-size:22px;color:#003e3a;margin-top:6px;letter-spacing:2px}
  .panel-head p{font-size:13px;color:var(--muted);margin-top:8px;letter-spacing:.5px}
  .divider{
 width:64px;
 height:3px;
 border-radius:3px;
 margin:16px auto 30px;
 background: #2fc4bb;
  }

  .options{display:flex;gap:26px;justify-content:center;align-items:stretch}
  .option{
 flex:1;max-width:460px;
 display:flex;flex-direction:column;align-items:center;
 text-align:center;padding:30px 20px 30px;
 border-radius:16px;cursor:pointer;
 transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
 position:relative;
  }
  .option.complaint{
 background:linear-gradient(180deg,#ffffff,#f2faf8);
 border:2px solid #bfe3de;
  }
  .option.praise{
 background:linear-gradient(180deg,#ffffff,#fdf6ec);
 border:2px solid #f0d3a8;
  }
  .option:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,110,100,.14)}
  .option:active{transform:translateY(-2px)}

  .option .icon{
 width:96px;height:96px;border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 margin-bottom:20px;
  }
  .option.complaint .icon{background:var(--brand-soft);box-shadow:0 0 0 8px rgba(0,150,142,.08)}
  .option.praise .icon{background:var(--gold-soft);box-shadow:0 0 0 8px rgba(224,150,61,.08)}
  .option .icon svg{width:52px;height:52px}
  .option h3{font-size:24px;letter-spacing:6px;margin-bottom:14px;font-weight:700}
  .option.complaint h3{color:var(--brand-deep)}
  .option.praise h3{color:#9a6418}
  .option p{font-size:14px;color:var(--muted);line-height:1.8;margin-bottom:8px}
  .option .go{
 margin-top:18px;display:inline-flex;align-items:center;gap:8px;
 padding:10px 30px;border-radius:999px;color:#fff;font-size:14px;letter-spacing:2px;
 transition:background .2s;
  }
  .option.complaint .go{background:var(--brand)}
  .option.complaint:hover .go{background:var(--brand-dark)}
  .option.praise .go{background:var(--gold)}
  .option.praise:hover .go{background:var(--gold-dark)}
 @media (max-width:760px){
 .banner h1{font-size:22px;letter-spacing:2px}
 .banner{padding:34px 14px 44px}
 .panel{padding:24px 16px 28px;box-sizing: border-box;}
 .options{flex-direction:column;gap:18px;align-items:center}
 .option{width:100%;max-width:420px;padding:32px 18px 26px;box-sizing: border-box;}
 .option h3{letter-spacing:4px}
 .topbar-tag{display:none}
   .panel-head h2{
 font-size: 18px;
   }
  }  