:root{
  --primary:#009688;
  --primary-hover:#00897b;
  --primary-active:#00796b;
  --primary-soft:rgba(0,150,136,.10);
  --bg:#f4f5f7;
  --surface:#ffffff;
  --surface-2:#f7f8fa;
  --surface-3:#eef0f3;
  --border:#ebedf0;
  --border-2:#dcdfe6;
  --text:#1f2329;
  --text-2:#51565d;
  --text-muted:#909399;
  --danger:#f56c6c;
  --success:#67c23a;
  --header-h:56px;
  --side-w:220px;
  --radius:10px;
  --radius-sm:7px;
  --chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23909399' d='M1 1l4 4 4-4'/></svg>");
  --shadow-sm:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(17,24,39,.18);
  --text-1:#51565d;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:var(--primary);text-decoration:none;}
a:hover{color:var(--primary-hover);}
.app{display:flex;flex-direction:column;height:100vh;overflow:hidden;}
.app-header{flex:0 0 var(--header-h);height:var(--header-h);display:flex;align-items:center;padding:0 16px 0 0;background:linear-gradient(135deg,#f8fffe,var(--surface));border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);z-index:30;}
.app-brand{flex:0 0 var(--side-w);width:var(--side-w);display:flex;align-items:center;gap:10px;padding:0 18px;height:100%;font-size:17px;font-weight:700;color:var(--primary);white-space:nowrap;}
.app-brand .logo-dot{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--primary),#33c4b6);display:inline-block;flex:0 0 auto;}
.app-header-toggle{margin-left:14px;display:none;width:36px;height:36px;border:none;background:transparent;color:var(--text-2);font-size:18px;cursor:pointer;border-radius:8px;align-items:center;justify-content:center;}
.app-header-toggle:hover{background:var(--surface-2);}
.app-header-spacer{flex:1 1 auto;}
.app-header-link{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;margin-right:6px;color:var(--text-2);border-radius:8px;font-size:14px;}
.app-header-link:hover{background:var(--surface-2);color:var(--text);}
[x-cloak]{visibility:hidden;}