/* ==========================================================================
   Zhino — chat application and login
   ========================================================================== */

.zh-app-body { overflow: hidden; height: 100dvh; background: var(--zh-paper); }
.zh-app { display: grid; grid-template-columns: 288px minmax(0, 1fr); height: 100dvh; }

/* ---------------------------------------------------------------- Sidebar */
.zh-side {
	background: var(--zh-surface); border-inline-end: 1px solid var(--zh-line);
	display: flex; flex-direction: column; min-height: 0; padding: 14px 12px 12px; gap: 10px;
}
.zh-side-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 6px; }
.zh-side-top .zh-wordmark { font-size: 1.15rem; }
.zh-side-top .zh-mark { width: 30px; height: 30px; border-radius: 10px; }
.zh-side-logo { max-height: 34px; width: auto; }
.zh-side-close { display: none; }
.zh-new-chat {
	display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: var(--zh-r-md);
	background: var(--zh-brand); color: #fff; text-decoration: none; font-weight: 700; font-size: var(--zh-fs-sm);
}
.zh-new-chat:hover { background: var(--zh-brand-ink); color: #fff; }
[data-theme="dark"] .zh-new-chat:hover { background: color-mix(in srgb, var(--zh-brand) 85%, #fff); }
.zh-conversations-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 6px 0; }
.zh-conversations-title { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--zh-ink-2); }
.zh-conversations-title strong { font-size: var(--zh-fs-sm); }
.zh-conversations-title .zh-i { color: var(--zh-ink-3); }
.zh-conversations-count { min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--zh-mist); color: var(--zh-ink-2); font-size: var(--zh-fs-xs); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.zh-conversations-count[hidden] { display: none; }
.zh-side-tools { flex: none; position: relative; border-top: 1px solid var(--zh-line); padding-top: 8px; }
.zh-side-tools-toggle { width: 100%; min-height: 40px; border: 0; background: transparent; color: var(--zh-ink-2); border-radius: 12px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font: inherit; }
.zh-side-tools-toggle:hover, .zh-side-tools.is-open .zh-side-tools-toggle { background: var(--zh-mist); color: var(--zh-ink); }
.zh-side-tools-toggle-main { min-width: 0; display: flex; align-items: center; gap: 9px; font-size: var(--zh-fs-sm); font-weight: 800; }
.zh-side-tools-chevron { transition: transform .2s ease; }
.zh-side-tools.is-open .zh-side-tools-chevron { transform: rotate(180deg); }
.zh-side-nav { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; max-height: min(30dvh, 260px); overflow-y: auto; scrollbar-width: thin; }
.zh-side-nav[hidden] { display: none; }
.zh-side-nav a {
	display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px;
	color: var(--zh-ink-2); text-decoration: none; font-weight: 600; font-size: var(--zh-fs-sm);
}
.zh-side-nav a:hover { background: var(--zh-mist); color: var(--zh-ink); }
.zh-side-nav a.is-active { background: var(--zh-mist); color: var(--zh-brand-ink); }
.zh-side-search { position: relative; display: flex; align-items: center; margin-top: 0; }
.zh-side-search svg { position: absolute; inset-inline-start: 12px; color: var(--zh-ink-3); pointer-events: none; }
.zh-side-search input {
	width: 100%; border: 1px solid var(--zh-line); background: var(--zh-paper); border-radius: 12px;
	padding: 8px 12px; padding-inline-start: 36px; font-size: var(--zh-fs-sm); min-height: 40px;
}
.zh-convs { flex: 1 1 260px; overflow-y: auto; min-height: 140px; margin: 0 -4px; padding: 0 4px 6px; scrollbar-width: thin; overscroll-behavior: contain; }
.zh-convs-label { font-size: var(--zh-fs-xs); color: var(--zh-ink-3); font-weight: 700; margin: 14px 10px 4px; }
.zh-convs-empty { color: var(--zh-ink-3); font-size: var(--zh-fs-sm); padding: 16px 10px; }
.zh-convs-list { list-style: none; margin: 0; padding: 0; }
.zh-conv-row { position: relative; display: flex; align-items: center; border-radius: 10px; }
.zh-conv-row:hover { background: var(--zh-mist); }
.zh-conv {
	flex: 1; min-width: 0; display: block; padding: 8px 10px; color: var(--zh-ink-2); text-decoration: none;
	font-size: var(--zh-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 10px;
}
.zh-conv.is-active { background: var(--zh-mist); color: var(--zh-ink); font-weight: 700; }
.zh-conv-more { border: 0; background: none; color: var(--zh-ink-3); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; opacity: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.zh-conv-row:hover .zh-conv-more, .zh-conv-more:focus-visible, .zh-conv.is-active + .zh-conv-more { opacity: 1; }
@media (hover: none) { .zh-conv-more { opacity: 1; } }
.zh-pop {
	position: absolute; top: 100%; inset-inline-end: 0; z-index: 30; background: var(--zh-surface); border: 1px solid var(--zh-line);
	border-radius: 12px; box-shadow: var(--zh-shadow); padding: 4px; min-width: 150px; display: flex; flex-direction: column;
}
.zh-pop[hidden] { display: none; }
.zh-pop button { border: 0; background: none; text-align: start; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: var(--zh-fs-sm); }
.zh-pop button:hover { background: var(--zh-mist); }
.zh-pop .is-danger { color: var(--zh-danger); }
.zh-convs-more { display: block; width: 100%; border: 0; background: none; color: var(--zh-brand-ink); font-weight: 700; padding: 10px; cursor: pointer; font-size: var(--zh-fs-sm); }

.zh-side-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--zh-line); padding-top: 10px; }
.zh-user { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; padding: 6px; border-radius: 12px; }
.zh-user:hover, .zh-user.is-active { background: var(--zh-mist); }
.zh-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--zh-ink); color: var(--zh-paper); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.zh-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
.zh-user-text strong { font-size: var(--zh-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zh-user-balance { font-size: var(--zh-fs-xs); color: var(--zh-coin-ink); font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.zh-user-balance .zh-coin { margin: 0; }
.zh-btn-coin { background: var(--zh-coin); color: #3b2500; min-height: 36px; padding: 0 14px; }
.zh-btn-coin:hover { background: color-mix(in srgb, var(--zh-coin) 85%, #000); color: #3b2500; }
.zh-btn-sm { min-height: 34px; padding: 0 14px; font-size: var(--zh-fs-xs); }

.zh-scrim { display: none; }

/* ---------------------------------------------------------------- Stage */
.zh-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.zh-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 18px; min-height: 60px; border-bottom: 1px solid transparent; }
.zh-topbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.zh-menu-btn { display: none; }
.zh-model-picker { position: relative; }
.zh-topbar:not(.is-chat) .zh-model-picker { visibility: hidden; }
.zh-model-btn {
	display: inline-flex; align-items: center; gap: 8px; border: 1px solid transparent; background: none; border-radius: 12px;
	padding: 7px 10px; cursor: pointer; font-weight: 800; font-size: var(--zh-fs-md); color: var(--zh-ink);
}
.zh-model-btn:hover, .zh-model-btn[aria-expanded="true"] { background: var(--zh-mist); }
.zh-model-btn .zh-i { color: var(--zh-ink-3); }
.zh-model-menu {
	position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 50; width: min(380px, 86vw);
	background: var(--zh-surface); border: 1px solid var(--zh-line); border-radius: var(--zh-r-md); box-shadow: var(--zh-shadow);
	padding: 6px; max-height: 70vh; overflow-y: auto;
}
.zh-model-menu[hidden] { display: none; }
.zh-model-opt { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: start; border: 0; background: none; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.zh-model-opt:hover { background: var(--zh-mist); }
.zh-model-opt.is-selected { background: var(--zh-brand-soft); }
.zh-model-opt-head { display: flex; align-items: center; gap: 8px; }
.zh-model-opt-head strong { font-size: var(--zh-fs-sm); }
.zh-model-vision { color: var(--zh-ink-3); display: inline-flex; }
.zh-model-desc { font-size: var(--zh-fs-xs); color: var(--zh-ink-3); }
.zh-model-price { font-size: var(--zh-fs-xs); color: var(--zh-coin-ink); font-weight: 700; display: inline-flex; align-items: center; }
.zh-balance-pill.is-low { box-shadow: inset 0 0 0 1.5px var(--zh-coin); }
.zh-i { display: inline-flex; flex: none; }

.zh-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.zh-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.zh-loading { margin: auto; display: flex; gap: 6px; padding: 40px; }
.zh-loading span, .zh-thinking span { width: 8px; height: 8px; border-radius: 50%; background: var(--zh-brand); opacity: .3; animation: zh-pulse 1.2s infinite; }
.zh-loading span:nth-child(2), .zh-thinking span:nth-child(2) { animation-delay: .2s; }
.zh-loading span:nth-child(3), .zh-thinking span:nth-child(3) { animation-delay: .4s; }
@keyframes zh-pulse { 50% { opacity: 1; } }

/* ---------------------------------------------------------------- Messages */
.zh-messages { width: min(780px, 100% - 32px); margin: 0 auto; padding: 18px 0 28px; display: flex; flex-direction: column; gap: 26px; }
.zh-msg-user { align-self: flex-start; max-width: 85%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.zh-bubble { background: var(--zh-mist); border-radius: 18px; border-start-start-radius: 6px; padding: 10px 16px; white-space: pre-wrap; word-break: break-word; line-height: 1.85; }
.zh-msg-images { display: flex; gap: 6px; flex-wrap: wrap; }
.zh-msg-images img { width: 140px; height: 140px; object-fit: cover; border-radius: 14px; display: block; border: 1px solid var(--zh-line); }
.zh-msg-ai { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.zh-ai-mark { width: 30px; height: 30px; border-radius: 10px; background: var(--zh-brand-soft); color: var(--zh-brand-ink); display: inline-flex; align-items: center; justify-content: center; }
.zh-msg-ai.is-error .zh-ai-mark { background: color-mix(in srgb, var(--zh-danger) 14%, transparent); color: var(--zh-danger); }
.zh-ai-body { min-width: 0; padding-top: 2px; }
.zh-thinking { display: flex; align-items: center; gap: 5px; color: var(--zh-ink-3); padding-top: 4px; }
.zh-thinking em { font-style: normal; font-size: var(--zh-fs-sm); margin-inline-start: 6px; }
.zh-error-text { display: flex; gap: 8px; align-items: flex-start; color: var(--zh-danger); margin-bottom: 10px; }
.zh-error-text .zh-i { margin-top: 5px; }
.zh-stopped { font-size: var(--zh-fs-xs); color: var(--zh-ink-3); margin: 8px 0 0; }

.zh-md { line-height: 1.95; word-wrap: break-word; }
.zh-md > :first-child { margin-top: 0; }
.zh-md > :last-child { margin-bottom: 0; }
.zh-md p { margin: 0 0 .9em; }
.zh-md h1, .zh-md h2, .zh-md h3, .zh-md h4 { margin: 1.2em 0 .5em; line-height: 1.6; }
.zh-md h1 { font-size: 1.35rem; } .zh-md h2 { font-size: 1.2rem; } .zh-md h3, .zh-md h4 { font-size: 1.05rem; }
.zh-md ul, .zh-md ol { padding-inline-start: 1.4em; margin: 0 0 .9em; }
.zh-md li { margin-bottom: .3em; }
.zh-md li > p { margin: 0; }
.zh-md blockquote { margin: 0 0 .9em; padding: 2px 14px; border-inline-start: 3px solid var(--zh-line); color: var(--zh-ink-2); }
.zh-md hr { border: 0; border-top: 1px solid var(--zh-line); margin: 1.4em 0; }
.zh-md a { color: var(--zh-brand-ink); }
.zh-md :not(pre) > code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; background: var(--zh-mist); border-radius: 6px; padding: .1em .4em; direction: ltr; unicode-bidi: isolate; }
.zh-md img { border-radius: 12px; }
.zh-table-wrap { overflow-x: auto; margin: 0 0 1em; border: 1px solid var(--zh-line); border-radius: 12px; }
.zh-md table { border-collapse: collapse; width: 100%; font-size: var(--zh-fs-sm); }
.zh-md th, .zh-md td { padding: 8px 12px; border-bottom: 1px solid var(--zh-line); text-align: start; }
.zh-md tr:last-child td { border-bottom: 0; }
.zh-md th { background: var(--zh-paper); font-weight: 700; }
.zh-md input[type=checkbox] { margin-inline-end: 6px; }
.zh-code { margin: 0 0 1em; border: 1px solid var(--zh-line); border-radius: 12px; overflow: hidden; background: var(--zh-paper); }
.zh-code-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; font-size: var(--zh-fs-xs); color: var(--zh-ink-3); border-bottom: 1px solid var(--zh-line); direction: ltr; }
.zh-code-copy { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; padding: 2px 6px; border-radius: 6px; }
.zh-code-copy:hover { background: var(--zh-mist); color: var(--zh-ink); }
.zh-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; direction: ltr; text-align: left; font-size: .84rem; line-height: 1.7; }
.zh-code pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: none !important; padding: 0 !important; }
.zh-code .hljs { background: transparent; }

.zh-msg-meta { display: flex; align-items: center; gap: 2px; margin-top: 8px; color: var(--zh-ink-3); font-size: var(--zh-fs-xs); }
.zh-act { border: 0; background: none; color: var(--zh-ink-3); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.zh-act:hover { background: var(--zh-mist); color: var(--zh-ink); }
.zh-act.is-done { color: var(--zh-ok); }
.zh-msg-info { display: inline-flex; gap: 12px; margin-inline-start: 8px; align-items: center; }
.zh-msg-cost { display: inline-flex; align-items: center; color: var(--zh-coin-ink); font-weight: 700; }
.zh-msg-ai.is-live .zh-md > :last-child::after { content: ""; display: inline-block; width: 7px; height: 1em; background: var(--zh-brand); margin-inline-start: 3px; vertical-align: -0.15em; animation: zh-pulse 1s infinite; }

/* Empty state */
.zh-empty { padding: 8vh 0 12px; }
.zh-empty h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 900; margin-bottom: 6px; text-wrap: balance; }
.zh-empty > p { color: var(--zh-ink-2); margin-bottom: 26px; }
.zh-starters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; border-top: 1px solid var(--zh-line); }
.zh-starters li { border-bottom: 1px solid var(--zh-line); }
.zh-starters a { display: flex; gap: 12px; padding: 14px 2px; color: inherit; text-decoration: none; align-items: flex-start; }
.zh-starters a:hover strong { color: var(--zh-brand-ink); }
.zh-starter-text { display: flex; flex-direction: column; line-height: 1.7; }
.zh-starter-text strong { font-size: var(--zh-fs-sm); }
.zh-starter-text span { font-size: var(--zh-fs-xs); color: var(--zh-ink-3); }
.zh-starters .zh-tool-icon { width: 38px; height: 38px; border-radius: 11px; }

/* ---------------------------------------------------------------- Composer */
.zh-composer { width: min(780px, 100% - 32px); margin: 0 auto; padding: 0 0 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.zh-composer-box { background: var(--zh-surface); border: 1px solid var(--zh-line); border-radius: 22px; box-shadow: var(--zh-shadow); padding: 8px; }
.zh-composer-box:focus-within { border-color: color-mix(in srgb, var(--zh-brand) 50%, var(--zh-line)); }
.zh-composer-row { display: flex; align-items: flex-end; gap: 6px; }
.zh-input { flex: 1; border: 0; background: none; resize: none; outline: none; padding: 9px 6px; line-height: 1.8; max-height: 220px; min-height: 42px; font-size: var(--zh-fs-md); }
.zh-input::placeholder { color: var(--zh-ink-3); }
.zh-attach { width: 42px; height: 42px; }
.zh-send {
	width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--zh-brand); color: #fff; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.zh-send .zh-i svg { transform: scaleX(-1); }
.zh-send:disabled { background: var(--zh-line); color: var(--zh-ink-3); cursor: default; }
.zh-send.is-stop { background: var(--zh-ink); color: var(--zh-paper); }
.zh-send.is-stop .zh-i svg { transform: none; }
.zh-thumbs { display: flex; gap: 8px; padding: 4px 4px 8px; flex-wrap: wrap; }
.zh-thumbs[hidden] { display: none; }
.zh-thumb { position: relative; width: 64px; height: 64px; }
.zh-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.zh-thumb.is-loading img { opacity: .45; }
.zh-thumb-x { position: absolute; top: -6px; inset-inline-end: -6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--zh-surface); background: var(--zh-ink); color: var(--zh-paper); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.zh-composer-hint { display: flex; align-items: center; justify-content: center; gap: 4px 16px; flex-wrap: wrap; margin: 8px 0 0; font-size: var(--zh-fs-xs); color: var(--zh-coin-ink); font-weight: 600; }
.zh-kbd { color: var(--zh-ink-3); font-weight: 400; }
.zh-hint-cost { display: inline-flex; align-items: center; }
.zh-model-name { white-space: nowrap; }
@media (max-width: 400px) { .zh-model-btn .zh-badge { display: none; } }
.zh-img-form textarea.zh-field { resize: none; }
.zh-low { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: color-mix(in srgb, var(--zh-coin) 16%, var(--zh-surface)); border: 1px solid color-mix(in srgb, var(--zh-coin) 60%, transparent); border-radius: 14px; padding: 8px 14px; margin-bottom: 8px; font-size: var(--zh-fs-sm); }
.zh-low[hidden] { display: none; }
.zh-low a { font-weight: 800; color: var(--zh-coin-ink); }

/* ---------------------------------------------------------------- Page views */
.zh-page-view { width: min(900px, 100% - 32px); margin: 0 auto; padding: 18px 0 60px; }
.zh-page-narrow { width: min(680px, 100% - 32px); }
.zh-pv-head { margin-bottom: 22px; }
.zh-pv-head h1 { font-size: var(--zh-fs-xl); font-weight: 900; margin-bottom: 4px; }
.zh-pv-head p { color: var(--zh-ink-2); margin: 0; }
.zh-page-view h2 { font-size: var(--zh-fs-lg); margin: 32px 0 14px; }
.zh-field {
	width: 100%; border: 1px solid var(--zh-line); background: var(--zh-surface); border-radius: 14px; padding: 10px 14px; min-height: 46px;
	font-size: var(--zh-fs-md); line-height: 1.8;
}
.zh-field:focus { outline: none; border-color: var(--zh-brand); box-shadow: 0 0 0 3px var(--zh-brand-soft); }
.zh-field[aria-invalid] { border-color: var(--zh-danger); }
textarea.zh-field { resize: vertical; }
select.zh-field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2377749a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; padding-left: 38px; }
.zh-tools-bar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.zh-tool-list-app { grid-template-columns: 1fr 1fr; }
.zh-none { color: var(--zh-ink-3); padding: 18px 2px; list-style: none; }
.zh-back { display: inline-flex; align-items: center; gap: 6px; color: var(--zh-ink-2); text-decoration: none; font-weight: 600; font-size: var(--zh-fs-sm); margin-bottom: 18px; }
.zh-back:hover { color: var(--zh-brand-ink); }
.zh-tool-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; }
.zh-tool-head h1 { font-size: var(--zh-fs-xl); font-weight: 900; margin: 0; }
.zh-tool-head p { color: var(--zh-ink-2); margin: 0; }
.zh-tool-icon-lg { width: 56px; height: 56px; border-radius: 16px; }
.zh-tool-form, .zh-account-form { display: flex; flex-direction: column; gap: 18px; }
.zh-form-row { display: flex; flex-direction: column; gap: 6px; }
.zh-form-row label { font-weight: 700; font-size: var(--zh-fs-sm); }
.zh-req { color: var(--zh-danger); }
.zh-field-err { margin: 0; color: var(--zh-danger); font-size: var(--zh-fs-xs); }
.zh-form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.zh-form-cost { display: inline-flex; align-items: center; color: var(--zh-coin-ink); font-weight: 700; font-size: var(--zh-fs-sm); gap: 4px; }
.zh-account-form .zh-btn { align-self: flex-start; }
.zh-ltr { margin: 0; text-align: right; font-weight: 700; }
.zh-account-links { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--zh-line); }
.zh-account-links li { border-bottom: 1px solid var(--zh-line); }
.zh-account-links a, .zh-account-links button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 4px; text-decoration: none; color: var(--zh-ink); background: none; border: 0; cursor: pointer; font-weight: 600; text-align: start; }
.zh-account-links .is-danger { color: var(--zh-danger); }

/* Images */
.zh-img-form { background: var(--zh-surface); border: 1px solid var(--zh-line); border-radius: var(--zh-r-lg); padding: 14px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.zh-img-form textarea.zh-field { border: 0; box-shadow: none; padding: 6px; min-height: 96px; }
.zh-img-opts { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--zh-line); padding-top: 12px; }
.zh-img-opts label { display: flex; flex-direction: column; gap: 4px; font-size: var(--zh-fs-xs); font-weight: 700; color: var(--zh-ink-2); min-width: 160px; }
.zh-img-go { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.zh-img-status { font-size: var(--zh-fs-sm); }
.zh-img-status:empty { display: none; }
.zh-img-status.is-busy { color: var(--zh-ink-2); }
.zh-img-status.is-error { color: var(--zh-danger); }
.zh-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.zh-gallery-empty { grid-column: 1 / -1; color: var(--zh-ink-3); }
.zh-shot { margin: 0; background: var(--zh-surface); border: 1px solid var(--zh-line); border-radius: var(--zh-r-md); overflow: hidden; display: flex; flex-direction: column; }
.zh-shot img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.zh-shot figcaption { padding: 10px 12px; font-size: var(--zh-fs-xs); }
.zh-shot figcaption p { margin: 0 0 6px; color: var(--zh-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.7; }
.zh-shot-meta { display: flex; align-items: center; gap: 2px; }
.zh-shot-meta .zh-msg-cost { margin-inline-end: auto; }
.zh-shot.is-loading { min-height: 200px; }
.zh-shot-ph { flex: 1; aspect-ratio: 1; background: linear-gradient(110deg, var(--zh-mist) 30%, var(--zh-surface) 50%, var(--zh-mist) 70%); background-size: 200% 100%; animation: zh-shimmer 1.4s linear infinite; }
@keyframes zh-shimmer { to { background-position: -200% 0; } }

/* Wallet */
.zh-wallet-hero { background: var(--zh-ink); color: var(--zh-paper); border-radius: var(--zh-r-lg); padding: 22px 26px; }
.zh-wallet-hero p { margin: 0; opacity: .75; font-size: var(--zh-fs-sm); }
.zh-wallet-balance { opacity: 1 !important; display: flex; align-items: center; font-size: var(--zh-fs-lg) !important; margin-top: 4px !important; }
.zh-wallet-balance strong { font-size: 2.6rem; font-weight: 900; margin-inline-end: 8px; font-variant-numeric: tabular-nums; }
.zh-wallet-balance .zh-coin { width: 1.4em; height: 1.4em; }
.zh-packs-app { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.zh-history-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--zh-line); }
.zh-history-list li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 2px; border-bottom: 1px solid var(--zh-line); }
.zh-h-main { display: flex; flex-direction: column; min-width: 0; }
.zh-h-main strong { font-size: var(--zh-fs-sm); }
.zh-h-main span { font-size: var(--zh-fs-xs); color: var(--zh-ink-3); }
.zh-h-side { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.zh-h-amount { font-weight: 800; font-variant-numeric: tabular-nums; }
.zh-h-amount.is-credit { color: var(--zh-ok); }
.zh-h-side time { font-size: var(--zh-fs-xs); color: var(--zh-ink-3); }

/* Toast */
.zh-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--zh-ink); color: var(--zh-paper); padding: 10px 18px; border-radius: 12px; font-size: var(--zh-fs-sm); z-index: 100; box-shadow: var(--zh-shadow); max-width: calc(100% - 32px); }
.zh-toast.is-error { background: var(--zh-danger); color: #fff; }
.zh-toast[hidden] { display: none; }
.zh-noscript { padding: 40px; text-align: center; }

/* ---------------------------------------------------------------- Mobile */
@media (max-width: 860px) {
	.zh-app { grid-template-columns: 1fr; }
	.zh-side {
		position: fixed; inset-block: 0; inset-inline-start: 0; width: min(310px, 86vw); z-index: 60;
		transform: translateX(105%); transition: transform .22s ease; box-shadow: var(--zh-shadow);
	}
	.zh-side.is-open { transform: none; }
	.zh-side-close { display: inline-flex; }
	.zh-convs { min-height: 180px; }
	.zh-side-nav { max-height: min(34dvh, 300px); }
	.zh-menu-btn { width: auto; min-width: 40px; padding: 0 10px; gap: 6px; border-radius: 999px; }
	.zh-menu-label { font-size: var(--zh-fs-xs); font-weight: 800; }
	.zh-scrim { display: block; position: fixed; inset: 0; background: rgba(10, 8, 30, .45); z-index: 55; }
	.zh-scrim[hidden] { display: none; }
	.zh-menu-btn { display: inline-flex; }
	.zh-topbar { padding: 8px 10px; gap: 4px; border-bottom-color: var(--zh-line); }
	.zh-model-btn { font-size: var(--zh-fs-sm); }
	.zh-messages, .zh-composer { width: calc(100% - 24px); }
	.zh-msg-user { max-width: 92%; }
	.zh-starters, .zh-tool-list-app { grid-template-columns: 1fr; }
	.zh-empty { padding-top: 4vh; }
	.zh-img-go { margin-inline-start: 0; width: 100%; justify-content: space-between; }
}
@media (max-width: 860px) { html:not([dir="rtl"]) .zh-side { transform: translateX(-105%); } html:not([dir="rtl"]) .zh-side.is-open { transform: none; } }

/* ---------------------------------------------------------------- Login */
.zh-login-body { min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; }
.zh-login-panel { display: flex; flex-direction: column; justify-content: center; padding: 40px clamp(24px, 6vw, 88px); }
.zh-login-panel .zh-wordmark { margin-bottom: 48px; }
.zh-login-box { width: 100%; max-width: 400px; }
.zh-login-box h1 { font-size: var(--zh-fs-xl); font-weight: 900; margin-bottom: 6px; }
.zh-login-box > p { color: var(--zh-ink-2); margin-bottom: 26px; }
.zh-login-form { display: flex; flex-direction: column; gap: 14px; }
.zh-login-form .zh-field { font-size: 1.1rem; text-align: center; letter-spacing: .04em; }
.zh-otp { display: flex; gap: 8px; direction: ltr; justify-content: center; }
.zh-otp input { width: 52px; height: 58px; text-align: center; font-size: 1.4rem; font-weight: 800; border: 1px solid var(--zh-line); background: var(--zh-surface); border-radius: 14px; }
.zh-otp input:focus { outline: none; border-color: var(--zh-brand); box-shadow: 0 0 0 3px var(--zh-brand-soft); }
.zh-login-msg { min-height: 1.6em; margin: 0; font-size: var(--zh-fs-sm); color: var(--zh-danger); }
.zh-login-msg.is-info { color: var(--zh-ink-2); }
.zh-login-row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--zh-fs-sm); }
.zh-linkbtn { border: 0; background: none; color: var(--zh-brand-ink); font-weight: 700; cursor: pointer; padding: 0; font-size: inherit; }
.zh-linkbtn:disabled { color: var(--zh-ink-3); cursor: default; }
.zh-login-alt { margin-top: 26px; font-size: var(--zh-fs-sm); color: var(--zh-ink-3); }
.zh-login-terms { font-size: var(--zh-fs-xs); color: var(--zh-ink-3); margin-top: 18px; }
.zh-login-aside { background: var(--zh-brand); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(24px, 5vw, 80px); position: relative; overflow: hidden; }
.zh-login-aside h2 { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); font-weight: 900; max-width: 14em; line-height: 1.45; }
.zh-login-aside ul { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.zh-login-aside li { display: flex; gap: 10px; align-items: center; opacity: .92; }
.zh-login-aside li .zh-coin { width: 1.1em; height: 1.1em; }
.zh-login-aside .zh-mark-big { position: absolute; inset-inline-end: -60px; bottom: -60px; width: 300px; height: 300px; opacity: .12; color: #fff; }
@media (max-width: 860px) {
	.zh-login-body { grid-template-columns: 1fr; }
	.zh-login-aside { display: none; }
	.zh-login-panel { justify-content: flex-start; padding-top: 28px; }
	.zh-login-panel .zh-wordmark { margin-bottom: 32px; }
}

/* ---------------------------------------------------------------- Embedded app shortcode */
.zhino-app-shortcode {
	width: 100%; height: var(--zh-embed-height, 780px); min-height: 520px;
	margin: 20px auto; position: relative; isolation: isolate;
}
.zhino-app-shortcode .zh-app {
	height: 100%; min-height: 0; position: relative; overflow: hidden;
	border: 1px solid var(--zh-line); border-radius: var(--zh-r-lg); background: var(--zh-paper);
	box-shadow: 0 20px 60px rgba(24, 20, 60, .10);
}
[data-theme="dark"] .zhino-app-shortcode .zh-app { box-shadow: 0 20px 60px rgba(0, 0, 0, .28); }
.zhino-app-shortcode .zh-app--no-sidebar { grid-template-columns: minmax(0, 1fr); }
.zhino-app-shortcode .zh-app--no-sidebar .zh-menu-btn { display: none !important; }
.zhino-app-shortcode .zh-toast { position: absolute; bottom: 18px; }
.zh-app-shortcode-notice { padding: 16px 18px; border: 1px solid var(--zh-line); border-radius: 14px; background: var(--zh-surface); }
@media (max-width: 860px) {
	.zhino-app-shortcode { height: max(650px, 78dvh); min-height: 620px; margin: 12px auto; }
	.zhino-app-shortcode .zh-side { position: absolute; }
	.zhino-app-shortcode .zh-scrim { position: absolute; }
	.zhino-app-shortcode .zh-app { border-radius: 16px; }
}

/* -------------------------------------------------------- Account dashboard */
.zh-page-account { width: min(1160px, 100% - 32px); }
.zh-account-dashboard { display: flex; flex-direction: column; gap: 18px; }
.zh-account-loading { min-height: 360px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.zh-account-loading span { width: 9px; height: 9px; border-radius: 50%; background: var(--zh-brand); animation: zh-account-pulse 1s ease-in-out infinite; }
.zh-account-loading span:nth-child(2) { animation-delay: .12s; }
.zh-account-loading span:nth-child(3) { animation-delay: .24s; }
@keyframes zh-account-pulse { 0%,100% { opacity:.25; transform:translateY(0); } 50% { opacity:1; transform:translateY(-5px); } }
.zh-account-error { min-height: 280px; border: 1px dashed var(--zh-line); border-radius: var(--zh-r-lg); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; color:var(--zh-ink-2); text-align:center; }
.zh-account-error p { margin:0; }

.zh-account-hero { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px; border-radius:calc(var(--zh-r-lg) + 4px); background:linear-gradient(135deg, color-mix(in srgb, var(--zh-brand) 94%, #17142f), color-mix(in srgb, var(--zh-brand) 54%, #17142f)); color:#fff; box-shadow:0 22px 55px color-mix(in srgb, var(--zh-brand) 22%, transparent); }
.zh-account-hero::before { content:""; position:absolute; width:250px; height:250px; border-radius:50%; background:rgba(255,255,255,.12); inset:-135px auto auto -80px; filter:blur(2px); }
.zh-account-hero::after { content:""; position:absolute; width:170px; height:170px; border-radius:46px; border:1px solid rgba(255,255,255,.12); transform:rotate(28deg); inset:auto 34% -110px auto; }
.zh-account-person, .zh-account-balance { position:relative; z-index:1; }
.zh-account-person { display:flex; align-items:center; gap:16px; min-width:0; }
.zh-account-avatar { width:68px; height:68px; flex:0 0 68px; display:grid; place-items:center; border-radius:22px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(10px); font-size:1.65rem; font-weight:900; }
.zh-account-kicker { display:block; font-size:var(--zh-fs-xs); opacity:.72; margin-bottom:2px; }
.zh-account-person h2 { margin:0; font-size:clamp(1.3rem,2.5vw,1.8rem); color:#fff; }
.zh-account-person p { margin:4px 0 0; opacity:.74; font-size:var(--zh-fs-sm); }
.zh-account-balance { min-width:230px; padding:14px 16px; border-radius:18px; background:rgba(13,11,34,.18); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(10px); }
.zh-account-balance > span { display:block; font-size:var(--zh-fs-xs); opacity:.72; }
.zh-account-balance strong { display:flex; align-items:center; gap:6px; font-size:1.4rem; margin:3px 0 10px; }
.zh-account-balance .zh-btn { width:100%; justify-content:center; }

.zh-account-quick { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.zh-account-quick-item { display:flex; align-items:center; gap:12px; min-width:0; padding:15px; border:1px solid var(--zh-line); border-radius:18px; background:var(--zh-surface); color:var(--zh-ink); text-decoration:none; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.zh-account-quick-item:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--zh-brand) 40%,var(--zh-line)); box-shadow:0 12px 28px rgba(25,22,60,.07); }
.zh-account-quick-icon { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:13px; color:var(--zh-brand-ink); background:var(--zh-brand-soft); }
.zh-account-quick-item > span:last-child { min-width:0; }
.zh-account-quick-item strong, .zh-account-quick-item small { display:block; }
.zh-account-quick-item strong { font-size:var(--zh-fs-sm); }
.zh-account-quick-item small { margin-top:2px; color:var(--zh-ink-3); font-size:var(--zh-fs-xs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.zh-account-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.zh-account-stat { display:grid; grid-template-columns:42px 1fr; grid-template-rows:auto auto; gap:2px 11px; padding:16px; border:1px solid var(--zh-line); border-radius:18px; background:var(--zh-surface); }
.zh-account-stat-icon { grid-row:1 / 3; width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:color-mix(in srgb,var(--zh-brand) 9%,var(--zh-surface)); color:var(--zh-brand-ink); }
.zh-account-stat > strong { font-size:1.18rem; line-height:1.2; }
.zh-account-stat > span:last-child { color:var(--zh-ink-3); font-size:var(--zh-fs-xs); }

.zh-account-card { min-width:0; padding:20px; border:1px solid var(--zh-line); border-radius:var(--zh-r-lg); background:var(--zh-surface); }
.zh-account-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.zh-account-card-title { display:flex; align-items:flex-start; gap:10px; }
.zh-account-card-title > .zh-i { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border-radius:11px; background:var(--zh-brand-soft); color:var(--zh-brand-ink); }
.zh-account-card-title h3 { margin:0; font-size:var(--zh-fs-md); }
.zh-account-card-title p { margin:2px 0 0; color:var(--zh-ink-3); font-size:var(--zh-fs-xs); }

.zh-account-chart { height:190px; display:flex; align-items:stretch; gap:7px; padding:16px 6px 30px; border-bottom:1px solid var(--zh-line); }
.zh-account-bar { position:relative; flex:1; display:flex; align-items:flex-end; justify-content:center; min-width:8px; }
.zh-account-bar i { width:min(100%,26px); min-height:4px; display:block; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,var(--zh-brand),color-mix(in srgb,var(--zh-brand) 55%,#9b8cff)); transition:height .35s ease,opacity .18s ease; }
.zh-account-bar:hover i { opacity:.78; }
.zh-account-bar small { position:absolute; top:calc(100% + 8px); white-space:nowrap; font-size:9px; color:var(--zh-ink-3); transform:scale(.92); }
.zh-account-usage-foot { display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:14px; color:var(--zh-ink-2); font-size:var(--zh-fs-xs); }
.zh-account-usage-foot strong { color:var(--zh-ink); margin-inline-start:5px; }

.zh-account-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.zh-account-settings-grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
.zh-account-list { display:flex; flex-direction:column; }
.zh-account-row { min-width:0; display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--zh-line); color:var(--zh-ink); text-decoration:none; }
.zh-account-row:last-child { border-bottom:0; }
a.zh-account-row:hover .zh-account-row-main strong { color:var(--zh-brand-ink); }
.zh-account-row-icon { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:11px; background:var(--zh-bg); color:var(--zh-ink-2); }
.zh-account-row-main { min-width:0; flex:1; }
.zh-account-row-main strong, .zh-account-row-main small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zh-account-row-main strong { font-size:var(--zh-fs-sm); }
.zh-account-row-main small { margin-top:2px; color:var(--zh-ink-3); font-size:var(--zh-fs-xs); }
.zh-account-amount { color:var(--zh-danger); font-weight:800; font-size:var(--zh-fs-sm); }
.zh-account-amount.is-credit { color:var(--zh-ok); }
.zh-account-order-total { white-space:nowrap; color:var(--zh-ink-2); font-size:var(--zh-fs-xs); }
.zh-account-more { display:inline-flex; margin-top:12px; color:var(--zh-brand-ink); text-decoration:none; font-weight:750; font-size:var(--zh-fs-xs); }
.zh-account-image-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.zh-account-image-grid a { aspect-ratio:1; border-radius:13px; overflow:hidden; background:var(--zh-bg); }
.zh-account-image-grid img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.zh-account-image-grid a:hover img { transform:scale(1.04); }
.zh-account-empty { min-height:105px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; color:var(--zh-ink-3); text-align:center; font-size:var(--zh-fs-xs); }

.zh-account-readonly { margin:0; padding:10px 12px; border:1px dashed var(--zh-line); border-radius:12px; background:var(--zh-bg); color:var(--zh-ink-2); font-size:var(--zh-fs-sm); }
.zh-account-switch { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid var(--zh-line); cursor:pointer; }
.zh-account-switch > span:first-child { min-width:0; }
.zh-account-switch strong, .zh-account-switch small { display:block; }
.zh-account-switch strong { font-size:var(--zh-fs-sm); }
.zh-account-switch small { margin-top:2px; color:var(--zh-ink-3); font-size:var(--zh-fs-xs); font-weight:400; }
.zh-switch-ui { position:relative; width:44px; height:25px; flex:0 0 44px; }
.zh-switch-ui input { position:absolute; opacity:0; pointer-events:none; }
.zh-switch-ui i { position:absolute; inset:0; border-radius:999px; background:var(--zh-line); transition:.2s ease; }
.zh-switch-ui i::after { content:""; position:absolute; width:19px; height:19px; top:3px; inset-inline-start:3px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.16); transition:.2s ease; }
.zh-switch-ui input:checked + i { background:var(--zh-brand); }
.zh-switch-ui input:checked + i::after { transform:translateX(-19px); }
[dir="ltr"] .zh-switch-ui input:checked + i::after { transform:translateX(19px); }
.zh-account-security-row { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--zh-line); color:var(--zh-ink-2); font-size:var(--zh-fs-sm); }
.zh-account-security-row strong { color:var(--zh-ink); }
.zh-account-security .zh-btn { width:100%; justify-content:center; margin-top:14px; }
.zh-account-settings-grid .zh-account-card > .zh-btn, .zh-account-settings-grid .zh-account-form > .zh-btn { margin-top:4px; }

.zh-account-footer-links { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; padding:8px 0 0; }
.zh-account-footer-links a, .zh-account-footer-links button { display:inline-flex; align-items:center; gap:7px; border:0; background:none; color:var(--zh-ink-2); text-decoration:none; padding:8px 10px; border-radius:10px; font:inherit; font-size:var(--zh-fs-xs); cursor:pointer; }
.zh-account-footer-links a:hover, .zh-account-footer-links button:hover { background:var(--zh-bg); color:var(--zh-ink); }
.zh-account-footer-links .is-danger { color:var(--zh-danger); }

@media (max-width: 980px) {
	.zh-account-settings-grid { grid-template-columns:1fr 1fr; }
	.zh-account-settings-grid .zh-account-security { grid-column:1 / -1; }
	.zh-account-quick, .zh-account-stats { grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px) {
	.zh-page-account { width:min(100% - 20px,1160px); padding-top:8px; }
	.zh-account-dashboard { gap:12px; }
	.zh-account-hero { align-items:stretch; flex-direction:column; padding:20px; }
	.zh-account-avatar { width:56px; height:56px; flex-basis:56px; border-radius:17px; }
	.zh-account-balance { min-width:0; }
	.zh-account-quick { grid-template-columns:1fr 1fr; gap:8px; }
	.zh-account-quick-item { padding:12px; }
	.zh-account-quick-item small { display:none; }
	.zh-account-stats { gap:8px; }
	.zh-account-stat { grid-template-columns:36px 1fr; padding:12px; }
	.zh-account-stat-icon { width:36px; height:36px; }
	.zh-account-columns, .zh-account-settings-grid { grid-template-columns:1fr; gap:12px; }
	.zh-account-settings-grid .zh-account-security { grid-column:auto; }
	.zh-account-card { padding:15px; }
	.zh-account-chart { height:150px; gap:4px; }
	.zh-account-image-grid { grid-template-columns:repeat(4,1fr); }
}
@media (max-width: 420px) {
	.zh-account-person { align-items:flex-start; }
	.zh-account-quick { grid-template-columns:1fr; }
	.zh-account-stats { grid-template-columns:1fr 1fr; }
	.zh-account-stat { display:flex; flex-direction:column; gap:5px; }
	.zh-account-stat-icon { margin-bottom:2px; }
	.zh-account-usage-foot { flex-direction:column; gap:5px; }
}


/* ===== Zhino 1.5 dedicated authentication ===== */
.zh-auth-wrap{--zh-auth-accent:var(--zh-brand);min-height:100dvh;display:flex;align-items:stretch;background:var(--zh-bg);color:var(--zh-ink);font-family:var(--zh-font)}
.zh-auth-wrap.is-embedded{min-height:auto;padding:clamp(18px,3vw,36px) 0;background:transparent}
.zh-auth-shell{width:100%;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(360px,.97fr);min-height:100dvh}
.zh-auth-wrap.is-embedded .zh-auth-shell{min-height:720px;border:1px solid var(--zh-line);border-radius:28px;overflow:hidden;box-shadow:0 24px 70px rgba(20,22,44,.10)}
.zh-auth-main{padding:clamp(24px,4vw,64px);display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 10% 0%,color-mix(in srgb,var(--zh-auth-accent) 10%,transparent),transparent 35%),var(--zh-bg)}
.zh-auth-brandrow{display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(100%,510px);margin:0 auto 30px}.zh-auth-logo{max-height:46px;width:auto}.zh-auth-home{display:inline-flex;align-items:center;gap:7px;color:var(--zh-ink-2);font-size:.86rem}.zh-auth-home:hover{color:var(--zh-auth-accent)}
.zh-auth-card{width:min(100%,510px);margin:0 auto;background:var(--zh-surface);border:1px solid var(--zh-line);border-radius:26px;padding:clamp(22px,3vw,36px);box-shadow:0 20px 55px rgba(17,19,42,.08)}
.zh-auth-heading{text-align:center;margin-bottom:24px}.zh-auth-heading h1{font-size:clamp(1.55rem,3vw,2rem);margin:12px 0 6px;font-weight:950}.zh-auth-heading p,.zh-auth-pane-head p{color:var(--zh-ink-2);margin:0;line-height:1.8}.zh-auth-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:color-mix(in srgb,var(--zh-auth-accent) 10%,transparent);color:var(--zh-auth-accent);font-size:.78rem;font-weight:800}
.zh-auth-tabs{display:grid;grid-template-columns:repeat(2,1fr);background:var(--zh-bg-2);padding:5px;border-radius:14px;margin-bottom:24px}.zh-auth-tab{border:0;background:transparent;color:var(--zh-ink-2);padding:10px 14px;border-radius:10px;font:inherit;font-weight:800;cursor:pointer}.zh-auth-tab.is-active{background:var(--zh-surface);color:var(--zh-ink);box-shadow:0 5px 14px rgba(16,18,44,.08)}
.zh-auth-pane{animation:zhAuthIn .22s ease}.zh-auth-pane-head{margin-bottom:18px}.zh-auth-pane-head h2{font-size:1.14rem;margin:0 0 5px}.zh-auth-form{display:flex;flex-direction:column;gap:10px}.zh-auth-form>label{font-size:.86rem;font-weight:800;margin-top:2px}.zh-auth-form .zh-field{width:100%;min-height:50px;border:1px solid var(--zh-line);background:var(--zh-bg);border-radius:13px;padding:0 14px;color:var(--zh-ink);font:inherit;outline:0;transition:.2s}.zh-auth-form .zh-field:focus{border-color:var(--zh-auth-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--zh-auth-accent) 13%,transparent)}
.zh-input-icon,.zh-password-field{position:relative}.zh-input-icon>span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--zh-ink-3);display:flex}.zh-input-icon .zh-field{padding-right:44px}.zh-password-field .zh-field{padding-left:46px}.zh-pass-toggle{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:var(--zh-ink-3);cursor:pointer}.zh-pass-toggle.is-on{color:var(--zh-auth-accent);background:color-mix(in srgb,var(--zh-auth-accent) 8%,transparent)}
.zh-auth-methods{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}.zh-auth-methods button{border:1px solid var(--zh-line);background:var(--zh-bg);color:var(--zh-ink-2);border-radius:11px;padding:9px 10px;font:inherit;font-size:.82rem;font-weight:800;cursor:pointer}.zh-auth-methods button.is-active{border-color:color-mix(in srgb,var(--zh-auth-accent) 38%,var(--zh-line));color:var(--zh-auth-accent);background:color-mix(in srgb,var(--zh-auth-accent) 7%,var(--zh-bg))}
.zh-auth-submit{width:100%;margin-top:4px;background:var(--zh-auth-accent)!important;border-color:var(--zh-auth-accent)!important;position:relative}.zh-auth-submit.is-loading{opacity:.72;pointer-events:none}.zh-auth-options,.zh-login-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.82rem;color:var(--zh-ink-2)}.zh-auth-options label,.zh-auth-terms-check{display:flex;align-items:flex-start;gap:8px;font-weight:500!important}.zh-auth-terms-check input,.zh-auth-options input{margin-top:3px;accent-color:var(--zh-auth-accent)}.zh-auth-back{border:0;background:transparent;color:var(--zh-ink-2);font:inherit;font-size:.82rem;display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:0;margin-bottom:14px}.zh-auth-back:hover{color:var(--zh-auth-accent)}.zh-muted{color:var(--zh-ink-3);font-weight:500}.zh-login-msg{min-height:1.35em;margin:2px 0;color:var(--zh-danger);font-size:.82rem}.zh-login-msg.is-info{color:var(--zh-ink-2)}
.zh-otp{display:flex;direction:ltr;justify-content:center;gap:8px;margin:10px 0 6px}.zh-otp input{width:48px;height:54px;text-align:center;border:1px solid var(--zh-line);background:var(--zh-bg);border-radius:12px;font:800 1.2rem var(--zh-font);color:var(--zh-ink);outline:0}.zh-otp input:focus{border-color:var(--zh-auth-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--zh-auth-accent) 12%,transparent)}
.zh-auth-side{position:relative;overflow:hidden;display:flex;align-items:center;background:linear-gradient(145deg,#17162f 0%,color-mix(in srgb,var(--zh-auth-accent) 82%,#191737) 100%);background-size:cover;background-position:center;color:#fff;padding:clamp(38px,6vw,82px)}.zh-auth-side:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 20% 15%,rgba(255,255,255,.14),transparent 24%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:auto,38px 38px,38px 38px}.zh-auth-side-glow{position:absolute;width:380px;height:380px;border-radius:50%;filter:blur(10px);background:rgba(255,255,255,.08);left:-120px;bottom:-110px}.zh-auth-side-content{position:relative;z-index:1;max-width:520px}.zh-auth-side-kicker{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);border-radius:999px;font-size:.8rem;font-weight:800}.zh-auth-side h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.35;margin:20px 0 12px;font-weight:950}.zh-auth-side p{font-size:1rem;line-height:2;color:rgba(255,255,255,.76)}.zh-auth-side ul{list-style:none;padding:0;margin:28px 0;display:grid;gap:14px}.zh-auth-side li{display:flex;align-items:center;gap:10px;font-weight:750}.zh-auth-side li svg{flex:0 0 auto}.zh-auth-gift{display:inline-flex;align-items:center;gap:12px;margin-top:6px;padding:12px 15px;border-radius:16px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16)}.zh-auth-gift>span{width:38px;height:38px;display:grid;place-items:center;background:rgba(255,255,255,.12);border-radius:12px}.zh-auth-gift div{display:flex;flex-direction:column}.zh-auth-gift small{color:rgba(255,255,255,.65);margin-top:2px}.zh-auth-already{display:flex;align-items:center;gap:14px;padding:22px;border:1px solid var(--zh-line);background:var(--zh-surface);border-radius:20px}.zh-auth-already>div{flex:1}.zh-auth-already p{margin:3px 0 0;color:var(--zh-ink-2)}.zh-auth-success{width:42px;height:42px;border-radius:14px;background:color-mix(in srgb,#20a468 12%,transparent);color:#20a468;display:grid;place-items:center}
.zh-auth-wrap.is-centered .zh-auth-shell{grid-template-columns:1fr}.zh-auth-wrap.is-centered .zh-auth-main{min-height:100dvh}.zh-auth-wrap.is-centered .zh-auth-card{max-width:530px}
@keyframes zhAuthIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:900px){.zh-auth-shell{grid-template-columns:1fr}.zh-auth-side{display:none}.zh-auth-main{min-height:100dvh;padding:24px}.zh-auth-wrap.is-embedded .zh-auth-shell{min-height:auto}.zh-auth-wrap.is-embedded .zh-auth-main{min-height:auto}.zh-auth-card{box-shadow:none}.zh-auth-brandrow{margin-bottom:20px}}
@media(max-width:560px){.zh-auth-main{padding:18px 14px}.zh-auth-card{padding:20px 16px;border-radius:20px}.zh-auth-home{font-size:0;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--zh-line);border-radius:11px}.zh-auth-home svg{margin:0}.zh-otp{gap:5px}.zh-otp input{width:min(13vw,46px);height:50px}.zh-auth-options{align-items:flex-start;flex-direction:column}.zh-auth-heading h1{font-size:1.5rem}}

.zh-auth-empty{padding:14px 16px;border:1px dashed var(--zh-line);background:var(--zh-bg);border-radius:13px;color:var(--zh-ink-2);font-size:.86rem;line-height:1.8}
.zh-account-kyc-body{display:flex;flex-direction:column;align-items:flex-start;gap:11px}.zh-account-kyc-body p{margin:0;color:var(--zh-ink-2);font-size:var(--zh-fs-sm);line-height:1.75}.zh-account-kyc-body .zh-btn{margin-top:2px}

/* ===== Zhino 1.7 graphical AI home ===== */
.zh-empty-ai-home{padding-top:4.5vh}.zh-ai-home-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.zh-ai-home-heading h1{margin-bottom:5px}.zh-ai-home-heading p{margin:0!important}.zh-ai-home-live{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--zh-line);border-radius:999px;font-size:10px;color:var(--zh-ink-3);background:var(--zh-surface);white-space:nowrap}.zh-ai-home-live i{width:7px;height:7px;border-radius:50%;background:#20bf6b;box-shadow:0 0 0 4px rgba(32,191,107,.11);animation:zhHomeLive 1.8s ease-in-out infinite}.zh-ai-home-cockpit{position:relative;display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;padding:18px;margin-bottom:22px;border:1px solid color-mix(in srgb,var(--zh-brand) 15%,var(--zh-line));border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--zh-surface) 96%,transparent),color-mix(in srgb,var(--zh-surface-2) 93%,transparent));overflow:hidden}.zh-ai-home-cockpit:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-130px;top:-150px;background:rgba(75,50,245,.08);filter:blur(10px)}.zh-ai-home-core{width:118px;height:118px;position:relative;display:grid;place-items:center;margin:auto}.zh-ai-home-core>i{position:absolute;border-radius:50%;border:1px solid rgba(87,64,255,.22);animation:zhHomeSpin 7s linear infinite}.zh-ai-home-core .r1{inset:0}.zh-ai-home-core .r2{inset:13px;animation-direction:reverse;animation-duration:5s}.zh-ai-home-core .r3{inset:27px;animation-duration:3.8s}.zh-ai-home-core>i:after{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;border-radius:50%;background:var(--zh-brand);box-shadow:0 0 13px rgba(74,50,245,.55)}.zh-ai-home-core>span{width:48px;height:48px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,var(--zh-brand),#7259ff);color:#fff;box-shadow:0 12px 34px rgba(24,0,173,.24);position:relative;z-index:2}.zh-ai-home-data{min-width:0}.zh-ai-home-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px}.zh-ai-home-metrics>div,.zh-ai-home-metrics>a{min-width:0;display:grid;grid-template-columns:28px 1fr;column-gap:7px;align-items:center;padding:10px;border:1px solid var(--zh-line);border-radius:14px;background:color-mix(in srgb,var(--zh-surface) 91%,transparent);text-decoration:none;color:var(--zh-ink)}.zh-ai-home-metrics>*>span{grid-row:1/3;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(80,58,245,.08);color:var(--zh-brand)}.zh-ai-home-metrics small{font-size:9px;color:var(--zh-ink-3);white-space:nowrap}.zh-ai-home-metrics strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zh-ai-home-models{display:flex;gap:7px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}.zh-ai-home-models::-webkit-scrollbar{display:none}.zh-ai-home-model{flex:0 0 auto;display:grid;grid-template-columns:27px auto;column-gap:7px;align-items:center;border:1px solid var(--zh-line);background:var(--zh-surface);color:var(--zh-ink);border-radius:13px;padding:7px 9px;font:inherit;cursor:pointer;transition:.2s}.zh-ai-home-model:hover,.zh-ai-home-model.is-active{border-color:color-mix(in srgb,var(--zh-brand) 45%,var(--zh-line));background:color-mix(in srgb,var(--zh-brand) 6%,var(--zh-surface));box-shadow:0 8px 20px rgba(24,0,173,.07)}.zh-ai-home-model>span{grid-row:1/3;width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:rgba(83,61,245,.08);color:var(--zh-brand)}.zh-ai-home-model b{font-size:10px;white-space:nowrap}.zh-ai-home-model small{font-size:8px;color:var(--zh-ink-3);white-space:nowrap}.zh-empty-ai-home .zh-starters{margin-top:3px}
@keyframes zhHomeSpin{to{transform:rotate(360deg)}}@keyframes zhHomeLive{50%{opacity:.4;scale:.75}}
@media(max-width:800px){.zh-ai-home-cockpit{grid-template-columns:100px 1fr;padding:14px}.zh-ai-home-core{width:88px;height:88px}.zh-ai-home-core .r2{inset:10px}.zh-ai-home-core .r3{inset:21px}.zh-ai-home-metrics{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.zh-empty-ai-home{padding-top:2.5vh}.zh-ai-home-heading{display:block}.zh-ai-home-live{display:none}.zh-ai-home-cockpit{grid-template-columns:1fr}.zh-ai-home-core{width:92px;height:92px}.zh-ai-home-metrics{grid-template-columns:1fr 1fr}.zh-ai-home-metrics>div,.zh-ai-home-metrics>a{padding:8px}.zh-ai-home-models{margin-inline:-2px}.zh-ai-home-model{padding:6px 8px}}
@media(prefers-reduced-motion:reduce){.zh-ai-home-core>i,.zh-ai-home-live i{animation:none!important}}

/* === Zhino 2.0 Workspace / Knowledge / Agents / Memory / Notifications === */
.zh-work-panel{background:var(--zh-card,#fff);border:1px solid var(--zh-line,#e7e8ef);border-radius:22px;padding:20px;margin:0 0 22px;box-shadow:0 12px 36px rgba(24,28,45,.05)}
.zh-work-panel-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}.zh-work-panel-head h3{margin:0 0 4px;font-size:18px}.zh-work-panel-head p{margin:0;color:var(--zh-muted,#777);font-size:13px}
.zh-work-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.zh-work-form-grid label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700}.zh-work-form-grid .is-wide{grid-column:1/-1}.zh-color-field{width:100%;height:44px;border:1px solid var(--zh-line,#ddd);border-radius:12px;padding:3px;background:transparent}
.zh-work-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px}.zh-work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.zh-work-card,.zh-agent-card{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;background:var(--zh-card,#fff);border:1px solid var(--zh-line,#e7e8ef);border-radius:22px;padding:18px;overflow:hidden}.zh-work-card:before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--project,var(--zh-brand))}.zh-work-card-icon,.zh-agent-orb{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--zh-brand) 12%,transparent);color:var(--zh-brand)}
.zh-work-card-main h3,.zh-agent-main h3{margin:0 0 5px;font-size:17px}.zh-work-card-main p,.zh-agent-main p{margin:0;color:var(--zh-muted,#777);font-size:13px;line-height:1.8}.zh-work-card>.zh-work-actions,.zh-agent-card>.zh-work-actions{grid-column:1/-1;margin-top:4px}.zh-work-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.zh-work-meta span{font-size:11px;padding:4px 8px;border-radius:999px;background:var(--zh-soft,#f5f6fa);color:var(--zh-muted,#666)}
.zh-work-empty{grid-column:1/-1;text-align:center;padding:38px 20px;border:1px dashed var(--zh-line,#dfe1ea);border-radius:22px;color:var(--zh-muted,#777)}.zh-work-empty .zh-i{color:var(--zh-brand)}.zh-work-empty h3{margin:12px 0 6px;color:var(--zh-text,#222)}.zh-work-empty p{margin:0 auto 15px;max-width:520px;line-height:1.9}.zh-work-loading{padding:18px;color:var(--zh-muted,#777)}
.zh-kb-toolbar{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(220px,1.3fr) auto auto;gap:10px;align-items:end}.zh-doc-list,.zh-memory-list,.zh-notification-list,.zh-job-list{display:grid;gap:10px;margin-top:16px}.zh-doc-row,.zh-memory-row,.zh-notification-row,.zh-job-row{display:flex;align-items:center;gap:12px;border:1px solid var(--zh-line,#e7e8ef);background:var(--zh-card,#fff);border-radius:16px;padding:13px 14px}.zh-doc-icon,.zh-memory-icon,.zh-notification-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--zh-soft,#f5f6fa);color:var(--zh-brand);flex:0 0 auto}.zh-doc-main,.zh-memory-main,.zh-notification-main,.zh-job-main{min-width:0;flex:1}.zh-doc-main strong,.zh-memory-main strong,.zh-notification-main strong,.zh-job-main strong{display:block}.zh-doc-main small,.zh-job-main small,.zh-notification-main small{display:block;color:var(--zh-muted,#777);margin-top:4px}.zh-doc-row.is-ready{border-color:color-mix(in srgb,#21a76a 38%,var(--zh-line))}.zh-doc-row.is-error,.zh-job-row.is-failed{border-color:color-mix(in srgb,#d84b57 45%,var(--zh-line))}.zh-doc-row.is-processing,.zh-job-row.is-running{border-color:color-mix(in srgb,var(--zh-brand) 45%,var(--zh-line))}
.zh-check-line{display:flex!important;flex-direction:row!important;align-items:center;gap:8px!important;font-weight:500!important}.zh-mini-switch{position:relative;display:inline-flex}.zh-mini-switch input{position:absolute;opacity:0}.zh-mini-switch i{width:40px;height:22px;border-radius:999px;background:#cfd2dc;display:block;position:relative;transition:.2s}.zh-mini-switch i:after{content:"";position:absolute;width:16px;height:16px;top:3px;right:3px;border-radius:50%;background:#fff;transition:.2s}.zh-mini-switch input:checked+i{background:var(--zh-brand)}.zh-mini-switch input:checked+i:after{transform:translateX(-18px)}.zh-memory-main p{margin:4px 0 0;color:var(--zh-muted,#666);line-height:1.75}.zh-notification-row.is-unread{background:color-mix(in srgb,var(--zh-brand) 6%,var(--zh-card,#fff));border-color:color-mix(in srgb,var(--zh-brand) 24%,var(--zh-line))}.zh-notification-row.is-unread:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--zh-brand);flex:0 0 auto}.zh-job-state{min-width:86px;text-align:center;border-radius:999px;padding:6px 9px;background:var(--zh-soft,#f5f6fa);font-size:11px;font-weight:800}.zh-job-row.is-running .zh-job-state{background:color-mix(in srgb,var(--zh-brand) 12%,transparent);color:var(--zh-brand)}.zh-job-row.is-done .zh-job-state{background:#e7f8ef;color:#138150}.zh-job-row.is-failed .zh-job-state{background:#fdecef;color:#b52e40}.zh-job-error{font-size:11px;color:#b52e40;max-width:280px}.zh-notify-btn{position:relative}.zh-notify-badge{position:absolute;top:-4px;inset-inline-start:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;display:grid;place-items:center;background:#f0445c;color:#fff;font-size:10px;font-weight:900;border:2px solid var(--zh-bg,#fff)}
@media(max-width:900px){.zh-work-grid{grid-template-columns:1fr}.zh-kb-toolbar{grid-template-columns:1fr 1fr}.zh-work-form-grid{grid-template-columns:1fr}.zh-work-form-grid .is-wide{grid-column:auto}}
@media(max-width:600px){.zh-kb-toolbar{grid-template-columns:1fr}.zh-work-panel{padding:15px}.zh-work-card,.zh-agent-card{grid-template-columns:auto 1fr}.zh-work-actions .zh-btn{flex:1}.zh-doc-row,.zh-memory-row,.zh-notification-row,.zh-job-row{align-items:flex-start;flex-wrap:wrap}.zh-job-state{min-width:auto}}
[data-theme="dark"] .zh-work-panel,[data-theme="dark"] .zh-work-card,[data-theme="dark"] .zh-agent-card,[data-theme="dark"] .zh-doc-row,[data-theme="dark"] .zh-memory-row,[data-theme="dark"] .zh-notification-row,[data-theme="dark"] .zh-job-row{box-shadow:none}

/* Tools Builder Pro */
.zh-tool-choices{display:flex;flex-wrap:wrap;gap:9px}.zh-tool-choice{position:relative;display:inline-flex!important;align-items:center;gap:7px;padding:10px 13px;border:1px solid var(--zh-line);border-radius:13px;background:var(--zh-surface);cursor:pointer;font-weight:600!important;transition:.18s ease}.zh-tool-choice:has(input:checked){border-color:color-mix(in srgb,var(--zh-brand) 65%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--zh-brand) 10%,transparent);background:color-mix(in srgb,var(--zh-brand) 7%,var(--zh-surface))}.zh-tool-choice input{accent-color:var(--zh-brand)}.zh-tool-check{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--zh-line);border-radius:13px;background:var(--zh-surface);cursor:pointer;font-weight:600!important}.zh-tool-check input{width:18px;height:18px;accent-color:var(--zh-brand)}.zh-field-help{margin:6px 2px 0;color:var(--zh-ink-3);font-size:12px;line-height:1.8}
.zh-doc-attach{flex:0 0 auto}.zh-doc-composer-status{display:flex;align-items:center;gap:8px;margin:2px 4px 7px;padding:8px 10px;border-radius:11px;font-size:11px;font-weight:700;background:color-mix(in srgb,var(--zh-brand) 7%,var(--zh-surface));color:var(--zh-ink-2)}.zh-doc-composer-status.is-processing svg{animation:zh-spin 1.1s linear infinite}.zh-doc-composer-status.is-ready{background:rgba(32,164,104,.09);color:#168657}.zh-doc-composer-status.is-error{background:rgba(220,53,69,.08);color:#b42d3c}.zh-doc-composer-status.is-queued{background:rgba(236,164,31,.10);color:#9b6810}@keyframes zh-spin{to{transform:rotate(360deg)}}
.zh-project-prompts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.zh-project-prompts button{border:1px solid var(--zh-line);background:color-mix(in srgb,var(--project,var(--zh-brand)) 6%,var(--zh-surface));color:var(--zh-ink-2);border-radius:999px;padding:6px 9px;font:inherit;font-size:10px;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zh-project-prompts button:hover{border-color:color-mix(in srgb,var(--project,var(--zh-brand)) 45%,var(--zh-line));color:var(--zh-ink)}

/* Zhino 2.0 — richer Agent Builder */
.zh-agent-home-label{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--zh-brand) 28%,var(--zh-line));border-radius:999px;background:color-mix(in srgb,var(--zh-brand) 8%,var(--zh-surface));color:var(--zh-brand);font-size:12px;font-weight:800;margin-bottom:9px}.zh-agent-starters{width:min(920px,100%);margin:14px auto 0;padding:14px;border:1px solid var(--zh-line);border-radius:18px;background:color-mix(in srgb,var(--zh-surface) 92%,transparent)}.zh-agent-starters-title{display:block;font-size:12px;color:var(--zh-ink-3);font-weight:800;margin-bottom:9px}.zh-agent-starter-chips{display:flex;flex-wrap:wrap;gap:8px}.zh-agent-starter-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:9px 12px;border:1px solid var(--zh-line);border-radius:13px;background:var(--zh-surface);color:var(--zh-ink);font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.18s ease}.zh-agent-starter-chip:hover{border-color:color-mix(in srgb,var(--zh-brand) 45%,var(--zh-line));transform:translateY(-1px);box-shadow:0 8px 22px rgba(15,23,42,.08)}.zh-agent-temp .zh-range-wrap{display:flex;align-items:center;gap:12px}.zh-agent-temp input[type=range]{flex:1}.zh-range-value{min-width:38px;text-align:center;padding:4px 7px;border-radius:9px;background:color-mix(in srgb,var(--zh-brand) 10%,var(--zh-surface));color:var(--zh-brand)}.zh-agent-card-prompts{margin-top:11px}.zh-agent-card-prompts button{max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 2.1.0 — مرکز امنیت و پشتیبانی */
.zh-support-compose,.zh-support-list,.zh-security-section,.zh-security-card{background:var(--zh-surface,#fff);border:1px solid var(--zh-border,rgba(15,23,42,.10));border-radius:22px;box-shadow:0 10px 32px rgba(15,23,42,.055)}
.zh-support-compose{padding:22px;margin-bottom:22px}.zh-support-compose-head{display:flex;gap:14px;align-items:center;margin-bottom:18px}.zh-support-compose-head h3,.zh-support-compose-head p{margin:0}.zh-support-compose-head p{margin-top:4px;color:var(--zh-muted,#64748b);font-size:13px}.zh-support-compose-icon,.zh-security-icon{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:color-mix(in srgb,var(--zh-brand,#5b4bf5) 12%,transparent);color:var(--zh-brand,#5b4bf5);flex:0 0 auto}.zh-support-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.zh-support-form-grid label{display:grid;gap:7px;font-size:13px;font-weight:700}.zh-support-form-grid .is-wide{grid-column:1/-1}.zh-support-form-grid input[type=file],.zh-support-reply input[type=file]{padding:10px;border:1px dashed var(--zh-border,#d7dce5);border-radius:12px;width:100%;background:var(--zh-bg,#f8fafc)}.zh-support-suggestion{margin-top:14px;padding:16px;border-radius:16px;background:color-mix(in srgb,var(--zh-brand,#5b4bf5) 8%,var(--zh-surface,#fff));border:1px solid color-mix(in srgb,var(--zh-brand,#5b4bf5) 18%,transparent)}.zh-support-suggestion strong,.zh-support-suggestion p{display:block;margin:0}.zh-support-suggestion p{margin-top:7px;line-height:1.9}.zh-support-list{padding:18px}.zh-support-list-title{font-size:16px;margin:0 0 12px}.zh-support-ticket-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:14px 12px;border-radius:15px;text-decoration:none;color:inherit;transition:.18s}.zh-support-ticket-row:hover{background:var(--zh-bg,#f8fafc);transform:translateY(-1px)}.zh-support-ticket-main{min-width:0;display:grid;gap:4px}.zh-support-ticket-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zh-support-ticket-main small,.zh-support-ticket-priority{color:var(--zh-muted,#64748b);font-size:12px}.zh-support-ticket-state,.zh-security-badge{font-size:11px;font-weight:800;padding:5px 9px;border-radius:999px;white-space:nowrap}.zh-support-ticket-state.is-open{background:#e0f2fe;color:#075985}.zh-support-ticket-state.is-waiting{background:#fff7ed;color:#9a3412}.zh-support-ticket-state.is-answered{background:#ecfdf5;color:#166534}.zh-support-ticket-state.is-closed{background:#f1f5f9;color:#475569}.zh-support-thread{display:grid;gap:14px;margin:18px 0}.zh-support-message{width:min(82%,760px);padding:15px 17px;border-radius:18px;background:var(--zh-surface,#fff);border:1px solid var(--zh-border,#e5e7eb)}.zh-support-message.is-user{margin-right:auto;background:color-mix(in srgb,var(--zh-brand,#5b4bf5) 9%,var(--zh-surface,#fff))}.zh-support-message.is-support{margin-left:auto}.zh-support-message header{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px}.zh-support-message header time{font-size:11px;color:var(--zh-muted,#64748b)}.zh-support-message p{margin:0;line-height:1.95;white-space:pre-wrap}.zh-support-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.zh-support-file{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:10px;background:var(--zh-bg,#f8fafc);text-decoration:none;color:inherit;font-size:12px}.zh-support-file small{color:var(--zh-muted,#64748b)}.zh-support-reply{display:grid;gap:12px;padding:18px;border:1px solid var(--zh-border,#e5e7eb);border-radius:18px}.zh-support-reply h3{margin:0}.zh-inline-notice{display:flex;gap:8px;align-items:center;padding:13px 15px;border-radius:14px;background:var(--zh-bg,#f8fafc);color:var(--zh-muted,#64748b)}
.zh-security-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}.zh-security-card{padding:18px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start}.zh-security-card h3,.zh-security-card p{margin:0}.zh-security-card p{color:var(--zh-muted,#64748b);margin-top:5px;font-size:13px}.zh-security-badge.is-ok{background:#ecfdf5;color:#166534}.zh-security-badge.is-warn{background:#fff7ed;color:#9a3412}.zh-security-inline-form{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:9px}.zh-security-section{padding:20px;margin-top:16px}.zh-security-password{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:center}.zh-security-sessions,.zh-security-events{display:grid;gap:9px;margin-bottom:13px}.zh-security-session,.zh-security-event{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--zh-border,#e5e7eb);border-radius:14px}.zh-security-session.is-current{border-color:color-mix(in srgb,var(--zh-brand,#5b4bf5) 35%,transparent);background:color-mix(in srgb,var(--zh-brand,#5b4bf5) 5%,transparent)}.zh-security-session-icon,.zh-security-event-state{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--zh-bg,#f8fafc);color:var(--zh-brand,#5b4bf5);flex:0 0 auto}.zh-security-session>div,.zh-security-event>div{min-width:0;display:grid;gap:3px;flex:1}.zh-security-session small,.zh-security-event small{color:var(--zh-muted,#64748b);font-size:12px}.zh-security-event.is-suspicious{border-color:#f59e0b;background:#fffbeb}.zh-security-event.is-suspicious .zh-security-event-state{color:#b45309;background:#fef3c7}
@media(max-width:780px){.zh-support-form-grid,.zh-security-grid{grid-template-columns:1fr}.zh-support-form-grid .is-wide{grid-column:auto}.zh-support-ticket-row{grid-template-columns:auto minmax(0,1fr) auto}.zh-support-ticket-priority{display:none}.zh-security-password{grid-template-columns:1fr}.zh-support-message{width:94%}.zh-security-card{grid-template-columns:auto 1fr}.zh-security-card>.zh-security-badge{grid-column:1/-1;width:max-content}.zh-security-inline-form{grid-template-columns:1fr}.zh-security-session{align-items:flex-start;flex-wrap:wrap}.zh-security-session>.zh-btn{margin-right:46px}}

/* Audio/video studio ------------------------------------------------------- */
.zh-media-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.zh-media-gallery.is-audio { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.zh-media-card { background:var(--zh-surface); border:1px solid var(--zh-line); border-radius:var(--zh-r-md); overflow:hidden; display:flex; flex-direction:column; min-width:0; }
.zh-media-preview { min-height:180px; background:var(--zh-mist); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.zh-media-gallery.is-video .zh-media-preview { aspect-ratio:16/10; }
.zh-media-gallery.is-audio .zh-media-preview { min-height:128px; padding:20px; }
.zh-media-preview video { width:100%; height:100%; display:block; object-fit:cover; background:#000; }
.zh-media-preview audio { width:100%; max-width:100%; }
.zh-media-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--zh-ink-2); text-align:center; padding:24px; }
.zh-media-state span { color:var(--zh-danger,#c2413a); font-size:var(--zh-fs-xs); line-height:1.8; max-width:36ch; }
.zh-media-card.is-processing .zh-media-state svg,
.zh-media-card.is-queued .zh-media-state svg { animation:zh-media-pulse 1.8s ease-in-out infinite; }
.zh-media-meta { padding:12px 14px; }
.zh-media-meta > p { margin:0 0 10px; color:var(--zh-ink-2); line-height:1.8; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.zh-media-form .zh-img-opts label { min-width:140px; }
@keyframes zh-media-pulse { 0%,100%{opacity:.48;transform:scale(.96)} 50%{opacity:1;transform:scale(1.04)} }
@media (max-width:640px){ .zh-media-gallery,.zh-media-gallery.is-audio{grid-template-columns:1fr}.zh-media-preview{min-height:140px}.zh-media-form .zh-img-opts>*{width:100%}.zh-media-form .zh-img-opts label{min-width:0}.zh-media-form .zh-img-go{width:100%} }
@media (prefers-reduced-motion:reduce){ .zh-media-card.is-processing .zh-media-state svg,.zh-media-card.is-queued .zh-media-state svg{animation:none} }
.zh-media-launchers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}.zh-media-launchers a{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--zh-line);border-radius:var(--zh-r-md);background:var(--zh-surface);color:var(--zh-ink);text-decoration:none;min-width:0;transition:border-color .18s ease,transform .18s ease}.zh-media-launchers a>svg{color:var(--zh-brand);flex:0 0 auto}.zh-media-launchers a span{display:flex;flex-direction:column;min-width:0}.zh-media-launchers strong{font-size:var(--zh-fs-sm)}.zh-media-launchers small{font-size:var(--zh-fs-xs);color:var(--zh-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(hover:hover) and (pointer:fine){.zh-media-launchers a:hover{border-color:var(--zh-brand);transform:translateY(-1px)}}@media(max-width:640px){.zh-media-launchers{grid-template-columns:1fr}.zh-media-launchers a{min-height:58px}}

/* Studio multi-model picker */
.zh-studio-model-picker{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}.zh-studio-model-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.zh-studio-model-head>div{display:flex;flex-direction:column;gap:2px}.zh-studio-model-head strong{font-size:13px}.zh-studio-model-head small{font-size:10px;color:var(--zh-ink-3)}.zh-studio-model-count{display:inline-flex;align-items:center;padding:5px 8px;border:1px solid var(--zh-line);border-radius:999px;background:var(--zh-surface);font-size:10px;color:var(--zh-ink-3);white-space:nowrap}.zh-studio-model-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}.zh-studio-model-card{min-width:0;display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:flex-start;text-align:start;border:1px solid var(--zh-line);border-radius:16px;background:var(--zh-surface);color:var(--zh-ink);padding:11px 12px;cursor:pointer;font:inherit;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease}.zh-studio-model-card:hover{border-color:color-mix(in srgb,var(--zh-brand) 35%,var(--zh-line));background:color-mix(in srgb,var(--zh-brand) 3%,var(--zh-surface))}.zh-studio-model-card.is-selected{border-color:color-mix(in srgb,var(--zh-brand) 62%,var(--zh-line));background:color-mix(in srgb,var(--zh-brand) 6%,var(--zh-surface));box-shadow:0 8px 24px rgba(24,0,173,.07)}.zh-studio-model-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--zh-brand) 9%,var(--zh-surface-2));color:var(--zh-brand)}.zh-studio-model-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.zh-studio-model-title{display:flex;align-items:center;gap:5px;min-width:0;flex-wrap:wrap}.zh-studio-model-title strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.zh-studio-model-title em,.zh-studio-model-title i{font-style:normal;font-size:8px;font-weight:700;padding:2px 5px;border-radius:999px;background:var(--zh-mist);color:var(--zh-ink-3)}.zh-studio-model-title i{background:color-mix(in srgb,var(--zh-brand) 10%,var(--zh-surface));color:var(--zh-brand)}.zh-studio-model-copy>small{font-size:9px;line-height:1.6;color:var(--zh-ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.zh-studio-model-price{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;color:var(--zh-coin-ink)}.zh-studio-model-price .zh-coin{transform:scale(.82)}.zh-studio-model-fallback{max-width:230px}.zh-studio-model-select{width:100%}@media(max-width:640px){.zh-studio-model-list{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:3px;scrollbar-width:none}.zh-studio-model-list::-webkit-scrollbar{display:none}.zh-studio-model-card{flex:0 0 min(82vw,260px);scroll-snap-align:start}.zh-studio-model-head{align-items:flex-start}.zh-studio-model-fallback{max-width:none}}

/* AvalAI-aware media controls */
.zh-media-prompt-wrap{display:flex;flex-direction:column;gap:5px}.zh-media-char-count{align-self:flex-end;color:var(--zh-ink-3);font-size:10px}.zh-media-advanced{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.zh-media-advanced>label{display:flex;flex-direction:column;gap:6px;font-size:var(--zh-fs-xs);font-weight:700;color:var(--zh-ink-2)}.zh-media-advanced>label small{font-weight:400;color:var(--zh-ink-3);line-height:1.7}.zh-ref-control{grid-column:1/-1}.zh-ref-preview{display:flex;align-items:flex-start;gap:8px;min-height:0}.zh-ref-preview:empty{display:none}.zh-ref-preview img{width:112px;height:86px;object-fit:cover;border-radius:12px;border:1px solid var(--zh-line);background:var(--zh-mist)}.zh-ref-preview .zh-act{margin-top:2px}.zh-ref-file{padding:8px}.zh-ref-file::file-selector-button{border:1px solid var(--zh-line);background:var(--zh-surface);color:var(--zh-ink);border-radius:9px;padding:7px 10px;margin-inline-end:8px;cursor:pointer;font:inherit}@media(max-width:640px){.zh-media-advanced{grid-template-columns:1fr}.zh-ref-control{grid-column:auto}}
.zh-media-char-count.is-over{color:var(--zh-danger,#d93a3a);font-weight:700}

/* ------------------------------------------------------------ Prompt picker */
.zh-prompt-btn { width: 42px; height: 42px; flex: none; }
.zh-prompt-btn:hover { color: var(--zh-brand-ink); }
.zh-pp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 2px 4px 0; color: var(--zh-ink-3); font-size: var(--zh-fs-xs); }
.zh-pp-open { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--zh-brand) 28%, var(--zh-line)); border-radius: 999px; background: var(--zh-brand-soft); color: var(--zh-brand-ink); font: inherit; font-size: var(--zh-fs-sm); font-weight: 800; cursor: pointer; transition: background .2s, color .2s; }
.zh-pp-open:hover { background: var(--zh-brand); color: var(--zh-on-brand); }

.zh-pp { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(12, 10, 32, 0); transition: background .2s ease; }
.zh-pp.is-open { background: rgba(12, 10, 32, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.zh-pp-panel { display: flex; flex-direction: column; width: min(720px, 100%); height: min(640px, calc(100dvh - 32px)); overflow: hidden; border: 1px solid var(--zh-line); border-radius: 22px; background: var(--zh-surface); box-shadow: 0 40px 100px -30px rgba(12, 10, 32, .55); transform: translateY(12px) scale(.98); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
.zh-pp.is-open .zh-pp-panel { transform: none; opacity: 1; }
.zh-pp-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.zh-pp-head h2 { flex: 1; margin: 0; font-size: 1.05rem; font-weight: 900; }
.zh-pp-head-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--zh-brand-soft); color: var(--zh-brand-ink); }
.zh-pp-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.zh-pp-view[hidden] { display: none; }
.zh-pp-tools { display: grid; gap: 10px; padding: 0 16px 10px; border-bottom: 1px solid var(--zh-line); }
.zh-pp-search-wrap { position: relative; }
.zh-pp-search-wrap > .zh-i { position: absolute; top: 50%; inset-inline-start: 14px; transform: translateY(-50%); color: var(--zh-ink-3); pointer-events: none; }
.zh-pp-search { width: 100%; padding-inline-start: 40px; }
.zh-pp-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.zh-pp-cats[hidden] { display: none; }
.zh-pp-cats::-webkit-scrollbar { display: none; }
.zh-pp-cats button { flex: none; padding: 5px 12px; border: 1px solid var(--zh-line); border-radius: 999px; background: var(--zh-surface); color: var(--zh-ink-2); font: inherit; font-size: var(--zh-fs-xs); font-weight: 800; cursor: pointer; }
.zh-pp-cats button.is-active { background: var(--zh-ink); border-color: var(--zh-ink); color: var(--zh-surface); }
.zh-pp-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px; }
.zh-pp-list { display: grid; gap: 2px; }
.zh-pp-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 14px; background: none; color: var(--zh-ink); font: inherit; text-align: start; cursor: pointer; }
.zh-pp-item.is-active, .zh-pp-item:focus-visible { background: var(--zh-mist); border-color: color-mix(in srgb, var(--zh-brand) 25%, var(--zh-line)); outline: none; }
.zh-pp-thumb { flex: none; width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--zh-mist); }
.zh-pp-thumb.is-icon { display: grid; place-items: center; color: var(--zh-brand-ink); background: linear-gradient(135deg, var(--zh-brand-soft), color-mix(in srgb, #22d3ee 14%, var(--zh-surface))); }
.zh-pp-main { display: grid; gap: 1px; flex: 1; min-width: 0; }
.zh-pp-main strong { font-size: var(--zh-fs-sm); font-weight: 850; line-height: 1.7; }
.zh-pp-main small { overflow: hidden; color: var(--zh-ink-2); font-size: var(--zh-fs-xs); line-height: 1.7; white-space: nowrap; text-overflow: ellipsis; }
.zh-pp-main em { color: var(--zh-ink-3); font-size: 11px; font-style: normal; font-weight: 700; }
.zh-pp-badge { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 1.9; white-space: nowrap; }
.zh-pp-badge.is-free { color: var(--zh-ok); background: color-mix(in srgb, var(--zh-ok) 12%, transparent); }
.zh-pp-badge.is-paid { color: var(--zh-coin-ink); background: color-mix(in srgb, var(--zh-coin) 20%, transparent); }
.zh-pp-badge.is-members { color: var(--zh-brand-ink); background: var(--zh-brand-soft); }
.zh-pp-empty { margin: 30px 16px; color: var(--zh-ink-3); text-align: center; }
.zh-pp-empty.is-error { color: var(--zh-danger, #d14343); }
.zh-pp-loading { display: grid; gap: 8px; padding: 6px; }
.zh-pp-loading span { height: 62px; border-radius: 14px; background: linear-gradient(90deg, var(--zh-mist), color-mix(in srgb, var(--zh-mist) 40%, var(--zh-surface)), var(--zh-mist)); background-size: 200% 100%; animation: zhPpShimmer 1.2s linear infinite; }
@keyframes zhPpShimmer { to { background-position: -200% 0; } }
.zh-pp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 16px; border-top: 1px solid var(--zh-line); color: var(--zh-ink-3); font-size: 11.5px; }
.zh-pp-lib { color: var(--zh-brand-ink); font-weight: 800; text-decoration: none; }
.zh-pp-lib:hover { text-decoration: underline; }

.zh-pp-detail { overflow-y: auto; padding: 4px 16px 0; gap: 12px; }
.zh-pp-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; border: 0; background: none; color: var(--zh-ink-2); font: inherit; font-size: var(--zh-fs-sm); font-weight: 700; cursor: pointer; }
.zh-pp-back:hover { color: var(--zh-brand-ink); }
.zh-pp-detail-head { display: flex; align-items: center; gap: 12px; }
.zh-pp-detail-head .zh-pp-thumb { width: 60px; height: 60px; }
.zh-pp-detail-head h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 900; line-height: 1.6; }
.zh-pp-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--zh-ink-3); font-size: var(--zh-fs-xs); font-weight: 700; }
.zh-pp-detail-text { margin: 0; color: var(--zh-ink-2); font-size: var(--zh-fs-sm); line-height: 1.9; }
.zh-pp-fill { display: grid; gap: 10px; }
.zh-pp-fill-title { margin: 4px 0 0; font-size: var(--zh-fs-xs); font-weight: 850; color: var(--zh-ink-3); }
.zh-pp-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.zh-pp-fields label { display: grid; gap: 5px; font-size: var(--zh-fs-xs); font-weight: 800; color: var(--zh-ink-2); }
.zh-pp-fields .zh-field.is-invalid { border-color: var(--zh-danger, #d14343); box-shadow: 0 0 0 3px color-mix(in srgb, var(--zh-danger, #d14343) 14%, transparent); }
.zh-pp-preview { max-height: 190px; overflow-y: auto; padding: 12px 14px; border: 1px solid var(--zh-line); border-radius: 14px; background: color-mix(in srgb, var(--zh-mist) 60%, var(--zh-surface)); color: var(--zh-ink-2); font-size: var(--zh-fs-sm); line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.zh-pp-preview mark { padding: 1px 5px; border-radius: 6px; background: color-mix(in srgb, var(--zh-coin) 24%, transparent); color: var(--zh-ink); }
.zh-pp-preview mark.is-filled { background: color-mix(in srgb, var(--zh-ok) 18%, transparent); }
.zh-pp-actions { position: sticky; bottom: 0; z-index: 1; display: flex; justify-content: flex-end; gap: 8px; margin: 0 -16px; padding: 12px 16px; border-top: 1px solid var(--zh-line); background: var(--zh-surface); }
.zh-pp-lock { margin-bottom: 16px; display: grid; justify-items: center; gap: 8px; margin-top: 6px; padding: 22px 18px; border: 1px dashed color-mix(in srgb, var(--zh-coin) 50%, var(--zh-line)); border-radius: 18px; background: color-mix(in srgb, var(--zh-coin) 7%, var(--zh-surface)); text-align: center; }
.zh-pp-lock-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--zh-coin) 22%, transparent); color: var(--zh-coin-ink); }
.zh-pp-lock strong { font-size: 1rem; }
.zh-pp-lock p { margin: 0; color: var(--zh-ink-2); font-size: var(--zh-fs-sm); line-height: 1.9; }
.zh-pp-balance { display: inline-flex; align-items: center; gap: 4px; }
.zh-pp-error { margin: 0; color: var(--zh-danger, #d14343); font-size: var(--zh-fs-sm); font-weight: 700; }
.zh-pp-error a { color: var(--zh-brand-ink); }

@media (max-width: 640px) {
	.zh-pp { place-items: end stretch; padding: 0; }
	.zh-pp-panel { width: 100%; height: 88dvh; border-radius: 22px 22px 0 0; border-bottom: 0; }
	.zh-pp-foot > span:empty { display: none; }
	.zh-pp-thumb { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
	.zh-pp, .zh-pp-panel { transition: none; }
	.zh-pp-loading span { animation: none; }
}

/* ------------------------------------------------- Gift code & invite friends */
.zh-rewards { display: grid; gap: 14px; margin: 18px 0 6px; }
.zh-rewards[hidden] { display: none; }
.zh-gift { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 14px; padding: 16px 18px; border: 1px dashed color-mix(in srgb, var(--zh-coin) 55%, var(--zh-line)); border-radius: 18px; background: color-mix(in srgb, var(--zh-coin) 7%, var(--zh-surface)); }
.zh-gift-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--zh-coin) 24%, transparent); color: var(--zh-coin-ink); }
.zh-gift-copy { display: grid; gap: 2px; }
.zh-gift-copy strong { font-weight: 900; }
.zh-gift-copy small { color: var(--zh-ink-2); font-size: var(--zh-fs-xs); line-height: 1.8; }
.zh-gift-row { grid-column: 1 / -1; display: flex; gap: 8px; }
.zh-gift-input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.zh-gift-input::placeholder { font-family: inherit; letter-spacing: 0; text-transform: none; }
.zh-gift-row .zh-btn { flex: none; }
.zh-gift-msg { grid-column: 1 / -1; margin: 0; font-size: var(--zh-fs-sm); font-weight: 800; }
.zh-gift-msg.is-ok { color: var(--zh-ok); }
.zh-gift-msg.is-error { color: var(--zh-danger, #d14343); }

.zh-ref { display: grid; gap: 14px; padding: 20px; border: 1px solid color-mix(in srgb, var(--zh-brand) 22%, var(--zh-line)); border-radius: 20px; background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--zh-brand) 12%, transparent), transparent 55%), var(--zh-surface); }
.zh-ref-head { display: flex; align-items: flex-start; gap: 14px; }
.zh-ref .zh-ref-head h2 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 900; line-height: 1.6; }
.zh-ref-head p { margin: 0; color: var(--zh-ink-2); font-size: var(--zh-fs-sm); line-height: 1.9; }
.zh-ref-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--zh-brand); color: var(--zh-on-brand); }
.zh-ref-perks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.zh-ref-perks li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--zh-mist); color: var(--zh-ink); font-size: var(--zh-fs-xs); font-weight: 800; }
.zh-ref-linkrow { display: flex; gap: 8px; }
.zh-ref-link { flex: 1; min-width: 0; font-size: var(--zh-fs-sm); }
.zh-ref-linkrow .zh-btn { flex: none; }
.zh-ref-share { display: flex; flex-wrap: wrap; gap: 6px; }
.zh-ref-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zh-ref-stat { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--zh-line); border-radius: 14px; background: var(--zh-surface); text-align: center; }
.zh-ref-stat strong { display: inline-flex; justify-content: center; align-items: center; font-size: 1.15rem; font-weight: 900; }
.zh-ref-stat span { color: var(--zh-ink-3); font-size: 11.5px; font-weight: 700; }
@media (max-width: 560px) {
	.zh-ref { padding: 16px; }
	.zh-ref-linkrow, .zh-gift-row { flex-direction: column; }
	.zh-ref-stat strong { font-size: 1rem; }
}
.zh-doc-composer-status[hidden] { display: none; }