:root{--purple:#6c38f2;--purple-dark:#291260;--navy:#15154c;--ink:#15162f;--muted:#73758f;--line:#e8e6f0;--panel:#fff;--bg:#f7f7fb}
.workspace{grid-template-rows:minmax(0,1fr)!important;padding:18px 24px!important}
.side-art{margin:auto -14px 10px!important;gap:0!important}.side-art:before{content:"";display:block;width:230px;height:205px;background:url('/images/sidebar-qihmiao-cat.webp?v=20260813-optimized') center bottom/contain no-repeat;transform:scaleX(-1);filter:drop-shadow(0 18px 24px rgba(29,8,87,.22))}.side-art span{margin-top:-10px;color:#f0ebff!important;font-weight:700}
.side-panel{padding:24px 20px 18px!important}.brand{padding:0 4px}.user-card{margin-top:20px!important;padding:10px 8px;border-radius:14px;background:rgba(25,8,79,.13)}.credit-card{margin:14px 0 18px!important;padding:14px 16px!important;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.09))!important;box-shadow:inset 0 1px rgba(255,255,255,.14)}#mainNav{gap:5px!important}.nav-caption{margin:8px 10px 3px;color:#cabfff;font-size:11px;font-weight:700;letter-spacing:1.4px}.account-caption{margin-top:13px}nav button{min-height:48px;padding:12px 15px!important}nav button.active{background:linear-gradient(90deg,rgba(35,11,102,.72),rgba(255,255,255,.15))!important;box-shadow:inset 3px 0 #fff,0 8px 18px rgba(27,6,85,.14)!important}.side-art{display:grid!important;min-height:190px;place-items:end center!important;overflow:visible!important}.side-art:before{width:230px!important;height:205px!important}.side-art span:first-child{font-size:inherit!important;color:inherit!important;text-shadow:none!important}.side-panel footer{margin-top:4px}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:var(--ink);background:var(--bg);overflow:hidden}.app-shell{display:grid;grid-template-columns:280px minmax(0,1fr);height:100vh}.side-panel{position:relative;display:flex;flex-direction:column;min-height:0;padding:30px 22px 22px;color:#fff;background:radial-gradient(circle at 15% 80%,#8f67ff 0,transparent 30%),linear-gradient(155deg,#7444ff 0,#6633ed 46%,#32157a 100%);border-radius:0 28px 28px 0;box-shadow:14px 0 34px rgba(61,32,139,.14);overflow:hidden}.brand{display:flex;align-items:center;gap:13px;color:#fff;text-decoration:none;font-size:27px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.18);font-size:26px}.user-card{display:flex;align-items:center;gap:12px;margin-top:30px}.user-card img{width:52px;height:52px;border:3px solid rgba(255,255,255,.45);border-radius:50%;object-fit:cover}.user-card div{display:grid;gap:5px}.user-card strong{font-size:17px}.user-card span{width:max-content;padding:3px 8px;border-radius:999px;background:#8052ff;color:#f7df68;font-size:11px}.credit-card{display:grid;gap:8px;margin:22px 0 28px;padding:18px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.12)}.credit-card>span{font-size:12px;color:#ddd4ff}.credit-card strong{font-size:12px}.credit-card i{font-style:normal;color:#e8dcff}.credit-card b{margin:0 6px;font-size:25px}nav{display:grid;gap:9px}nav button{display:flex;align-items:center;gap:13px;width:100%;padding:14px 17px;border:0;border-radius:12px;color:#eee8ff;background:transparent;font:600 16px inherit;text-align:left;cursor:pointer;transition:.18s}nav button span{width:22px;font-size:21px;text-align:center}nav button:hover{background:rgba(255,255,255,.10)}nav button.active{color:#fff;background:linear-gradient(90deg,rgba(29,10,80,.48),rgba(255,255,255,.14));box-shadow:inset 3px 0 #fff}.side-art{display:grid;place-items:center;gap:7px;margin:auto 0 18px;color:#d7cbff;font-size:12px}.side-art span:first-child{font-size:48px;color:#c3aaff;text-shadow:0 0 32px #d6c9ff}.side-panel footer{display:flex;justify-content:space-between;align-items:center;padding-top:15px;border-top:1px solid rgba(255,255,255,.15);font-size:11px;color:#cfc5ef}.side-panel footer button{border:0;color:#cfc5ef;background:none;cursor:pointer}.workspace{display:grid;grid-template-rows:auto auto minmax(0,1fr);min-width:0;min-height:0;padding:0 24px 20px}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:92px;padding:18px 8px}.topbar h1,.topbar p{margin:0}.topbar h1{font-size:24px}.topbar p{margin-top:7px;color:var(--muted);font-size:13px}.top-actions{display:flex;align-items:center;gap:10px}.top-actions button{padding:10px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#32344e;font-weight:700;cursor:pointer}.top-actions #rechargeButton{border-color:var(--purple);color:#fff;background:linear-gradient(135deg,#7444ff,#6531e8)}.autosave{color:#24a76b;font-size:12px}.account-tabs{display:flex;gap:3px;margin:0 0 12px;padding:8px;border:1px solid var(--line);border-radius:13px;background:#fff}.account-tabs button{padding:10px 18px;border:0;border-radius:9px;color:#696b82;background:transparent;font-weight:700;cursor:pointer}.account-tabs button.active{color:var(--purple);background:#f2edff}#toolFrame{width:100%;height:100%;min-height:0;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 15px 40px rgba(31,21,62,.08);opacity:0;transition:opacity .18s}.loading{position:absolute;left:calc(50% + 110px);top:48%;color:#817a94}.workspace.ready #toolFrame{opacity:1}.workspace.ready .loading{display:none}@media(max-width:900px){.app-shell{grid-template-columns:84px minmax(0,1fr)}.side-panel{padding:22px 12px}.brand strong,.user-card div,.credit-card,.side-art,nav button:not(.active){font-size:0}.brand{justify-content:center}.user-card{justify-content:center}.user-card img{width:44px;height:44px}nav button{justify-content:center;padding:13px}nav button span{font-size:21px}.side-panel footer{display:none}.workspace{padding:0 12px 12px}.autosave{display:none}}
.credit-line{display:flex;align-items:center;justify-content:space-between;gap:8px}.credit-line strong{min-width:0}.credit-line button{flex:none;padding:7px 13px;border:1px solid rgba(255,255,255,.45);border-radius:9px;background:#fff;color:#6233dd;font-weight:800;cursor:pointer;box-shadow:0 7px 16px rgba(27,7,82,.16);transition:.18s}.credit-line button:hover{transform:translateY(-2px);background:#f3edff;box-shadow:0 11px 22px rgba(27,7,82,.23)}
.recharge-modal[hidden]{display:none!important}.recharge-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:20px;background:rgba(25,16,52,.58);backdrop-filter:blur(10px)}.recharge-dialog,.pay-dialog{width:min(920px,96vw);max-height:88vh;overflow:auto;border:1px solid rgba(255,255,255,.7);border-radius:25px;background:#fbfaff;box-shadow:0 32px 90px rgba(25,12,63,.34);animation:recharge-in .2s ease-out}.recharge-dialog header{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 27px;border-bottom:1px solid #e9e2f6;background:radial-gradient(circle at 88% 20%,rgba(139,91,255,.18),transparent 30%),linear-gradient(120deg,#fff,#f5f0ff)}.recharge-dialog header span,.pay-kicker{color:#7442ee;font-size:11px;font-weight:900;letter-spacing:2px}.recharge-dialog h2,.recharge-dialog p,.pay-dialog h2{margin:0}.recharge-dialog h2{margin-top:4px;color:#25174c;font-size:25px}.recharge-dialog header p{margin-top:6px;color:#7b718f;font-size:13px}.recharge-dialog header button,.pay-close{width:38px;height:38px;border:1px solid #dfd5f5;border-radius:50%;background:#fff;color:#7251ba;font-size:24px;cursor:pointer}.modal-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;padding:26px}.modal-plan{position:relative;display:grid;gap:9px;min-height:245px;padding:24px 18px;border:1px solid #ded5f1;border-radius:18px;background:linear-gradient(150deg,#fff,#faf8ff);color:#332651;text-align:left;cursor:pointer;box-shadow:0 9px 22px rgba(64,38,119,.06);transition:.18s}.modal-plan:hover,.modal-plan.featured{transform:translateY(-4px);border-color:#7542ee;box-shadow:0 18px 35px rgba(87,48,181,.18)}.modal-plan.featured{background:radial-gradient(circle at 90% 10%,rgba(159,112,255,.18),transparent 35%),#fff}.modal-plan em{position:absolute;right:12px;top:-10px;padding:5px 10px;border-radius:999px;background:#7040ed;color:#fff;font-size:10px;font-style:normal}.modal-plan>span{color:#8a7ca5;font-size:11px;font-weight:800}.modal-plan strong{color:#251748;font-size:39px;line-height:1}.modal-plan strong small{margin-right:3px;font-size:16px}.modal-plan b{color:#6536da;font-size:16px}.modal-plan i{align-self:end;color:#7142e9;font-size:12px;font-style:normal;font-weight:900}.modal-loading{grid-column:1/-1;padding:60px;text-align:center;color:#827796}.recharge-note{margin:0 26px 26px;padding:12px 15px;border-radius:12px;background:#f3effc;color:#786d8c;font-size:12px}.pay-dialog{position:relative;display:grid;width:min(430px,95vw);place-items:center;padding:30px;text-align:center}.pay-close{position:absolute;right:18px;top:18px}.pay-dialog h2{margin:6px 0 15px;color:#28194d}.pay-amount{color:#5d30cf;font-size:36px}.pay-amount b{font:inherit}.pay-qr{display:grid;width:220px;height:220px;place-items:center;margin:18px;border:1px solid #e0d8f3;border-radius:18px;background:#fff}.pay-qr img{max-width:196px;max-height:196px}.pay-qr span{color:#9186a5;font-size:12px}.pay-dialog p{color:#7d728f;font-size:12px}.pay-dialog a{color:#6536db}.pay-check{width:100%;margin-top:15px;padding:13px;border:0;border-radius:12px;background:linear-gradient(135deg,#784aff,#5930d9);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 12px 25px rgba(92,48,216,.25)}@keyframes recharge-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:760px){.modal-plans{grid-template-columns:repeat(2,1fr);padding:18px}.modal-plan{min-height:190px}.recharge-dialog header{padding:20px}.recharge-note{margin:0 18px 18px}}
#mainNav{display:grid!important;gap:9px!important}#mainNav .nav-caption{margin:11px 9px 1px!important;color:#d8ceff!important;font-size:10px!important;font-weight:800!important;letter-spacing:1.5px!important}#mainNav .account-caption{margin-top:15px!important}#mainNav button{position:relative;display:grid!important;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;width:100%;min-height:52px!important;padding:9px 13px!important;overflow:hidden;border:1px solid rgba(255,255,255,.10)!important;border-radius:14px!important;background:linear-gradient(110deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;color:#f3efff!important;font-size:14px!important;font-weight:700!important;line-height:1.2!important;box-shadow:inset 0 1px rgba(255,255,255,.07),0 6px 15px rgba(32,8,91,.07)!important;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease!important}#mainNav button:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.16),transparent 58%);opacity:0;transition:opacity .2s}#mainNav button span{position:relative;z-index:1;display:grid;width:32px!important;height:32px;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.09);font-size:17px!important;line-height:1!important;transition:transform .2s ease,background .2s ease}#mainNav button:hover{transform:translateX(4px);border-color:rgba(255,255,255,.30)!important;background:linear-gradient(110deg,rgba(255,255,255,.16),rgba(255,255,255,.07))!important;box-shadow:0 11px 23px rgba(28,5,83,.17)!important}#mainNav button:hover:before{opacity:1}#mainNav button:hover span{transform:scale(1.07) rotate(-3deg);background:rgba(255,255,255,.17)}#mainNav button.active{transform:translateX(3px);border-color:rgba(255,255,255,.42)!important;background:linear-gradient(105deg,rgba(29,9,84,.64),rgba(255,255,255,.18))!important;color:#fff!important;box-shadow:inset 3px 0 #fff,0 12px 26px rgba(24,4,75,.22)!important}#mainNav button.active span{background:#fff;color:#6331db;box-shadow:0 7px 16px rgba(24,3,72,.20)}#mainNav button:active{transform:translateX(3px) scale(.98)}#mainNav button:focus-visible{outline:3px solid rgba(255,255,255,.35);outline-offset:2px}

/* 品牌标识 */
.side-panel .brand{position:relative;width:100%;min-height:44px;justify-content:center;padding:0;font-family:"Microsoft YaHei UI","PingFang SC","Noto Sans SC",sans-serif}
.side-panel .brand strong{width:100%;font-size:25px;font-weight:600;letter-spacing:.04em;line-height:44px;text-align:center}
.side-panel .brand-mark{width:44px;height:44px;padding:0;overflow:hidden;border-radius:13px;background:transparent;box-shadow:0 7px 18px rgba(27,7,82,.22)}
.side-panel .brand .brand-mark{position:absolute;left:16px;top:0}
.side-panel .brand-mark img{display:block;width:100%;height:100%;object-fit:cover}

/* 侧栏退出卡片 */
.side-panel footer{padding:0;border:0}
.side-panel footer #logoutButton{position:relative;display:grid;width:100%;min-height:52px;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;padding:9px 13px;overflow:hidden;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:linear-gradient(110deg,rgba(255,255,255,.075),rgba(255,255,255,.035));color:#f3efff;font-size:14px;font-weight:700;line-height:1.2;text-align:left;box-shadow:inset 0 1px rgba(255,255,255,.07),0 6px 15px rgba(32,8,91,.07);transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
.side-panel footer #logoutButton span{display:grid;width:32px;height:32px;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.09);color:#fff;font-size:18px}
.side-panel footer #logoutButton:hover{transform:translateX(4px);border-color:rgba(255,255,255,.30);background:linear-gradient(110deg,rgba(255,255,255,.16),rgba(255,255,255,.07));box-shadow:0 11px 23px rgba(28,5,83,.17)}
.side-panel footer #logoutButton:focus-visible{outline:3px solid rgba(255,255,255,.35);outline-offset:2px}

/* 手机端：工作区全宽，功能导航固定在底部 */
@media(max-width:900px){
  html,body{width:100%;overflow:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .app-shell{display:block;height:100dvh}
  .workspace{height:100dvh;padding:0 0 68px!important}
  #toolFrame{display:block;width:100%;height:100%;border:0;border-radius:0;box-shadow:none}
  .loading{left:0;right:0;top:45%;text-align:center}
  .side-panel{position:fixed;right:0;bottom:0;left:0;z-index:4000;display:block;width:100%;height:68px;min-height:0;padding:6px 8px max(6px,env(safe-area-inset-bottom))!important;border-radius:18px 18px 0 0;background:linear-gradient(135deg,#7543f5,#5123bd);box-shadow:0 -8px 28px rgba(37,15,91,.24);overflow-x:auto;overflow-y:hidden}
  .side-panel .brand,.side-panel .user-card,.side-panel .credit-card,.side-panel .side-art,.side-panel footer,.side-panel .nav-caption{display:none!important}
  #mainNav{display:grid!important;width:max-content;min-width:100%;height:56px;grid-template-columns:repeat(6,minmax(66px,1fr));gap:3px!important}
  #mainNav button,#mainNav button:not(.active){display:flex!important;min-width:66px;min-height:54px!important;flex-direction:column;justify-content:center;gap:2px;padding:4px 6px!important;border:0!important;border-radius:11px!important;background:transparent!important;color:#e8ddff!important;font-size:10px!important;line-height:1.15!important;box-shadow:none!important;transform:none!important}
  #mainNav button span{display:block!important;width:auto!important;height:auto!important;border:0!important;background:transparent!important;color:inherit!important;font-size:19px!important;box-shadow:none!important}
  #mainNav button.active{background:rgba(255,255,255,.18)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)!important}
  #mainNav button:before{display:none}
  .recharge-modal{padding:12px}
}