:root{
  --bg:#fafafa;--white:#fff;--muted:#9b9b9b;--text:#222;--line:#f0f0f0;--accent:#ff6b6b;
  --radius:12px;--pad:16px;--danger:#f04b4b;--success:#28a745;--trial:#ffeaa7;
}
*{box-sizing:border-box}
body{margin:0;font-family:"PingFang SC","Microsoft Yahei","Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.trial-banner{background:var(--trial);color:#2d3436;padding:8px var(--pad);text-align:center;font-size:14px;border-bottom:1px solid var(--line)}
.trial-banner a{color:var(--accent);font-weight:600;text-decoration:underline}
.migration-banner{background:#e8f5e8;color:#2d3436;padding:12px var(--pad);border-bottom:1px solid var(--line);font-size:14px}
.migration-banner.success{background:#d4edda;color:#155724}
.migration-banner.error{background:#f8d7da;color:#721c24}
.migration-content{display:flex;align-items:center;gap:12px;max-width:760px;margin:0 auto}
.migration-icon{font-size:20px}
.migration-text{flex:1}
.migration-text strong{display:block;margin-bottom:2px}
.migration-text p{margin:0;opacity:0.8}
.migration-actions{display:flex;gap:8px}
.btn-migrate{background:var(--accent);color:#fff;border:0;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer}
.btn-dismiss{background:#fff;color:var(--text);border:1px solid var(--line);padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer}
.app-header{display:flex;align-items:center;gap:10px;padding:18px var(--pad);background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;max-width:760px;margin:0 auto;width:100%}
.app-header-wrapper{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:9}
.app-title{font-size:20px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#f8f9fa;border:1px solid #e9ecef;color:#6c757d;cursor:pointer;transition:all 0.2s ease;padding:0;appearance:none;border-width:1px;
}
.back:hover{background:#e9ecef;color:#495057;transform:scale(1.05)}
.back:active{transform:scale(0.95)}
/* Ensure consistent back icon on all devices via SVG */
.back{font-size:0}
.back::before{
  content:''; display:block; width:18px; height:18px; background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}
.back:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* Icon masks (avoid emoji mojibake) */
.icon{display:inline-block;width:16px;height:16px;background-color:currentColor}
.icon-rocket{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 3l7 7-4.5 4.5-1.5-1.5-4 4v3H8v-3L5 14.5 3.5 13 8 8.5 6.5 7 11 2z" fill="black"/></svg>') no-repeat center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 3l7 7-4.5 4.5-1.5-1.5-4 4v3H8v-3L5 14.5 3.5 13 8 8.5 6.5 7 11 2z" fill="black"/></svg>') no-repeat center/contain;
}
.icon-key{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 7a5 5 0 1 0 4.33 7.5H22v-3h-2v-2h-2.17A5 5 0 0 0 14 7zM7 19h3v-2H7v2z" fill="black"/></svg>') no-repeat center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 7a5 5 0 1 0 4.33 7.5H22v-3h-2v-2h-2.17A5 5 0 0 0 14 7zM7 19h3v-2H7v2z" fill="black"/></svg>') no-repeat center/contain;
}
.icon-folder{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h7l2 2h9v10H3V6z" fill="black"/></svg>') no-repeat center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h7l2 2h9v10H3V6z" fill="black"/></svg>') no-repeat center/contain;
}
.icon-doc{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 3h9l3 3v15H6V3zm3 6h6v2H9V9zm0 4h6v2H9v-2zm0 4h6v2H9v-2z" fill="black"/></svg>') no-repeat center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 3h9l3 3v15H6V3zm3 6h6v2H9V9zm0 4h6v2H9v-2zm0 4h6v2H9v-2z" fill="black"/></svg>') no-repeat center/contain;
}
.icon-chart{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 20h16v-2H4v2zm2-4h3v-6H6v6zm5 0h3V8h-3v8zm5 0h3V5h-3v11z" fill="black"/></svg>') no-repeat center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 20h16v-2H4v2zm2-4h3v-6H6v6zm5 0h3V8h-3v8zm5 0h3V5h-3v11z" fill="black"/></svg>') no-repeat center/contain;
}
.container{max-width:760px;margin:0 auto;padding:12px var(--pad) 24px}
.card{background:var(--white);border:1px solid var(--line);border-radius:10px}
.flex{display:flex}
.between{justify-content:space-between}
.center{align-items:center}
.btn{cursor:pointer;border:0;background:var(--accent);color:#fff;padding:8px 14px;border-radius:8px;font-size:14px}
.btn-outline{background:#fff;color:var(--accent);border:1px solid rgba(255,107,107,.4)}
.tag{display:inline-block;background:var(--accent);color:#fff;padding:3px 8px;border-radius:999px;font-size:12px}
.list-row{display:flex;align-items:center;justify-content:space-between;padding:9px 16px;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:0}
.dot{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:12px}
@media (max-width:560px){.container{padding:10px 12px 110px}.list-row{padding:9px 12px}.footer-nav{max-width:100%;padding:0 12px}.app-header{max-width:100%;padding:18px 12px}}
/* Compact header actions on very small screens */
@media (max-width: 420px){
  /* Hide only the text label (second span), keep the icon visible */
  .app-nav-right a span + span{display:none}
  .app-nav-right a{padding:6px}
  .app-title{font-size:18px}
}
/* Trial banner smaller on mobile screens */
@media (max-width: 768px) {
  .trial-banner { font-size: 10px !important; padding:4px 8px !important; }
}