/*
  文件：styles.css
  作者：SLy
  时间：2025-09-16
  描述：BlueWave H5 Demo 样式定义
*/
:root{
  --brand:#0ea5e9;
  --brand-600:#0284c7;
  --bg:#f6f9fc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --ok:#10b981;
  --warn:#f59e0b;
  --danger:#ef4444;
  --shadow:0 6px 20px rgba(2,8,23,.08);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;}
img{max-width:100%;display:block;}
button{cursor:pointer;}
input,select,textarea,button{font-size:16px;}

.app-header{
  position:sticky;top:0;z-index:10;
  background:#fff;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1rem;
}
.brand{display:flex;align-items:center;gap:.75rem;}
.logo{width:36px;height:36px;}
.subtitle{margin:.15rem 0 0;color:var(--muted);font-size:.85rem;}
.icon-btn{border:none;background:#fff;border-radius:.6rem;padding:.4rem .6rem;}
.icon-btn:hover{background:#f1f5f9;}

.quick-links{
  display:flex;gap:.5rem;overflow:auto;padding:.6rem 1rem;background:#fff;border-bottom:1px solid var(--border);
}
.pill{border:1px solid var(--border);background:#fff;color:var(--text);padding:.4rem .75rem;border-radius:999px;white-space:nowrap;}
.pill:active,.pill:hover{border-color:var(--brand);color:var(--brand);}

.page{display:none;padding:1rem;max-width:960px;margin:0 auto;}
.page.active{display:block;}

.hero{
  background:linear-gradient(135deg, var(--brand), var(--brand-600));
  color:#fff;border-radius:1rem;padding:1.25rem;box-shadow:var(--shadow);
}
.grid-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:1rem;}
.action-card{background:var(--card);border:1px solid var(--border);border-radius:.9rem;padding:1rem;box-shadow:var(--shadow);transition:transform .1s;}
.action-card:hover{transform:translateY(-2px);}
.action-card .icon{font-size:1.6rem;}
.tips{margin-top:1rem;background:var(--card);border:1px solid var(--border);border-radius:.9rem;padding:1rem;box-shadow:var(--shadow);}
.tips ul{margin:.3rem 0 0 1.1rem;}

.section-header{display:flex;align-items:center;justify-content:space-between;margin:.5rem 0 1rem;}
.btn{border:1px solid var(--border);background:#fff;border-radius:.6rem;padding:.5rem .9rem;}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn.ghost{background:#fff;border-style:dashed;color:var(--muted);}

.card{background:var(--card);border:1px solid var(--border);border-radius:.9rem;padding:1rem;box-shadow:var(--shadow);margin-bottom:1rem;}
.collapsible{display:none;}
.collapsible.show{display:block;}

.filters{
  display:flex;gap:.6rem;align-items:center;margin-bottom:.8rem;flex-wrap:wrap;
}
.filters input[type="search"]{
  flex:1;border:1px solid var(--border);border-radius:.6rem;padding:.5rem .75rem;background:#fff;
}
.tag-row{display:flex;gap:.5rem;flex-wrap:wrap;}
.tag{border:1px solid var(--border);border-radius:999px;padding:.25rem .6rem;font-size:.85rem;background:#fff;color:var(--muted);}
.tag.active{border-color:var(--brand);color:var(--brand);}

.list{display:flex;flex-direction:column;gap:.75rem;}
.post{
  background:#fff;border:1px solid var(--border);border-radius:.9rem;padding:.85rem;box-shadow:var(--shadow);
}
.post-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem;}
.avatar{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#e2f2fb;border-radius:50%;}
.post-title{margin:.2rem 0 .15rem;font-size:1.05rem;}
.post-meta{color:var(--muted);font-size:.85rem;}
.post-img{margin-top:.5rem;border-radius:.6rem;overflow:hidden;border:1px solid var(--border);}
.actions{display:flex;gap:.6rem;margin-top:.6rem;}
.actions .btn{padding:.35rem .6rem;}
.comment-box{display:flex;gap:.5rem;margin-top:.6rem;}
.comment-box input{flex:1;border:1px solid var(--border);border-radius:.6rem;padding:.45rem .6rem;}
.comments{margin-top:.6rem;border-top:1px dashed var(--border);padding-top:.5rem;}
.comment{font-size:.92rem;margin:.3rem 0;}
.badge{display:inline-block;background:#f1f5f9;border:1px solid var(--border);padding:.08rem .45rem;border-radius:.5rem;color:var(--muted);font-size:.75rem;}

.form-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;
}
.form-row{display:flex;flex-direction:column;gap:.35rem;}
.form-row input,.form-row select,.form-row textarea{
  border:1px solid var(--border);border-radius:.6rem;padding:.5rem .65rem;background:#fff;
}
.col-span-2{grid-column:span 2;}
.form-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.6rem;}

.image-preview{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem;}
.image-preview img,.image-preview video{width:88px;height:88px;object-fit:cover;border-radius:.5rem;border:1px solid var(--border);}

.timeline{border-left:3px solid #e5f3fb;padding-left:.8rem;display:flex;flex-direction:column;gap:.6rem;}
.ticket{background:#fff;border:1px solid var(--border);border-radius:.6rem;padding:.6rem;}
.ticket .meta{color:var(--muted);font-size:.85rem;}

.plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem;}
.plan{background:#fff;border:1px solid var(--border);border-radius:.9rem;padding:1rem;box-shadow:var(--shadow);}
.plan h4{margin:.1rem 0 .4rem;}
.plan ul{margin:.3rem 0 0 1.1rem;color:var(--muted);}

.profile-head{display:flex;gap:.8rem;align-items:center;}
.profile-head .avatar{width:52px;height:52px;border-radius:50%;font-size:1.4rem;}
.profile-actions{display:flex;gap:.6rem;margin-top:.6rem;flex-wrap:wrap;}

.toast{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
  background:rgba(15,23,42,.95);color:#fff;padding:.6rem .9rem;border-radius:.6rem;
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:999;
}
.toast.show{opacity:1;}