/* ===== 03-layout.css —— 应用外壳 / 侧边栏 / 主区 / 通知面板（源自原型 V2.10，行区间 135-297） ===== */
  /* ===================== App shell ===================== */
  .app{display:flex;height:100vh;overflow:hidden;}

  /* ===== Sidebar (256w, navy gradient) ===== */
  .sidebar{
    width:256px;flex:none;
    background:var(--sidebar-grad);
    padding:24px 16px 20px;
    display:flex;flex-direction:column;gap:6px;
    color:var(--text-onnavy);
    overflow-y:auto;
  }
  .logo-block{display:flex;align-items:center;gap:11px;padding:0 4px;}
  .logo-block svg{width:30px;height:30px;flex:none;}
  .logo-text{display:flex;flex-direction:column;line-height:1.2;}
  .logo-text .name{font:700 18px/1.2 var(--font-cn);color:#fff;}
  .logo-text .sub{font:400 11px/1.4 var(--font-cn);color:var(--text-onnavy);margin-top:2px;}

  .divider{height:1px;background:rgba(255,255,255,.08);margin:14px 4px;}

  .nav-group{display:flex;flex-direction:column;gap:4px;}
  .nav-item{
    display:flex;align-items:center;gap:12px;
    padding:10px 12px;border-radius:8px;
    color:var(--text-onnavy);text-decoration:none;
    font:500 14px/1.3 var(--font-cn);cursor:pointer;
    transition:background .15s,color .15s;
  }
  .nav-item svg{width:20px;height:20px;flex:none;stroke:currentColor;}
  .nav-item:hover{background:rgba(255,255,255,.06);}
  .nav-item.active{background:rgba(201,162,74,.16);color:#F2D9A0;}

  .spacer{flex:1;min-height:8px;}

  .account-block{
    display:flex;align-items:center;gap:10px;
    padding:10px;
    background:rgba(255,255,255,.06);
    border-radius:10px;
  }
  .account-avatar{
    width:36px;height:36px;border-radius:999px;flex:none;
    background:var(--gold);color:var(--navy-800);
    display:flex;align-items:center;justify-content:center;
    font:700 15px/1 var(--font-cn);
  }
  .account-info{display:flex;flex-direction:column;line-height:1.3;min-width:0;flex:1;}
  .account-info .acc-name{font:700 13px/1.3 var(--font-cn);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .account-info .acc-role{font:400 11px/1.4 var(--font-cn);color:var(--text-onnavy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .logout-btn{
    width:32px;height:32px;flex:none;border:none;cursor:pointer;border-radius:8px;
    background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;
    transition:background .15s;
  }
  .logout-btn:hover{background:rgba(192,57,43,.35);}
  .logout-btn svg{width:16px;height:16px;stroke:#C7D2DE;}

  .prototype-tag{
    margin:12px 4px 0;padding:8px 10px;
    background:rgba(201,162,74,.12);
    border:1px dashed rgba(201,162,74,.35);
    border-radius:8px;
    font:500 11px/1.5 var(--font-cn);color:#E7C879;
    text-align:center;
  }

  /* ===== Main area ===== */
  .main{flex:1;display:flex;flex-direction:column;min-width:0;}

  /* TopBar (72h, white) */
  .topbar{
    height:72px;flex:none;
    background:var(--card);
    border-bottom:1px solid var(--topbar-border);
    display:flex;align-items:center;gap:16px;
    padding:0 28px;
  }
  .menu-btn{
    display:none;width:40px;height:40px;flex:none;border:none;cursor:pointer;
    background:var(--input-bg);border-radius:10px;align-items:center;justify-content:center;
  }
  .menu-btn svg{width:20px;height:20px;stroke:#6B7785;}
  .page-title{font:700 18px/1 var(--font-cn);color:var(--text-strong);white-space:nowrap;}
  .search-bar{
    width:360px;height:40px;flex:none;
    background:var(--input-bg);border-radius:10px;
    display:flex;align-items:center;gap:8px;padding:0 14px;
  }
  .search-bar svg{width:16px;height:16px;flex:none;}
  .search-bar input{
    border:none;background:transparent;outline:none;flex:1;
    font:400 14px/1 var(--font-cn);color:var(--text-body);min-width:0;
  }
  .search-bar input::placeholder{color:var(--text-meta);}
  .topbar .spacer{flex:1;}
  .sync-chip{
    display:inline-flex;align-items:center;gap:6px;flex:none;
    font:500 12px/1 var(--font-cn);color:var(--text-label);
    background:var(--input-bg);border-radius:999px;padding:7px 12px;white-space:nowrap;
  }
  .sync-chip .dot{width:7px;height:7px;border-radius:4px;background:#2E9E5B;flex:none;}
  .ai-button{
    height:40px;flex:none;
    background:var(--gold);color:var(--navy-800);
    border:none;border-radius:10px;cursor:pointer;
    display:flex;align-items:center;gap:8px;padding:0 16px;
    font:600 14px/1 var(--font-cn);white-space:nowrap;
    transition:filter .15s;
  }
  .ai-button:hover{filter:brightness(1.05);}
  .ai-button svg{width:18px;height:18px;flex:none;stroke:#0E2A47;}
  .bell-wrap{position:relative;flex:none;}
  .bell-button{
    width:40px;height:40px;flex:none;border:none;cursor:pointer;
    background:var(--input-bg);border-radius:10px;
    display:flex;align-items:center;justify-content:center;
  }
  .bell-button svg{width:20px;height:20px;stroke:#6B7785;}
  .badge-count{
    position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:9px;
    background:var(--danger);color:#fff;font:700 11px/17px var(--font-cn);text-align:center;padding:0 4px;
  }
  .topbar-avatar{
    width:36px;height:36px;flex:none;border-radius:999px;
    background:var(--gold);color:var(--navy-800);
    display:flex;align-items:center;justify-content:center;
    font:700 14px/1 var(--font-cn);
  }

  /* ===== Notification panel ===== */
  .notif-panel{
    position:fixed;top:78px;right:24px;width:344px;max-width:calc(100vw - 32px);
    background:var(--card);border:1px solid var(--border);border-radius:14px;
    box-shadow:0 12px 36px rgba(7,27,49,.16);z-index:70;overflow:hidden;display:none;
  }
  .notif-panel.show{display:block;}
  .notif-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px;border-bottom:1px solid var(--border);
  }
  .notif-head .t{font:700 15px/1 var(--font-cn);color:var(--text-strong);}
  .notif-head .clear{font:500 12px/1 var(--font-cn);color:var(--navy-600);cursor:pointer;background:none;border:none;}
  .notif-item{display:flex;gap:12px;padding:13px 18px;cursor:pointer;transition:background .12s;}
  .notif-item:hover{background:#F7F9FC;}
  .notif-item + .notif-item{border-top:1px solid #F2F3F7;}
  .notif-icon{
    width:36px;height:36px;border-radius:10px;flex:none;
    display:flex;align-items:center;justify-content:center;
  }
  .notif-icon svg{width:18px;height:18px;}
  .notif-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
  .notif-title{font:500 13px/1.4 var(--font-cn);color:var(--text-body);}
  .notif-meta{font:400 12px/1.4 var(--font-cn);color:var(--text-meta);}

  /* Content */
  .content{
    flex:1;overflow-y:auto;
    background:var(--canvas);
    padding:28px;
    display:none;flex-direction:column;gap:20px;
  }
  .content.active{display:flex;}