.detail-page { background: #f2f6ff; }
.detail-header { position: relative; z-index: 20; border-bottom: 1px solid #e7ecf5; background: rgba(255,255,255,.96); box-shadow: 0 3px 16px rgba(35,65,122,.05); }
.detail-header-inner { min-height: 72px; display: flex; align-items: center; gap: 15px; }
.detail-search { width: min(430px, 38vw); height: 40px; }
.detail-search button { width: 76px; }
.header-tool { height: 35px; display: inline-flex; align-items: center; padding: 0 13px; border: 1px solid #d8e3f7; border-radius: 7px; color: #5672a9; font-size: 11px; }
.user-entry { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: #64708a; font-size: 11px; }
.user-entry > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#ffb457,#e78131); }
.user-entry i { color: #a0a7b5; font-style: normal; }
.detail-logout-form { margin: 0; }
.detail-logout-form button { min-height: 32px; padding: 0 10px; border: 1px solid #d8e3f7; border-radius: 6px; color: #5672a9; background: #fff; font-size: 10px; cursor: pointer; }
.account-unavailable { color: #9a6d35; }
.detail-menu-toggle { display: none; width: 40px; height: 40px; padding: 9px; border: 0; border-radius: 8px; background: #eef3ff; }
.detail-menu-toggle span { display: block; height: 2px; margin: 5px 0; background: #31569e; }
.detail-mobile-menu { display: none; }
.detail-main { min-height: 1100px; padding-bottom: 65px; background: #f2f6ff; }
.detail-breadcrumb { min-height: 50px; display: flex; align-items: center; gap: 9px; color: #929bac; font-size: 11px; }
.detail-breadcrumb i { font-style: normal; }
.detail-breadcrumb span { color: #5b6577; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 255px; gap: 18px; align-items: start; }
.preview-shell { min-width: 0; padding: 20px; border: 1px solid #e5eaf3; border-radius: 13px; background: #fff; box-shadow: 0 12px 34px rgba(38,68,128,.06); }
.document-header { display: grid; grid-template-columns: 44px 1fr; gap: 13px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #edf0f5; }
.mini-file-icon { width: 40px; height: 47px; display: grid; place-items: center; border-radius: 6px 10px 6px 6px; color: #fff; background: linear-gradient(145deg,#6ca4ff,#3979e8); font-size: 9px; font-weight: 900; }
.document-header h1 { margin: 0 0 8px; font-size: 18px; line-height: 1.5; }
.document-header p { margin: 0; color: #929aaa; font-size: 10px; }
.document-description { margin: 0 0 17px; padding: 15px 17px; border: 1px solid #edf0f5; border-radius: 8px; background: #fff; }
.document-description h2 { margin: 0 0 8px; font-size: 13px; }
.document-description p { margin: 0; color: #737d8f; font-size: 10px; line-height: 1.85; }
.mobile-action-card { display: none; }
.preview-area { overflow: hidden; border: 1px solid #e6e9ef; border-radius: 7px; background: #e8ebf1; }
.preview-toolbar { min-height: 48px; display: flex; align-items: center; gap: 13px; padding: 0 16px; border-bottom: 1px solid #dfe3ea; background: #fff; }
.preview-toolbar h2 { margin: 0; font-size: 13px; }
.preview-toolbar > span { color: #a2a9b6; font-size: 9px; }
.preview-toolbar > div { display: flex; align-items: center; margin-left: auto; }
.preview-toolbar button,.preview-toolbar output { width: 31px; height: 27px; display: grid; place-items: center; border: 1px solid #e0e4eb; color: #6f788a; background: #fff; font-size: 11px; }
.preview-toolbar output { width: 49px; border-left: 0; border-right: 0; font-size: 9px; }
.paper-stack { --paper-scale: 1; display: grid; gap: 13px; padding: 12px; }
.paper-page { position: relative; min-height: 680px; overflow: hidden; background: #fff; box-shadow: 0 2px 7px rgba(30,45,70,.09); }
.preview-image-frame { display: flex; min-height: 680px; align-items: flex-start; justify-content: center; margin: 0; padding: 25px 25px 35px; background: #fff; }
.preview-image-frame img { display: block; width: auto; max-width: 100%; height: auto; max-height: 1500px; object-fit: contain; transform: scale(var(--paper-scale)); transform-origin: top center; }
.preview-empty { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #65718a; text-align: center; }
.preview-empty strong { font-size: 15px; }
.preview-empty span { color: #9ca7b8; font-size: 11px; }
.preview-warning { color: #8a4b32; background: #fffaf7; }
.preview-partial { padding: 10px 12px; border: 1px solid #ead8c7; color: #835c3f; background: #fffaf4; font-size: 11px; line-height: 1.55; }
.page-number { position: absolute; left: 0; top: 0; width: 35px; height: 35px; display: grid; place-items: center; color: #fff; background: #afb3bb; font-size: 10px; }
.preview-more { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 26px; border-top: 1px solid #dfe4ec; background: #fff; }
.preview-more-copy { margin: 0; color: #50596b; font-size: 13px; line-height: 1.55; text-align: center; }
.preview-more-copy strong { font-size: inherit; font-weight: 700; }
.preview-more-copy span { font-size: inherit; font-weight: 400; }
.preview-more a { margin-top: 5px; padding: 10px 22px; border-radius: 5px; color: #fff; background: var(--primary); font-size: 13px; font-weight: 600; }
.document-text-content { margin-top: 16px; padding: 17px 18px; border: 1px solid #e6e9ef; border-radius: 7px; background: #fff; }
.document-text-content h2 { margin: 0 0 12px; color: #4f5d73; font-size: 13px; font-weight: 700; }
.document-text-scroll { max-height: 480px; overflow-x: hidden; overflow-y: auto; padding: 14px 16px; border: 1px solid #edf0f5; border-radius: 6px; background: #fafbfd; -webkit-overflow-scrolling: touch; }
.document-text-body { margin: 0; color: #50596b; font-family: inherit; font-size: 11px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.document-tags { display: flex; gap: 7px; padding: 17px 3px; }
.document-tags span { padding: 5px 10px; border-radius: 4px; color: #7d8697; background: #f3f5f8; font-size: 9px; }
.bottom-download { display: flex; align-items: center; gap: 10px; padding: 17px 20px; border-radius: 9px; background: linear-gradient(90deg,#fff6d7,#ffe4a5); }
.bottom-download > div { display: flex; flex-direction: column; margin-right: auto; }
.bottom-download strong { font-size: 13px; }
.bottom-download span { margin-top: 5px; color: #9a8252; font-size: 9px; }
.primary-download { min-width: 140px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #cbdaf4; border-radius: 6px; color: #42659e; background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.primary-download { border-color: transparent; color: #fff; background: linear-gradient(100deg,#8e19f0,#0878f2); }
.primary-download.is-disabled { border-color: #d8dde7; color: #8d96a5; background: #eef1f5; cursor: not-allowed; }
.detail-sidebar { position: sticky; top: 15px; display: grid; gap: 13px; }
.resource-info-card { padding: 20px 17px; border: 1px solid #e5eaf3; border-radius: 11px; background: #fff; box-shadow: 0 9px 26px rgba(35,64,120,.05); text-align: left; }
.resource-info-card__title { margin: 0 0 14px; color: #4f5d73; font-size: 16px; font-weight: 700; }
.resource-info-list { display: grid; gap: 0; margin: 0; }
.resource-info-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 16px; padding: 11px 0; border-bottom: 1px solid #eef1f6; }
.resource-info-list > div:first-child { padding-top: 0; }
.resource-info-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.resource-info-list dt { flex: 0 0 auto; margin: 0; color: #9ba3b2; font-size: 13px; white-space: nowrap; }
.resource-info-list dd { flex: 1 1 auto; overflow-wrap: anywhere; margin: 0; color: #3d4658; font-size: 16px; line-height: 1.5; font-weight: 600; text-align: right; }
.resource-info-list__action { justify-content: stretch; padding-top: 4px; border-bottom: 0; }
.resource-info-download { width: 100%; min-width: 0; margin-top: 4px; font-size: 14px; }
.favorite-card { min-height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 17px; border: 1px solid #e4e9f2; border-radius: 8px; background: #fff; text-align: center; }
.favorite-card > span { color: #8a94a6; font-size: 10px; }
.favorite-card strong { color: #4f5d73; font-size: 15px; }
.favorite-card strong i { color: #f2a33b; font-style: normal; }
.favorite-card small,.favorite-card a { color: #8993a4; font-size: 10px; line-height: 1.55; }
.favorite-card a { color: #315fbd; text-decoration: underline; text-underline-offset: 3px; }
.favorite-submit { border: 1px solid #e1a64d; border-radius: 999px; padding: 6px 14px; color: #9a5b13; background: #fff; cursor: pointer; font: inherit; font-size: 11px; }
.favorite-submit:hover { background: #fff3dc; }
.favorite-card[data-favorite-state="favorited"] { border-color: #f0d5a8; background: #fffaf1; }
.favorite-card[data-favorite-state="favorited"] strong { color: #a96312; }
.favorite-card[data-favorite-state="unavailable"] strong i { color: #c06456; }
.download-card,.sidebar-related,.safety-note { padding: 17px; border: 1px solid #e5eaf3; border-radius: 11px; background: #fff; box-shadow: 0 9px 26px rgba(35,64,120,.05); }
.download-card > span { color: #9ba3b2; font-size: 10px; }
.download-card > strong { display: block; margin: 6px 0 15px; font-size: 19px; }
.download-card .primary-download { width: 100%; margin-bottom: 9px; }
.download-card small { display: block; color: #a4abb8; text-align: center; font-size: 8px; }
.download-unavailable { margin-top: 5px; color: #7d8798; font-size: 10px; }
.sidebar-related h2 { margin: 0 0 13px; font-size: 13px; }
.sidebar-related ol { margin: 0; padding: 0; list-style: none; }
.sidebar-related li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 6px; padding: 9px 0; border-bottom: 1px dashed #e9edf3; }
.sidebar-related li b { color: #aab2c0; font-size: 10px; }
.sidebar-related li:nth-child(-n+3) b { color: #ff713e; }
.sidebar-related li a { overflow: hidden; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.sidebar-related li small { grid-column: 2; color: #b2b8c3; font-size: 8px; }
.more-link { display: block; margin-top: 12px; color: var(--primary); text-align: right; font-size: 9px; }
.safety-note strong { font-size: 11px; }
.safety-note p { margin: 8px 0 0; color: #949cab; font-size: 9px; line-height: 1.8; }
.related-section { width: calc(100% - 273px); margin-top: 16px; padding: 20px; border: 1px solid #e5eaf3; border-radius: 8px; background: #fff; }
.related-section header { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.related-section header div { min-width: 0; }
.related-section header span { display: block; margin-bottom: 4px; color: #8f99aa; font-size: 9px; }
.related-section h2 { margin: 0; font-size: 16px; }
.related-section header a { flex: 0 0 auto; color: var(--primary); font-size: 9px; }
.related-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 15px; }
.related-column { margin: 0; padding: 0; list-style: none; }
.related-section ul { margin: 15px 0 0; padding: 0; list-style: none; }
.related-item { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; align-items: center; min-height: 48px; padding: 10px 8px; border-bottom: 1px dashed #e8ecf2; border-radius: 6px; transition: background-color .18s ease, box-shadow .18s ease; }
.related-item:last-child { border-bottom: 0; }
.related-item:hover,
.related-item:focus-within { background: #f4f8ff; box-shadow: inset 0 0 0 1px #d8e4f8; }
.related-section li { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; align-items: center; min-height: 48px; padding: 10px 0; border-bottom: 1px dashed #e8ecf2; }
.related-section li:last-child { border-bottom: 0; }
.related-file-type { width: 44px; min-height: 48px; display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 5px; color: #fff; background: #3a7cf0; font-size: 9px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }
.related-file-type.pdf { background: #e65762; }
.related-file-type.ppt { background: #dc7141; }
.related-file-type.xls { background: #36a477; }
.related-copy { min-width: 0; overflow: hidden; }
.related-copy > a { display: block; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.55; white-space: nowrap; text-overflow: ellipsis; word-break: normal; overflow-wrap: normal; border-radius: 4px; }
.related-copy > a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.related-empty { min-height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 15px; border: 1px dashed #dfe5ee; color: #9099a8; text-align: center; }
.related-empty strong { color: #596477; font-size: 12px; }
.related-empty span { margin-top: 6px; font-size: 9px; }
/* legacy-static-detail-ui: hide removed related blocks on N15.3 cached HTML. */
.related-reasons,
.related-meta,
.related-copy > p,
.related-section header span { display: none !important; }
.related-section li { grid-template-columns: 44px minmax(0,1fr) !important; }
@media (prefers-reduced-motion: reduce) { .related-item { transition: none; } }
@media (max-width: 700px) { .related-columns { grid-template-columns: 1fr; gap: 0; } }
.detail-status-page .detail-main { min-height: calc(100vh - 132px); }
.detail-status { --status-accent: #315f9e; min-height: 510px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 20px 72px; border-top: 3px solid var(--status-accent); text-align: center; }
.detail-status-offline .detail-status { --status-accent: #a36b16; }
.detail-status-deleted .detail-status { --status-accent: #a64646; }
.detail-status-unavailable .detail-status { --status-accent: #7a568f; }
.detail-status-vip-required .detail-status { --status-accent: #c45c26; }
.vip-page .detail-status { min-height: 0; padding-bottom: 48px; }
.vip-rules { width: 100%; max-width: 560px; margin: 18px 0 0; padding: 0 0 0 18px; text-align: left; color: #44516a; font-size: 13px; line-height: 1.8; }
.vip-rules li { margin: 6px 0; }
.vip-current-state { max-width: 560px; margin: 16px 0 0; color: #315f9e; font-size: 13px; font-weight: 700; }
.status-eyebrow { margin: 0 0 18px; color: var(--status-accent); font-size: 11px; font-weight: 700; }
.detail-status > strong { color: #b8c4d5; font-size: 64px; line-height: 1; }
.detail-status h1 { margin: 18px 0 10px; font-size: 24px; }
.detail-status > p:not(.status-eyebrow) { max-width: 560px; margin: 0; color: #6f7a8d; font-size: 12px; line-height: 1.8; }
.status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.status-link,.status-secondary-link { min-width: 118px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border: 1px solid var(--status-accent); border-radius: 6px; font-size: 11px; }
.status-link { color: #fff; background: var(--status-accent); }
.status-secondary-link { color: var(--status-accent); background: transparent; }

@media(max-width:900px){.header-tool{display:none}.detail-search{margin-left:auto}.detail-layout{grid-template-columns:1fr}.detail-sidebar{position:static;grid-template-columns:1fr}.mobile-action-card{display:flex;align-items:center;gap:8px;margin-bottom:15px;padding:13px;border-radius:9px;background:#f4f7ff}.mobile-action-card>div{display:flex;flex-direction:column;margin-right:auto}.mobile-action-card small{margin-top:4px;color:#9aa3b3;font-size:8px}.related-section{width:100%}}
@media(max-width:700px){.detail-header-inner{min-height:62px;flex-wrap:wrap;padding-top:7px}.detail-header .brand-copy strong{font-size:17px}.detail-search{order:5;width:100%;height:39px;margin:0 0 10px}.user-entry,.detail-logout-form{display:none}.detail-menu-toggle{display:block;margin-left:auto}.detail-mobile-menu{position:absolute;top:62px;left:15px;right:15px;padding:9px;border:1px solid #dfe6f3;border-radius:9px;background:#fff;box-shadow:0 12px 25px rgba(34,65,125,.13)}.detail-mobile-menu.is-open{display:grid}.detail-mobile-menu a,.detail-mobile-menu>span,.detail-mobile-menu form button{width:100%;padding:11px 12px;border:0;border-bottom:1px solid #eef1f5;color:#44516a;background:#fff;text-align:left;font-size:11px}.detail-mobile-menu form{margin:0}.detail-breadcrumb{min-height:42px}.preview-shell{padding:12px}.document-header{grid-template-columns:38px 1fr}.mini-file-icon{width:36px;height:42px}.document-header h1{font-size:14px}.resource-info-card{padding:16px}.resource-info-card__title{font-size:15px}.resource-info-list dt{font-size:12px}.resource-info-list dd{font-size:15px}.mobile-action-card{display:grid;grid-template-columns:1fr}.mobile-action-card>div{grid-column:1}.mobile-action-card .primary-download{min-width:0;width:100%}.preview-toolbar>span{display:none}.paper-stack{padding:7px;gap:8px}.paper-page{min-height:570px}.preview-image-page{min-height:0}.preview-image-frame{min-height:0;padding:18px 12px 24px}.document-text-content{margin-top:12px;padding:14px 12px}.document-text-scroll{max-height:340px;padding:12px 10px}.document-text-body{font-size:10px;line-height:1.7}.bottom-download{display:grid;grid-template-columns:1fr}.bottom-download>div{grid-column:1}.bottom-download .primary-download{min-width:0;width:100%}.detail-sidebar{grid-template-columns:1fr}.related-section{padding:15px}.related-section li{grid-template-columns:38px minmax(0,1fr)}.related-file-type{width:38px;height:43px}.detail-status{min-height:430px;padding:40px 10px 56px}.detail-status>strong{font-size:50px}.status-actions{width:100%;max-width:300px}.status-link,.status-secondary-link{flex:1 1 130px}}
@media(max-width:380px){.detail-page .container{width:calc(100% - 18px)}.preview-shell{padding:9px}.document-header p{display:none}.resource-info-card{padding:13px}.resource-info-list > div{padding:10px 0}.preview-toolbar{padding:0 10px}.preview-toolbar h2{font-size:11px}.preview-toolbar button{width:27px}.paper-page{min-height:520px}.document-tags{overflow-x:auto}.document-tags span{flex:0 0 auto}.primary-download{font-size:12px}}