[hidden]{display:none!important}
:root{
  color-scheme:light dark;
  --bg:#f5f5f7;--panel:rgba(255,255,255,.82);--panel-solid:#fff;--text:#1d1d1f;--muted:#77777d;
  --line:rgba(0,0,0,.12);--soft:rgba(0,0,0,.045);--shadow:rgba(0,0,0,.10);--danger:#ff0000;
  --safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);
}
@media(prefers-color-scheme:dark){
  :root{--bg:#000;--panel:rgba(20,20,20,.84);--panel-solid:#141414;--text:#f5f5f7;--muted:#9b9ba1;--line:rgba(255,255,255,.15);--soft:rgba(255,255,255,.055);--shadow:rgba(0,0,0,.55);--danger:#ff0000}
}
*{box-sizing:border-box}
html,body,#app{width:100%;height:100%;margin:0}
html,body{overflow:hidden;background:var(--bg);color:var(--text);font-family:MiSans,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
.app{position:fixed;inset:0;background:var(--bg)}
.canvas{position:fixed;top:var(--safe-t);right:var(--safe-r);bottom:var(--safe-b);left:var(--safe-l);overflow:hidden;touch-action:none}
.word{position:absolute;left:0;top:0;z-index:2;user-select:none;touch-action:none;will-change:transform}
.word-body{display:inline-block;max-width:min(52vw,720px);padding:7px 10px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.1;font-weight:520;letter-spacing:-.02em;opacity:.88;transform-origin:center;will-change:transform,opacity,filter}
.word:hover .word-body,.word.dragging .word-body{opacity:1}
.word-meta{position:absolute;left:10px;top:100%;display:flex;align-items:center;gap:8px;padding-top:3px;font-size:10px;color:var(--muted);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s ease}
.word:hover .word-meta,.word:focus-within .word-meta{opacity:1}
.word-delete{border:0;background:none;color:var(--danger);padding:0;font-size:10px;pointer-events:auto}
.actions{position:fixed;z-index:60;right:max(20px,var(--safe-r));bottom:max(22px,var(--safe-b));display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.round-btn,.account-btn,.icon-btn,.icon-text-btn{border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 8px 28px var(--shadow)}
.round-btn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;padding:0}
.round-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.account-btn{min-width:72px;height:46px;border-radius:24px;padding:0 17px;font-weight:650}
.loading{position:fixed;z-index:180;left:50%;top:max(18px,calc(var(--safe-t) + 14px));transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);backdrop-filter:blur(20px);font-size:12px;color:var(--muted);box-shadow:0 8px 28px var(--shadow)}
.spinner{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--text);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.status{position:fixed;z-index:170;left:50%;top:max(18px,calc(var(--safe-t) + 14px));transform:translateX(-50%);padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:12px;color:var(--muted);box-shadow:0 8px 28px var(--shadow)}
.backdrop{position:fixed;z-index:220;inset:0;background:rgba(0,0,0,.2);opacity:0;transition:opacity .22s ease}
.backdrop.show{opacity:1}
.sheet{position:fixed;z-index:230;left:50%;bottom:max(18px,var(--safe-b));transform:translate(-50%,calc(100% + 50px));width:min(620px,calc(100vw - var(--safe-l) - var(--safe-r) - 28px));border:1px solid var(--line);border-radius:20px;background:var(--panel);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:0 22px 70px var(--shadow);padding:8px 18px 18px;display:flex;flex-direction:column;overflow:hidden;opacity:0;transition:transform .34s cubic-bezier(.2,.82,.2,1),opacity .18s ease}
.sheet.open{transform:translate(-50%,0);opacity:1}
.message-sheet{height:min(640px,calc(100svh - var(--safe-t) - var(--safe-b) - 36px));min-height:min(640px,calc(100svh - var(--safe-t) - var(--safe-b) - 36px));max-height:min(640px,calc(100svh - var(--safe-t) - var(--safe-b) - 36px))}
.account-sheet{height:min(500px,calc(100svh - var(--safe-t) - var(--safe-b) - 36px));min-height:min(500px,calc(100svh - var(--safe-t) - var(--safe-b) - 36px));max-height:min(500px,calc(100svh - var(--safe-t) - var(--safe-b) - 36px))}
.admin-sheet{width:min(900px,calc(100vw - var(--safe-l) - var(--safe-r) - 28px));height:min(780px,calc(100svh - var(--safe-t) - var(--safe-b) - 28px));min-height:min(780px,calc(100svh - var(--safe-t) - var(--safe-b) - 28px));max-height:min(780px,calc(100svh - var(--safe-t) - var(--safe-b) - 28px))}
.grabber{width:38px;height:4px;border-radius:9px;background:var(--line);margin:1px auto 8px;flex:0 0 auto}
.sheet-head,.admin-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto}
.sheet-head{height:58px}
.sheet-head h2,.admin-head h2{font-size:21px;line-height:1.05;margin:2px 0 0}
.kicker{font-size:11px;color:var(--muted)}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;padding:0}
.icon-btn.mini{width:32px;height:32px;background:transparent;box-shadow:none}
.icon-btn svg,.icon-text-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.form-stack{display:flex;flex-direction:column;gap:12px}
.form-stack label,.editor-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
input,textarea,select{width:100%;border:1px solid var(--line);border-radius:10px;background:transparent;padding:11px 12px;outline:none}
textarea{resize:none}
input:focus,textarea:focus,select:focus{border-color:var(--text);box-shadow:0 0 0 3px var(--soft)}
.solid-btn,.line-btn,.danger-btn{min-height:40px;border-radius:10px;padding:9px 14px;font-weight:650}
.solid-btn{border:1px solid var(--text);background:var(--text);color:var(--bg)}
.line-btn{border:1px solid var(--line);background:transparent}
.danger-btn{border:1px solid var(--danger);background:transparent;color:var(--danger)}
.small{min-height:34px;padding:6px 11px;font-size:12px}
.message-list{flex:1 1 auto;min-height:0;overflow:auto;padding:2px 0}
.message-row{padding:11px 3px;border-bottom:1px solid var(--line)}
.message-row:last-child{border-bottom:0}
.message-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);margin-bottom:4px}
.message-text{font-size:14px;line-height:1.45}
.message-actions{margin-top:6px;display:flex;gap:8px}
.text-action{border:0;background:none;padding:0;color:var(--muted);font-size:11px}
.text-action.danger{color:var(--danger)}
.composer{flex:0 0 auto;border-top:1px solid var(--line);padding-top:12px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.composer textarea{min-height:62px;max-height:62px}
.account-body{flex:1 1 auto;min-height:0;overflow:auto;padding-top:12px}
.profile-name{font-size:18px;font-weight:700;padding:8px 0}
.compact-form{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px}
.admin-head{height:48px;border-bottom:1px solid var(--line)}
.admin-title{display:flex;align-items:baseline;gap:8px}
.admin-title .kicker{font-size:11px}
.admin-title h2{font-size:20px}
.admin-head-actions{display:flex;align-items:center;gap:7px}
.site-state{font-size:11px;color:var(--muted);white-space:nowrap}
.icon-text-btn{height:36px;border-radius:9px;padding:0 10px;display:flex;align-items:center;gap:6px;font-size:12px}
.tabs{display:flex;gap:3px;overflow-x:auto;flex:0 0 auto;padding:6px 0;border-bottom:1px solid var(--line);scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:transparent;color:var(--muted);padding:6px 9px;border-radius:7px;font-size:11px;white-space:nowrap}
.tabs button.active{background:var(--text);color:var(--bg)}
.admin-main{flex:1 1 auto;min-height:0;overflow:hidden}
.admin-list{height:100%;overflow:auto;overscroll-behavior:contain}
.admin-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:7px 2px;border-bottom:1px solid var(--line);min-height:48px}
.admin-row-main{min-width:0;display:grid;grid-template-columns:minmax(86px,.34fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:9px;row-gap:2px;align-items:center}
.admin-row-title{grid-column:1;grid-row:1;display:flex;align-items:center;gap:6px;min-width:0}
.admin-row-title strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{font-size:9px;border:1px solid var(--line);border-radius:999px;padding:1px 5px;color:var(--muted);white-space:nowrap}
.admin-row-body{grid-column:2;grid-row:1;margin:0;font-size:12px;line-height:1.25;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-row-meta{grid-column:1 / -1;grid-row:2;margin:0;font-size:9px;line-height:1.2;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-row-actions{display:flex;align-items:center;gap:4px;align-self:center}
.admin-action{border:1px solid var(--line);background:transparent;border-radius:7px;padding:4px 7px;font-size:10px;white-space:nowrap}
.admin-action.danger{border-color:var(--danger);color:var(--danger)}
.admin-foot{height:40px;flex:0 0 auto;display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.admin-foot #pageInfo{margin-right:auto}
.float-card{position:absolute;z-index:4;right:16px;top:70px;width:min(430px,calc(100% - 32px));padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-solid);box-shadow:0 16px 44px var(--shadow)}
.float-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.admin-composer textarea{min-height:88px}
.check{display:flex;align-items:center;gap:6px;margin:10px 0;font-size:12px;color:var(--muted)}
.check input{width:auto}
.split{display:flex;gap:8px}
.split>*{flex:1}
.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
.admin-empty,.list-loading{height:100%;display:grid;place-items:center;color:var(--muted);font-size:12px}
.list-loading-inner{display:flex;align-items:center;gap:8px}
.closed-gate{position:fixed;z-index:210;inset:0;background:#000;color:#fff;display:grid;place-items:center;padding:24px}
.closed-inner{text-align:center;max-width:360px}
.closed-title{font-size:26px;font-weight:760}
.closed-sub{margin-top:8px;color:#aaa;font-size:13px}
.closed-actions{display:flex;justify-content:center;gap:8px;margin-top:22px}
.closed-gate .solid-btn{background:#fff;color:#000;border-color:#fff}
.closed-gate .line-btn{border-color:#444;color:#fff}
.dialog{border:0;padding:0;background:transparent;color:var(--text)}
.dialog::backdrop{background:rgba(0,0,0,.32)}
.dialog-body{width:min(420px,calc(100vw - 32px));padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel-solid);box-shadow:0 20px 70px var(--shadow)}
.dialog-head h3{margin:0 0 8px;font-size:18px}
.dialog-body p{color:var(--muted);font-size:13px}
.dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.toasts{position:fixed;z-index:300;left:50%;bottom:max(20px,var(--safe-b));transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--text);color:var(--bg);border-radius:10px;padding:9px 12px;font-size:12px;box-shadow:0 12px 30px var(--shadow)}
.toast.error{background:var(--danger);color:#fff}
@media(max-width:720px){
  .word-body{max-width:58vw;padding:6px 8px}
  .word-meta{display:none}
  .actions{right:max(16px,var(--safe-r));bottom:max(18px,var(--safe-b));gap:9px}
  .round-btn{width:46px;height:46px}
  .account-btn{height:44px}
  .sheet{left:0;right:0;bottom:0;width:100%;transform:translateY(calc(100% + 40px));border-radius:20px 20px 0 0;border-left:0;border-right:0;border-bottom:0;padding:8px max(16px,var(--safe-r)) max(14px,var(--safe-b)) max(16px,var(--safe-l))}
  .sheet.open{transform:translateY(0)}
  .message-sheet{height:72svh;min-height:72svh;max-height:72svh}
  .account-sheet{height:62svh;min-height:62svh;max-height:62svh}
  .admin-sheet{height:90svh;min-height:90svh;max-height:90svh}
  .admin-head-actions .icon-text-btn span{display:none}
  .admin-head-actions .icon-text-btn{width:36px;padding:0;justify-content:center}
  .site-state{display:none}
  .tabs{padding:5px 0}
  .tabs button{padding:6px 8px}
  .admin-row{padding:6px 1px;min-height:46px}
  .admin-row-main{grid-template-columns:minmax(72px,.30fr) minmax(0,1fr);column-gap:7px}
  .admin-row-title strong{font-size:11px}
  .admin-row-body{font-size:11px}
  .admin-row-meta{font-size:8.5px}
  .admin-row-actions{gap:3px}
  .admin-action{padding:4px 6px;font-size:9.5px}
  .admin-foot{height:38px}
  .float-card{right:12px;top:64px;width:calc(100% - 24px)}
  .compact-form{grid-template-columns:1fr}
}
@media(max-width:430px){
  .admin-title .kicker{display:none}
  .admin-title h2{font-size:18px}
  .editor-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
@media (max-height:520px) and (orientation:landscape){
  .sheet{padding:6px 12px 7px!important}
  .admin-sheet{
    width:min(980px,calc(100vw - var(--safe-l) - var(--safe-r) - 12px))!important;
    height:calc(100svh - var(--safe-t) - var(--safe-b) - 8px)!important;
    min-height:calc(100svh - var(--safe-t) - var(--safe-b) - 8px)!important;
    max-height:calc(100svh - var(--safe-t) - var(--safe-b) - 8px)!important
  }
  .admin-sheet .grabber{display:none}
  .admin-head{height:36px!important}
  .admin-title .kicker{display:none}
  .admin-title h2{font-size:16px!important;margin:0}
  .admin-head-actions{gap:4px!important}
  .admin-head-actions .icon-text-btn{height:30px!important;padding:0 7px!important;font-size:10px!important}
  .admin-head-actions .icon-btn{width:30px!important;height:30px!important}
  .site-state{font-size:9px!important}
  .tabs{padding:2px 0!important;gap:2px!important}
  .tabs button{padding:4px 7px!important;font-size:10px!important}
  .admin-row{padding:4px 1px!important;min-height:40px!important;gap:5px!important}
  .admin-row-main{grid-template-columns:minmax(68px,.26fr) minmax(0,1fr)!important;column-gap:6px!important;row-gap:1px!important}
  .admin-row-title strong{font-size:10.5px!important}
  .admin-row-body{font-size:10.5px!important;line-height:1.15!important}
  .admin-row-meta{font-size:8px!important}
  .admin-row-actions{gap:2px!important}
  .admin-action{padding:3px 5px!important;font-size:9px!important;border-radius:6px!important}
  .admin-foot{height:30px!important;gap:5px!important}
  .admin-foot .small{min-height:27px!important;padding:3px 8px!important;font-size:10px!important}
  .float-card{top:44px!important;max-height:calc(100% - 52px)!important;overflow:auto!important}
}

.word.dragging .word-body{transform:scale(1.08);transition:transform .16s cubic-bezier(.34,1.56,.64,1)}

.admin-logout-btn{color:var(--danger)}
.word-meta{
  transform:translateY(-5px) scale(.96);
  transform-origin:left top;
  transition:opacity .18s cubic-bezier(.22,.9,.25,1),transform .28s cubic-bezier(.34,1.56,.64,1)
}
.word:hover .word-meta,.word:focus-within .word-meta,.word.tap-open .word-meta{opacity:1;transform:translateY(0) scale(1)}
.sheet{transition:transform .40s cubic-bezier(.22,1.10,.32,1),opacity .20s ease}
.round-btn,.account-btn,.icon-btn,.icon-text-btn,.solid-btn,.line-btn,.danger-btn,.admin-action{
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity .18s ease,background-color .18s ease,border-color .18s ease
}
@media(hover:hover){
  .round-btn:hover,.account-btn:hover,.icon-btn:hover,.icon-text-btn:hover,.solid-btn:hover,.line-btn:hover,.admin-action:hover{transform:translateY(-1px) scale(1.025)}
}
.round-btn:active,.account-btn:active,.icon-btn:active,.icon-text-btn:active,.solid-btn:active,.line-btn:active,.danger-btn:active,.admin-action:active{transform:scale(.94)}

.canvas.dense-words .word-body{padding:3px 5px;line-height:1.05}

.word.tap-open,.word:focus-within{z-index:40}
.word.meta-up .word-meta{top:auto!important;bottom:calc(100% + 6px)!important;transform-origin:left bottom}
.word.meta-right .word-meta{left:auto!important;right:0!important;transform-origin:right top}
.word.meta-up.meta-right .word-meta{transform-origin:right bottom}
@keyframes xinxinToastIn{0%{opacity:0;transform:translateY(8px) scale(.96)}65%{opacity:1;transform:translateY(-1px) scale(1.015)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes xinxinDialogIn{0%{opacity:0;transform:translateY(10px) scale(.965)}70%{opacity:1;transform:translateY(-1px) scale(1.01)}100%{opacity:1;transform:translateY(0) scale(1)}}
.toast{animation:xinxinToastIn .28s cubic-bezier(.34,1.56,.64,1)}
.prompt-dialog[open]{animation:xinxinDialogIn .30s cubic-bezier(.22,1.12,.32,1)}

.word-detail-card{left:8px;top:calc(100% + 7px);min-width:168px;max-width:min(280px,82vw);display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 12px 34px var(--shadow);color:var(--text);font-size:11px;line-height:1.3;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px) scale(.96);transform-origin:left top;transition:opacity .16s ease,transform .28s cubic-bezier(.34,1.56,.64,1),visibility 0s linear .28s}
.word:focus-within .word-detail-card,.word.tap-open .word-detail-card{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s}
@media(hover:hover){.word:hover .word-detail-card{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s}}
.word-detail-head{display:flex;align-items:center;gap:6px;min-width:0}.word-detail-author{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.word-detail-badge{border:1px solid var(--line);border-radius:999px;padding:1px 5px;font-size:9px;color:var(--muted)}.word-detail-time{color:var(--muted);font-size:10px;white-space:nowrap}.word-detail-extra{color:var(--muted);font-size:9px;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.word-detail-card .word-delete{align-self:flex-start;margin-top:2px;padding:3px 0;font-size:10px;font-weight:650;color:var(--danger);pointer-events:auto}
