:root{
  --bg:#f6f4ee;--ink:#2b2b2b;--muted:#6b6b6b;--gold:#b8860b;
  --red:#9e2b25;--green:#3a6b4f;--blue:#2f5d8a;--card:#fff;--line:#e3ddd0;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{margin:0;font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.7;overflow:hidden;}

/* ===== 应用壳 + 底部 Tab（Tab 固定底栏，内容区独立滚动） ===== */
.app{height:100dvh;max-width:640px;margin:0 auto;display:flex;flex-direction:column;
  background:var(--bg);overflow:hidden;}
.app-main{flex:1;min-height:0;overflow:hidden;position:relative;}
.tab-page{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;}
.tab-home{overflow:hidden;}
.tab-library{overflow-y:auto;-webkit-overflow-scrolling:touch;}
.page-inner{padding:18px 16px 24px;}
.lib-body{padding:18px 16px 24px;}
.tab-library .toolbar{margin-bottom:12px;}

/* 首页：标题 + 最新卡片靠上，录音按钮落拇指区 */
.home-page{min-height:100%;display:flex;flex-direction:column;
  padding:10px 16px calc(8px + env(safe-area-inset-bottom,0px));}
.home-header{flex:0 0 auto;padding:4px 8px 0;text-align:center;position:relative;}
.home-header h1{font-size:26px;margin:0 0 4px;letter-spacing:1px;}
.home-header .brand-slogan{font-size:13px;color:var(--muted);margin:6px 0 0;padding:0 20px;line-height:1.55;}
.home-latest{flex:0 0 auto;margin:48px 0 0;padding:0;}
.home-latest .section-title{margin:0 0 8px;}
.home-action{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;width:100%;gap:12px;
  padding:16px 0 12px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.home-page:has(.home-latest:not(.hidden)) .home-action{padding-top:8px;}
.tabbar{display:flex;border-top:1px solid var(--line);background:var(--card);
  padding-bottom:env(safe-area-inset-bottom,0);flex:0 0 auto;z-index:20;}
.tabbar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px 10px;border:none;background:none;cursor:pointer;color:var(--muted);font-size:11px;}
.tabbar-item.active{color:var(--red);font-weight:600;}
.tabbar-ico{font-size:22px;line-height:1;}
.tabbar-label{line-height:1.2;}

.section-title{font-size:16px;margin:0 0 10px;border-left:4px solid var(--gold);padding-left:10px;}

/* ===== 全局表单控件 ===== */
input,select,textarea,button{font-family:inherit;}
input[type=text],input[type=password],input:not([type]),textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  font-size:15px;background:#fff;color:var(--ink);
  transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;}
input::placeholder,textarea::placeholder{color:#b3aa97;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,134,11,.16);}
label{font-size:13px;color:var(--muted);display:block;margin-bottom:4px;}

/* ===== 按钮系统 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid transparent;border-radius:11px;padding:12px 20px;
  font-size:15px;font-weight:600;cursor:pointer;line-height:1.2;
  transition:transform .08s,opacity .15s,background .15s,box-shadow .15s;}
.btn:active{transform:scale(.97);}
.btn:disabled{cursor:not-allowed;}
.btn-block{width:100%;}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 3px 10px rgba(158,43,37,.22);}
.btn-primary:hover{background:#b13a33;}
.btn-primary:disabled{background:#dcd2c2;color:#fff;box-shadow:none;}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:#cdbfa6;}

header{text-align:center;padding:14px 8px 8px;position:relative;}
header h1{font-size:26px;margin:0 0 4px;letter-spacing:1px;}
.brand-slogan{font-size:13px;color:var(--muted);margin:6px 0 0;padding:0 20px;line-height:1.55;}
header .sub{color:var(--muted);font-size:13px;}
.icon-btn{position:absolute;top:6px;right:0;width:42px;height:42px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.05);
  transition:color .15s,border-color .15s,transform .08s,opacity .15s;}
#settingsBtn{right:-6px;opacity:.5;}
#settingsBtn:hover,#settingsBtn:active{opacity:1;}
.icon-btn:hover{color:var(--ink);border-color:#d8cfba;}
.icon-btn:active{transform:scale(.93);}

/* ===== 设置弹框 ===== */
.modal-title{font-size:20px;margin:0 8px 14px;}
.settings-menu{display:flex;gap:4px;margin:0 0 18px;border-bottom:1px solid var(--line);}
.menu-item{flex:1;background:none;border:none;padding:12px 8px;font-size:15px;cursor:pointer;
  color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s;}
.menu-item.active{color:var(--ink);font-weight:600;border-bottom-color:var(--gold);}
.settings-tab{animation:fade .2s ease;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.login-form{display:flex;flex-direction:column;gap:4px;}
.login-form label{margin-top:6px;}
.login-form .btn{margin-top:14px;}
.login-err{color:var(--red);font-size:13px;min-height:18px;margin-top:8px;text-align:center;}
.account-row{display:flex;align-items:center;justify-content:space-between;
  background:#fbf8f1;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:15px;}
.account-row .link-btn{margin:0;}
.modebar{margin-top:8px;font-size:12px;}
.modebar .badge{display:inline-block;padding:3px 10px;border-radius:20px;background:#eee;color:#666;}
.modebar .badge.warn{background:#fbeeed;color:var(--red);}
.modebar .badge.ok{background:#eef6f0;color:var(--green);}

.rec-area{text-align:center;padding:0;width:100%;}
.rec-btn{width:150px;height:150px;border-radius:50%;border:none;cursor:pointer;
  background:radial-gradient(circle at 50% 40%,#c0392b,#9e2b25);color:#fff;
  box-shadow:0 8px 24px rgba(158,43,37,.35);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;margin:0 auto;transition:.2s;}
.rec-btn .mic{font-size:63px;line-height:1;}
.rec-btn .rec-label{font-size:14px;}
.rec-btn:active{transform:scale(.96);}
.rec-btn.recording{background:radial-gradient(circle at 50% 40%,#3a6b4f,#2c5640);animation:pulse 1.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(58,107,79,.5);}70%{box-shadow:0 0 0 22px rgba(58,107,79,0);}100%{box-shadow:0 0 0 0 rgba(58,107,79,0);}}
.rec-btn:disabled{opacity:.6;cursor:not-allowed;}
.rec-timer{font-size:28px;font-weight:700;margin-top:14px;font-variant-numeric:tabular-nums;min-height:34px;}
.rec-hint{color:var(--muted);font-size:13px;margin-top:4px;}

.flow{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto;
  max-width:fit-content;padding:9px 18px;border-radius:24px;background:#fbf8f1;border:1px solid var(--line);}
.flow-spin{width:16px;height:16px;border-radius:50%;border:2px solid #e3d9c2;
  border-top-color:var(--gold);animation:flowspin .8s linear infinite;flex:0 0 auto;}
@keyframes flowspin{to{transform:rotate(360deg);}}
.flow-text{font-size:14px;color:var(--ink);}

.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin:16px 0;}
.home-action .panel{width:100%;margin:0;}
.panel h2{font-size:17px;margin:0 0 6px;border-left:4px solid var(--gold);padding-left:10px;}
.panel .tip{color:var(--muted);font-size:13px;margin:0 0 12px;}

.speaker-list{display:flex;flex-direction:column;gap:10px;}
.speaker-card{border:2px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:#fcfbf8;transition:.15s;}
.speaker-card:active{transform:scale(.99);}
.speaker-card .who{font-weight:700;margin-bottom:6px;}
.speaker-card .who .n{font-size:12px;color:var(--muted);font-weight:400;margin-left:6px;}
.speaker-card .samp{font-size:13px;color:#555;}
.speaker-card .samp div{margin:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 10px;}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;}
.stat .n{font-size:22px;font-weight:800;color:var(--red);line-height:1.1;}
.stat .l{font-size:11px;color:var(--muted);margin-top:2px;}

.lib-header{text-align:center;padding:8px 0 4px;}
.lib-header h1{font-size:24px;margin:0 0 4px;}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
select{font-size:15px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);cursor:pointer;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6b6b' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:30px;}
.toolbar select{font-size:14px;padding:8px 28px 8px 12px;}
.chip{font-size:13px;padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:#fff;cursor:pointer;}
.chip.on{background:var(--gold);color:#fff;border-color:var(--gold);}

.cards{display:grid;grid-template-columns:1fr;gap:12px;}
@media(min-width:560px){.cards{grid-template-columns:1fr 1fr;}}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;position:relative;cursor:pointer;transition:box-shadow .15s,transform .1s;}
.qcard:hover{box-shadow:0 3px 12px rgba(0,0,0,.07);}
.qcard:active{transform:scale(.995);}
.qcard .meta{font-size:12px;color:var(--muted);margin-bottom:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.badge{font-size:11px;color:#fff;padding:2px 9px;border-radius:20px;}
.qcard .q-title{font-size:16px;font-weight:700;margin:0 0 4px;padding-right:24px;line-height:1.45;}
.qcard .q-sum{font-size:13px;color:#666;margin:0;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.qcard .card-foot{display:flex;align-items:center;gap:10px;margin-top:10px;}
.qcard .has-audio{font-size:12px;color:var(--green);}
.qcard .star{position:absolute;top:12px;right:12px;font-size:20px;cursor:pointer;color:#d8cfba;}
.qcard .star.on{color:var(--gold);}
.qcard .del{margin-left:auto;font-size:12px;color:#c0392b;cursor:pointer;opacity:.6;}
.empty{text-align:center;color:var(--muted);padding:24px 0;}

/* 详情弹框 */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.45);
  display:flex;align-items:flex-end;justify-content:center;padding:0;animation:fade .2s ease;}
@media(min-width:560px){.modal{align-items:center;padding:20px;}}
.modal-card{background:var(--bg);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;
  border-radius:18px 18px 0 0;padding:20px 18px 30px;position:relative;
  -webkit-overflow-scrolling:touch;animation:slideup .25s ease;}
@media(min-width:560px){.modal-card{border-radius:18px;}}
@keyframes slideup{from{transform:translateY(30px);opacity:.6;}to{transform:translateY(0);opacity:1;}}
.modal-close{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;
  border:none;background:#0000000d;font-size:22px;line-height:1;cursor:pointer;color:#666;z-index:5;}

/* 设置弹框：居中经典对话框 */
#settingsModal{align-items:center;padding:20px 16px;
  padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom));}
#settingsModal .modal-card{width:min(400px,100%);max-height:min(82dvh,680px);overflow-y:auto;
  border-radius:16px;padding:18px 16px 20px;box-shadow:0 12px 40px rgba(0,0,0,.18);
  animation:dialogIn .22s ease;}
#settingsModal .modal-close{background:#0000000d;color:#666;box-shadow:none;}
@keyframes dialogIn{from{transform:scale(.94);opacity:0;}to{transform:scale(1);opacity:1;}}

/* 卡片详情：手机端全屏到顶 + 关闭按钮始终悬浮（卡片不滚动，内部 body 滚动） */
#cardModal{align-items:stretch;}
#cardModal .modal-card{height:100dvh;max-height:100dvh;padding:0;overflow:hidden;
  border-radius:0;display:flex;flex-direction:column;}
#cardModal .modal-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(18px + env(safe-area-inset-top,0px)) 18px calc(30px + env(safe-area-inset-bottom,0px));}
#cardModal .modal-close{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));
  background:var(--red);color:#fff;box-shadow:0 2px 8px rgba(158,43,37,.4);}
@media(min-width:560px){
  #cardModal{align-items:center;}
  #cardModal .modal-card{height:auto;max-height:88vh;border-radius:18px;}
  #cardModal .modal-body{padding:20px 18px 30px;}
  #cardModal .modal-close{top:10px;}
}
.md-block{margin-bottom:18px;}
.md-head{padding-right:40px;}
.md-h{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:6px;}
.md-title{font-size:20px;margin:0;line-height:1.4;}
.md-label{font-size:13px;font-weight:600;color:var(--gold);margin-bottom:10px;
  padding-left:9px;border-left:3px solid var(--gold);}
.md-sum{font-size:15px;margin:0;line-height:1.7;}
.md-sub{font-size:13px;font-weight:600;color:var(--green);margin:12px 0 4px;}
.md-points{margin:0;padding-left:20px;font-size:14px;color:#444;line-height:1.7;}
.md-fu{font-size:14px;color:var(--blue);margin-top:12px;background:#eef3f8;border-radius:10px;padding:10px 12px;}
.md-audio{width:100%;margin-top:4px;}
/* 微信式对话 */
.chat{display:flex;flex-direction:column;gap:12px;background:#ece7dd;border-radius:12px;padding:14px 12px;}
.bubble-row{display:flex;flex-direction:column;max-width:78%;}
.bubble-row.other{align-self:flex-start;align-items:flex-start;}
.bubble-row.me{align-self:flex-end;align-items:flex-end;}
.bubble-name{font-size:11px;color:#888;margin:0 4px 3px;}
.bubble{font-size:15px;line-height:1.6;padding:9px 12px;border-radius:12px;
  background:#fff;color:#2b2b2b;box-shadow:0 1px 1px rgba(0,0,0,.05);word-break:break-word;}
.bubble-row.me .bubble{background:#95ec69;}

.link-btn{background:none;border:none;color:var(--blue);font-size:13px;cursor:pointer;margin-top:8px;text-decoration:underline;}
.people-list{display:flex;flex-direction:column;gap:6px;margin:10px 0 0;}
.person{display:flex;align-items:center;gap:8px;background:#fcfbf8;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px;}
.person .nm{font-weight:600;}
.person .rl{font-size:11px;color:#fff;padding:1px 6px;border-radius:20px;}
.person .rl.child{background:var(--green);}
.person .rl.parent{background:var(--blue);}
.person .samples{font-size:11px;color:var(--muted);}
.person .rm{margin-left:auto;color:#c0392b;font-size:12px;cursor:pointer;}
.en-people-fold{margin-bottom:12px;font-size:13px;color:var(--muted);}
.en-people-fold summary{cursor:pointer;padding:6px 0 10px;list-style:none;}
.en-people-label{border-bottom:1px dashed #b5aa96;}
.en-people-fold summary::-webkit-details-marker{display:none;}
.en-people-fold[open] summary{margin-bottom:8px;}
.enroll-form{background:#fbf8f1;border:1px solid var(--line);border-radius:14px;padding:18px 16px 20px;}
.en-meta{display:flex;gap:8px;margin-bottom:12px;}
.en-meta input{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:15px;background:#fff;}
.en-roles{display:flex;gap:10px;margin-bottom:16px;}
.en-role-btn{flex:1;padding:11px 0;border:1.5px solid var(--line);border-radius:999px;
  background:#fff;color:var(--muted);font-size:15px;font-weight:600;cursor:pointer;transition:all .15s;}
.en-role-btn.active{border-color:var(--green);background:#eef6f0;color:var(--green);}
.en-script{font-size:18px;line-height:1.85;text-align:left;letter-spacing:.02em;color:#5c5344;margin-bottom:18px;min-height:6.5em;}
.en-char{display:inline;color:#b5aa96;transition:color .15s;}
.en-char.done{color:#3a3a3a;}
.en-char.active{color:var(--red);font-weight:700;}
.en-rec-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;border-radius:12px;
  padding:15px;font-size:17px;font-weight:600;cursor:pointer;color:#fff;background:var(--red);
  box-shadow:0 2px 10px rgba(158,43,37,.22);}
.en-rec-btn:active{transform:scale(.99);}
.en-rec-btn.recording{background:#c0392b;animation:recpulse 1.3s infinite;}
.en-rec-btn.recorded{background:var(--green);box-shadow:0 2px 10px rgba(58,107,79,.22);}
.en-rec-ico{font-size:18px;line-height:1;}
.en-timer{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--red);text-align:center;margin-top:10px;}
.en-timer.ok{color:var(--green);}
.en-hint{font-size:12px;color:var(--muted);text-align:center;margin:10px 0 0;min-height:16px;}
.en-review{margin-top:14px;display:flex;flex-direction:column;gap:10px;}
.en-review audio{width:100%;height:36px;}
.enroll-form.en-recording .en-meta,
.enroll-form.en-recording .en-roles,
.enroll-form.en-recording .en-hint,
.enroll-form.en-recording .en-people-fold{display:none;}
.enroll-form.en-recording .en-script{font-size:20px;line-height:1.9;margin-bottom:14px;}
@keyframes recpulse{0%{box-shadow:0 0 0 0 rgba(192,57,43,.45);}70%{box-shadow:0 0 0 14px rgba(192,57,43,0);}100%{box-shadow:0 0 0 0 rgba(192,57,43,0);}}
.hidden{display:none!important;}
.speaker-card.sel{border-color:var(--green);background:#eef6f0;}
.speaker-card .mt{font-size:12px;color:var(--blue);margin-top:4px;}
.speaker-card .role-pick{margin-top:8px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff;}
.speaker-card .role-pick.hidden{display:none;}
.pick-actions{display:flex;gap:10px;margin-top:12px;}
.pick-actions .btn{flex:1;}
.toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9999;
  background:#2b2b2b;color:#fff;padding:12px 20px;border-radius:14px;font-size:15px;line-height:1.45;
  opacity:0;transition:.25s;pointer-events:none;max-width:min(88vw,320px);text-align:center;
  box-shadow:0 8px 32px rgba(0,0,0,.22);}
.toast.show{opacity:.94;}

/* ===== 桌面端：从手机底栏切换为左侧菜单 + 宽内容区 ===== */
@media (min-width:900px){
  body{
    background:linear-gradient(180deg,#fbfaf6 0%,#f0ebe1 100%);
  }
  .app{
    width:100%;
    max-width:none;
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    background:transparent;
  }
  .app-main{
    grid-column:2;
    grid-row:1;
    height:100dvh;
  }
  .tab-page{
    inset:34px 42px;
  }
  .tab-home,
  .tab-library{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .tabbar{
    grid-column:1;
    grid-row:1;
    flex-direction:column;
    gap:8px;
    min-height:0;
    padding:28px 18px;
    border-top:none;
    border-right:1px solid var(--line);
    background:#fffaf2;
    box-shadow:1px 0 0 rgba(255,255,255,.65) inset;
  }
  .tabbar::before{
    content:"百科王";
    display:block;
    margin:2px 8px 22px;
    font-size:22px;
    font-weight:800;
    color:var(--red);
    letter-spacing:1px;
  }
  .tabbar-item{
    flex:0 0 auto;
    width:100%;
    min-height:46px;
    flex-direction:row;
    justify-content:flex-start;
    gap:10px;
    padding:11px 13px;
    border-radius:10px;
    color:#5f5a50;
    font-size:15px;
    text-align:left;
  }
  .tabbar-item:hover{
    background:#f5efe3;
    color:var(--ink);
  }
  .tabbar-item.active{
    background:var(--red);
    color:#fff;
    box-shadow:0 8px 18px rgba(158,43,37,.18);
  }
  .tabbar-ico{
    width:24px;
    font-size:19px;
    text-align:center;
  }
  .tabbar-label{
    font-size:15px;
  }

  .home-page{
    width:min(1120px,100%);
    min-height:100%;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    gap:28px;
    align-content:center;
    padding:24px 0;
  }
  .home-page:has(.home-latest:not(.hidden)){
    grid-template-columns:minmax(360px,1fr) minmax(320px,390px);
    gap:28px 56px;
  }
  .home-header{
    grid-column:1 / -1;
    text-align:left;
    padding:0;
  }
  .home-header h1{
    font-size:42px;
    line-height:1.12;
    margin-bottom:10px;
  }
  .home-header .brand-slogan{
    max-width:460px;
    padding:0;
    margin:0;
    font-size:16px;
  }
  #settingsBtn{
    top:0;
    right:0;
  }
  .home-latest{
    grid-column:1;
    grid-row:2;
    margin:0;
  }
  .home-latest .cards{
    grid-template-columns:1fr;
  }
  .home-action{
    grid-column:1;
    grid-row:2;
    align-self:center;
    justify-self:center;
    justify-content:center;
    width:min(390px,100%);
    min-height:0;
    padding:44px 0 0;
    border:none;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
  }
  .home-page:has(.home-latest:not(.hidden)) .home-action{
    grid-column:2;
    align-self:center;
    width:100%;
    min-height:460px;
    padding:34px 30px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(255,255,255,.72);
    box-shadow:0 18px 45px rgba(84,68,38,.08);
  }
  .rec-btn{
    width:174px;
    height:174px;
  }
  .rec-btn .mic{
    font-size:70px;
  }
  .rec-btn .rec-label{
    font-size:15px;
  }

  .lib-body{
    width:min(1120px,100%);
    margin:0 auto;
    padding:0;
  }
  .lib-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    text-align:left;
    padding:0 0 18px;
    margin-bottom:18px;
    border-bottom:1px solid var(--line);
  }
  .lib-header h1{
    font-size:34px;
    line-height:1.15;
  }
  .lib-header .sub{
    padding-bottom:3px;
  }
  .stats{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin:0 0 16px;
  }
  .stat{
    padding:15px 12px;
  }
  .toolbar{
    justify-content:flex-end;
  }
  .tab-library .toolbar{
    margin-bottom:16px;
  }
  .cards{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }
  .qcard{
    padding:16px 18px;
  }
  #settingsModal .modal-card{
    width:min(440px,100%);
  }
  #cardModal .modal-card{
    width:min(760px,100%);
  }
}