/* 城南笔记全站统一页头：dashboard.html 与 ai.html 共用 */
.cn-global-header{
  position:relative!important;
  z-index:20;
  display:flex;
  flex-direction:column;
  margin:10px 10px 0!important;
  min-height:286px;
  padding:18px 26px 20px!important;
  border-radius:34px!important;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(180deg,#e23f3f 0%,#cf3030 100%)!important;
  box-shadow:0 10px 26px rgba(190,42,42,.22);
}
.cn-header-main{
  display:grid;
  grid-template-columns:minmax(220px,.9fr) minmax(280px,1.4fr) 72px;
  align-items:center;
  gap:14px;
  min-height:112px;
  padding:12px 14px;
  border:2px solid transparent;
  border-radius:24px;
  background:linear-gradient(105deg,#ff8539 0%,#f34845 100%) padding-box,
             linear-gradient(120deg,#ffd27a 0%,#ff7b3d 38%,#f04445 72%,#c92c42 100%) border-box;
  box-shadow:0 0 0 2px rgba(255,174,91,.35),0 10px 24px rgba(190,42,42,.24);
}
.cn-site-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  color:#fff;
  text-decoration:none!important;
}
.cn-logo-mark{display:block;flex:0 0 62px;width:62px;height:48px;border-radius:12px;object-fit:fill;box-shadow:0 6px 14px rgba(130,20,35,.22)}
.cn-brand-copy{min-width:0}
.cn-brand-copy strong{
  display:block;
  color:#fff;
  font-size:27px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}
.cn-brand-copy strong span{color:#ffd27a}
.cn-brand-copy small{
  display:block;
  margin-top:7px;
  color:rgba(255,255,255,.9);
  font-size:12px;
  letter-spacing:1px;
  white-space:nowrap;
}
.cn-global-search{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  height:48px;
  padding:5px 9px;
  border:2px solid rgba(255,255,255,.78);
  border-radius:999px;
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.cn-search-icon{
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:10px;
  background:#c93632;
  color:#fff;
  font-size:13px;
  font-weight:900;
}
.cn-global-search input{
  width:100%;
  min-width:0;
  border:0!important;
  outline:0;
  background:transparent!important;
  color:#fff!important;
  font:inherit;
  font-size:15px;
}
.cn-global-search input::placeholder{color:rgba(255,255,255,.88)}
.cn-api-entry{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:70px;
  height:70px;
  border:1px solid rgba(255,255,255,.6)!important;
  border-radius:50%;
  background:linear-gradient(145deg,#ef3f4c,#c91e31)!important;
  color:#fff!important;
  font-size:20px;
  font-weight:950;
  line-height:1.05;
  text-decoration:none!important;
  box-shadow:0 8px 16px rgba(130,20,35,.25);
}
.cn-api-entry small{margin-top:4px;font-size:11px;font-weight:750}
.cn-risk-tip{
  margin:14px auto 20px;
  color:#ffe0a3;
  font-size:14px;
  line-height:1.4;
  text-align:center;
}
.cn-global-header .links{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  margin:0!important;
  overflow:visible!important;
}
.cn-global-header .links a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:44px;
  padding:8px 6px;
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:14px;
  background:rgba(255,255,255,.12)!important;
  color:#fff!important;
  font-size:15px;
  font-weight:800;
  line-height:1.25;
  text-align:center;
  text-decoration:none!important;
  white-space:normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.cn-global-header .links a.on,
.cn-global-header .links a:hover{
  background:rgba(255,255,255,.24)!important;
  border-color:rgba(255,255,255,.42)!important;
  color:#fff!important;
}
.cn-global-header a:focus-visible,
.cn-global-search input:focus-visible{
  outline:3px solid rgba(255,225,164,.8);
  outline-offset:2px;
}
@media(max-width:860px){
  .cn-global-header{
    min-height:0;
    margin:8px 8px 0!important;
    padding:6px 8px 7px!important;
    border-radius:20px!important;
  }
  .cn-header-main{
    grid-template-columns:minmax(0,1fr) 46px;
    grid-template-rows:auto auto;
    gap:3px;
    min-height:0;
    padding:5px;
    border-radius:16px;
  }
  .cn-site-brand{grid-column:1;grid-row:1;gap:6px}
  .cn-logo-mark{flex-basis:42px;width:42px;height:32px;border-radius:8px}
  .cn-brand-copy strong{font-size:18px}
  .cn-brand-copy small{margin-top:2px;font-size:9px;letter-spacing:0}
  .cn-global-search{grid-column:1 / -1;grid-row:2;height:30px;padding:3px 6px}
  .cn-search-icon{flex-basis:24px;width:24px;height:24px;border-radius:7px;font-size:10px}
  .cn-global-search input{font-size:12px}
  .cn-api-entry{grid-column:2;grid-row:1;width:40px;height:40px;font-size:14px}
  .cn-api-entry small{font-size:8px}
  .cn-risk-tip{margin:3px auto 4px;font-size:10px;line-height:1.15}
  .cn-global-header .links{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .cn-global-header .cn-dashboard-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .cn-global-header .cn-dashboard-nav a[data-tab="calendar"],
  .cn-global-header .cn-dashboard-nav a[data-tab="ann"]{display:none}
  .cn-global-header .links a{min-height:28px;padding:4px 3px;border-radius:9px;font-size:12px}
}
@media(max-width:420px){
  .cn-global-header{padding:5px 7px 6px!important}
  .cn-header-main{gap:3px;padding:4px}
  .cn-logo-mark{flex-basis:38px;width:38px;height:30px}
  .cn-brand-copy strong{font-size:17px}
  .cn-brand-copy small{font-size:8px}
  .cn-global-search{height:28px}
  .cn-api-entry{width:38px;height:38px}
  .cn-risk-tip{margin:2px auto 3px;font-size:9px}
  .cn-global-header .links{gap:4px}
  .cn-global-header .links a{min-height:26px;padding:3px 2px;font-size:11.5px}
}
/* AI工作台在统一头部下保留满屏对话区 */
.cn-ai-shell{
  height:calc(100dvh - 296px);
  min-height:calc(100dvh - 296px);
}
.cn-ai-shell>.workspace{height:100%;max-height:100%}
.cn-ai-online{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:0;
  color:#748096;
  font-size:11px;
  white-space:nowrap;
}
.cn-ai-online .dot{width:7px;height:7px;margin:0;background:#68c9a1;border-radius:50%}
@media(max-width:860px){
  .cn-ai-shell{height:calc(100dvh - 194px);min-height:calc(100dvh - 194px)}
  .cn-ai-online{margin-right:auto}
  .cn-ai-online span:last-child{display:none}
}
@media(max-width:420px){
  .cn-ai-shell{height:calc(100dvh - 170px);min-height:calc(100dvh - 170px)}
}
@media(prefers-reduced-motion:reduce){
  .cn-global-header *{scroll-behavior:auto!important;transition:none!important}
}
/* Keep touch-triggered focus rings compact and follow the rounded controls. */
.cn-site-brand{width:fit-content;max-width:100%;justify-self:start;border-radius:14px}
.cn-global-header a:focus-visible{outline:2px solid rgba(255,225,164,.9);outline-offset:3px}
.cn-global-search:focus-within{outline:2px solid rgba(255,225,164,.9);outline-offset:2px}
.cn-global-search input:focus-visible{outline:0!important;outline-offset:0}

/* 玻璃渐变统一页头 */
.cn-global-header{
  border:1px solid rgba(255,255,255,.42)!important;
  background:radial-gradient(ellipse at 10% 0%,rgba(255,191,126,.30),transparent 45%),linear-gradient(135deg,rgba(255,105,115,.86),rgba(238,91,111,.78))!important;
  box-shadow:0 14px 34px rgba(174,39,55,.20),inset 0 1px 0 rgba(255,255,255,.48)!important;
  backdrop-filter:blur(24px) saturate(155%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(155%)!important;
}
.cn-header-main{
  border:1px solid rgba(255,255,255,.72)!important;
  background:linear-gradient(120deg,rgba(116,20,42,.38),rgba(147,31,52,.26)) padding-box,linear-gradient(135deg,rgba(255,244,221,.9),rgba(255,255,255,.28),rgba(255,179,154,.60)) border-box!important;
  box-shadow:0 10px 24px rgba(112,27,45,.17),inset 0 1px 0 rgba(255,255,255,.48)!important;
  backdrop-filter:blur(22px) saturate(155%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(155%)!important;
}
.cn-global-search{background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.12))!important;backdrop-filter:blur(18px) saturate(150%)!important;-webkit-backdrop-filter:blur(18px) saturate(150%)!important}
.cn-api-entry{background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(181,34,60,.42))!important;border:1px solid rgba(255,255,255,.76)!important;box-shadow:0 8px 18px rgba(117,24,40,.20),inset 0 1px 0 rgba(255,255,255,.62)!important;backdrop-filter:blur(16px) saturate(145%)!important;-webkit-backdrop-filter:blur(16px) saturate(145%)!important}
.cn-global-header .links a{background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.09))!important;border:1px solid rgba(255,255,255,.44)!important;box-shadow:0 6px 16px rgba(110,24,40,.14),inset 0 1px 0 rgba(255,255,255,.48)!important;backdrop-filter:blur(14px) saturate(145%)!important;-webkit-backdrop-filter:blur(14px) saturate(145%)!important}
.cn-global-header .links a.on,.cn-global-header .links a:hover{background:linear-gradient(135deg,rgba(255,255,255,.40),rgba(255,255,255,.18))!important;border-color:rgba(255,255,255,.74)!important}
.cn-logo-mark{border:1px solid rgba(255,255,255,.55);box-shadow:0 7px 16px rgba(102,23,37,.23),inset 0 1px 0 rgba(255,255,255,.4)}
/* Mobile header: compact one-line brand/search, translucent glass surface */
@media(max-width:860px){
  .cn-global-header{
    margin:5px 6px 0!important;
    padding:5px 7px 6px!important;
    background:
      radial-gradient(ellipse at 15% 0%,rgba(255,255,255,.26),transparent 48%),
      linear-gradient(135deg,rgba(255,105,115,.78),rgba(238,91,111,.68))!important;
    box-shadow:0 10px 24px rgba(174,39,55,.14),inset 0 1px 0 rgba(255,255,255,.62)!important;
    backdrop-filter:blur(28px) saturate(165%)!important;
    -webkit-backdrop-filter:blur(28px) saturate(165%)!important;
  }
  .cn-header-main{
    grid-template-columns:minmax(100px,.72fr) minmax(0,1fr) 38px;
    grid-template-rows:auto;
    gap:5px;
    padding:4px;
    background:linear-gradient(120deg,rgba(255,255,255,.23),rgba(255,255,255,.10)) padding-box,
      linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.28),rgba(255,190,176,.64)) border-box!important;
    box-shadow:0 6px 16px rgba(112,27,45,.11),inset 0 1px 0 rgba(255,255,255,.62)!important;
    backdrop-filter:blur(24px) saturate(160%)!important;
    -webkit-backdrop-filter:blur(24px) saturate(160%)!important;
  }
  .cn-site-brand{grid-column:1;grid-row:1;gap:5px}
  .cn-logo-mark{flex-basis:34px;width:34px;height:30px}
  .cn-brand-copy strong{font-size:16px}
  .cn-brand-copy small{margin-top:2px;font-size:8px}
  .cn-global-search{grid-column:2;grid-row:1;height:28px;padding:2px 5px}
  .cn-search-icon{flex-basis:22px;width:22px;height:22px}
  .cn-global-search input{font-size:11px}
  .cn-api-entry{grid-column:3;grid-row:1;width:36px;height:36px}
  .cn-api-entry small{font-size:7px}
  .cn-risk-tip{margin:3px auto;font-size:9px;line-height:1.1}
  .cn-global-header .links{gap:4px}
  .cn-global-header .links a{min-height:25px;padding:3px 2px;font-size:11px}
}
/* Keep the lighter coral glass header readable on phone screens. */
@media(max-width:860px){
  .cn-global-header{
    background:
      radial-gradient(ellipse at 15% 0%,rgba(255,255,255,.24),transparent 48%),
      linear-gradient(135deg,rgba(242,77,90,.90),rgba(220,57,79,.86))!important;
    border-color:rgba(255,255,255,.68)!important;
  }
}
.cn-brand-copy strong{color:#7e293e!important}
.cn-brand-copy small{color:rgba(83,42,53,.92)!important}
.cn-global-search{
  background:linear-gradient(135deg,rgba(255,255,255,.70),rgba(255,255,255,.48))!important;
  border-color:rgba(125,43,57,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88)!important;
}
.cn-global-search input{color:#542735!important}
.cn-global-search input::placeholder{color:rgba(84,39,53,.70)!important}
.cn-api-entry{
  background:linear-gradient(145deg,#ed5c69,#d8445b)!important;
  border-color:rgba(255,255,255,.88)!important;
  color:#fff!important;
}
.cn-risk-tip{color:#743444!important}
.cn-global-header .links a{
  color:#813347!important;
  background:linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,255,255,.42))!important;
  border-color:rgba(255,255,255,.82)!important;
  box-shadow:0 4px 12px rgba(110,24,40,.10),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
.cn-global-header .links a.on,
.cn-global-header .links a:hover{
  color:#fff!important;
  background:linear-gradient(135deg,#ee6570,#db4b61)!important;
  border-color:rgba(255,255,255,.86)!important;
}