:root{--bg:#fff;--panel:rgba(247,247,248,.92);--panel-strong:#fff;--text:#111;--muted:#6b6b6b;--line:rgba(0,0,0,.08);--accent:#dd2866;--accent-2:#8357d7;--shadow:0 10px 30px rgba(0,0,0,.06);--radius:20px;color-scheme:light;font-family:"Microsoft YaHei UI","PingFang SC",system-ui,sans-serif} :root[data-theme="dark"]{--bg:#0f0e13;--panel:rgba(28,25,34,.72);--panel-strong:rgba(38,33,44,.94);--text:#fffafc;--muted:#b6adb9;--line:rgba(255,255,255,.1);--accent:#ff4d8b;--accent-2:#9c79ef;--shadow:0 24px 80px rgba(0,0,0,.35);color-scheme:dark} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);min-height:100vh;transition:background .5s,color .4s}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:3px}.aurora{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.aurora i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.48;animation:drift 18s ease-in-out infinite alternate}.aurora i:nth-child(1){width:48vw;height:48vw;background:#ffc6d9;left:-12vw;top:4vh}.aurora i:nth-child(2){width:42vw;height:42vw;background:#d8c6ff;right:-8vw;top:28vh;animation-delay:-6s}.aurora i:nth-child(3){width:34vw;height:34vw;background:#ffe4a8;left:35vw;bottom:-16vw;animation-delay:-12s}@keyframes drift{to{transform:translate3d(7vw,5vh,0) scale(1.14)}} .glass{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%)}.topbar{position:sticky;top:6px;z-index:20;width:min(1180px,calc(100% - 24px));height:52px;margin:6px auto 0;border-radius:12px;display:flex;align-items:center;justify-content:space-between;padding:5px 14px 5px 16px;transition:top .3s ease,width .3s ease,margin .3s ease,border-radius .3s ease,min-height .3s ease,height .3s ease,padding .3s ease,background .3s ease,backdrop-filter .3s ease}.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit}.brand img{width:36px;height:36px;border-radius:11px;object-fit:cover;box-shadow:0 6px 16px rgba(235,95,147,.2)}.brand span{display:grid}.brand b{font-size:15px}.brand small{font-size:10px;letter-spacing:.16em;color:var(--muted);margin-top:2px}.top-actions{display:flex;align-items:center;gap:8px}.status-chip{font-size:13px;color:var(--muted);padding:0 12px}.icon-button,.admin-button,.category-button{border:0}.icon-button{width:48px;height:48px;border-radius:16px;background:transparent;font-size:21px;transition:.25s}.icon-button:hover{background:var(--panel-strong);transform:translateY(-2px)}.admin-button,.primary-button{border:0;background:var(--text);color:var(--bg);font-weight:700;border-radius:16px;padding:14px 20px;transition:.25s}.admin-button:hover,.primary-button:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(40,30,38,.18)}.admin-dropdown{position:relative}.admin-dropdown-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:160px;border:1px solid var(--line);border-radius:16px;background:var(--panel-strong);box-shadow:var(--shadow);overflow:hidden;z-index:25}.admin-dropdown-menu button{display:block;width:100%;border:0;background:transparent;color:var(--text);padding:12px 16px;text-align:left;font-size:14px;cursor:pointer;transition:background .2s}.admin-dropdown-menu button:hover{background:var(--panel)} .hero{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:56px 0 44px}.eyebrow{font-size:11px;letter-spacing:.25em;color:var(--accent);font-weight:800;margin-bottom:20px}.hero h1{font-size:clamp(44px,7vw,88px);line-height:.98;letter-spacing:-.06em;margin:0;max-width:760px}.hero h1 em{font-style:normal;background:linear-gradient(110deg,var(--accent),var(--accent-2));background-clip:text;color:transparent}.hero>p{font-size:17px;color:var(--muted);margin:24px 0 30px}.search{height:66px;border-radius:22px;display:flex;align-items:center;gap:12px;padding:0 18px;max-width:640px}.search>span{font-size:30px;line-height:1;color:var(--muted);transform:rotate(-15deg)}.search input{flex:1;border:0;background:transparent;outline:0;font-size:16px;min-width:0}.search kbd{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:var(--panel-strong)} .catalog-shell{width:min(1180px,calc(100% - 32px));margin:0 auto 140px}.category-bar{position:sticky;top:66px;z-index:12;border-radius:6px;padding:4px;display:flex;gap:3px;overflow:auto;scrollbar-width:none}.category-button{position:relative;isolation:isolate;flex:1;min-width:max-content;padding:10px 18px;border-radius:5px;background:transparent;color:var(--muted);font-weight:700;transition:color .3s,transform .3s}.category-button::before{content:"";position:absolute;inset:0;border-radius:5px;background:var(--panel-strong);box-shadow:0 4px 16px rgba(70,48,62,.08);opacity:0;transform:scale(.88);transition:.35s cubic-bezier(.2,.8,.2,1);z-index:-1}.category-button[aria-selected="true"]{color:#ec7a9e}.category-button[aria-selected="true"]::before{opacity:1;transform:scale(1)}.category-button:hover{color:var(--text);transform:translateY(-1px)}.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;padding:30px 4px 18px;color:var(--muted);font-size:13px}.catalog-toolbar select{border:1px solid var(--line);background:var(--panel);border-radius:13px;padding:9px 14px}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.product-card{position:relative;background:var(--panel-strong);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 34px rgba(74,49,64,.08);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;min-width:0}.product-card:hover{transform:translateY(-7px);box-shadow:0 24px 50px rgba(74,49,64,.14)}.product-cover{aspect-ratio:1/1.08;background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(246,222,232,.6));overflow:hidden;position:relative}.product-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}.product-card:hover .product-cover img{transform:scale(1.035)}.product-cover.no-image{display:grid;place-items:center}.placeholder-mark{width:70px;height:70px;border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.22));border:1px solid rgba(255,255,255,.7);box-shadow:0 20px 40px rgba(111,76,96,.12);display:grid;place-items:center;color:var(--accent);font-size:28px}.product-copy{padding:18px 18px 20px}.product-code{display:block;font-size:11px;letter-spacing:.13em;color:var(--accent);font-weight:800;margin-bottom:7px}.product-copy h3{font-size:17px;margin:0;line-height:1.35}.product-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:11px;color:var(--muted)}.product-card button.card-hit{position:absolute;inset:0;border:0;background:transparent;border-radius:inherit}.admin-card-actions{position:absolute;inset:10px 10px auto auto;display:flex;gap:6px;z-index:3}.admin-card-actions button{border:1px solid rgba(255,255,255,.55);background:rgba(23,19,24,.66);backdrop-filter:blur(12px);color:white;border-radius:11px;padding:8px 10px;font-size:12px}.drag-handle{position:absolute;left:10px;top:10px;z-index:3;background:rgba(255,255,255,.78);color:#211a20;border-radius:11px;padding:7px 10px;font-size:12px;cursor:grab}.product-card.dragging{opacity:.45}.empty-state{text-align:center;padding:80px;color:var(--muted)} dialog{border:0;padding:0;color:var(--text);background:var(--panel-strong);box-shadow:0 40px 120px rgba(30,20,28,.35)}dialog::backdrop{background:rgba(20,14,19,.55);backdrop-filter:blur(14px)}.product-dialog{width:min(980px,calc(100% - 28px));border-radius:34px;overflow:hidden;grid-template-columns:1.45fr .85fr}.product-dialog[open]{display:grid}.dialog-close{position:absolute;right:16px;top:16px;width:42px;height:42px;border:0;border-radius:15px;background:rgba(20,16,20,.66);color:white;font-size:25px;z-index:4;display:grid;place-items:center;padding:0;line-height:1}.viewer{position:relative;background:#ede7ea;height:min(680px,75vh);min-height:400px;display:flex;align-items:center;justify-content:center}.viewer-stage{position:absolute;inset:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.viewer-stage img{max-width:100%;display:block}.viewer-stage.is-long-image{justify-content:flex-start;overflow-x:auto}.viewer-stage.is-long-image img{max-height:none;width:100%;min-width:100%;height:auto;object-fit:none}.image-placeholder{color:#928891;display:none}.viewer-arrow{position:absolute;top:50%;width:46px;height:46px;border:0;border-radius:16px;background:rgba(255,255,255,.72);color:#241d23;font-size:32px;box-shadow:0 10px 30px rgba(0,0,0,.1)}.viewer-arrow.previous{left:18px}.viewer-arrow.next{right:18px}.viewer-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:6px}.viewer-dots i{display:block;width:6px;height:6px;border-radius:6px;background:rgba(255,255,255,.55);transition:.3s}.viewer-dots i.active{width:24px;background:white}.product-detail{padding:70px 34px 34px;display:flex;flex-direction:column;justify-content:flex-end}.product-detail>span{color:var(--muted);font-size:12px}.product-detail strong{font-size:13px;letter-spacing:.16em;color:var(--accent);margin:14px 0 10px}.product-detail h2{font-size:30px;margin:0;line-height:1.2}.product-detail p{color:var(--muted);font-size:13px} .admin-dialog{width:min(480px,calc(100% - 28px));border-radius:30px;padding:34px}.admin-dialog.wide{width:min(960px,50vw)}.dialog-heading span{font-size:10px;letter-spacing:.2em;color:var(--accent);font-weight:800}.dialog-heading h2{margin:8px 0 6px;font-size:27px}.dialog-heading p{margin:0 0 26px;color:var(--muted);font-size:14px}.admin-form{display:grid;gap:16px;margin-top:24px}.admin-form.two-column{grid-template-columns:1fr 1fr}.admin-form label{display:grid;gap:7px;font-size:12px;color:var(--muted);font-weight:700}.admin-form input,.admin-form select{width:100%;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:13px 14px}.admin-form .full{grid-column:1/-1}.admin-form small{font-weight:400}.switch-row{display:flex!important;align-items:center;gap:10px}.switch-row input{width:18px!important}.form-message{min-height:18px;margin:0;color:#dc4167;font-size:12px}.form-actions{display:flex;justify-content:flex-end;gap:8px}.ghost-button{border:1px solid var(--line);background:transparent;padding:13px 18px;border-radius:15px}.image-editor{display:flex;gap:8px;overflow:auto}.image-editor figure{margin:0;position:relative;flex:0 0 100px;height:110px;border-radius:14px;overflow:hidden;background:var(--panel)}.image-editor img{width:100%;height:100%;object-fit:cover}.image-editor button{position:absolute;right:5px;top:5px;width:26px;height:26px;border:0;border-radius:9px;background:rgba(20,16,20,.72);color:white}.admin-dock{position:fixed;z-index:30;left:50%;bottom:18px;transform:translateX(-50%);border-radius:22px;padding:8px;display:flex;align-items:center;gap:6px;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}.admin-dock[hidden]{display:none!important}.admin-dock.collapsed{transform:translateX(-50%) translateY(calc(100% + 28px));opacity:0;pointer-events:none}.admin-dock.collapsed .admin-dock-toggle{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}.admin-dock>span{padding:0 12px;font-size:12px;font-weight:800;white-space:nowrap}.admin-dock>span i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#36d68b;margin-right:7px}.admin-dock button{border:0;border-radius:15px;padding:11px 14px;background:transparent;color:var(--text);white-space:nowrap}.admin-dock button:hover{background:var(--panel-strong)}.admin-dock-toggle{position:absolute;left:50%;bottom:100%;transform:translateX(-50%) translateY(8px);width:36px;height:24px;border-radius:12px 12px 0 0;background:var(--panel-strong);border:1px solid var(--line);border-bottom:0;color:var(--text);font-size:16px;line-height:1;padding:0;display:grid;place-items:center;opacity:0;transition:opacity .25s,transform .25s}.admin-dock.collapsed .admin-dock-toggle{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}.section-list{display:grid;gap:10px;margin:22px 0}.section-row{display:grid;grid-template-columns:34px 1fr auto auto auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:16px;padding:10px}.section-row input[type=text]{border:0;background:transparent;font-weight:700;padding:8px}.section-row button{border:0;background:var(--panel);border-radius:10px;width:34px;height:34px}.section-row .remove-section{color:#d94266}.toast{position:fixed;z-index:60;top:108px;left:50%;transform:translate(-50%,-12px);opacity:0;background:#171318;color:#fff;border-radius:16px;padding:14px 22px;font-size:15px;font-weight:600;pointer-events:none;transition:.3s;box-shadow:0 10px 30px rgba(0,0,0,.25);white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)} @media(max-width:980px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.product-dialog[open]{grid-template-columns:1fr}.viewer{height:55vh;min-height:300px}.product-detail{padding:28px}.status-chip{display:none}} @media(max-width:680px){.topbar{height:44px;top:4px;margin-top:4px;width:calc(100% - 16px);border-radius:10px}.brand img{width:30px;height:30px}.brand small{display:none}.admin-button{padding:7px 9px;font-size:10px}.icon-button{width:36px;height:36px}.hero{padding:20px 2px 32px}.hero h1{font-size:40px}.hero>p{font-size:13px}.search{height:50px}.search kbd{display:none}.catalog-shell{width:calc(100% - 16px)}.category-bar{top:52px}.category-button{padding:8px 14px;border-radius:4px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.product-card{border-radius:18px}.product-copy{padding:11px 11px 13px}.product-copy h3{font-size:13px}.product-cover{aspect-ratio:1/1.12}.admin-form.two-column{grid-template-columns:1fr}.admin-dock{max-width:calc(100% - 16px);overflow:auto;justify-content:flex-start}.admin-dock>span{display:none}.viewer-arrow{width:38px;height:38px}.product-dialog{border-radius:22px}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} /* Wide, compact product editor: cover left; detail images and specifications right. */ #editDialog { width: min(1480px, calc(100vw - 32px)) !important; height: calc(100vh - 24px) !important; max-height: calc(100vh - 24px) !important; margin: auto !important; overflow: auto; } /* 2026-09-05 visitor analytics: cluster-oriented visitor dashboard. */ #analyticsDialog.is-visitor-mode .analytics-layout { display: block; } #analyticsVisitorDashboard[hidden], #analyticsLegacyDashboard[hidden], #analyticsLegacyTable[hidden] { display: none !important; } #analyticsVisitorDashboard { display: grid; gap: 14px; } #analyticsVisitorDashboard .analytics-panel { min-width: 0; } #analyticsVisitorDashboard .analytics-panel-heading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; } #analyticsVisitorDashboard .analytics-visitor-composition { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 24px; } #analyticsVisitorDashboard .analytics-visitor-composition .donut-chart { width: 170px; height: 170px; } #analyticsVisitorDashboard .analytics-visitor-composition .donut-chart::after { inset: 34px; } #analyticsVisitorDashboard .analytics-visitor-composition .legend-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; } #analyticsVisitorDashboard .analytics-country-bars { display: grid; gap: 13px; } #analyticsVisitorDashboard .analytics-country-bar { display: grid; gap: 7px; } #analyticsVisitorDashboard .analytics-country-bar-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; } #analyticsVisitorDashboard .analytics-country-bar-head span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #analyticsVisitorDashboard .analytics-country-bar-head strong { color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; } #analyticsVisitorDashboard .analytics-country-bar-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--line); } #analyticsVisitorDashboard .analytics-country-bar-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4c8bf5, #55c9e8); } #analyticsVisitorDashboard .analytics-lulu-panel { min-height: 0; } #analyticsVisitorDashboard .analytics-lulu-list { display: grid; gap: 8px; max-height: 270px; overflow: auto; padding-right: 3px; } #analyticsVisitorDashboard .analytics-lulu-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-strong); } #analyticsVisitorDashboard .analytics-lulu-main, #analyticsVisitorDashboard .analytics-lulu-meta { display: grid; min-width: 0; gap: 3px; } #analyticsVisitorDashboard .analytics-lulu-main strong, #analyticsVisitorDashboard .analytics-lulu-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } #analyticsVisitorDashboard .analytics-lulu-main small, #analyticsVisitorDashboard .analytics-lulu-meta small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; } #analyticsVisitorDashboard .analytics-lulu-meta { text-align: right; } #analyticsVisitorDashboard .analytics-lulu-details { color: var(--accent); font-size: 10px; white-space: nowrap; } #analyticsVisitorDashboard .analytics-lulu-details summary { cursor: pointer; } #analyticsVisitorDashboard .analytics-lulu-details > div { display: grid; gap: 4px; margin-top: 6px; padding: 7px; border-radius: 8px; background: var(--surface-soft); } #analyticsVisitorDashboard .analytics-lulu-visit { display: grid; grid-template-columns: minmax(125px, 1fr) auto auto; gap: 7px; color: var(--muted); font-size: 10px; } #analyticsVisitorDashboard .analytics-lulu-visit span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #analyticsVisitorDashboard .analytics-empty { color: var(--muted); } body.glow-mode #analyticsVisitorDashboard .analytics-lulu-row { border-color: #e5dfdd; background: #fff; } body.glow-mode #analyticsVisitorDashboard .analytics-lulu-details > div { background: #f8f7f6; } body.glow-mode #analyticsVisitorDashboard .analytics-lulu-main strong, body.glow-mode #analyticsVisitorDashboard .analytics-lulu-meta strong { color: #171717; } body.glow-mode #analyticsVisitorDashboard .analytics-lulu-main small, body.glow-mode #analyticsVisitorDashboard .analytics-lulu-meta small, body.glow-mode #analyticsVisitorDashboard .analytics-lulu-visit { color: #77716e; } #analyticsVisitorDashboard .analytics-cluster-list { display: grid; gap: 9px; } #analyticsVisitorDashboard .analytics-cluster-row { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-strong); } #analyticsVisitorDashboard .analytics-cluster-summary { display: grid; grid-template-columns: auto minmax(0, 1.5fr) minmax(130px, .8fr) auto; align-items: center; width: 100%; gap: 14px; padding: 13px 14px; border: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; } #analyticsVisitorDashboard .analytics-cluster-summary:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } #analyticsVisitorDashboard .analytics-cluster-category { display: inline-flex; align-items: center; justify-content: center; min-height: 25px; padding: 4px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; } #analyticsVisitorDashboard .analytics-cluster-category.is-real { color: #2f6fd8; background: rgba(76, 139, 245, .13); } #analyticsVisitorDashboard .analytics-cluster-category.is-cgnat { color: #b06b13; background: rgba(241, 166, 74, .17); } #analyticsVisitorDashboard .analytics-cluster-category.is-bot { color: #626b79; background: rgba(141, 150, 166, .18); } #analyticsVisitorDashboard .analytics-cluster-category.is-self { color: #268966; background: rgba(71, 198, 149, .15); } #analyticsVisitorDashboard .analytics-cluster-main, #analyticsVisitorDashboard .analytics-cluster-meta { display: grid; min-width: 0; gap: 4px; } #analyticsVisitorDashboard .analytics-cluster-main strong, #analyticsVisitorDashboard .analytics-cluster-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } #analyticsVisitorDashboard .analytics-cluster-main small, #analyticsVisitorDashboard .analytics-cluster-meta small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } #analyticsVisitorDashboard .analytics-cluster-meta { text-align: right; } #analyticsVisitorDashboard .analytics-cluster-chevron { color: var(--muted); font-size: 20px; line-height: 1; transition: transform .2s ease; } #analyticsVisitorDashboard .analytics-cluster-summary[aria-expanded="true"] .analytics-cluster-chevron { transform: rotate(180deg); } #analyticsVisitorDashboard .analytics-cluster-detail { padding: 13px 14px 15px; border-top: 1px solid var(--line); background: var(--panel-strong); } #analyticsVisitorDashboard .analytics-cluster-detail-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(100px, .8fr) minmax(0, 1fr); gap: 15px; } #analyticsVisitorDashboard .analytics-cluster-detail-grid > div { display: grid; align-content: start; gap: 5px; min-width: 0; } #analyticsVisitorDashboard .analytics-cluster-detail-grid small { color: var(--muted); font-size: 10px; } #analyticsVisitorDashboard .analytics-cluster-detail-grid strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; } #analyticsVisitorDashboard .analytics-cluster-detail-grid details { margin-top: 2px; color: var(--accent); font-size: 10px; } #analyticsVisitorDashboard .analytics-cluster-detail-grid summary { cursor: pointer; } #analyticsVisitorDashboard .analytics-cluster-ip-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } #analyticsVisitorDashboard .analytics-cluster-ip-list span { padding: 3px 6px; border-radius: 6px; background: var(--surface-soft); color: var(--muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } #analyticsVisitorDashboard .analytics-cluster-visits { display: grid; gap: 5px; max-height: 300px; margin-top: 13px; padding-top: 11px; border-top: 1px dashed var(--line); overflow: auto; } #analyticsVisitorDashboard .analytics-cluster-visit { display: grid; grid-template-columns: minmax(145px, 1.1fr) minmax(120px, .9fr) minmax(72px, .6fr) minmax(70px, .5fr); gap: 10px; color: var(--muted); font-size: 10px; } #analyticsVisitorDashboard .analytics-cluster-visit span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #analyticsVisitorDashboard .analytics-empty { color: var(--muted); } body.glow-mode #analyticsVisitorDashboard .analytics-cluster-summary, body.glow-mode #analyticsVisitorDashboard .analytics-cluster-detail { color: #171717; } body.glow-mode #analyticsVisitorDashboard .analytics-cluster-main small, body.glow-mode #analyticsVisitorDashboard .analytics-cluster-meta small, body.glow-mode #analyticsVisitorDashboard .analytics-cluster-detail-grid small, body.glow-mode #analyticsVisitorDashboard .analytics-cluster-visit, body.glow-mode #analyticsVisitorDashboard .analytics-country-bar-head strong { color: #77716e !important; } body.glow-mode #analyticsVisitorDashboard .analytics-cluster-row { border-color: #e5dfdd; background: #fff; } body.glow-mode #analyticsVisitorDashboard .analytics-cluster-detail { border-top-color: #e5dfdd; background: #f8f7f6; } body.glow-mode #analyticsVisitorDashboard .analytics-cluster-ip-list span { background: #fff; } @media (max-width: 680px) { #analyticsDialog.is-visitor-mode .analytics-layout { display: block; } #analyticsVisitorDashboard .analytics-visitor-composition { grid-template-columns: 120px minmax(0, 1fr); gap: 15px; } #analyticsVisitorDashboard .analytics-visitor-composition .donut-chart { width: 120px; height: 120px; } #analyticsVisitorDashboard .analytics-visitor-composition .donut-chart::after { inset: 24px; } #analyticsVisitorDashboard .analytics-visitor-composition .legend-list { grid-template-columns: 1fr; gap: 9px; } #analyticsVisitorDashboard .analytics-cluster-summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; padding: 11px 10px; } #analyticsVisitorDashboard .analytics-cluster-meta { grid-column: 2 / 3; grid-row: 2; text-align: left; } #analyticsVisitorDashboard .analytics-cluster-chevron { grid-column: 3; grid-row: 1 / span 2; } #analyticsVisitorDashboard .analytics-cluster-detail { padding: 12px 10px; } #analyticsVisitorDashboard .analytics-cluster-detail-grid { grid-template-columns: 1fr 1fr; gap: 13px 10px; } #analyticsVisitorDashboard .analytics-cluster-visit { grid-template-columns: 1.2fr 1fr; gap: 4px 8px; } #analyticsVisitorDashboard .analytics-cluster-visit span:nth-child(3), #analyticsVisitorDashboard .analytics-cluster-visit span:nth-child(4) { display: none; } #analyticsVisitorDashboard .analytics-country-bar-head { align-items: flex-start; } #analyticsVisitorDashboard .analytics-country-bar-head strong { text-align: right; } #analyticsVisitorDashboard .analytics-lulu-list { max-height: 230px; } #analyticsVisitorDashboard .analytics-lulu-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } #analyticsVisitorDashboard .analytics-lulu-details { grid-column: 1 / -1; } #analyticsVisitorDashboard .analytics-lulu-visit { grid-template-columns: minmax(115px, 1fr) auto auto; } } /* Analytics dashboard: near-fullscreen two-pane layout on desktop. The overview stays on the left, while the IP visit table gets a dedicated right pane. The outer dialog never shows a scrollbar; inner panes can still be wheel/touch scrolled when a smaller viewport needs it. */ #analyticsDialog.analytics-dialog[open] { display: block !important; width: min(1800px, calc(100vw - 28px)) !important; height: calc(100vh - 24px) !important; max-height: calc(100vh - 24px) !important; margin: auto !important; padding: 28px !important; overflow: hidden !important; } #analyticsDialog .analytics-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; height: 100%; min-height: 0; } #analyticsDialog .analytics-overview { min-width: 0; min-height: 0; overflow: auto; scrollbar-width: none; } #analyticsDialog .analytics-overview::-webkit-scrollbar, #analyticsDialog .analytics-table-wrap::-webkit-scrollbar { display: none; } #analyticsDialog .analytics-heading { margin-bottom: 4px; } #analyticsDialog .analytics-updated { margin-bottom: 10px; } #analyticsDialog .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; } #analyticsDialog .analytics-kpi { padding: 13px 14px; border-radius: 16px; gap: 3px; } #analyticsDialog .analytics-kpi strong { font-size: 26px; } #analyticsDialog .analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; } #analyticsDialog .analytics-grid .analytics-panel { min-height: 0; padding: 14px; border-radius: 16px; } #analyticsDialog .analytics-panel-heading { margin-bottom: 10px; } #analyticsDialog .analytics-panel-heading h3 { font-size: 16px; } #analyticsDialog .donut-layout { grid-template-columns: minmax(88px, 110px) minmax(0, 1fr); gap: 12px; } #analyticsDialog .donut-chart { width: 110px; height: 110px; } #analyticsDialog .donut-chart::after { inset: 22px; } #analyticsDialog .bar-chart { height: 170px; min-height: 120px; gap: 2px; } #analyticsDialog .analytics-summary { gap: 7px; font-size: 12px; } #analyticsDialog .analytics-summary p { padding: 8px 10px; } #analyticsDialog .analytics-table-panel { min-width: 0; min-height: 0; height: 100%; margin-top: 0; display: flex; flex-direction: column; overflow: hidden; } #analyticsDialog .analytics-table-panel .analytics-panel-heading { flex: 0 0 auto; } #analyticsDialog .analytics-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: none; } #analyticsDialog .analytics-table-panel table { width: 100%; min-width: 0; table-layout: fixed; font-size: 11px; } #analyticsDialog .analytics-table-panel th, #analyticsDialog .analytics-table-panel td { padding: 7px 6px; overflow: hidden; text-overflow: ellipsis; } #analyticsDialog .analytics-table-panel th:nth-child(1) { width: 18%; } #analyticsDialog .analytics-table-panel th:nth-child(2) { width: 17%; } #analyticsDialog .analytics-table-panel th:nth-child(3) { width: 18%; } #analyticsDialog .analytics-table-panel th:nth-child(4) { width: 9%; } #analyticsDialog .analytics-table-panel th:nth-child(5) { width: 11%; } #analyticsDialog .analytics-table-panel th:nth-child(6) { width: 7%; } #analyticsDialog .analytics-table-panel th:nth-child(7) { width: 20%; } #analyticsDialog .analytics-remark-cell { min-width: 0 !important; gap: 4px; } #analyticsDialog .analytics-remark-cell input { flex: 1 1 auto; width: auto; min-width: 0; padding: 5px 6px; } #analyticsDialog .analytics-remark-save { flex: 0 0 auto; padding: 5px 7px; } /* In the dark glow dashboard the visit ordinal is secondary information but must remain readable against the navy panel. */ body.glow-mode:not(.world-open) #analyticsDialog .analytics-visit-count { color: #fff !important; font-weight: 600; } body.glow-mode:not(.world-open) #analyticsDialog .analytics-pagination, body.glow-mode:not(.world-open) #analyticsDialog #analyticsPageInfo { color: #fff !important; } body.glow-mode:not(.world-open) #analyticsDialog .analytics-pagination .ghost-button:disabled { color: #fff !important; opacity: .68; } @media (max-width: 900px) { #analyticsDialog.analytics-dialog[open] { width: calc(100vw - 16px) !important; height: calc(100vh - 16px) !important; max-height: calc(100vh - 16px) !important; padding: 22px 16px 16px !important; overflow: auto !important; scrollbar-width: none; } #analyticsDialog.analytics-dialog[open]::-webkit-scrollbar { display: none; } #analyticsDialog .analytics-layout { grid-template-columns: 1fr; height: auto; } #analyticsDialog .analytics-overview { overflow: visible; } #analyticsDialog .analytics-table-panel { height: auto; min-height: 430px; } } /* 2026-09-09 visitor dashboard v2 final overrides. */ #analyticsVisitorDashboard { grid-template-columns:minmax(0,1.85fr) minmax(280px,1fr) !important; grid-template-areas:"clusters insights" !important; gap:12px !important; } #analyticsVisitorDashboard .analytics-visitor-insights { grid-area:insights !important; } #analyticsVisitorDashboard .analytics-visitor-clusters-panel { grid-area:clusters !important; min-height:calc(100vh - 280px) !important; } #analyticsVisitorDashboard .analytics-visitor-list-tools { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) minmax(150px,1.45fr) minmax(100px,.8fr); gap:7px; margin:0 0 10px; } #analyticsVisitorDashboard .analytics-visitor-list-tools select, #analyticsVisitorDashboard .analytics-visitor-list-tools input { min-width:0; width:100%; padding:8px 9px; border:1px solid var(--line); border-radius:9px; background:var(--panel-strong); color:var(--text); font-size:11px; } #analyticsVisitorDashboard .analytics-cluster-list { overflow:auto; max-height:calc(100vh - 390px); padding-right:3px; } #analyticsVisitorDashboard .analytics-cluster-summary { grid-template-columns:auto minmax(0,1.35fr) minmax(150px,.9fr) auto !important; cursor:default; } #analyticsVisitorDashboard .analytics-cluster-summary:hover { background:transparent; } #analyticsVisitorDashboard .analytics-cluster-detail-button { flex:0 0 auto; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); color:var(--accent); font-size:10px; cursor:pointer; white-space:nowrap; } #analyticsVisitorDashboard .analytics-cluster-remark { display:flex; align-items:center; gap:5px; min-width:0; } #analyticsVisitorDashboard .analytics-cluster-remark input { width:100%; min-width:0; padding:6px 7px; border:1px solid var(--line); border-radius:7px; background:var(--panel-strong); color:var(--text); font-size:10px; } #analyticsVisitorDashboard .analytics-cluster-remark .analytics-remark-save { padding:6px 7px; font-size:10px; } #analyticsVisitorDashboard .analytics-lulu-list { max-height:240px; } #analyticsVisitorDashboard .analytics-cluster-pagination { position:sticky; bottom:0; z-index:2; background:var(--panel); } #analyticsVisitorDashboard .analytics-lulu-pagination { position:static; margin-top:9px; padding:9px 0 0; } @media (max-width:900px) { #analyticsVisitorDashboard { grid-template-columns:1fr !important; grid-template-areas:"insights" "clusters" !important; } #analyticsVisitorDashboard .analytics-visitor-clusters-panel { min-height:0 !important; } #analyticsVisitorDashboard .analytics-cluster-list { max-height:none; overflow:visible; } #analyticsVisitorDashboard .analytics-visitor-list-tools { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px) { #analyticsVisitorDashboard .analytics-visitor-list-tools { grid-template-columns:1fr 1fr; } #analyticsVisitorDashboard .analytics-visitor-list-tools input { grid-column:1/-1; } #analyticsVisitorDashboard .analytics-cluster-summary { grid-template-columns:auto minmax(0,1fr) auto !important; } #analyticsVisitorDashboard .analytics-cluster-meta { grid-column:2/3; grid-row:2; text-align:left; } #analyticsVisitorDashboard .analytics-cluster-detail-button { grid-column:3; grid-row:1/span 2; } } /* 2026-09-09 visitor dashboard v2: compact, stable and source-aware. */ #analyticsDialog .analytics-auto-refresh { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; color:var(--muted); font-size:11px; white-space:nowrap; } #analyticsDialog .analytics-auto-refresh input { width:auto; margin:0; accent-color:var(--accent); } #analyticsDialog .analytics-auto-refresh small { color:var(--muted); font-size:10px; } #analyticsVisitorDashboard { grid-template-columns:minmax(0,1.85fr) minmax(280px,1fr); grid-template-areas:"clusters insights"; gap:12px; } #analyticsVisitorDashboard .analytics-visitor-insights { grid-area:insights; min-width:0; } #analyticsVisitorDashboard .analytics-visitor-clusters-panel { grid-area:clusters; min-width:0; min-height:calc(100vh - 280px); } #analyticsVisitorDashboard .analytics-visitor-list-tools { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) minmax(150px,1.45fr) minmax(100px,.8fr); gap:7px; margin:0 0 10px; } #analyticsVisitorDashboard .analytics-visitor-list-tools select, #analyticsVisitorDashboard .analytics-visitor-list-tools input { min-width:0; width:100%; padding:8px 9px; border:1px solid var(--line); border-radius:9px; background:var(--panel-strong); color:var(--text); font-size:11px; } #analyticsVisitorDashboard .analytics-cluster-list { overflow:auto; max-height:calc(100vh - 390px); padding-right:3px; } #analyticsVisitorDashboard .analytics-cluster-summary { grid-template-columns:auto minmax(0,1.35fr) minmax(150px,.9fr) auto; cursor:default; } #analyticsVisitorDashboard .analytics-cluster-summary:hover { background:transparent; } #analyticsVisitorDashboard .analytics-cluster-detail-button { flex:0 0 auto; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); color:var(--accent); font-size:10px; cursor:pointer; white-space:nowrap; } #analyticsVisitorDashboard .analytics-cluster-detail-button:hover { background:color-mix(in srgb,var(--accent) 10%,transparent); } #analyticsVisitorDashboard .analytics-cluster-remark { display:flex; align-items:center; gap:5px; min-width:0; } #analyticsVisitorDashboard .analytics-cluster-remark input { width:100%; min-width:0; padding:6px 7px; border:1px solid var(--line); border-radius:7px; background:var(--panel-strong); color:var(--text); font-size:10px; } #analyticsVisitorDashboard .analytics-cluster-remark .analytics-remark-save { padding:6px 7px; font-size:10px; } #analyticsVisitorDashboard .analytics-lulu-panel { min-height:0; } #analyticsVisitorDashboard .analytics-lulu-list { max-height:240px; } #analyticsVisitorDashboard .analytics-cluster-pagination { position:sticky; bottom:0; z-index:2; background:var(--panel); } #analyticsVisitorDashboard .analytics-lulu-pagination { position:static; margin-top:9px; padding:9px 0 0; } body.glow-mode #analyticsDialog .analytics-auto-refresh, body.glow-mode #analyticsVisitorDashboard .analytics-visitor-list-tools select, body.glow-mode #analyticsVisitorDashboard .analytics-visitor-list-tools input, body.glow-mode #analyticsVisitorDashboard .analytics-cluster-detail-button, body.glow-mode #analyticsVisitorDashboard .analytics-cluster-remark input { background:#fff; color:#171717; border-color:#e5dfdd; } @media (max-width:900px) { #analyticsVisitorDashboard { grid-template-columns:1fr; grid-template-areas:"insights" "clusters"; } #analyticsVisitorDashboard .analytics-visitor-clusters-panel { min-height:0; } #analyticsVisitorDashboard .analytics-cluster-list { max-height:none; overflow:visible; } #analyticsVisitorDashboard .analytics-visitor-list-tools { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px) { #analyticsVisitorDashboard .analytics-visitor-list-tools { grid-template-columns:1fr 1fr; } #analyticsVisitorDashboard .analytics-visitor-list-tools input { grid-column:1/-1; } #analyticsVisitorDashboard .analytics-cluster-summary { grid-template-columns:auto minmax(0,1fr) auto; } #analyticsVisitorDashboard .analytics-cluster-meta { grid-column:2/3; grid-row:2; text-align:left; } #analyticsVisitorDashboard .analytics-cluster-detail-button { grid-column:3; grid-row:1/span 2; } } /* 2026-09-05 analytics layout: charts on the left, paged visitor clusters on the right so the dashboard uses the dialog width instead of stacking all content into a long single column. */ #analyticsVisitorDashboard { grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr); align-items: stretch; } #analyticsVisitorDashboard .analytics-visitor-insights { display: grid; align-content: start; gap: 14px; min-width: 0; } #analyticsVisitorDashboard .analytics-visitor-clusters-panel { display: flex; flex-direction: column; min-height: min(640px, calc(100vh - 285px)); } #analyticsVisitorDashboard .analytics-visitor-clusters-panel .analytics-panel-heading { flex: 0 0 auto; } #analyticsVisitorDashboard .analytics-cluster-list { flex: 1 1 auto; min-height: 0; align-content: start; max-height: none; overflow: auto; padding-right: 3px; } #analyticsVisitorDashboard .analytics-cluster-pagination { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } #analyticsVisitorDashboard .analytics-cluster-pagination .ghost-button { padding: 8px 11px; font-size: 11px; } #analyticsVisitorDashboard .analytics-cluster-pagination span { color: var(--muted); font-size: 11px; text-align: center; } #analyticsVisitorDataQuality { grid-column: 1 / -1; margin-top: 0; padding: 9px 12px; border: 1px solid color-mix(in srgb, #47c695 35%, var(--line)); border-radius: 11px; background: color-mix(in srgb, #47c695 9%, var(--panel)); color: var(--muted); font-size: 11px; line-height: 1.5; } #analyticsVisitorDataQuality.is-warning { border-color: color-mix(in srgb, #e59835 55%, var(--line)); background: color-mix(in srgb, #e59835 10%, var(--panel)); color: #a55e12; } body.glow-mode #analyticsVisitorDataQuality { border-color: #b8e4d2; background: #f5fcf8; color: #557467; } body.glow-mode #analyticsVisitorDataQuality.is-warning { border-color: #efc788; background: #fff9ee; color: #a55e12; } @media (max-width: 680px) { #analyticsVisitorDashboard { grid-template-columns: 1fr; } #analyticsVisitorDashboard .analytics-visitor-clusters-panel { min-height: 0; } #analyticsVisitorDashboard .analytics-cluster-list { overflow: visible; } #analyticsVisitorDataQuality { grid-column: auto; } } @media (max-width: 560px) { #analyticsDialog .analytics-heading { display: grid; gap: 10px; } #analyticsDialog .analytics-controls { justify-content: flex-start; } #analyticsDialog .analytics-controls select, #analyticsDialog .analytics-controls .ghost-button { flex: 1; min-width: 0; } #analyticsDialog .analytics-grid { grid-template-columns: 1fr; grid-template-rows: none; } #analyticsDialog .analytics-grid .analytics-panel { min-height: 190px; } #analyticsDialog .analytics-table-panel table { min-width: 620px; table-layout: auto; } #analyticsDialog .analytics-table-wrap { overflow-x: auto; } } /* 炫彩模式：访问数据的密码弹窗也使用高对比浅色画布；“记住密码”保持 文案在前、复选框在后的单行排列，避免控件被网格布局拆成两行。 */ body.glow-mode:not(.world-open) .analytics-password-dialog { color: #172033 !important; background: #fff !important; } body.glow-mode:not(.world-open) .analytics-password-dialog .dialog-heading h2, body.glow-mode:not(.world-open) .analytics-password-dialog .dialog-heading p, body.glow-mode:not(.world-open) .analytics-password-dialog .admin-form > label:not(.analytics-remember-row) { color: #172033 !important; } body.glow-mode:not(.world-open) .analytics-password-dialog .form-message { color: #dc4167 !important; } body.glow-mode:not(.world-open) .analytics-password-dialog .dialog-heading p { color: #5b6675 !important; } body.glow-mode:not(.world-open) .analytics-password-dialog input, body.glow-mode:not(.world-open) .analytics-password-dialog select { color: #172033 !important; background: #fff !important; border-color: #cfd9e5 !important; } body.glow-mode:not(.world-open) .analytics-password-dialog .analytics-remember-row { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 7px !important; color: #4f5c6e !important; } body.glow-mode:not(.world-open) .analytics-password-dialog .analytics-remember-row span { order: 1 !important; } body.glow-mode:not(.world-open) .analytics-password-dialog .analytics-remember-row input { order: 2 !important; width: 18px !important; min-width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: #e82a78 !important; } .admin-form label.analytics-remember-row { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 7px !important; } .admin-form label.analytics-remember-row span { order: 1 !important; } .admin-form label.analytics-remember-row input { order: 2 !important; width: 18px !important; min-width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: #e82a78 !important; } #loginDialog .admin-form > label.switch-row { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 7px !important; } #loginDialog .admin-form > label.switch-row span { order: 1 !important; } #loginDialog .admin-form > label.switch-row input { order: 2 !important; width: 18px !important; min-width: 18px !important; height: 18px !important; margin: 0 !important; } .member-account-dialog .member-identity-item { display: grid; gap: 3px; } .member-account-dialog .member-identity-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; } .member-account-dialog .member-identity-header > span { font-size: 11px; color: var(--muted); white-space: nowrap; } .member-account-dialog .member-identity-copy { display: contents; } .member-account-dialog .member-identity-item > strong { min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-account-dialog .member-identity-item > input { width: 100%; min-height: 29px; height: 29px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); font-size: 12px; } .member-account-dialog .member-identity-item > input[hidden] { display: none !important; } .member-account-dialog .member-linked-identities { grid-template-columns: 1fr; gap: 5px; margin: 3px 0 8px; padding: 7px; } .member-account-dialog .member-identity-item { gap: 2px; padding: 7px 8px; } .member-account-dialog .member-identity-actions { gap: 3px; } .member-account-dialog .member-identity-action { padding: 3px 6px; font-size: 10px; } .member-account-dialog .member-identity-item > strong { font-size: 12px; } .member-account-dialog .member-linked-identities { display: grid !important; grid-template-columns: 1fr !important; } .member-account-dialog .member-identity-item { display: grid !important; grid-template-columns: 1fr !important; } .member-account-dialog .member-identity-header { display: flex !important; width: 100%; } .member-account-dialog .member-identity-actions { display: flex !important; } .member-account-dialog .member-linked-identities { grid-template-columns: 1fr 1fr; gap: 7px; margin: 4px 0 10px; padding: 8px; } .member-account-dialog .member-identity-item { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-strong); } .member-account-dialog .member-identity-copy { min-width: 0; display: grid; gap: 2px; } .member-account-dialog .member-identity-copy span { font-size: 11px; color: var(--muted); } .member-account-dialog .member-identity-copy strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .member-account-dialog .member-identity-copy strong.is-unbound { color: var(--muted); font-weight: 500; } .member-account-dialog .member-identity-actions { display: flex; gap: 3px; flex: 0 0 auto; } .member-account-dialog .member-identity-action { padding: 4px 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--text); font-size: 11px; } .member-account-dialog .member-identity-action:disabled { opacity: .42; cursor: not-allowed; } .member-account-dialog #memberBindForm { margin-top: 4px; } @media (max-width:680px) { .member-account-dialog .member-linked-identities { grid-template-columns: 1fr; } .member-account-dialog .member-identity-item { padding: 7px 8px; } } .register-verification-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; } .register-verification-row label { min-width: 0; } .register-verification-row .ghost-button { min-height: 48px; white-space: nowrap; } @media (max-width: 680px) { .register-verification-row { grid-template-columns: 1fr; } .register-verification-row .ghost-button { width: 100%; } } /* Video cover editor: keep the capture/upload actions readable in the light admin surface. The earlier light-theme rule made these ghost buttons white on white, which looked like the controls were missing. */ #videoCoverEditor .ghost-button, #videoCoverEditor .poster-tab { color: #171717 !important; background: #fff !important; border-color: #dcd6d3 !important; opacity: 1 !important; } #videoCoverEditor .ghost-button:hover, #videoCoverEditor .poster-tab:hover, #videoCoverEditor .poster-tab:focus-visible { color: var(--rose) !important; background: #fff8fa !important; border-color: var(--rose) !important; } #videoCoverEditor .poster-tab.active { color: #fff !important; background: #171717 !important; border-color: #171717 !important; } #videoCoverEditor .video-capture-status { display: block; margin-top: 2px; color: #77716e; font-size: 11px; line-height: 1.5; } #videoCoverEditor .video-capture-status.is-success { color: #2c9a68; font-weight: 700; } /* Video showcase cards use the requested vertical 9:16 cover frame. */ body:not(.world-open) .video-card .product-cover { aspect-ratio: 9 / 16 !important; } /* 炫彩模式管理界面：编辑器为浅色画布，数据看板卡片为深色画布， 分别指定文字颜色，避免全局浅蓝色 muted 在白底或黑字在深底上失去对比度。 */ body.glow-mode:not(.world-open) #editDialog { color: #172033 !important; background: #fff !important; } body.glow-mode:not(.world-open) #editDialog .dialog-heading h2, body.glow-mode:not(.world-open) #editDialog .edit-field-group > strong, body.glow-mode:not(.world-open) #editDialog .edit-basic-grid label, body.glow-mode:not(.world-open) #editDialog #editForm > .switch-row, body.glow-mode:not(.world-open) #editDialog .cover-editor-heading strong, body.glow-mode:not(.world-open) #editDialog .detail-images-editor-heading strong, body.glow-mode:not(.world-open) #editDialog .product-meta-editor-heading strong, body.glow-mode:not(.world-open) #editDialog .cover-zoom-label, body.glow-mode:not(.world-open) #editDialog .product-meta-fields label { color: #172033 !important; } body.glow-mode:not(.world-open) #editDialog .image-sort-hint, body.glow-mode:not(.world-open) #editDialog .image-sort-hint small, body.glow-mode:not(.world-open) #editDialog .cover-editor-heading small, body.glow-mode:not(.world-open) #editDialog .detail-images-editor-heading small, body.glow-mode:not(.world-open) #editDialog .product-meta-editor-heading small, body.glow-mode:not(.world-open) #editDialog .cover-preview, body.glow-mode:not(.world-open) #editDialog .product-meta-fields .dimension-inputs > span, body.glow-mode:not(.world-open) #editDialog .product-meta-fields .dimension-unit { color: #5b6675 !important; } body.glow-mode:not(.world-open) #editDialog .edit-field-group, body.glow-mode:not(.world-open) #editDialog .image-gallery-dropzone, body.glow-mode:not(.world-open) #editDialog .cover-editor, body.glow-mode:not(.world-open) #editDialog .detail-images-editor, body.glow-mode:not(.world-open) #editDialog .product-meta-editor { border-color: #dce4ee !important; background: #fff !important; } body.glow-mode:not(.world-open) #editDialog .cover-controls, body.glow-mode:not(.world-open) #editDialog .detail-image-dropzone { border-color: #e1e7ee !important; background: #f8fafc !important; } body.glow-mode:not(.world-open) #editDialog .admin-form input, body.glow-mode:not(.world-open) #editDialog .admin-form select, body.glow-mode:not(.world-open) #editDialog .product-meta-fields input { color: #172033 !important; background: #fff !important; } body.glow-mode:not(.world-open) #editDialog input::placeholder { color: #8793a2 !important; opacity: 1 !important; } body.glow-mode:not(.world-open) #editDialog .ghost-button { border-color: #cfd9e5 !important; background: #fff !important; color: #172033 !important; } body.glow-mode:not(.world-open) .analytics-dialog { color: #172033 !important; background: #fff !important; } body.glow-mode:not(.world-open) .analytics-dialog .analytics-heading h2, body.glow-mode:not(.world-open) .analytics-dialog .analytics-heading p, body.glow-mode:not(.world-open) .analytics-dialog .analytics-updated, body.glow-mode:not(.world-open) .analytics-dialog .analytics-controls select, body.glow-mode:not(.world-open) .analytics-dialog .analytics-mode-switch button:not(.active), body.glow-mode:not(.world-open) .analytics-dialog .analytics-pagination { color: #4f5c6e !important; } body.glow-mode:not(.world-open) .analytics-dialog .analytics-mode-switch { border-color: #c8d4e2 !important; background: #eef3f8 !important; } body.glow-mode:not(.world-open) .analytics-dialog .analytics-mode-switch button.active { background: #172033 !important; color: #fff !important; } body.glow-mode:not(.world-open) .analytics-dialog .analytics-controls select { border-color: #c8d4e2 !important; background: #fff !important; } body.glow-mode:not(.world-open) .analytics-dialog .analytics-kpi, body.glow-mode:not(.world-open) .analytics-dialog .analytics-panel { border-color: #3e5d88 !important; background: linear-gradient(145deg, #263d67, #1a2d50) !important; color: #f7fbff !important; box-shadow: 0 10px 24px rgba(18, 38, 76, .16) !important; } body.glow-mode:not(.world-open) .analytics-dialog .analytics-kpi small, body.glow-mode:not(.world-open) .analytics-dialog .analytics-kpi span, body.glow-mode:not(.world-open) .analytics-dialog .analytics-panel-heading h3, body.glow-mode:not(.world-open) .analytics-dialog .analytics-panel-heading > strong, body.glow-mode:not(.world-open) .analytics-dialog .legend-item span, body.glow-mode:not(.world-open) .analytics-dialog .legend-item small, body.glow-mode:not(.world-open) .analytics-dialog .bar-column span, body.glow-mode:not(.world-open) .analytics-dialog .bar-column small, body.glow-mode:not(.world-open) .analytics-dialog .analytics-table-panel th, body.glow-mode:not(.world-open) .analytics-dialog .analytics-table-panel td, body.glow-mode:not(.world-open) .analytics-dialog .analytics-summary { color: #e6f0ff !important; } body.glow-mode:not(.world-open) .analytics-dialog .analytics-panel-heading span { color: #60e8ff !important; } body.glow-mode:not(.world-open) .analytics-dialog .analytics-summary p { background: rgba(8, 22, 54, .72) !important; color: #e6f0ff !important; } body.glow-mode:not(.world-open) .analytics-dialog .analytics-summary strong, body.glow-mode:not(.world-open) .analytics-dialog .analytics-table-panel td strong { color: #fff !important; } body.glow-mode:not(.world-open) .analytics-dialog .analytics-table-panel th, body.glow-mode:not(.world-open) .analytics-dialog .analytics-table-panel td { border-bottom-color: rgba(202, 235, 255, .28) !important; } body.glow-mode:not(.world-open) .analytics-dialog .analytics-remark-cell input { border-color: #c8d4e2 !important; background: #fff !important; color: #172033 !important; } body.glow-mode:not(.world-open) .analytics-dialog .analytics-remark-save { border-color: rgba(96, 232, 255, .55) !important; background: rgba(96, 232, 255, .12) !important; color: #8df2ff !important; } /* Mobile picks dialog: compact close control and summary spacing. */ @media (max-width: 680px) { .picks-dialog > .dialog-close { width: 34px !important; height: 34px !important; right: 10px !important; top: 10px !important; border: 0 !important; border-radius: 50% !important; outline: none !important; box-shadow: none !important; } .picks-dialog > .dialog-close:focus-visible { outline: 2px solid rgba(120,110,115,.45) !important; outline-offset: 2px; } .picks-summary { padding-top: 8px !important; padding-bottom: 2px !important; } } /* Final precedence overrides: keep these rules at the end of the stylesheet. */ .music-admin-row { grid-template-columns: auto 40px minmax(0, 1fr) auto !important; min-width: 0; } .music-admin-icon { width: 40px !important; height: 40px !important; border-radius: 10px !important; object-fit: cover; } .music-admin-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; flex-wrap: wrap; } .music-admin-actions button { white-space: nowrap; font-size: 11px; padding: 8px 9px; } #activitiesDialog .section-row { display: grid !important; grid-template-columns: 22px 56px minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; min-height: 76px !important; padding: 10px 12px !important; } #activitiesDialog .section-row .drag-handle { position: static !important; padding: 0 !important; background: transparent !important; } #activitiesDialog .section-row-thumb { width: 56px !important; height: 56px !important; border-radius: 12px !important; object-fit: cover; } #activitiesDialog .section-row-copy { min-width: 0; overflow: hidden; } #activitiesDialog .section-row-copy strong, #activitiesDialog .section-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #activitiesDialog .section-row-copy small { color: var(--muted); font-size: 11px; } #activitiesDialog .section-row-actions { display: flex; gap: 7px; flex-wrap: nowrap; } #activitiesDialog .section-row-actions .ghost-button { white-space: nowrap; padding: 8px 11px !important; } #comicsDialog #comicsList { display: grid !important; grid-template-columns: repeat(4, minmax(130px, 1fr)) !important; gap: 14px !important; max-height: 54vh !important; overflow: auto !important; padding: 4px 3px 8px !important; } #comicsDialog #comicsList .section-row { position: relative !important; display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; min-height: 0 !important; padding: 10px !important; align-items: start !important; } #comicsDialog #comicsList .section-row .drag-handle { position: absolute !important; top: 8px; left: 8px; padding: 4px 7px !important; z-index: 2; } #comicsDialog #comicsList .section-row-thumb { width: 100% !important; height: auto !important; aspect-ratio: 9 / 16 !important; border-radius: 11px !important; object-fit: cover; } #comicsDialog #comicsList .section-row-copy { min-width: 0; width: 100%; } #comicsDialog #comicsList .section-row-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } #comicsDialog #comicsList .section-row-copy small { display: none !important; } #comicsDialog #comicsList .section-row-actions { display: flex; justify-content: flex-end; gap: 6px; width: 100%; } body:not(.world-open) .hero-carousel.square { aspect-ratio: 21 / 9 !important; max-height: none !important; } @media (min-width: 681px) { body:not(.world-open) .topbar .top-module-nav { position: fixed !important; left: max(12px, calc((100vw - min(1720px, calc(100vw - 160px))) / 2 - 86px)) !important; top: 52% !important; transform: translateY(-50%) !important; z-index: 35 !important; display: flex !important; flex-direction: column !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; gap: 8px !important; margin: 0 !important; padding: 8px !important; border-radius: 18px !important; background: linear-gradient(145deg, rgba(229,243,254,.96), rgba(204,228,247,.94)) !important; border: 1px solid rgba(105,164,207,.35) !important; box-shadow: 0 12px 30px rgba(34,84,122,.16) !important; } body:not(.world-open) .topbar .top-module-nav > button, body:not(.world-open) .topbar .top-module-nav > button:hover, body:not(.world-open) .topbar .top-module-nav > button[aria-selected="true"] { width: 100% !important; min-width: 0 !important; min-height: 68px !important; padding: 10px 5px !important; border: 0 !important; border-radius: 12px !important; color: #4b6982 !important; background: rgba(255,255,255,.44) !important; box-shadow: none !important; transform: none !important; font-size: 12px !important; line-height: 1.35 !important; white-space: normal !important; overflow: hidden !important; } body:not(.world-open) .topbar .top-module-nav > button[aria-selected="true"] { color: #fff !important; background: linear-gradient(145deg, #2d76ad, #245887) !important; box-shadow: 0 7px 15px rgba(36,88,135,.24) !important; } } @media (max-width: 900px) and (min-width: 681px) { #comicsDialog #comicsList { grid-template-columns: repeat(3, minmax(120px, 1fr)) !important; } } @media (max-width: 680px) { body:not(.world-open) .hero-carousel.square { aspect-ratio: 16 / 6.2 !important; max-height: 220px !important; } .music-admin-row { grid-template-columns: auto 38px minmax(0, 1fr) !important; } .music-admin-actions { grid-column: 2 / -1; justify-content: flex-start; } #activitiesDialog .section-row { grid-template-columns: 18px 48px minmax(0, 1fr) !important; } #activitiesDialog .section-row-thumb { width: 48px !important; height: 48px !important; } #activitiesDialog .section-row-actions { grid-column: 3; grid-row: 2; justify-content: flex-end; } #comicsDialog #comicsList { grid-template-columns: repeat(2, minmax(120px, 1fr)) !important; } } /* Samuel pet loading scene: the companion gently carries image cards while the catalogue is being prepared. */ .startup-loader-scene { position: relative; width: clamp(190px, 30vw, 250px); height: clamp(150px, 24vw, 198px); margin-bottom: 2px; } .startup-loader-scene .startup-logo { position: absolute; z-index: 2; left: 50%; bottom: 8px; width: clamp(112px, 18vw, 150px) !important; height: clamp(112px, 18vw, 150px) !important; border-radius: 38px !important; object-fit: cover; box-shadow: 0 20px 34px rgba(55, 76, 143, .2) !important; transform: translateX(-50%); animation: startup-pet-bob 2.8s ease-in-out infinite; } .startup-loader-card { position: absolute; z-index: 3; width: 48px; height: 36px; border: 3px solid rgba(255,255,255,.92); border-radius: 9px; background: linear-gradient(145deg, #ffd77a, #ef8b68); box-shadow: 0 9px 16px rgba(92, 58, 86, .16); transform-origin: 50% 100%; } .startup-loader-card::after { content: ''; position: absolute; left: 7px; right: 7px; bottom: 6px; height: 3px; border-radius: 4px; background: rgba(255,255,255,.76); } .startup-loader-card i, .startup-loader-card b { position: absolute; display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.82); } .startup-loader-card i { left: 8px; top: 8px; } .startup-loader-card b { left: 21px; top: 8px; width: 18px; border-radius: 5px; } .startup-loader-card-a { left: 4px; bottom: 36px; transform: rotate(-12deg); animation: startup-card-a 2.8s ease-in-out infinite; } .startup-loader-card-b { right: 2px; bottom: 54px; background: linear-gradient(145deg, #9edcff, #667bd7); transform: rotate(12deg); animation: startup-card-b 2.8s ease-in-out infinite; } .startup-loader-card-c { left: 26px; bottom: 4px; background: linear-gradient(145deg, #f5a8ce, #a765c8); transform: rotate(7deg) scale(.82); animation: startup-card-c 2.8s ease-in-out infinite; } @keyframes startup-pet-bob { 0%,100% { transform: translateX(-50%) translateY(0) rotate(-1deg); } 50% { transform: translateX(-50%) translateY(-8px) rotate(1deg); } } @keyframes startup-card-a { 0%,100% { transform: translate(0, 0) rotate(-12deg); } 50% { transform: translate(8px, -8px) rotate(-4deg); } } @keyframes startup-card-b { 0%,100% { transform: translate(0, 0) rotate(12deg); } 50% { transform: translate(-7px, -10px) rotate(5deg); } } @keyframes startup-card-c { 0%,100% { transform: translate(0, 0) rotate(7deg) scale(.82); } 50% { transform: translate(15px, -7px) rotate(15deg) scale(.82); } } @media (prefers-reduced-motion: reduce) { .startup-loader-scene .startup-logo, .startup-loader-card { animation: none; } } /* Separate layers make the action real: the toy changes walking poses while the round photo ball rotates independently and the pair travels once right. */ .startup-loader-stage { position: relative; width: min(52vw, 720px); height: clamp(180px, 24vw, 300px); overflow: visible; animation: startup-loader-stage-travel 5s linear 1 forwards; } .startup-loader-ball { position: absolute; z-index: 1; right: 6%; bottom: 2%; width: clamp(126px, 14vw, 210px); aspect-ratio: 1; animation: startup-loader-ball-roll 5s linear 1 forwards; } .startup-loader-ball img { display: block; width: 100%; height: 100%; object-fit: contain; } .startup-loader-toy { position: absolute; z-index: 2; left: 28%; bottom: 0; width: clamp(138px, 15vw, 230px); aspect-ratio: 543 / 724; background: url('startup-loading-toy-sprite.png') 0 0 / 400% 100% no-repeat; animation: startup-loader-toy-steps 5s steps(3, end) 1 forwards; } @keyframes startup-loader-stage-travel { from { transform: translateX(-22%); } to { transform: translateX(22%); } } @keyframes startup-loader-ball-roll { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes startup-loader-toy-steps { from { background-position: 0 0; } to { background-position: 100% 0; } } @media (max-width: 680px) { .startup-loader-stage { width: min(70vw, 470px); } .startup-loader-toy { left: 27%; } @keyframes startup-loader-stage-travel { from { transform: translateX(-18%); } to { transform: translateX(18%); } } } /* Minimal private-space password dialog: input, confirm mark, and close button only. */ .private-space-password-dialog { width: min(340px, calc(100% - 32px)) !important; max-width: 340px !important; padding: 32px 28px 28px !important; border-radius: 20px !important; background: linear-gradient(165deg, #1a1f35 0%, #0d1225 50%, #0a0e1a 100%) !important; border: 1px solid rgba(99, 132, 255, .25) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 80px rgba(59, 130, 246, .08), inset 0 1px 0 rgba(255, 255, 255, .06) !important; } /* 关闭按钮：右上角，不与输入框重叠 */ .private-space-password-dialog .dialog-close { position: absolute !important; top: 10px !important; right: 10px !important; width: 30px !important; height: 30px !important; border-radius: 50% !important; border: 1px solid rgba(148, 163, 184, .25) !important; background: rgba(15, 23, 42, .6) !important; color: #94a3b8 !important; font-size: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 10 !important; backdrop-filter: blur(8px) !important; transition: all .2s ease !important; } .private-space-password-dialog .dialog-close:hover { border-color: rgba(239, 68, 68, .5) !important; background: rgba(220, 38, 38, .2) !important; color: #fca5a5 !important; } .private-space-password-dialog .admin-form { gap: 18px !important; margin-top: 8px !important; justify-items: stretch !important; } .private-space-password-dialog input { width: 100% !important; min-height: 48px !important; padding: 12px 16px !important; font-size: 16px !important; border-radius: 12px !important; border: 1px solid rgba(99, 132, 255, .3) !important; background: rgba(15, 23, 42, .7) !important; color: #e2e8f0 !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2), 0 0 20px rgba(59, 130, 246, .05) !important; transition: all .25s ease !important; } .private-space-password-dialog input::placeholder { color: #64748b !important; } .private-space-password-dialog input:focus { border-color: rgba(59, 130, 246, .7) !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2), 0 0 24px rgba(59, 130, 246, .15) !important; outline: none !important; } .private-space-password-dialog .form-message[hidden] { display: none !important; } .private-space-password-dialog .form-message { color: #fca5a5 !important; font-size: 13px !important; text-align: center !important; } /* 登入按钮：刀剑神域风格——发光蓝紫渐变，像「Link Start」 */ .private-space-password-dialog .primary-button { width: 100% !important; min-width: unset !important; height: 48px !important; min-height: 48px !important; margin: 4px auto 0 !important; padding: 0 20px !important; border-radius: 12px !important; border: 1px solid rgba(99, 102, 241, .5) !important; background: linear-gradient(135deg, #4338ca 0%, #6366f1 40%, #818cf8 100%) !important; color: #fff !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: .15em !important; line-height: 1 !important; box-shadow: 0 4px 20px rgba(79, 70, 229, .35), 0 0 40px rgba(99, 102, 241, .12), inset 0 1px 0 rgba(255, 255, 255, .15) !important; transition: all .3s ease !important; text-transform: uppercase !important; } .private-space-password-dialog .primary-button:hover { background: linear-gradient(135deg, #3730a3 0%, #4f46e5 40%, #6366f1 100%) !important; box-shadow: 0 6px 28px rgba(79, 70, 229, .5), 0 0 60px rgba(99, 102, 241, .2), inset 0 1px 0 rgba(255, 255, 255, .2) !important; transform: translateY(-1px) !important; } .private-space-password-dialog .primary-button:active { transform: translateY(0) !important; box-shadow: 0 2px 12px rgba(79, 70, 229, .4), inset 0 2px 4px rgba(0, 0, 0, .2) !important; } /* The native hidden attribute must win over the dropdown's display:block rule. */ .admin-dropdown-menu button[hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { .startup-loader-stage, .startup-loader-ball, .startup-loader-toy { animation: none; } .startup-loader-stage { transform: translateX(22%); } .startup-loader-ball { transform: rotate(360deg); } .startup-loader-toy { background-position: 100% 0; } } /* Simple, stable loader: one small waving Samuel with an exact HTML speech bubble, instead of the previous ball experiment. */ .startup-loader-waver { position: relative; width: 170px; height: 158px; display: flex; align-items: flex-end; justify-content: center; animation: startup-waver-bob 1.6s ease-in-out infinite; } .startup-loader-waver img { display: block; width: auto; height: 113px; object-fit: contain; } .startup-loader-speech { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 7px 12px; border: 1px solid rgba(221, 40, 102, .18); border-radius: 999px; background: rgba(255, 255, 255, .94); color: #5b4050; font-size: 12px; line-height: 1; white-space: nowrap; box-shadow: 0 8px 18px rgba(115, 55, 89, .12); } .startup-loader-speech::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: inherit; border-right: 1px solid rgba(221, 40, 102, .18); border-bottom: 1px solid rgba(221, 40, 102, .18); transform: translateX(-50%) rotate(45deg); } @keyframes startup-waver-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-3px) rotate(1deg); } } @media (prefers-reduced-motion: reduce) { .startup-loader-waver { animation: none; } } /* 2026-08-22 final admin and desktop media-navigation refinement. */ .music-admin-row { grid-template-columns: auto 40px minmax(0, 1fr) auto !important; min-width: 0; } .music-drag-handle { color: var(--muted); cursor: grab; } .music-admin-icon { width: 40px !important; height: 40px !important; border-radius: 10px !important; object-fit: cover; } .music-admin-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; flex-wrap: wrap; } .music-admin-actions button { white-space: nowrap; font-size: 11px; padding: 8px 9px; } .music-admin-actions .music-icon-edit { color: #2d76ad; } .music-admin-actions .music-icon-remove { color: var(--rose); } .music-admin-actions button:disabled { opacity: .38; cursor: not-allowed; } #activitiesDialog .section-list { display: grid !important; gap: 10px !important; } #activitiesDialog .section-row { display: grid !important; grid-template-columns: 22px 56px minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; min-height: 76px !important; padding: 10px 12px !important; } #activitiesDialog .section-row .drag-handle { position: static !important; grid-column: 1; grid-row: 1; padding: 0 !important; background: transparent !important; } #activitiesDialog .section-row-thumb { grid-column: 2; grid-row: 1; width: 56px !important; height: 56px !important; border-radius: 12px !important; object-fit: cover; } #activitiesDialog .section-row-copy { grid-column: 3; grid-row: 1; min-width: 0; overflow: hidden; } #activitiesDialog .section-row-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #activitiesDialog .section-row-copy small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; } #activitiesDialog .section-row-actions { grid-column: 4; grid-row: 1; display: flex; gap: 7px; flex-wrap: nowrap; } #activitiesDialog .section-row-actions .ghost-button { white-space: nowrap; padding: 8px 11px !important; } #comicsDialog #comicsList { display: grid !important; grid-template-columns: repeat(4, minmax(130px, 1fr)) !important; gap: 14px !important; max-height: 54vh !important; overflow: auto !important; padding: 4px 3px 8px !important; } #comicsDialog #comicsList .section-row { position: relative !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto auto !important; gap: 8px !important; min-height: 0 !important; padding: 10px !important; align-items: start !important; } #comicsDialog #comicsList .section-row .drag-handle { position: absolute !important; top: 8px; left: 8px; padding: 4px 7px !important; z-index: 2; } #comicsDialog #comicsList .section-row-thumb { width: 100% !important; height: auto !important; aspect-ratio: 9 / 16 !important; border-radius: 11px !important; object-fit: cover; } #comicsDialog #comicsList .section-row-copy { min-width: 0; width: 100%; } #comicsDialog #comicsList .section-row-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } #comicsDialog #comicsList .section-row-copy small { display: none !important; } #comicsDialog #comicsList .section-row-actions { display: flex; justify-content: flex-end; gap: 6px; width: 100%; } #comicsDialog #comicsList .section-row-actions .ghost-button { width: auto !important; min-width: 44px; height: 32px; padding: 5px 8px !important; font-size: 11px !important; } body:not(.world-open) .hero-carousel.square { aspect-ratio: 21 / 9 !important; max-height: none !important; } @media (min-width: 681px) { body:not(.world-open) .topbar .top-module-nav { position: fixed !important; left: max(12px, calc((100vw - min(1720px, calc(100vw - 160px))) / 2 - 86px)) !important; top: 52% !important; transform: translateY(-50%) !important; z-index: 35 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; gap: 8px !important; margin: 0 !important; padding: 8px !important; border-radius: 18px !important; background: linear-gradient(145deg, rgba(229,243,254,.96), rgba(204,228,247,.94)) !important; border: 1px solid rgba(105,164,207,.35) !important; box-shadow: 0 12px 30px rgba(34,84,122,.16) !important; } body:not(.world-open) .topbar .top-module-nav > button, body:not(.world-open) .topbar .top-module-nav > button:hover, body:not(.world-open) .topbar .top-module-nav > button[aria-selected="true"] { width: 100% !important; min-width: 0 !important; min-height: 68px !important; padding: 10px 5px !important; border: 0 !important; border-radius: 12px !important; color: #4b6982 !important; background: rgba(255,255,255,.44) !important; box-shadow: none !important; transform: none !important; font-size: 12px !important; line-height: 1.35 !important; white-space: normal !important; overflow: hidden !important; } body:not(.world-open) .topbar .top-module-nav > button[aria-selected="true"] { color: #fff !important; background: linear-gradient(145deg, #2d76ad, #245887) !important; box-shadow: 0 7px 15px rgba(36,88,135,.24) !important; } } @media (min-width: 681px) and (max-width: 1100px) { body:not(.world-open) .topbar .top-module-nav { left: 10px !important; width: 68px !important; min-width: 68px !important; max-width: 68px !important; } body:not(.world-open) .topbar .top-module-nav > button { font-size: 10px !important; } } @media (max-width: 900px) and (min-width: 681px) { #comicsDialog #comicsList { grid-template-columns: repeat(3, minmax(120px, 1fr)) !important; } } @media (max-width: 680px) { body:not(.world-open) .hero-carousel.square { aspect-ratio: 16 / 6.2 !important; max-height: 220px !important; } .music-admin-row { grid-template-columns: auto 38px minmax(0, 1fr) !important; } .music-admin-actions { grid-column: 2 / -1; justify-content: flex-start; } #activitiesDialog .section-row { grid-template-columns: 18px 48px minmax(0, 1fr) !important; } #activitiesDialog .section-row-thumb { width: 48px !important; height: 48px !important; } #activitiesDialog .section-row-actions { grid-column: 3; grid-row: 2; justify-content: flex-end; } #comicsDialog #comicsList { grid-template-columns: repeat(2, minmax(120px, 1fr)) !important; } } #editDialog .dialog-heading { padding-right: 220px; margin-bottom: 10px !important; } #editDialog .dialog-heading h2 { font-size: 24px !important; margin: 3px 0 !important; } #editDialog .dialog-heading span { font-size: 9px !important; } #editDialog #editForm { display: grid !important; grid-template-columns: minmax(260px, .42fr) minmax(0, 1fr) !important; gap: 12px !important; margin-top: 12px !important; } #editDialog .edit-basic-grid { display: grid; grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr); gap: 12px; } #editDialog .edit-field-group { min-width: 0; padding: 10px 12px; border: 1px solid #eee3e5; border-radius: 14px; background: #fff; } #editDialog .edit-field-group>strong { display: block; margin-bottom: 8px; font-size: 12px; color: #171717; } #editDialog .edit-basic-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #editDialog .edit-language-group { min-width: 0; } #editDialog .edit-language-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } #editDialog .edit-basic-grid label, #editDialog #editForm>label { display: grid; gap: 4px; font-size: 11px; color: #77716e; font-weight: 700; } #editDialog .edit-basic-grid input, #editDialog .edit-basic-grid select { height: 34px; min-height: 34px; padding: 7px 10px; border-radius: 9px; font-size: 12px; } #editDialog #editForm>.switch-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; padding: 0 4px; font-size: 11px; } #editDialog #editForm>.switch-row input { width: 15px !important; height: 15px; } #editDialog #imageDropZone { grid-column: 1 / -1; min-height: 0; padding: 10px 12px; border-radius: 14px; } #editDialog #imageDropZone .image-sort-hint { margin-bottom: 7px; } #editDialog #imageDropZone .image-sort-hint small { font-size: 10px; } #editDialog #imageDropZone .image-editor { display: flex; min-height: 0; max-height: 112px; overflow-x: auto; overflow-y: hidden; gap: 7px; padding: 2px 2px 6px; } #editDialog #imageDropZone .image-editor figure { flex: 0 0 78px; width: 78px; height: 96px; aspect-ratio: 3 / 4; } #editDialog #coverEditor { grid-column: 1; grid-row: span 2; padding: 12px !important; } #editDialog .cover-editor-heading { margin-bottom: 8px; } #editDialog .cover-editor-heading strong { font-size: 14px; } #editDialog .cover-editor-heading small { font-size: 10px; line-height: 1.35; } #editDialog .cover-editor-layout { grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 12px; } #editDialog .cover-preview { width: min(190px, 100%); margin: 0 auto; border-radius: 14px; } #editDialog .cover-controls { padding: 10px !important; border-radius: 12px; } #editDialog .cover-zoom-label { font-size: 11px; } #editDialog #detailImagesEditor, #editDialog #productMetaEditor { grid-column: 2; padding: 12px; border-radius: 14px; } #editDialog .detail-images-editor-heading, #editDialog .product-meta-editor-heading { margin-bottom: 8px; } #editDialog .detail-images-editor-heading strong, #editDialog .product-meta-editor-heading strong { font-size: 14px; } #editDialog .detail-images-editor-heading small, #editDialog .product-meta-editor-heading small { font-size: 10px; line-height: 1.35; } #editDialog .detail-image-dropzone { padding: 6px; } #editDialog #detailImageEditor { display: flex; min-height: 0; max-height: 104px; overflow-x: auto; overflow-y: hidden; gap: 7px; } #editDialog #detailImageEditor figure { flex: 0 0 70px; width: 70px; height: 92px; aspect-ratio: 3 / 4; } #editDialog .product-meta-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } #editDialog .product-meta-fields .meta-row { min-width: 0; gap: 6px; } #editDialog .product-meta-fields .meta-row:not(.two-col) { grid-column: 1 / -1; } #editDialog .product-meta-fields .meta-row.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #editDialog .product-meta-fields label { gap: 4px; font-size: 10px; } #editDialog .product-meta-fields input { height: 32px; min-height: 32px; padding: 6px 8px; border-radius: 8px; font-size: 12px; } #editDialog .product-meta-fields .meta-row.two-col input { max-width: 150px; } #editDialog .dimension-label { gap: 4px; } #editDialog .dimension-inputs { gap: 4px; } #editDialog .dimension-inputs input { min-width: 42px; max-width: 76px; height: 30px; min-height: 30px; padding: 5px 4px; } #editDialog .dimension-inputs>span { font-size: 11px; } #editDialog .dimension-unit { font-size: 10px; } #editDialog .product-meta-fields .switch-row { display: flex; align-items: center; gap: 6px; } #editDialog .upload-progress { grid-column: 1 / -1; } @media(max-width: 1050px) { #editDialog { width: min(920px, calc(100vw - 24px)) !important; } #editDialog #editForm { grid-template-columns: 1fr !important; } #editDialog .edit-basic-grid { grid-template-columns: 1fr; } #editDialog .edit-language-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } #editDialog #coverEditor, #editDialog #detailImagesEditor, #editDialog #productMetaEditor { grid-column: 1; grid-row: auto; } } @media(max-width: 680px) { #editDialog { width: calc(100vw - 12px) !important; height: calc(100vh - 12px) !important; max-height: calc(100vh - 12px) !important; } #editDialog .edit-basic-fields, #editDialog .edit-language-fields, #editDialog .product-meta-fields, #editDialog .product-meta-fields .meta-row.two-col { grid-template-columns: 1fr; } #editDialog .product-meta-fields .meta-row:not(.two-col) { grid-column: auto; } #editDialog .cover-editor-layout { grid-template-columns: 150px 1fr; } } /* 2026 gallery refinement: editorial rose, bilingual controls and media modes */ :root{--accent:#dd2866;--accent-2:#8357d7;--rose:#dd2866;--content:1720px} :root[data-theme="dark"]{--accent:#ff4d8b;--accent-2:#9c79ef;--bg:#100f16;--panel:rgba(25,22,31,.68);--panel-strong:rgba(33,29,39,.94)} .topbar{width:min(var(--content),calc(100% - 40px));height:auto;min-height:76px;padding:10px 14px 10px 18px}.top-actions{gap:12px}.control-cluster{display:flex;align-items:center;gap:7px}.control-cluster>small{font-size:10px;color:var(--muted);white-space:nowrap}.segmented{--segments:2;position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(var(--segments),minmax(0,1fr));padding:5px;border-radius:18px}.segmented i{position:absolute;z-index:-1;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/2);border-radius:13px;background:linear-gradient(135deg,var(--rose),#b72370);box-shadow:0 8px 20px rgba(221,40,102,.25);transition:transform .38s cubic-bezier(.22,.85,.25,1)}.segmented[data-position="1"] i{transform:translateX(100%)}.segmented button{border:0;background:transparent;color:var(--muted);font-weight:750;position:relative;z-index:1;transition:color .25s}.segmented button[aria-selected="true"]{color:#fff}.segmented.compact{width:112px;background:var(--panel-strong);border:1px solid var(--line)}.segmented.compact button{padding:9px 8px;font-size:11px}.media-switch{width:min(460px,100%);margin:0 auto 8px;background:var(--panel)}.media-switch button{padding:14px 24px}.hero{width:min(var(--content),calc(100% - 48px));padding:28px 4px 22px;display:grid;grid-template-columns:minmax(480px,.9fr) minmax(440px,.75fr);align-items:end;gap:4vw}.hero-copy{min-width:0}.hero h1{display:grid;max-width:920px}.hero h1 span,.hero h1 em{display:block}.hero h1 span{font-size:clamp(42px,5vw,82px);transform:translateX(-.02em)}.hero h1 em{font-size:clamp(50px,6.2vw,104px);line-height:.88;margin-left:.28em;letter-spacing:-.075em}.hero>p,.hero-copy>p{margin:14px 0 0}.hero .search{max-width:none;width:100%;margin-bottom:2px}.catalog-shell{width:min(var(--content),calc(100% - 40px));margin-bottom:120px}.category-bar{top:96px}.product-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.product-copy{padding:14px 14px 16px}.product-copy h3{font-size:15px}.product-cover{aspect-ratio:1/1.12}.product-card{border-radius:24px}.product-card::after{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--rose),transparent);opacity:.25}.video-card .product-cover{background:#16121b}.video-card video{width:100%;height:100%;object-fit:cover}.play-badge{position:absolute;inset:auto 8px 8px auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.72);color:var(--rose);box-shadow:0 6px 18px rgba(0,0,0,.18);font-size:13px}.video-viewer{display:grid;place-items:center;background:#09080c}.video-viewer video{width:100%;height:100%;max-height:78vh;object-fit:contain}.video-dialog[open]{grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr)} @media(max-width:1420px){.product-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.control-cluster>small{display:none}} @media(max-width:1160px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.language-cluster{display:none}.hero{grid-template-columns:1fr;padding-top:38px}.hero .search{max-width:720px}.hero h1 em{margin-left:.15em}} @media(max-width:900px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.theme-cluster{display:none}.hero{width:calc(100% - 28px);padding-top:22px}.media-switch{margin-top:0;margin-bottom:6px}.category-bar{top:58px}} @media(max-width:680px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{padding-top:16px;padding-bottom:12px}.hero h1 span{font-size:38px}.hero h1 em{font-size:48px;margin-left:0}.media-switch{width:calc(100% - 8px);margin-bottom:6px}.media-switch button{padding:11px 10px}.top-actions{gap:4px}.category-bar{top:52px;padding:4px}.category-button{padding:8px 14px;border-radius:4px}.catalog-shell{margin-bottom:100px}.search{height:50px;border-radius:16px}.eyebrow{margin-bottom:12px}} .pick-toggle{position:absolute;right:13px;bottom:13px;z-index:5;width:30px;height:30px;padding:3px;border:0;background:transparent;color:#fff;display:grid;place-items:center;transition:.28s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 2px 5px rgba(0,0,0,.38))}.pick-toggle svg{display:block;width:23px;height:23px;overflow:visible}.pick-toggle path{fill:transparent;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;transition:fill .22s ease,stroke .22s ease,filter .22s ease}.pick-toggle:hover{transform:translateY(-2px) scale(1.08)}.pick-toggle[aria-pressed="true"] path{fill:var(--rose);stroke:transparent;filter:drop-shadow(0 3px 6px rgba(221,40,102,.4))}.pick-toggle.pop{animation:pick-pop .42s cubic-bezier(.2,1.4,.4,1)}@keyframes pick-pop{50%{transform:scale(1.28) rotate(-5deg)}} .product-meta span:last-child{margin-right:38px}.product-copy h3{padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brand small{letter-spacing:.06em;font-size:9px}.hero h1{font-family:"Arial Black","Microsoft YaHei",sans-serif;transform:rotate(-1.2deg);transform-origin:left center;filter:drop-shadow(0 10px 20px rgba(48,27,41,.12))}.hero h1 span,.hero h1 em{width:max-content;max-width:100%;letter-spacing:-.075em;font-weight:950;font-style:italic}.hero h1 span{color:#fff7ed;-webkit-text-stroke:5px #181321;text-shadow:7px 8px 0 #181321,11px 12px 0 rgba(221,40,102,.9);padding:0 .08em .08em 0}.hero h1 em{position:relative;color:#f8e4a4;-webkit-text-stroke:5px #181321;text-shadow:6px 7px 0 #181321,10px 11px 0 rgba(221,40,102,.8);transform:skewX(-8deg) translateX(.25em);padding:0 .1em .1em 0;background:none}.hero h1 em::after{content:'✦';position:absolute;right:-.65em;top:.05em;color:var(--rose);font-size:.3em;-webkit-text-stroke:1px #181321;text-shadow:2px 2px 0 #181321}.hero-copy .eyebrow{margin-bottom:15px} .picks-fab{position:fixed;left:22px;bottom:22px;z-index:30;display:flex;align-items:center;gap:9px;border-radius:22px;padding:10px 12px;border:1px solid var(--line);color:var(--text);transition:.3s}.picks-fab:hover{transform:translateY(-4px)}.picks-fab .picks-icon{position:relative;width:36px;height:36px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--rose),#b92375);color:#fff;font-size:22px}.picks-icon i{position:absolute;right:4px;top:1px;font-size:8px;font-style:normal}.picks-fab b{font-size:13px}.picks-fab em{min-width:25px;height:25px;padding:0 6px;border-radius:999px;background:var(--text);color:var(--bg);display:grid;place-items:center;font-size:11px;font-style:normal}.picks-fab.bump{animation:fab-bump .38s ease}@keyframes fab-bump{50%{transform:scale(1.08)}} .picks-dialog,.pick-image-dialog{width:min(780px,calc(100% - 24px));max-height:88vh;border:1px solid var(--line);border-radius:30px;background:var(--panel-strong);color:var(--text);padding:30px;box-shadow:var(--shadow)}.picks-dialog::backdrop,.pick-image-dialog::backdrop{background:rgba(18,12,17,.55)}.picks-heading>span{font-size:10px;letter-spacing:.22em;color:var(--rose);font-weight:900}.picks-heading h2{font-size:32px;margin:7px 0}.picks-heading p{color:var(--muted);margin:0 0 22px}.picks-list{display:grid;gap:9px;max-height:48vh;overflow:auto;padding-right:4px}.pick-row{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:14px;padding:9px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.pick-row img,.pick-row .pick-placeholder{width:72px;height:72px;border-radius:13px;object-fit:cover;background:linear-gradient(135deg,#f5dbe5,#ddd3fa)}.pick-row-copy{min-width:0}.pick-row-copy span{font-size:10px;letter-spacing:.12em;color:var(--rose);font-weight:850}.pick-row-copy h3{margin:4px 0 0;font-size:15px}.pick-remove{border:0;background:transparent;color:var(--muted);width:40px;height:40px;border-radius:12px;font-size:22px}.pick-remove:hover{background:var(--panel-strong);color:var(--rose)}.picks-empty{text-align:center;padding:58px 20px;color:var(--muted)}.picks-empty strong{display:block;color:var(--text);font-size:20px;margin-bottom:8px}.picks-summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 4px 6px}.picks-summary span{font-weight:850}.picks-summary small{color:var(--muted)}.picks-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.pick-image-dialog{width:min(620px,calc(100% - 24px))}.pick-image-dialog>img{display:block;width:100%;max-height:62vh;object-fit:contain;border-radius:20px;background:#f7f1ef;box-shadow:0 14px 40px rgba(35,22,30,.14)} @media(max-width:680px){.picks-fab{left:12px;bottom:12px;padding:8px;border-radius:18px}.picks-fab b{display:none}.picks-fab .picks-icon{width:40px;height:40px}.picks-fab em{position:absolute;right:-5px;top:-7px;background:var(--rose);color:#fff;border:2px solid var(--bg)}.pick-toggle{width:28px;height:28px;right:8px;bottom:9px;font-size:25px}.product-meta span:last-child{margin-right:30px}.hero h1 span,.hero h1 em{-webkit-text-stroke:3px #181321;text-shadow:4px 5px 0 #181321,7px 8px 0 rgba(221,40,102,.85)}.picks-dialog,.pick-image-dialog{padding:24px 16px 16px;border-radius:25px}.picks-heading h2{font-size:28px}.pick-row{grid-template-columns:58px 1fr auto}.pick-row img,.pick-row .pick-placeholder{width:58px;height:58px}.picks-summary{display:grid}.picks-actions{display:grid;grid-template-columns:1fr 1fr}.picks-actions .primary-button:last-child{grid-column:1/-1}.admin-dock{bottom:74px}} /* Product lightbox: numbered view with a scrollable contact sheet */ .product-dialog{width:min(920px,calc(100% - 28px));grid-template-columns:minmax(0,1.6fr) minmax(200px,.38fr);max-height:85vh;border-radius:28px}.product-dialog .viewer{height:min(560px,75vh);min-height:320px}.product-detail{max-height:min(560px,75vh);min-height:320px;overflow-y:auto;padding:22px 18px 20px;justify-content:stretch;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px}.viewer-count{font-size:30px;line-height:1;font-weight:900;letter-spacing:-.04em;color:var(--text);padding-right:50px}.viewer-count::first-letter{color:var(--rose)}.viewer-thumbnails{min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:8px;padding:3px;scrollbar-width:thin;scrollbar-color:var(--rose) transparent}.viewer-thumbnail{position:relative;aspect-ratio:1/1;border:2px solid transparent;padding:0;border-radius:10px;background:transparent;overflow:hidden;opacity:1;transition:.25s}.viewer-thumbnail img{width:100%;height:100%;display:block;object-fit:cover}.viewer-thumbnail:hover{opacity:.9;transform:translateY(-2px)}.viewer-thumbnail.active{opacity:1;border-color:var(--rose);background:rgba(221,40,102,.1)}.viewer-thumbnail.active::after{content:'✓';position:absolute;right:3px;top:3px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:var(--rose);color:#fff;font-size:9px}.detail-copy{display:grid;align-content:end}.detail-copy>span{color:var(--muted);font-size:12px}.detail-copy strong{font-size:13px;letter-spacing:.16em;color:var(--accent);margin:12px 0 8px}.detail-copy h2{font-size:27px;margin:0;line-height:1.2}.product-dialog .dialog-close{z-index:8}.viewer-pick-fab{position:absolute;right:14px;bottom:14px;z-index:7;display:flex;align-items:center;gap:7px}.viewer-pick-fab[hidden]{display:none}.viewer-pick-toggle,.viewer-picks-count{width:34px;height:34px;border:0;border-radius:10px;display:grid;place-items:center;background:rgba(20,16,20,.72);color:#fff;backdrop-filter:blur(6px);transition:.25s}.viewer-pick-toggle:hover,.viewer-picks-count:hover{transform:translateY(-2px);background:rgba(20,16,20,.86)}.viewer-pick-toggle svg{width:18px;height:18px;overflow:visible;display:block}.viewer-pick-toggle path{fill:transparent;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:fill .22s,stroke .22s}.viewer-pick-toggle[aria-pressed="true"] path{fill:var(--rose);stroke:transparent}.viewer-picks-count{font-size:11px;font-weight:800;background:var(--rose);color:#fff;box-shadow:0 4px 12px rgba(221,40,102,.3)}.viewer-picks-count:empty,.viewer-picks-count[data-count="0"]{display:none} @media(max-width:980px){.product-dialog[open]{position:fixed;inset:0;width:100%;height:100%;max-height:100%;border-radius:0;grid-template-columns:1fr;grid-template-rows:1fr auto;overflow:hidden}.product-dialog .viewer{height:100%;min-height:100%}.product-detail{max-height:40vh;grid-template-rows:auto auto auto;gap:12px;padding:18px 20px}.viewer-thumbnails{display:none}.detail-copy{padding-top:4px}} @media(max-width:680px){.product-dialog,.product-dialog[open]{max-height:100%;height:100%;background:#000;border-radius:0}.product-dialog .viewer{height:100%;min-height:100%;background:#000}.viewer-stage{justify-content:center;background:#000}.viewer-stage img{width:100%;height:100%;object-fit:cover}.product-detail{display:none}.product-dialog .dialog-close{top:10px;right:10px;background:rgba(255,255,255,.18);color:#fff;width:38px;height:38px;border-radius:12px}.viewer-arrow{width:36px;height:36px;font-size:26px;background:rgba(255,255,255,.15);color:#fff}.viewer-arrow.previous{left:10px}.viewer-arrow.next{right:10px}.viewer-pick-fab{right:10px;bottom:10px;gap:6px}.viewer-pick-toggle,.viewer-picks-count{width:30px;height:30px;border-radius:9px}.viewer-pick-toggle svg{width:16px;height:16px;display:block}.viewer-picks-count{font-size:10px}} /* Simplified brand lockup and softer hero typography */ .brand span{display:flex;align-items:center}.brand b{font-size:18px;letter-spacing:.015em;white-space:nowrap}.hero h1{font-family:"Arial Rounded MT Bold","Microsoft YaHei UI","Microsoft YaHei",sans-serif;transform:none;filter:none}.hero h1 span,.hero h1 em{font-style:normal;width:auto;max-width:100%;font-weight:900;-webkit-text-stroke:0;text-shadow:none;padding:0;letter-spacing:-.065em}.hero h1 span{color:var(--text);transform:none}.hero h1 em{margin-left:.2em;transform:none;background:linear-gradient(110deg,var(--accent),var(--accent-2));background-clip:text;-webkit-background-clip:text;color:transparent}.hero h1 em::after{display:none} @media(max-width:680px){.brand b{font-size:13px;max-width:190px;white-space:normal;line-height:1.2}.hero h1 span,.hero h1 em{-webkit-text-stroke:0;text-shadow:none}.hero h1 em{margin-left:0}} /* Minimal top-bar music player */ .music-player{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:3px;min-width:330px;max-width:420px;padding:5px 7px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.055)}.music-player>button{border:0;background:transparent;color:var(--muted);height:36px;border-radius:11px;transition:.22s}.music-player>button:hover{background:var(--panel-strong);color:var(--text)}.music-player>button:disabled{opacity:.28;pointer-events:none}.music-player .music-play{width:38px;background:var(--rose);color:#fff;font-size:13px;box-shadow:0 7px 18px rgba(221,40,102,.24)}.music-player .track-title{flex:1;min-width:0;text-align:left;padding:3px 10px;display:grid}.track-title span{font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}.track-title small{font-size:9px;color:var(--muted);margin-top:2px}.music-player>button:not(.track-title){width:32px;font-size:20px}.music-player .playlist-button{font-size:21px}.playlist-dialog{width:min(520px,calc(100% - 24px));max-height:80vh;border:1px solid var(--line);border-radius:28px;background:var(--panel-strong);color:var(--text);padding:28px;box-shadow:var(--shadow)}.playlist-dialog::backdrop{background:rgba(18,12,17,.48);backdrop-filter:blur(10px)}.playlist-list{display:grid;gap:7px;max-height:52vh;overflow:auto}.playlist-track{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:15px;background:var(--panel);color:var(--text);text-align:left}.playlist-track i{width:34px;height:34px;border-radius:11px;background:var(--panel-strong);display:grid;place-items:center;font-style:normal;color:var(--rose)}.playlist-track span{font-size:13px;font-weight:750}.playlist-track small{font-size:10px;color:var(--muted)}.playlist-track.active{border-color:var(--rose);box-shadow:0 0 0 2px rgba(221,40,102,.12)}.playlist-empty{padding:48px 16px;text-align:center;color:var(--muted)}.music-admin-list{display:grid;gap:8px;margin-top:22px;max-height:35vh;overflow:auto}.music-admin-row{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:15px}.music-admin-row input{min-width:0;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:11px;padding:10px}.music-admin-row button{border:0;border-radius:10px;padding:9px;background:var(--panel);color:var(--text)}.music-admin-row .remove-track{color:var(--rose)} @media(max-width:1420px){.music-player{min-width:260px;max-width:300px}.music-player .track-title{max-width:120px}} @media(max-width:1160px){ .music-player{position:absolute!important;right:74px!important;left:auto!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;width:36px!important;min-width:36px!important;max-width:36px!important;height:36px!important;padding:3px!important;border-radius:50%!important;overflow:hidden} .music-player #previousTrack,.music-player #nextTrack,.music-player .track-title,.music-player .playlist-button{display:none!important} .music-player .music-play{display:grid!important;place-items:center;width:30px!important;height:30px!important;min-width:30px!important;padding:0!important;font-size:0!important;border-radius:50%!important} .music-player .music-play::before{content:'♪';font-size:17px;line-height:1;color:#fff} .topbar{padding-right:118px} .brand b{font-size:15px;max-width:210px;white-space:normal;line-height:1.25} .brand small{display:none} .status-chip{display:none} .category-bar{top:66px} .picks-fab{bottom:82px}.admin-dock{bottom:82px} } @media(max-width:680px){.picks-fab{bottom:66px}.admin-dock{bottom:66px}.music-admin-row{grid-template-columns:auto 1fr auto}.music-admin-row button[data-track-down],.music-admin-row button[data-track-up]{display:none}} /* MY PICKS summary and per-product logistics details. */ .picks-summary-main { display: grid; gap: 5px; min-width: 0; } .picks-summary-logistics, .pick-logistics { color: var(--muted); font-size: 11px; font-weight: 600; } .picks-summary-logistics-notice { display: block; margin-top: 4px; color: #b25463; font-size: 11px; font-weight: 700; } .pick-logistics { display: block; margin-top: 6px; } @media (max-width: 680px) { .picks-summary { gap: 8px; } .picks-summary-logistics { font-size: 10px; } } :root[data-theme="light"] .pick-toggle:not([aria-pressed="true"]){color:var(--rose);filter:drop-shadow(0 2px 5px rgba(221,40,102,.22))} :root[data-theme="light"] .pick-toggle[aria-pressed="true"]{color:var(--rose)} :root[data-theme="light"] .pick-toggle[aria-pressed="true"] path{fill:var(--rose);stroke:transparent} .localized-field-active input{border-color:var(--rose)!important;box-shadow:0 0 0 2px rgba(221,40,102,.14)} /* Install-to-home experience */ .install-prompt{position:fixed;z-index:42;right:22px;bottom:22px;width:58px;height:58px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);animation:install-rise .45s cubic-bezier(.2,.8,.2,1)}.install-prompt[hidden]{display:none}.install-action{width:100%;height:100%;border:0;border-radius:14px;background:linear-gradient(135deg,var(--rose),#b82373);color:#fff;padding:4px;font-weight:800;font-size:11px;line-height:1.15;text-align:center;box-shadow:0 8px 20px rgba(221,40,102,.24)}.install-dismiss{position:absolute;right:-6px;top:-6px;width:20px;height:20px;border:1px solid var(--line);border-radius:50%;background:var(--panel-strong);color:var(--text);font-size:14px;line-height:1;display:grid;place-items:center;padding:0}@keyframes install-rise{from{opacity:0;transform:translateY(16px) scale(.97)}} .install-dialog{width:min(480px,calc(100% - 24px));border:1px solid var(--line);border-radius:30px;background:var(--panel-strong);color:var(--text);padding:34px;box-shadow:var(--shadow);text-align:center}.install-dialog::backdrop{background:rgba(18,12,17,.58);backdrop-filter:blur(12px)}.install-dialog-icon img{width:74px;height:74px;border-radius:23px;box-shadow:0 14px 34px rgba(221,40,102,.2)}.install-dialog>span{display:block;margin-top:18px;color:var(--rose);font-size:10px;letter-spacing:.2em;font-weight:900}.install-dialog h2{font-size:28px;margin:7px 0}.install-dialog>p{color:var(--muted);font-size:13px;line-height:1.7;margin:0 auto 22px}.install-steps{display:grid;gap:10px;counter-reset:install-step;padding:0;margin:0 0 22px;text-align:left;list-style:none}.install-steps li{counter-increment:install-step;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}.install-steps li::before{content:counter(install-step);width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(221,40,102,.12);color:var(--rose);font-weight:900}.install-dialog>.primary-button{width:100%} @media(max-width:1160px){.install-prompt{right:12px;bottom:82px}.install-prompt~.toast{bottom:auto}} @media(max-width:680px){.install-prompt{right:12px;bottom:12px;left:auto;width:52px;height:52px;border-radius:14px}.install-action{border-radius:12px;font-size:10px}.install-dismiss{right:-5px;top:-5px;width:18px;height:18px;font-size:12px}.install-dialog{padding:28px 18px 18px;border-radius:26px}.install-dialog h2{font-size:24px}} /* Product image drop zone and sortable draft strip */ .image-upload-panel{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:112px;padding:20px 22px;border:1.5px dashed rgba(221,40,102,.42);border-radius:20px;background:linear-gradient(135deg,rgba(221,40,102,.08),rgba(157,123,232,.07));transition:.22s}.image-upload-panel.is-dragging{border-color:var(--rose);background:rgba(221,40,102,.16);box-shadow:0 0 0 4px rgba(221,40,102,.1);transform:scale(1.006)}.image-drop-copy{display:grid;gap:5px}.image-drop-copy strong{font-size:15px}.image-drop-copy small{color:var(--muted);line-height:1.5}.image-sort-hint{display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:11px}.image-sort-hint span{color:var(--text);font-weight:800}.image-editor{gap:10px;padding:4px 2px 10px;min-height:126px;scrollbar-color:var(--rose) transparent}.image-editor:empty::after{content:'还没有图片，拖几张进来试试';display:grid;place-items:center;width:100%;min-height:112px;border:1px solid var(--line);border-radius:16px;color:var(--muted);font-size:12px}.image-editor figure{flex-basis:108px;height:118px;border:1px solid var(--line);cursor:grab;transition:transform .18s,opacity .18s,box-shadow .18s}.image-editor figure:active{cursor:grabbing}.image-editor figure.dragging{opacity:.35;transform:scale(.94)}.image-editor figure.drag-over{box-shadow:-5px 0 0 var(--rose)}.image-editor img{pointer-events:none}.image-editor .image-index{position:absolute;left:6px;top:6px;min-width:24px;height:24px;padding:0 6px;border-radius:8px;background:rgba(20,16,20,.7);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800}.image-editor .image-new-badge{position:absolute;left:6px;bottom:6px;border-radius:7px;padding:4px 6px;background:var(--rose);color:#fff;font-size:9px;font-weight:800} @media(max-width:680px){.image-upload-panel{align-items:flex-start;flex-direction:column}.image-upload-panel .ghost-button{width:100%}.image-sort-hint{display:grid}} /* TNTSPACE-style homepage feature strips: keep WB's content/rotation, refine only layout. */ body:not(.world-open) .hero { width: min(var(--content), calc(100% - 40px)) !important; max-width: none; gap: 14px; } body:not(.world-open) .hero-features { width: 100%; max-width: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(220px, .85fr); gap: 14px; align-items: stretch; } body:not(.world-open) .feature-card { height: 92px; min-height: 92px; padding: 9px 12px; border-radius: 18px; border-color: color-mix(in srgb, var(--accent) 12%, var(--line)); box-shadow: 0 8px 24px rgba(90, 70, 105, .08), 0 0 0 1px rgba(255,255,255,.32) inset; transition: transform .28s cubic-bezier(.22,.85,.25,1), box-shadow .28s, border-color .28s; } body:not(.world-open) .feature-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); } body:not(.world-open) .news-card:hover { box-shadow: 0 16px 34px rgba(57, 125, 255, .22), 0 0 0 1px rgba(57,125,255,.12) inset; } body:not(.world-open) .activity-card:hover { box-shadow: 0 16px 34px rgba(255, 92, 150, .22), 0 0 0 1px rgba(255,92,150,.12) inset; } body:not(.world-open) .contact-card:hover { box-shadow: 0 16px 34px rgba(139, 99, 240, .22), 0 0 0 1px rgba(139,99,240,.12) inset; } body:not(.world-open) .feature-card-header { margin: 0; min-height: 22px; } body:not(.world-open) .feature-badge { padding: 4px 9px; font-size: 9px; } body:not(.world-open) .feature-more { font-size: 11px; } body:not(.world-open) .feature-slider { min-height: 52px; height: 52px; margin-top: 1px; border-radius: 12px; } body:not(.world-open) .feature-slide { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 5px 7px; border-radius: 12px; } body:not(.world-open) .feature-slide img { width: 52px; height: 52px; border-radius: 10px; } body:not(.world-open) .feature-slide-text strong { margin-bottom: 2px; font-size: 13px; transition: color .22s; } body:not(.world-open) .feature-slide-text small { font-size: 10px; } body:not(.world-open) .feature-card:hover .feature-slide-text strong, body:not(.world-open) .feature-card:hover .feature-contact-body strong { color: var(--accent); } body:not(.world-open) .activity-card:hover .feature-slide-text strong { color: var(--accent-2); } body:not(.world-open) .feature-contact-body { justify-content: center; gap: 2px; padding: 0 4px; } body:not(.world-open) .feature-contact-body strong { font-size: 16px; transition: color .22s; } body:not(.world-open) .feature-contact-body small { font-size: 11px; } @media(max-width:980px) { body:not(.world-open) .hero-features { grid-template-columns: 1fr; } body:not(.world-open) .feature-card { height: 92px; min-height: 92px; } } @media(max-width:680px) { body:not(.world-open) .hero { width: calc(100% - 16px) !important; } body:not(.world-open) .hero-features { gap: 9px; } body:not(.world-open) .feature-card { height: 82px; min-height: 82px; border-radius: 16px; padding: 7px 9px; } body:not(.world-open) .feature-slider { height: 46px; min-height: 46px; } body:not(.world-open) .feature-slide { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 4px 6px; } body:not(.world-open) .feature-slide img { width: 44px; height: 44px; border-radius: 9px; } body:not(.world-open) .feature-slide-text strong { font-size: 12px; } body:not(.world-open) .feature-slide-text small { font-size: 9px; } } /* Homepage geometry correction: restore the centered gallery width and align every row. */ body:not(.world-open) .hero, body:not(.world-open) .catalog-shell { width: min(var(--content), calc(100% - 128px)) !important; margin-left: auto; margin-right: auto; } body:not(.world-open) .hero { display: flex !important; flex-direction: column !important; align-items: stretch; } body:not(.world-open) .hero-carousel { width: 100%; margin-left: auto; margin-right: auto; } body:not(.world-open) .hero-features { width: 100%; max-width: none; } body:not(.world-open) .feature-card-header { left: 18px; right: 18px; } body:not(.world-open) .feature-slide { grid-template-columns: 128px minmax(0, 1fr); } body:not(.world-open) .feature-slide img { width: 128px; aspect-ratio: 16 / 9; height: auto; min-height: 0; object-fit: cover; align-self: center; } body:not(.world-open) .feature-slide-text { padding-top: 0; } /* Search sits directly to the left of the three media buttons. */ body:not(.world-open) .catalog-shell { display: flex; flex-wrap: wrap; align-items: center; column-gap: 18px; } body:not(.world-open) .catalog-shell .search-bar-wrap { order: 1; flex: 0 0 300px; width: auto; margin: 0; justify-content: flex-start; } body:not(.world-open) .catalog-shell .media-switch { order: 2; flex: 1 1 640px; width: auto; margin: 0 0 8px auto; } body:not(.world-open) .catalog-shell .section-heading { order: 3; width: 100%; } body:not(.world-open) .catalog-shell #catalogContent { order: 4; width: 100%; } @media(max-width:980px) { body:not(.world-open) .hero, body:not(.world-open) .catalog-shell { width: calc(100% - 32px) !important; } body:not(.world-open) .catalog-shell { display: block; } body:not(.world-open) .catalog-shell .search-bar-wrap, body:not(.world-open) .catalog-shell .media-switch { width: 100%; margin: 0 auto 8px; } body:not(.world-open) .catalog-shell .search-bar-wrap { display: flex; } body:not(.world-open) .catalog-shell .media-switch { display: grid; } } @media(max-width:680px) { body:not(.world-open) .hero, body:not(.world-open) .catalog-shell { width: calc(100% - 16px) !important; } body:not(.world-open) .feature-card-header { left: 13px; right: 13px; } body:not(.world-open) .feature-slide { grid-template-columns: 92px minmax(0, 1fr); } body:not(.world-open) .feature-slide img { width: 92px; } } /* Keep the product editor on the left so a Windows folder can stay open on the right. */ #editDialog{width:min(960px,50vw);height:calc(100vh - 24px);max-height:calc(100vh - 24px);margin:auto auto auto 12px;overflow:auto} #editDialog .dialog-heading{padding-right:210px}.dialog-save-top{position:absolute;right:78px;top:24px;z-index:9;padding:13px 18px;border-radius:15px} .image-gallery-dropzone{min-height:360px;padding:18px;border:1px solid rgba(174,126,212,.28);border-radius:22px;background:linear-gradient(145deg,rgba(29,22,36,.96),rgba(42,28,51,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.035);transition:.22s} .image-gallery-dropzone.is-dragging{border-color:var(--rose);background:linear-gradient(145deg,rgba(61,28,53,.98),rgba(53,31,68,.98));box-shadow:inset 0 0 0 2px rgba(221,40,102,.18),0 0 0 4px rgba(221,40,102,.08)} .image-gallery-dropzone:focus-visible{outline:2px solid var(--rose);outline-offset:3px}.image-gallery-dropzone:focus-within .image-sort-hint small{color:rgba(255,255,255,.82)} .image-gallery-dropzone .image-sort-hint{align-items:center;margin-bottom:14px}.image-gallery-dropzone .image-sort-hint>div{display:flex;align-items:center;justify-content:flex-end;gap:12px}.image-gallery-dropzone .image-sort-hint small{color:rgba(255,255,255,.6)}.image-gallery-dropzone .image-sort-hint span{color:#fff}.image-gallery-dropzone .ghost-button{padding:9px 13px;color:#fff;border-color:rgba(255,255,255,.2)} #editDialog .image-editor{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));align-content:start;gap:10px;min-height:260px;max-height:430px;overflow-y:auto;overflow-x:hidden;padding:4px 4px 12px} #editDialog .image-editor figure{width:100%;height:auto;aspect-ratio:1/1.08;min-width:0;flex:none;position:relative;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;border:2px solid transparent;border-radius:14px;overflow:hidden}#editDialog .image-editor figure.is-cover{border-color:var(--rose);box-shadow:0 0 0 3px rgba(221,40,102,.18)}#editDialog .image-editor figure:hover:not(.is-cover){transform:translateY(-2px);border-color:rgba(255,255,255,.25)}#editDialog .image-editor figure .cover-badge{position:absolute;right:5px;top:5px;background:var(--rose);color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:8px;z-index:2} .upload-progress{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--rose) 30%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--surface) 88%,transparent)} .upload-progress[hidden]{display:none}.upload-progress>div:last-child{display:grid;gap:4px}.upload-progress small{color:var(--muted)} .upload-progress-ring{--upload-angle:0deg;position:relative;width:54px;height:54px;flex:0 0 54px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--rose) var(--upload-angle),color-mix(in srgb,var(--line) 75%,transparent) 0)} .upload-progress-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}.upload-progress-ring span{position:relative;z-index:1;font-size:11px;font-weight:800;color:var(--text)} .video-upload-progress-copy{min-width:0;flex:1;display:grid;gap:6px}.video-upload-progress-copy strong{font-size:13px;color:var(--text)}.video-upload-progress-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-progress-track{height:7px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--line) 72%,transparent);box-shadow:inset 0 1px 2px rgba(20,16,20,.08)}.upload-progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#dd2866,#f36f9a);transition:width .2s ease} @media(max-width:900px){#editDialog{width:min(760px,calc(100% - 28px));height:calc(100vh - 20px);max-height:calc(100vh - 20px);margin:auto}#editDialog .dialog-heading{padding-right:0}.dialog-save-top{right:70px;top:18px;padding:11px 13px;font-size:12px}.image-gallery-dropzone{padding:13px;min-height:320px}.image-gallery-dropzone .image-sort-hint>div{display:grid;justify-items:end}#editDialog .image-editor{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));min-height:230px;max-height:390px}} .product-card:not(.video-card) .product-cover{aspect-ratio:3/4} @media(min-width:681px){.hero h1{padding-bottom:.16em;overflow:visible}.hero h1 em{line-height:1.02;padding-bottom:.08em}} @media(max-width:680px){ .brand{max-width:calc(100% - 88px);min-width:0}.brand>span{min-width:0}.brand b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:1.1} .music-player{position:absolute;left:auto;right:12px;top:176px;bottom:auto;transform:none;width:126px;height:40px;padding:4px 6px;border-radius:14px;background:rgba(28,22,32,.78);box-shadow:0 10px 30px rgba(18,11,22,.22);backdrop-filter:blur(18px)} .music-player .track-title{max-width:80px}.music-player .track-title span{font-size:9px}.music-player .track-title small{font-size:8px} body.mobile-scrolled .music-player{opacity:0;pointer-events:none} } .admin-dock-toggle{display:none} @media(max-width:680px){ .topbar{position:sticky;top:4px;width:calc(100% - 12px);min-height:44px;height:44px;margin-top:4px;padding:4px 8px;border-radius:10px;transition:transform .3s ease,opacity .3s ease;z-index:24} body.mobile-scrolled .topbar{transform:translateY(-56px);opacity:0;pointer-events:none} .brand{gap:6px;max-width:130px}.brand img{width:30px;height:30px;border-radius:9px}.brand b{font-size:12px;line-height:1.12}.brand small{display:none} .top-actions{gap:4px;margin-left:auto}.top-actions .status-chip,.top-actions .control-cluster{display:none}.admin-button{padding:8px 10px;font-size:10px;border-radius:9px;max-width:70px} .music-player{position:absolute;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);z-index:2;width:116px;min-width:0;height:38px;padding:3px 5px;gap:2px;border-radius:13px;box-shadow:none;background:rgba(28,22,32,.62)} .music-player #previousTrack,.music-player #nextTrack,.music-player .playlist-button{display:none}.music-player .music-play{width:30px;height:30px;flex:0 0 30px;font-size:11px}.music-player .track-title{max-width:72px;padding:2px 4px}.track-title span{font-size:9px}.track-title small{font-size:8px} .hero{padding:38px 2px 26px}.hero h1 span{font-size:40px}.hero h1 em{font-size:46px}.hero>p,.hero-copy>p{margin-top:12px}.search{height:50px} .catalog-shell{width:calc(100% - 12px);margin-bottom:76px}.media-switch{height:43px;margin-bottom:7px}.media-switch button{padding:9px 12px;font-size:12px} .category-bar{top:52px;z-index:23;height:38px;padding:3px;gap:2px;border-radius:5px;transition:top .3s ease}.category-button{padding:8px 12px;font-size:11px;border-radius:4px}.category-button::before{border-radius:4px} body.mobile-scrolled .category-bar{top:6px} .catalog-toolbar{padding:13px 3px 9px;font-size:10px}.catalog-toolbar select{padding:7px 9px;font-size:10px} .product-grid{gap:7px}.product-card{border-radius:18px}.product-copy{padding:8px 9px 10px}.product-code{font-size:9px;margin-bottom:3px}.product-copy h3{font-size:13px;line-height:1.16}.product-meta{margin-top:6px;font-size:9px}.product-meta span:last-child{margin-right:25px}.pick-toggle{right:7px;bottom:7px;width:25px;height:25px;font-size:22px} .install-prompt{right:8px;bottom:8px;left:auto;width:50px;height:50px;border-radius:14px}.install-action{border-radius:12px;font-size:10px}.install-dismiss{right:-5px;top:-5px;width:18px;height:18px;font-size:12px} .admin-dock{left:8px;right:8px;bottom:8px;transform:none;max-width:none;height:48px;padding:4px;gap:1px;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;border-radius:16px;transition:width .25s,right .25s,left .25s}.admin-dock>span{display:none}.admin-dock button{padding:8px 9px;border-radius:11px;font-size:10px}.admin-dock-toggle{display:block!important;position:sticky;left:0;flex:0 0 38px;width:38px;height:38px;padding:0!important;background:var(--rose)!important;color:#fff!important;font-size:17px!important;z-index:2} .admin-dock.collapsed{left:auto;right:9px;width:46px;height:46px;padding:4px;overflow:hidden;border-radius:15px}.admin-dock.collapsed>button:not(.admin-dock-toggle),.admin-dock.collapsed>span{display:none}.admin-dock.collapsed .admin-dock-toggle{position:static} .admin-dock:not([hidden]):not(.collapsed)+.picks-fab{display:none} } /* Product cover editor */ .product-cover-media{position:absolute;inset:0;display:block;overflow:hidden} .product-cover-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--cover-x,50%) var(--cover-y,50%);transform:scale(var(--cover-zoom,1));transform-origin:var(--cover-x,50%) var(--cover-y,50%);transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease} .product-card:hover .product-cover-media img{transform:scale(var(--cover-zoom,1))} .product-cover-media img.lazy-image{opacity:0} .product-cover-media img.lazy-image[src]{opacity:1} .cover-editor{margin-top:4px;padding:18px;border:1px solid rgba(205,42,108,.3);border-radius:24px;background:rgba(27,20,34,.52)} .cover-editor-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px} .cover-editor-heading>div{display:grid;gap:5px} .cover-editor-heading strong{font-size:18px;color:#fff} .cover-editor-heading small{color:var(--muted);line-height:1.55} .cover-editor-layout{display:grid;grid-template-columns:minmax(260px,1fr) minmax(180px,280px);gap:20px;align-items:start} .cover-preview{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);display:grid;place-items:center;color:var(--muted);cursor:default;touch-action:none;user-select:none} .cover-preview.has-image{cursor:grab} .cover-preview.is-adjusting{cursor:grabbing} .cover-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--cover-x,50%) var(--cover-y,50%);transform:scale(var(--cover-zoom,1));transform-origin:var(--cover-x,50%) var(--cover-y,50%);pointer-events:none} .cover-controls{min-width:0;display:grid;gap:16px} .cover-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px;max-height:310px;overflow:auto;padding:3px} .cover-choice{position:relative;aspect-ratio:3/4;padding:0;border:2px solid transparent;border-radius:14px;overflow:hidden;background:#17131c;cursor:pointer;opacity:.7;transition:.2s} .cover-choice:hover,.cover-choice.selected{opacity:1;transform:translateY(-1px)} .cover-choice.selected{border-color:#ed2d78;box-shadow:0 0 0 3px rgba(237,45,120,.16)} .cover-choice img{width:100%;height:100%;display:block;object-fit:cover} .cover-choice span{position:absolute;left:6px;top:6px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:rgba(18,14,22,.78);color:#fff;font-size:11px;font-weight:800} .cover-zoom-label{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;color:#fff} .cover-zoom-label output{color:#ed2d78;font-variant-numeric:tabular-nums} #coverZoom{width:100%;accent-color:#ed2d78} :root[data-theme="light"] .cover-editor{color:#fff;background:rgba(34,25,42,.94);border-color:rgba(221,40,102,.42)} :root[data-theme="light"] .cover-editor-heading small,:root[data-theme="light"] .cover-preview{color:rgba(255,255,255,.8)} :root[data-theme="light"] .cover-editor .ghost-button{color:#fff;border-color:rgba(255,255,255,.24)} @media(max-width:700px){.cover-editor{padding:14px;border-radius:20px}.cover-editor-layout{grid-template-columns:minmax(130px,1fr) minmax(120px,200px);gap:12px}.cover-picker{grid-template-columns:repeat(3,minmax(48px,1fr));max-height:230px}.cover-editor-heading small{font-size:11px}} /* Video poster editor tabs and capture preview */ .video-poster-tabs{display:flex;gap:6px;margin-bottom:10px} .poster-tab{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:transparent;color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;transition:.2s} .poster-tab.active{background:var(--text);color:var(--bg);border-color:transparent} .video-capture-preview{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;margin-bottom:10px} .video-capture-preview video{width:100%;height:100%;object-fit:contain;display:block} #videoCaptureSeek{width:100%;accent-color:var(--accent);margin-bottom:10px} #videoCoverZoom{width:100%;accent-color:#ed2d78} /* Final mobile music control: keep the header readable and expose only one note button. */ @media(max-width:680px){ .music-player{ position:absolute!important; left:50%!important; right:auto!important; top:50%!important; bottom:auto!important; transform:translate(-50%,-50%)!important; z-index:2!important; width:36px!important; min-width:36px!important; max-width:36px!important; height:36px!important; padding:3px!important; gap:0!important; border-radius:50%!important; overflow:hidden!important; background:rgba(28,22,32,.72)!important; box-shadow:none!important; } .music-player #previousTrack, .music-player #nextTrack, .music-player .track-title, .music-player .playlist-button{display:none!important} .music-player .music-play{ display:grid!important; place-items:center!important; width:30px!important; min-width:30px!important; height:30px!important; padding:0!important; border-radius:50%!important; font-size:0!important; } .music-player .music-play::before{ content:'\266A'; font-size:17px; line-height:1; color:#fff; } } /* Frosted glass topbar: stays readable over scrolled content */ .topbar.glass { background: color-mix(in srgb, var(--panel) 78%, transparent); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(18, 11, 22, 0.12); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); transition: top .35s cubic-bezier(.22,.85,.25,1), width .35s cubic-bezier(.22,.85,.25,1), margin .35s cubic-bezier(.22,.85,.25,1), border-radius .35s cubic-bezier(.22,.85,.25,1), background .35s ease, padding .35s ease; } .topbar .brand, .topbar .top-actions { transition: opacity .28s ease, transform .28s ease, height .28s ease; } /* Scrolled desktop: collapse topbar to a minimal frosted strip, hide brand/actions */ body.page-scrolled .topbar { top: 0; width: 100%; margin: 0 auto; border-radius: 0; border-width: 0 0 1px 0; min-height: 0; height: auto; padding-top: 6px; padding-bottom: 6px; background: color-mix(in srgb, var(--panel) 68%, transparent); backdrop-filter: blur(20px) saturate(160%); transition: top .3s ease, width .3s ease, margin .3s ease, border-radius .3s ease, min-height .3s ease, height .3s ease, padding .3s ease, background .3s ease, backdrop-filter .3s ease; } body.page-scrolled .topbar .brand, body.page-scrolled .topbar .top-actions { opacity: 0; pointer-events: none; transform: translateY(-6px); height: 0; overflow: hidden; } body.page-scrolled .category-bar { top: 6px; z-index: 30; } /* Light mode: clean white topbar */ :root[data-theme="light"] .topbar.glass { background: rgba(255,255,255,.92); border-color: rgba(0,0,0,.08); box-shadow: 0 2px 14px rgba(0,0,0,.06); backdrop-filter: blur(14px) saturate(140%); } :root[data-theme="light"] body.page-scrolled .topbar { background: rgba(255,255,255,.9); } /* Light mode: Samuel World nav switch contrast fix */ :root[data-theme="light"] .world-section-switch { background: rgba(255,255,255,.85); border-color: rgba(0,0,0,.1); box-shadow: 0 2px 12px rgba(0,0,0,.06); } :root[data-theme="light"] .world-section-switch button { color: #555; } :root[data-theme="light"] .world-section-switch button[aria-selected="true"] { color: #dd2866; } /* Hero carousel — MUST match catalog-shell width exactly */ .hero { width: min(1180px, calc(100% - 32px)) !important; margin: 0 auto; padding: 12px 0 0; display: flex; flex-direction: column; gap: 16px; transition: width .5s cubic-bezier(.22,.85,.25,1); } .hero-carousel { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 5.4; min-height: 220px; max-height: 420px; background: linear-gradient(145deg, #fff5f9, #f7f1ff); } .hero-carousel::before { display: none; } .hero-carousel-track { position: relative; height: 100%; } .hero-carousel-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .65s ease-in-out; } .hero-carousel-slide.active { opacity: 1; pointer-events: auto; } .hero-carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-carousel-dots { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 7px; z-index: 3; } .hero-carousel-dots button { width: 8px; height: 8px; border: 0; border-radius: 8px; background: rgba(255,255,255,.45); padding: 0; transition: .25s; } .hero-carousel-dots button.active { width: 24px; background: #fff; } /* Hero feature cards: News / Activities / Contact */ .hero-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: calc(100% - 32px); margin: 0 auto; } .feature-card { position: relative; min-height: 62px; padding: 8px 14px; border-radius: 10px; background: var(--panel-strong); border: 1px solid transparent; box-shadow: 0 2px 12px rgba(221,40,102,.08), 0 0 0 1px rgba(221,40,102,.04); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--text); transition: transform .25s, box-shadow .25s, border-color .25s; } .feature-card::before { display: none; } .feature-card:hover { transform: translateY(-2px); } /* 三张小轮播卡片的柔和彩色阴影（与左侧导航方案 C 同风格） */ .feature-card.news-card { box-shadow: 0 8px 20px rgba(14, 165, 233, .12), 0 1px 4px rgba(14, 165, 233, .06) !important; border-color: rgba(14, 165, 233, .18) !important; } .feature-card.news-card:hover { box-shadow: 0 12px 28px rgba(14, 165, 233, .18), 0 2px 8px rgba(14, 165, 233, .1) !important; } .feature-card.activity-card { box-shadow: 0 8px 20px rgba(236, 72, 153, .12), 0 1px 4px rgba(236, 72, 153, .06) !important; border-color: rgba(236, 72, 153, .18) !important; } .feature-card.activity-card:hover { box-shadow: 0 12px 28px rgba(236, 72, 153, .18), 0 2px 8px rgba(236, 72, 153, .1) !important; } .feature-card.contact-card { box-shadow: 0 8px 20px rgba(234, 179, 8, .12), 0 1px 4px rgba(234, 179, 8, .06) !important; border-color: rgba(234, 179, 8, .22) !important; } .feature-card.contact-card:hover { box-shadow: 0 12px 28px rgba(234, 179, 8, .18), 0 2px 8px rgba(234, 179, 8, .1) !important; } .feature-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; position: relative; z-index: 1; } .feature-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 500; letter-spacing: .12em; padding: 5px 10px; border-radius: 999px; text-transform: uppercase; } .news-card .feature-badge { background: rgba(221,40,102,.10); color: var(--accent); } .activity-card .feature-badge { background: rgba(131,87,215,.10); color: var(--accent-2); } .contact-card .feature-badge { background: rgba(60,60,60,.08); color: var(--muted); } .feature-more { font-size: 11px; color: var(--muted); text-decoration: none; font-weight: 400; transition: color .2s; } .feature-more:hover { color: var(--accent); } .feature-slider { position: relative; flex: 1; min-height: 70px; overflow: hidden; border-radius: 14px; } .feature-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s cubic-bezier(.22,.85,.25,1); text-decoration: none; color: var(--text); cursor: pointer; } .feature-slide.active { opacity: 1; transform: translateY(0); z-index: 1; } .feature-slide img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; display: block; } .feature-slide-text { min-width: 0; } .feature-slide-text strong { display: block; font-size: 13px; font-weight: 400; line-height: 1.3; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .feature-slide-text small { font-size: 10px; color: var(--muted); font-weight: 400; } .feature-contact-body { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding-left: 4px; } .feature-contact-body strong { font-size: 17px; font-weight: 800; letter-spacing: -.01em; } .feature-contact-body small { font-size: 12px; color: var(--muted); font-weight: 500; } /* Removed old quick links / home-promos */ /* Section heading */ .section-heading { display: none; } .section-heading small { display: block; font-size: 10px; letter-spacing: .25em; color: var(--accent); font-weight: 800; margin-bottom: 6px; } .section-heading h2 { margin: 0; font-size: 26px; font-weight: 850; letter-spacing: -.03em; } .section-heading h2 span { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 8px; letter-spacing: 0; } .view-more { font-size: 13px; color: var(--muted); text-decoration: none; font-weight: 700; transition: color .2s; } .view-more:hover { color: var(--accent); } /* Product card redesign: tags and price */ .product-card { background: var(--panel-strong); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.05); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; } .product-card:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(0,0,0,.1); } .product-cover { aspect-ratio: 1/1.05; } .product-copy { padding: 13px 13px 15px; } .product-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; } .product-tags span { font-size: 10px; font-weight: 750; padding: 3px 8px; border-radius: 999px; background: rgba(221,40,102,.08); color: var(--accent); } .product-copy h3 { font-size: 14px; font-weight: 400; line-height: 1.25; margin: 0 0 8px; } .product-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; } .product-price { font-size: 13px; font-weight: 800; color: var(--accent); } .product-date { font-size: 11px; font-weight: 500; color: var(--muted); } /* Refined homepage typography: bold + light pairing */ .section-heading small { font-weight: 600; letter-spacing: .32em; opacity: .85; } .section-heading h2 { font-weight: 900; letter-spacing: -.04em; } .section-heading h2 span { font-weight: 400; letter-spacing: .02em; } .view-more { font-weight: 600; letter-spacing: .02em; } .promo-header .promo-badge { font-weight: 700; letter-spacing: .12em; } .promo-more { font-weight: 500; letter-spacing: .02em; } .promo-card strong { font-weight: 700; } .promo-card small { font-weight: 400; } .quick-link { font-weight: 600; } .quick-link i { font-weight: 400; } .product-tags span { font-weight: 600; } .product-copy h3 { font-weight: 400; letter-spacing: -.01em; } /* Smaller search box */ .search.mini { height: 46px; max-width: 520px; margin: 0 auto; border-radius: 14px; padding: 0 14px; background: rgba(255,255,255,.9); } .search.mini > span { font-size: 22px; } .search.mini input { font-size: 14px; } .search.mini kbd { font-size: 10px; padding: 4px 6px; } .search-bar-wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto 12px; display: flex; justify-content: center; } @media(max-width:680px){ .topbar{height:44px;min-height:44px;top:4px;margin-top:4px;padding:4px 10px;gap:6px} .brand{max-width:none;min-width:0;flex:1;gap:6px} .brand img{width:30px;height:30px;border-radius:9px} .brand b{font-size:12px;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .top-actions{flex:0 0 auto;gap:4px;margin-left:0} .top-actions .status-chip{display:none} .top-actions .control-cluster{display:flex;align-items:center} .top-actions .control-cluster > small{display:none} .top-actions .segmented.compact{width:58px;border-radius:10px;padding:3px;background:var(--panel-strong)} .top-actions .segmented.compact i{border-radius:8px} .top-actions .segmented.compact button{padding:5px 2px;font-size:9px;border-radius:8px} .admin-button{padding:6px 8px;font-size:9px;border-radius:8px;max-width:none} .music-player{ position:static!important; transform:none!important; width:34px!important; min-width:34px!important; max-width:34px!important; height:34px!important; padding:3px!important; border-radius:50%!important; background:var(--panel-strong)!important; border:1px solid var(--line)!important; box-shadow:none!important } .music-player #previousTrack,.music-player #nextTrack,.music-player .track-title,.music-player .playlist-button{display:none!important} .music-player .music-play{ display:grid!important; place-items:center!important; width:28px!important; height:28px!important; min-width:28px!important; padding:0!important; border-radius:50%!important; font-size:0!important } .music-player .music-play::before{content:'\266A';font-size:15px;line-height:1;color:#fff} } /* Video viewer play overlay */ .video-player-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden} .video-player-container video{width:100%;height:100%;object-fit:contain} .video-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);border:0;padding:0;margin:0;cursor:pointer;z-index:2;transition:opacity .2s ease} .video-play-overlay.hidden{opacity:0;pointer-events:none} .video-play-overlay svg{width:72px;height:72px;fill:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));transition:transform .2s ease} .video-play-overlay:hover svg{transform:scale(1.12)} @media(max-width:980px){.video-play-overlay svg{width:58px;height:58px}} /* Video dropzone */ .admin-form .full{grid-column:1/-1} .video-dropzone{display:flex;flex-direction:column;gap:8px;cursor:pointer} .video-dropzone>span{font-size:14px;color:var(--muted)} .video-dropzone-area{min-height:88px;border:1.5px dashed var(--line);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;background:var(--panel);transition:background .2s,border-color .2s} .video-dropzone.is-dragging .video-dropzone-area{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)} .video-dropzone.has-file .video-dropzone-area{border-style:solid;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)} .video-dropzone-area span{font-size:15px;color:var(--text)} .video-dropzone-area small{font-size:12px;color:var(--muted)} .video-compress-status{display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px 14px;border-radius:12px;background:var(--panel-strong)} .video-compress-status progress{flex:1;height:8px;border-radius:4px;accent-color:var(--accent)} .video-compress-status span{font-size:13px;color:var(--muted);white-space:nowrap} /* Samuel World — an isolated, on-demand game showcase. */ .media-switch{--segments:3;width:min(760px,100%)} .media-switch i{width:calc((100% - 10px)/3)} .segmented[data-position="2"] i{transform:translateX(200%)} .segmented.compact{--segments:2} .segmented.compact i{width:calc((100% - 10px)/2)} .catalog-shell{transition:width .5s cubic-bezier(.22,.85,.25,1)} body.world-open .catalog-shell{width:min(1480px,calc(100% - 40px))} body.world-open .hero{width:min(1480px,calc(100% - 40px))} /* Non-world-open: force hero to always match catalog-shell width */ body:not(.world-open) .hero{width:min(1180px,calc(100% - 32px))!important} body.world-open .home-promos, body.world-open .quick-links, body.world-open .section-heading{display:none} body.world-open .hero, body.world-open .search-bar-wrap{display:none} body.world-open .aurora{opacity:.18} body.world-open .media-switch{background:rgba(18,20,42,.78);border-color:rgba(255,255,255,.13);box-shadow:0 18px 60px rgba(13,15,38,.28)} body.world-open .media-switch button{color:rgba(255,255,255,.62)} body.world-open .media-switch button[aria-selected="true"]{color:#fff} .samuel-world[hidden]{display:none} .samuel-world{position:relative;isolation:isolate;overflow:hidden;min-height:760px;margin-top:14px;padding:clamp(32px,5vw,76px);border:1px solid rgba(255,255,255,.14);border-radius:42px;background:radial-gradient(circle at 82% 8%,rgba(86,217,239,.22),transparent 26%),radial-gradient(circle at 8% 88%,rgba(249,103,164,.24),transparent 30%),linear-gradient(145deg,#11142d 0%,#1c1b48 46%,#13192e 100%);color:#fff;box-shadow:0 40px 100px rgba(26,22,55,.32)} .samuel-world::after{content:"";position:absolute;z-index:-3;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 88%)} .world-stars{position:absolute;z-index:-2;inset:0;pointer-events:none}.world-stars i{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff7b4;box-shadow:0 0 18px rgba(255,247,180,.9);animation:worldTwinkle 3.2s ease-in-out infinite}.world-stars i:nth-child(1){left:9%;top:18%}.world-stars i:nth-child(2){left:32%;top:9%;animation-delay:-1.1s}.world-stars i:nth-child(3){right:12%;top:25%;animation-delay:-2.2s}.world-stars i:nth-child(4){left:48%;bottom:12%;animation-delay:-.6s}.world-stars i:nth-child(5){right:5%;bottom:31%;animation-delay:-1.7s}.world-stars i:nth-child(6){left:3%;bottom:16%;animation-delay:-2.7s}@keyframes worldTwinkle{0%,100%{opacity:.25;transform:scale(.65)}50%{opacity:1;transform:scale(1.2)}} .world-heading{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.58fr);gap:56px;align-items:end;margin-bottom:44px}.world-kicker{display:block;margin-bottom:18px;color:#8ce5f3;font-size:11px;font-weight:850;letter-spacing:.32em}.world-heading h2{margin:0;font-size:clamp(46px,6vw,94px);font-weight:850;line-height:.9;letter-spacing:-.065em}.world-heading h2 em{color:#ff83b8;font-style:normal;text-shadow:0 12px 40px rgba(255,65,143,.25)}.world-heading p{max-width:420px;margin:0 0 5px;color:rgba(255,255,255,.66);font-size:15px;line-height:1.85} .world-marquee{position:relative;margin:0 calc(clamp(32px,5vw,76px)*-1) 38px;overflow:hidden;border-top:1px solid rgba(255,255,255,.11);border-bottom:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.035);white-space:nowrap}.world-marquee span{display:block;padding:12px 0;color:rgba(255,255,255,.3);font-size:11px;font-weight:800;letter-spacing:.5em;transform:translateX(7%)} .world-game-grid{position:relative;display:grid;grid-template-columns:minmax(0,2.25fr) minmax(240px,.75fr);gap:20px}.world-game-featured{display:grid;grid-template-columns:minmax(300px,1.12fr) minmax(280px,.88fr);min-height:430px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:32px;background:rgba(255,255,255,.075);box-shadow:inset 0 1px rgba(255,255,255,.08),0 24px 60px rgba(8,10,29,.26);backdrop-filter:blur(18px)} .world-game-cover{position:relative;overflow:hidden;min-height:430px;padding:0;border:0;background:#51c3e6;cursor:pointer}.world-game-cover img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .8s cubic-bezier(.22,.85,.25,1),filter .5s}.world-game-cover:hover img{transform:scale(1.055);filter:saturate(1.08)}.world-cover-shine{position:absolute;inset:0;background:linear-gradient(118deg,transparent 25%,rgba(255,255,255,.28) 46%,transparent 64%);transform:translateX(-120%);transition:transform .8s}.world-game-cover:hover .world-cover-shine{transform:translateX(120%)}.world-game-number,.world-game-state{position:absolute;top:18px;padding:9px 12px;border-radius:999px;background:rgba(14,17,40,.7);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(12px);color:#fff;font-size:9px;font-weight:850;letter-spacing:.14em}.world-game-number{left:18px}.world-game-state{right:18px;color:#fff3a8}.world-play-orb{position:absolute;right:20px;bottom:20px;width:62px;height:62px;display:grid;place-items:center;border-radius:50%;background:#ff4c98;color:#fff;font-size:18px;box-shadow:0 16px 36px rgba(255,55,142,.42);transition:transform .3s}.world-game-cover:hover .world-play-orb{transform:scale(1.08) rotate(4deg)} .world-game-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vw,52px)}.world-game-label{display:flex;align-items:center;gap:12px;color:#8ce5f3;font-size:9px;font-weight:800;letter-spacing:.18em}.world-game-label i{flex:1;height:1px;background:linear-gradient(90deg,rgba(140,229,243,.55),transparent)}.world-game-copy h3{margin:24px 0 15px;font-size:clamp(30px,3vw,48px);line-height:1.05;letter-spacing:-.045em}.world-game-copy p{margin:0;color:rgba(255,255,255,.64);font-size:13px;line-height:1.8}.world-game-tags{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0}.world-game-tags span{padding:7px 10px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.055);color:rgba(255,255,255,.72);font-size:10px}.world-enter-button{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:auto;padding:15px 18px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:#fff;color:#171832;font-weight:850;cursor:pointer;transition:transform .25s,box-shadow .25s}.world-enter-button:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(255,255,255,.13)}.world-enter-button b{font-size:17px} .world-next-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:430px;padding:30px;overflow:hidden;border:1px dashed rgba(255,255,255,.2);border-radius:32px;background:linear-gradient(165deg,rgba(255,129,183,.1),rgba(107,219,238,.055));color:rgba(255,255,255,.74)}.world-next-card>span{position:absolute;left:28px;top:28px;font-size:9px;font-weight:850;letter-spacing:.2em}.world-next-mark{position:absolute;right:-18px;top:52px;color:rgba(255,231,131,.2);font-size:150px;line-height:1;transform:rotate(12deg)}.world-next-card h3{position:relative;margin:0 0 14px;color:#fff;font-size:30px;line-height:1.08;letter-spacing:-.04em}.world-next-card p{position:relative;margin:0;font-size:12px;line-height:1.7} .world-footer{position:relative;display:flex;justify-content:space-between;gap:20px;margin-top:34px;color:rgba(255,255,255,.38);font-size:10px;letter-spacing:.2em}.world-footer small{font-size:10px;letter-spacing:.08em} @media(max-width:980px){.world-heading{grid-template-columns:1fr;gap:22px}.world-heading p{max-width:620px}.world-game-grid{grid-template-columns:1fr}.world-next-card{min-height:240px}.world-game-featured{grid-template-columns:1fr 1fr}} @media(max-width:680px){body.world-open .catalog-shell{width:calc(100% - 12px)}.media-switch{width:100%;border-radius:16px}.media-switch button{padding:10px 5px;font-size:10px;line-height:1.2}.samuel-world{min-height:0;margin-top:8px;padding:28px 16px;border-radius:26px}.world-heading{margin-bottom:26px}.world-heading h2{font-size:42px}.world-heading p{font-size:13px}.world-marquee{margin:0 -16px 22px}.world-game-featured{grid-template-columns:1fr;border-radius:24px}.world-game-cover{min-height:350px}.world-game-copy{padding:28px 22px}.world-game-copy h3{font-size:33px}.world-next-card{min-height:220px;border-radius:24px}.world-footer{display:grid;line-height:1.6}} @media(prefers-reduced-motion:reduce){.world-stars i{animation:none}.world-game-cover img,.world-cover-shine,.world-play-orb{transition:none}} /* Samuel World navigation mascot, subsection switch and micro-film archive. */ .world-nav-mascot{position:absolute;z-index:6;left:calc(66.666% + 3px);top:-92px;width:150px;height:auto;opacity:0;pointer-events:none;filter:drop-shadow(0 14px 16px rgba(10,11,28,.32));transform:translate(-8%,18px) scale(.8) rotate(-4deg);transform-origin:50% 100%;transition:opacity .28s ease,transform .55s cubic-bezier(.2,.9,.25,1.25)} body.world-open .world-nav-mascot{opacity:1;transform:translate(-8%,0) scale(1) rotate(0);animation:worldMascotHello .8s .45s ease-in-out both} @keyframes worldMascotHello{0%,100%{rotate:0deg}35%{rotate:-3deg}70%{rotate:2deg}} .world-section-switch{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;width:min(480px,100%);margin:-10px 0 36px;padding:5px;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:rgba(7,10,29,.35);box-shadow:inset 0 1px rgba(255,255,255,.05)} .world-section-switch i{position:absolute;z-index:-1;left:5px;top:5px;bottom:5px;width:calc((100% - 10px)/4);border-radius:15px;background:linear-gradient(135deg,#ff4b98,#c13282);box-shadow:0 10px 28px rgba(255,54,145,.28);transition:transform .42s cubic-bezier(.22,.85,.25,1);opacity:0} .world-section-switch[data-position="1"] i{transform:translateX(100%)} .world-section-switch button{display:grid;gap:2px;padding:12px 18px;border:0;background:transparent;color:rgba(255,255,255,.55);cursor:pointer;transition:color .25s}.world-section-switch button[aria-selected="true"]{color:#ff83b8}.world-section-switch button span{font-size:14px;font-weight:850}.world-section-switch button small{font-size:8px;letter-spacing:.18em;opacity:.68} #worldGamesPanel[hidden],.world-films-panel[hidden]{display:none} .world-films-panel{position:relative;padding-top:4px}.world-films-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;padding:0 0 30px;border-bottom:1px solid rgba(255,255,255,.1)}.world-films-heading span{display:block;margin-bottom:10px;color:#8ce5f3;font-size:9px;font-weight:850;letter-spacing:.25em}.world-films-heading h3{margin:0;color:#fff;font-size:clamp(34px,4vw,58px);letter-spacing:-.05em}.world-films-heading p{max-width:390px;margin:0;color:rgba(255,255,255,.58);font-size:13px;line-height:1.75}.world-film-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-top:28px}.world-film-grid .product-card{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.13);box-shadow:0 18px 45px rgba(8,10,29,.22)}.world-film-grid .product-copy h3{color:#fff}.world-film-grid .product-meta{color:rgba(255,255,255,.5)}.world-film-grid .product-code{color:#ff7cb6}.world-film-empty{padding:90px 20px;text-align:center;color:rgba(255,255,255,.48);font-size:14px} @media(max-width:980px){.world-film-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){.world-nav-mascot{left:64%;top:-61px;width:98px}.world-section-switch{margin-top:0;margin-bottom:24px}.world-section-switch button{padding:10px 6px}.world-films-heading{display:grid;gap:14px}.world-film-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding-top:20px}} @media(prefers-reduced-motion:reduce){body.world-open .world-nav-mascot{animation:none}} /* Music now lives only inside Samuel World. */ .world-section-switch{grid-template-columns:repeat(4,1fr);width:min(720px,100%)} .world-section-switch i{width:calc((100% - 10px)/4)} .world-section-switch[data-position="1"] i{transform:translateX(100%)} .world-section-switch[data-position="2"] i{transform:translateX(200%)} .world-section-switch[data-position="3"] i{transform:translateX(300%)} .world-music-panel[hidden]{display:none} .world-music-panel{position:relative;padding-top:4px}.world-music-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;padding:0 0 28px;border-bottom:1px solid rgba(255,255,255,.1)}.world-music-heading>div>span{display:block;margin-bottom:10px;color:#8ce5f3;font-size:9px;font-weight:850;letter-spacing:.25em}.world-music-heading h3{margin:0;color:#fff;font-size:clamp(34px,4vw,58px);letter-spacing:-.05em}.world-music-heading p{max-width:390px;margin:0;color:rgba(255,255,255,.58);font-size:13px;line-height:1.75} .world-now-playing{display:grid;grid-template-columns:86px minmax(0,1fr) auto;align-items:center;gap:20px;margin-top:28px;padding:16px;border:1px solid rgba(255,255,255,.14);border-radius:25px;background:linear-gradient(120deg,rgba(255,91,158,.13),rgba(116,221,240,.07));box-shadow:0 18px 45px rgba(8,10,29,.18)}.world-album-cover{position:relative;width:86px;height:86px;overflow:hidden;border-radius:20px;background:linear-gradient(145deg,#79dcf1,#ff88b9);box-shadow:0 12px 28px rgba(4,9,30,.26)}.world-album-cover img{width:100%;height:100%;object-fit:cover}.world-album-cover i{position:absolute;right:7px;bottom:7px;width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#ff4b98;color:#fff;font-style:normal;font-size:12px}.world-track-title{display:grid;min-width:0}.world-track-title small{color:#8ce5f3;font-size:8px;font-weight:850;letter-spacing:.2em}.world-track-title strong{margin:7px 0 5px;overflow:hidden;color:#fff;font-size:clamp(20px,2.5vw,32px);line-height:1.1;text-overflow:ellipsis;white-space:nowrap}.world-track-title span{color:rgba(255,255,255,.45);font-size:10px}.world-music-controls{display:flex;align-items:center;gap:7px}.world-music-controls button{width:42px;height:42px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(255,255,255,.07);color:#fff;font-size:19px;cursor:pointer}.world-music-controls button:disabled{opacity:.28;cursor:default}.world-music-controls .world-music-play{width:52px;height:52px;border:0;border-radius:50%;background:#ff4b98;box-shadow:0 12px 28px rgba(255,54,145,.3);font-size:14px} .world-playlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:18px}.world-track-card{display:grid;grid-template-columns:58px minmax(0,1fr) 34px;align-items:center;gap:13px;padding:9px;border:1px solid rgba(255,255,255,.11);border-radius:19px;background:rgba(255,255,255,.055);color:#fff;text-align:left;cursor:pointer;transition:transform .25s,border-color .25s,background .25s}.world-track-card:hover{transform:translateY(-2px);border-color:rgba(255,126,182,.48);background:rgba(255,255,255,.085)}.world-track-card.active{border-color:rgba(255,75,152,.65);box-shadow:0 0 0 2px rgba(255,75,152,.1)}.world-track-cover{position:relative;width:58px;height:58px;overflow:hidden;border-radius:15px;background:linear-gradient(145deg,#72d9ee,#ff82b5)}.world-track-cover img{width:100%;height:100%;display:block;object-fit:cover}.world-track-cover i{position:absolute;right:4px;bottom:4px;padding:3px 5px;border-radius:6px;background:rgba(13,16,42,.72);color:#fff;font-style:normal;font-size:7px}.world-track-name{display:grid;min-width:0}.world-track-name strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.world-track-name small{margin-top:5px;color:rgba(255,255,255,.38);font-size:7px;letter-spacing:.12em}.world-track-card>b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);color:#ff82b5;font-size:10px}.world-music-empty{grid-column:1/-1;padding:76px 20px;text-align:center;color:rgba(255,255,255,.45)} /* Comics / Grid manga panel inside Samuel World */ .world-comics-panel[hidden]{display:none} .world-comics-panel{position:relative;padding-top:4px}.world-comics-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;padding:0 0 28px;border-bottom:1px solid rgba(255,255,255,.1)}.world-comics-heading span{display:block;margin-bottom:10px;color:#f8e4a4;font-size:9px;font-weight:850;letter-spacing:.25em}.world-comics-heading h3{margin:0;color:#fff;font-size:clamp(34px,4vw,58px);letter-spacing:-.05em}.world-comics-heading p{max-width:390px;margin:0;color:rgba(255,255,255,.58);font-size:13px;line-height:1.75}.world-comics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:24px}@media(max-width:768px){.world-comics-grid{grid-template-columns:repeat(2,1fr);gap:10px}}@media(max-width:480px){.world-comics-grid{grid-template-columns:1fr}}.world-comic-card{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);cursor:pointer;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}.world-comic-card:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(8,10,29,.28)}.world-comic-card img{width:100%;display:block;aspect-ratio:9/16;object-fit:cover}.world-comic-card-caption{padding:8px 10px 0}.world-comic-card-caption strong{font-size:13px;font-weight:600;color:var(--text);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.world-comic-card-caption{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px}.world-comic-card-caption strong{color:#fff;font-size:15px;font-weight:700}.world-comic-card-caption small{color:rgba(255,255,255,.48);font-size:11px}.world-comic-empty{grid-column:1/-1;text-align:center;padding:70px 20px;color:rgba(255,255,255,.42);font-size:14px} @media(max-width:1160px){.topbar{padding-right:14px}} @media(max-width:680px){.world-section-switch{width:100%}.world-section-switch button{padding:9px 3px}.world-section-switch button span{font-size:11px}.world-section-switch button small{font-size:6px}.world-music-heading{display:grid;gap:14px}.world-now-playing{grid-template-columns:66px minmax(0,1fr);gap:13px;padding:12px}.world-album-cover{width:66px;height:66px;border-radius:16px}.world-music-controls{grid-column:1/-1;justify-content:center;padding-top:3px}.world-playlist{grid-template-columns:1fr}.world-track-title strong{font-size:19px}} .startup-splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;align-content:center;gap:12px;background:radial-gradient(circle at 50% 42%,#fff8f3 0,#f7dce7 44%,#d8c9ef 100%);color:#241923;transition:opacity .55s ease,visibility .55s ease}.startup-splash.is-ready{opacity:0;visibility:hidden;pointer-events:none}.startup-splash strong{font-size:22px;letter-spacing:.02em}.startup-splash small{color:#796b76;font-size:12px}.startup-logo{width:72px;height:72px;border-radius:24px;object-fit:cover;box-shadow:0 18px 42px rgba(115,55,89,.22);animation:splash-float 2.4s ease-in-out infinite}.startup-box{position:absolute;width:108px;height:78px;margin-top:12px;border-radius:14px 14px 20px 20px;background:linear-gradient(145deg,#ec5f93,#a853b9);box-shadow:0 24px 50px rgba(101,52,99,.2);transform:translateY(65px) rotate(-3deg);animation:box-wiggle 2.4s ease-in-out infinite}.startup-box::before{content:'';position:absolute;inset:-12px 7px auto;height:24px;border-radius:12px;background:#f8adca;transform:rotate(-8deg);transform-origin:right center;animation:box-open 2.4s ease-in-out infinite}.startup-box span,.startup-box i{position:absolute;top:28px;width:10px;height:10px;border-radius:50%;background:#ffe9a7}.startup-box span{left:33px}.startup-box i{right:33px}.startup-progress{width:180px;height:4px;margin-top:18px;border-radius:99px;background:rgba(255,255,255,.6);overflow:hidden}.startup-progress i{display:block;width:45%;height:100%;border-radius:inherit;background:#dd2866;animation:splash-progress 2.8s cubic-bezier(.2,.7,.2,1) forwards}@keyframes splash-float{50%{transform:translateY(-7px) rotate(2deg)}}@keyframes box-wiggle{50%{transform:translateY(65px) rotate(3deg)}}@keyframes box-open{45%,75%{transform:rotate(-18deg) translateY(-8px)}}@keyframes splash-progress{from{width:8%}to{width:92%}}@media(prefers-reduced-motion:reduce){.startup-box,.startup-logo,.startup-progress i{animation:none}.startup-progress i{width:92%}} .analytics-dialog{width:min(1120px,calc(100% - 28px));max-height:90vh;overflow:auto;padding:34px}.analytics-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:6px}.analytics-heading span,.analytics-panel-heading span{font-size:10px;letter-spacing:.2em;color:var(--accent);font-weight:900}.analytics-heading h2{margin:8px 0 5px;font-size:30px}.analytics-heading p{margin:0;color:var(--muted);font-size:12px}.analytics-updated{margin:0 0 18px;color:var(--muted);font-size:11px}.analytics-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:flex-end}.analytics-controls select{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:9px 12px;font-size:12px}.analytics-mode-switch{display:flex;gap:2px;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.analytics-mode-switch button{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:700;padding:7px 12px;border-radius:10px;transition:.2s}.analytics-mode-switch button.active{background:var(--text);color:var(--bg)}.ghost-button.danger{color:#d93a5e;border-color:rgba(217,58,94,.35)}.ghost-button.danger:hover{background:rgba(217,58,94,.08)}.primary-button.danger{background:linear-gradient(135deg,#e23d6b,#c21e4a)}.analytics-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.analytics-kpi,.analytics-panel{border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:18px}.analytics-kpi{display:grid;gap:5px}.analytics-kpi.is-empty{opacity:.45}.analytics-kpi small{color:var(--muted);font-size:12px}.analytics-kpi strong{font-size:30px}.analytics-kpi span{color:var(--muted);font-size:11px}.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.analytics-panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}.analytics-panel-heading h3{margin:6px 0 0;font-size:18px}.analytics-panel-heading>strong{font-size:13px;color:var(--muted)}.donut-layout{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:20px}.donut-chart{width:150px;height:150px;border-radius:50%;position:relative}.donut-chart::after{content:'';position:absolute;inset:30px;border-radius:50%;background:var(--panel)}.legend-list{display:grid;gap:11px}.legend-item{display:grid;grid-template-columns:9px 1fr auto;align-items:center;gap:8px;font-size:12px}.legend-item i{width:9px;height:9px;border-radius:50%}.legend-item span{color:var(--muted)}.legend-item small{color:var(--muted);font-weight:400}.bar-chart{height:190px;display:flex;align-items:end;gap:5px;padding:12px 2px 0;border-bottom:1px solid var(--line)}.bar-column{height:100%;flex:1;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:4px;min-width:0}.bar-column span{font-size:9px;color:var(--muted);min-height:11px}.bar-column i{width:100%;max-width:18px;min-height:4px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,var(--rose),#8f4ee4)}.bar-column small{height:14px;font-size:9px;color:var(--muted);white-space:nowrap}.analytics-summary{display:grid;gap:12px;color:var(--muted);font-size:13px;line-height:1.6}.analytics-summary p{margin:0;padding:11px 12px;border-radius:13px;background:var(--panel-strong)}.analytics-summary strong{color:var(--text)}.analytics-table-panel{margin-top:14px}.analytics-table-wrap{overflow:auto}.analytics-table-panel table{width:100%;border-collapse:collapse;font-size:12px;min-width:620px}.analytics-table-panel th,.analytics-table-panel td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.analytics-table-panel th{color:var(--muted);font-weight:600}.analytics-table-panel td{color:var(--text)} @media(max-width:680px){.analytics-dialog{padding:24px 16px 16px}.analytics-heading{display:grid;gap:12px}.analytics-controls{justify-content:flex-start}.analytics-controls select,.analytics-controls .ghost-button{flex:1;min-width:0}.analytics-kpis{grid-template-columns:1fr 1fr}.analytics-kpi strong{font-size:24px}.analytics-grid{grid-template-columns:1fr}.donut-layout{grid-template-columns:120px 1fr}.donut-chart{width:120px;height:120px}.donut-chart::after{inset:24px}} .analytics-table-wrap tr.is-admin td{background:rgba(221,40,102,.06)} /* 2026-08-14 theme polish: quieter mascot, pure-black gallery and metallic World surround. */ body{position:relative} main{position:relative;z-index:1} :root[data-theme="dark"]{--bg:#13162b;--panel:rgba(20,23,43,.7);--panel-strong:rgba(29,32,55,.95);--line:rgba(255,255,255,.1)} :root[data-theme="dark"] body:not(.world-open){background:linear-gradient(125deg,#111326 0%,#20233d 38%,#334360 64%,#12142a 100%)} :root[data-theme="dark"] body:not(.world-open) .aurora{opacity:.16} :root[data-theme="dark"] body:not(.world-open) .aurora i{filter:blur(110px);opacity:.24} :root[data-theme="light"] body.world-open{--bg:#181a31;--panel:rgba(24,27,51,.68);--panel-strong:rgba(35,39,68,.92);--text:#fffafd;--muted:#c3c7d8;--line:rgba(255,255,255,.13);background:linear-gradient(125deg,#17182e 0%,#272945 37%,#3b4d73 64%,#1a1c36 100%)} :root[data-theme="light"] body.world-open .aurora{opacity:.09} .world-nav-mascot{left:calc(66.666% + 14px);top:-42px;width:82px;aspect-ratio:3/2;filter:drop-shadow(0 8px 11px rgba(10,11,28,.28));transform:translate(-4%,9px) scale(.84);overflow:visible} .world-nav-mascot>img{display:block;width:100%;height:100%;object-fit:contain} .world-nav-mascot>i{position:absolute;z-index:2;inset:0;width:100%;height:100%;border-radius:0;background:url("assets/games/samuel-world-wave.png") center/contain no-repeat;box-shadow:none;clip-path:polygon(66% 44%,100% 43%,100% 100%,65% 100%);transform:none;transform-origin:76% 72%;opacity:0;transition:none} body.world-open .world-nav-mascot{transform:translate(-4%,0) scale(1);animation:none} .world-nav-mascot.is-cheering>img{animation:worldMascotSmile .9s ease both} .world-nav-mascot.is-cheering>i{opacity:1;animation:worldMascotPawWave .78s .08s ease-in-out both} .world-nav-mascot.is-cheering::after{content:"✦";position:absolute;z-index:4;right:4px;top:20px;color:#ffe788;font-size:9px;text-shadow:0 0 9px rgba(255,230,126,.9);animation:worldMascotSparkle .9s ease both} @keyframes worldMascotPawWave{0%,100%{transform:rotate(0)}25%{transform:rotate(-13deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-9deg)}} @keyframes worldMascotSmile{0%,100%{filter:none}45%{filter:brightness(1.08) saturate(1.14)}} @keyframes worldMascotSparkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}40%,70%{opacity:1;transform:scale(1.35) rotate(35deg)}} @media(max-width:680px){.world-nav-mascot{left:calc(66.666% + 6px);top:-30px;width:60px}} @media(prefers-reduced-motion:reduce){.world-nav-mascot.is-cheering>img,.world-nav-mascot.is-cheering>i,.world-nav-mascot.is-cheering::after{animation:none}} @media(max-width:680px){.world-game-featured{margin-inline:8px}.world-game-cover{min-height:270px}.world-play-orb{width:52px;height:52px;right:14px;bottom:14px}.world-game-number,.world-game-state{top:12px;padding:7px 9px}.world-game-number{left:12px}.world-game-state{right:12px}} /* ============================================================ Product Detail Page ============================================================ */ .product-detail-page{position:relative;z-index:2;display:none;padding:24px 0 80px;animation:detailPageIn .45s cubic-bezier(.22,.85,.25,1)} .product-detail-page:not([hidden]){display:block} @keyframes detailPageIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} .detail-page-inner{width:min(1320px,calc(100% - 40px));margin:0 auto} .detail-back{display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;padding:10px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel-strong);color:var(--text);font-size:14px;font-weight:700;transition:.22s} .detail-back:hover{background:var(--panel);transform:translateX(-3px)} .detail-back span:first-child{font-size:18px;line-height:1} /* Hero: gallery + info */ .detail-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:48px;align-items:start;margin-bottom:70px} .detail-gallery{position:sticky;top:96px;display:grid;gap:16px} .detail-main-image{position:relative;aspect-ratio:3/4;border-radius:28px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(246,222,232,.6));box-shadow:0 20px 60px rgba(74,49,64,.12);cursor:zoom-in} .detail-main-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)} .detail-main-image:hover img{transform:scale(1.02)} .detail-image-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:16px;background:rgba(255,255,255,.82);color:#241d23;font-size:28px;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.12);transition:.22s;opacity:0} .detail-main-image:hover .detail-image-nav{opacity:1} .detail-image-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)} .detail-image-nav:disabled{opacity:0!important;pointer-events:none} .detail-image-prev{left:16px} .detail-image-next{right:16px} .detail-thumbnails{display:flex;gap:10px;overflow:auto;padding:4px;scrollbar-width:thin;scrollbar-color:var(--rose) transparent} .detail-thumbnail{flex:0 0 76px;height:76px;border:2px solid transparent;border-radius:14px;overflow:hidden;background:var(--panel);padding:0;transition:.22s} .detail-thumbnail img{width:100%;height:100%;object-fit:cover;display:block} .detail-thumbnail:hover{transform:translateY(-2px)} .detail-thumbnail.active{border-color:var(--rose);background:rgba(221,40,102,.1)} /* Info panel */ .detail-info{display:grid;gap:22px;align-content:start;padding-top:8px} .detail-info-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .detail-page-code{font-size:15px;font-weight:800;letter-spacing:.04em;color:var(--rose)} .detail-page-category{font-size:12px;font-weight:700;color:var(--muted);padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel)} .detail-page-name{font-size:clamp(32px,3.6vw,52px);line-height:1.1;letter-spacing:-.045em;margin:0;font-weight:850} .detail-page-name-en{font-size:clamp(16px,1.5vw,20px);line-height:1.4;color:var(--muted);margin:0;font-weight:400;letter-spacing:.02em} .detail-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px} .detail-title-row>div{min-width:0} /* Detail sections */ .detail-section{display:grid;gap:18px;padding:26px;border:1px solid var(--line);border-radius:24px;background:var(--panel-strong);box-shadow:0 12px 34px rgba(74,49,64,.06)} .detail-section h3{margin:0;font-size:20px;font-weight:900;display:flex;align-items:center;gap:10px;letter-spacing:-.02em} .detail-section h3 span{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase} .detail-section dl{display:grid;gap:14px;margin:0} .detail-section .detail-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--line)} .detail-section .detail-row:last-child{padding-bottom:0;border-bottom:0} /* 详情页左侧标签（货号、箱规量、产地…）：与品名同一套极细纯黑字体 */ .detail-section dt { font-family: Inter, "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 13px; color: #111; font-weight: 300; white-space: nowrap; letter-spacing: .04em; -webkit-font-smoothing: antialiased; } .detail-section dd{font-size:15px;color:var(--text);font-weight:800;margin:0;text-align:right;word-break:break-word;letter-spacing:-.01em} .detail-section dd .detail-empty{color:var(--muted);font-weight:500;letter-spacing:.08em} /* Detail page pick toggle */ .detail-pick-toggle{flex:0 0 auto;width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--panel-strong);color:var(--text);cursor:pointer;transition:.2s;box-shadow:0 4px 14px rgba(74,49,64,.08)} .detail-pick-toggle svg{width:22px;height:22px} .detail-pick-toggle path{fill:transparent;stroke:currentColor;transition:.2s} .detail-pick-toggle:hover{transform:scale(1.08);border-color:var(--rose);color:var(--rose)} .detail-pick-toggle[aria-pressed="true"]{background:var(--rose);color:#fff;border-color:var(--rose);box-shadow:0 6px 20px rgba(236,95,147,.35)} .detail-pick-toggle[aria-pressed="true"] path{fill:#fff;stroke:#fff} .detail-pick-toggle[aria-disabled="true"]{opacity:.5;cursor:not-allowed;background:var(--panel);color:var(--muted);transform:none;box-shadow:none} /* Admin number inputs */ .admin-form input[type=number]{max-width:160px} /* Admin dimension inputs */ .dimension-label{display:grid;gap:8px} .dimension-inputs{display:flex;align-items:center;gap:8px} .dimension-inputs input{flex:1 1 0;min-width:90px;max-width:140px;padding:11px 8px;background:#fff!important;color:#111!important;border:1px solid var(--line);border-radius:12px;text-align:center;font-weight:700} .dimension-inputs>span{color:#111;font-weight:700;user-select:none} .dimension-unit{font-size:13px;font-weight:700;color:#111;white-space:nowrap} .weight-input{display:flex;align-items:center;gap:8px}.weight-input input{flex:1;min-width:0}.weight-input>span{font-size:13px;font-weight:700;color:#111;white-space:nowrap} /* Detail images section */ .detail-images-section{display:grid;gap:22px} .detail-images-section h3{margin:0;font-size:24px;font-weight:800;display:flex;align-items:center;gap:10px} .detail-images-section h3 span{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.06em} .detail-images{display:grid;gap:0;max-width:880px;margin:0 auto;width:100%} .detail-image-item{display:block;width:100%;cursor:zoom-in;overflow:hidden;line-height:0} .detail-image-item img{width:100%;height:auto;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)} .detail-image-item:hover img{transform:scale(1.01)} /* Dark theme: detail page text contrast fix (gray/black -> white) */ :root[data-theme="dark"] .product-detail-page{color:#fff} :root[data-theme="dark"] .detail-page-name-en{color:#ece6f1} :root[data-theme="dark"] .detail-page-category{color:#d9d1e2;border-color:rgba(255,255,255,.16)} :root[data-theme="dark"] .detail-section dt{color:#f2ecf6;font-weight:400} :root[data-theme="dark"] .detail-section dd{color:#fff} /* 暗色模式下纯黑不可读，反转为近白并略微加粗（细体白字在深底上会发虚） */ :root[data-theme="dark"] .product-card .product-copy h3 { color: #f2ecf6 !important; font-weight: 400 !important; } :root[data-theme="dark"] .detail-section h3 span, :root[data-theme="dark"] .detail-images-section h3 span{color:#cabfe0} :root[data-theme="dark"] .detail-section dd .detail-empty{color:#b6adb9} :root[data-theme="dark"] .detail-section h3{color:#fff} :root[data-theme="dark"] .detail-images-section h3{color:#fff} :root[data-theme="dark"] .dimension-inputs>span, :root[data-theme="dark"] .dimension-unit{color:#f2ecf6} :root[data-theme="dark"] .dimension-inputs input{color:#fff!important;background:rgba(255,255,255,.08)!important} /* Lazy load placeholders */ .detail-image-item img.lazy-image{opacity:0;transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1)} .detail-image-item img.lazy-image[src]{opacity:1} /* ============================================================ Detail Page Responsive ============================================================ */ @media(max-width:980px){ .detail-hero{grid-template-columns:1fr;gap:32px} .detail-gallery{position:static;top:auto} .detail-main-image{aspect-ratio:3/4;max-width:560px;margin:0 auto;width:100%} .detail-info{padding-top:0} } @media(max-width:680px){ .product-detail-page{padding:12px 0 60px} .detail-page-inner{width:calc(100% - 20px)} .detail-back{margin-bottom:18px;padding:8px 14px;font-size:13px} .detail-hero{gap:22px;margin-bottom:42px} .detail-main-image{border-radius:20px} /* 手机端改为手指左右滑动切换主图，隐藏左右箭头按钮 */ .detail-image-nav{display:none!important} .detail-main-image img{touch-action:pan-y} .detail-thumbnail{flex:0 0 60px;height:60px;border-radius:11px} .detail-page-name{font-size:28px} .detail-page-name-en{font-size:15px} .detail-section{padding:18px;gap:14px;border-radius:18px} .detail-section h3{font-size:17px} .detail-section .detail-row{gap:12px;padding-bottom:12px} .detail-section dt{font-size:12px} .detail-section dd{font-size:13px} .detail-images-section h3{font-size:19px;padding:0 10px} .detail-images{max-width:none} .detail-images-section{width:calc(100% + 20px);margin-left:-10px;margin-right:-10px} .detail-image-item img{border-radius:0} } /* ============================================================ Admin: Detail Images Editor & Product Meta Editor ============================================================ */ .detail-images-editor,.product-meta-editor{padding:20px;border:1px solid rgba(174,126,212,.28);border-radius:22px;background:linear-gradient(145deg,rgba(29,22,36,.96),rgba(42,28,51,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.035)} .detail-images-editor-heading,.product-meta-editor-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px} .detail-images-editor-heading>div,.product-meta-editor-heading>div{display:grid;gap:5px} .detail-images-editor-heading strong,.product-meta-editor-heading strong{font-size:18px;color:#fff} .detail-images-editor-heading small,.product-meta-editor-heading small{color:var(--muted);line-height:1.55} .detail-image-dropzone{min-height:260px;padding:16px;border:1px dashed rgba(255,255,255,.2);border-radius:18px;background:rgba(255,255,255,.03);transition:.22s} .detail-image-dropzone.is-dragging{border-color:var(--rose);background:rgba(221,40,102,.12)} .detail-image-dropzone .image-editor{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));align-content:start;gap:10px;min-height:180px;max-height:360px;overflow-y:auto;overflow-x:hidden;padding:4px 4px 12px} .detail-image-dropzone .image-editor figure{width:100%;height:auto;aspect-ratio:3/4;min-width:0;position:relative;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;border:2px solid transparent;border-radius:14px;overflow:hidden} .detail-image-dropzone .image-editor figure:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.25)} .detail-image-dropzone .image-editor figure img{width:100%;height:100%;object-fit:cover;pointer-events:none} .detail-image-dropzone .image-editor figure .image-index{position:absolute;left:6px;top:6px;min-width:24px;height:24px;padding:0 6px;border-radius:8px;background:rgba(20,16,20,.7);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800} .detail-image-dropzone .image-editor figure button{position:absolute;right:5px;top:5px;width:26px;height:26px;border:0;border-radius:9px;background:rgba(20,16,20,.72);color:#fff;font-size:14px} .product-meta-fields{display:grid;grid-template-columns:1fr;gap:18px} .product-meta-fields .meta-row{display:grid;grid-template-columns:1fr;gap:14px} .product-meta-fields .meta-row.two-col{grid-template-columns:repeat(2,minmax(0,1fr))} .product-meta-fields label{display:grid;gap:6px;font-size:12px;color:var(--muted);font-weight:700} .product-meta-fields input{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 12px;color:#111} .product-meta-fields input::placeholder{color:#999} .product-meta-fields .switch-row{grid-template-columns:auto 1fr;align-items:center;gap:10px;color:var(--muted)} .product-meta-fields .switch-row input{width:auto;background:transparent} :root[data-theme="light"] .detail-images-editor,:root[data-theme="light"] .product-meta-editor{color:#fff;background:rgba(34,25,42,.94);border-color:rgba(221,40,102,.42)} :root[data-theme="light"] .detail-images-editor-heading small,:root[data-theme="light"] .product-meta-editor-heading small{color:rgba(255,255,255,.8)} :root[data-theme="light"] .detail-images-editor .ghost-button,:root[data-theme="light"] .product-meta-editor .ghost-button{color:#fff;border-color:rgba(255,255,255,.24)} @media(max-width:900px){ .detail-image-dropzone .image-editor{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))} } @media(max-width:680px){ .product-meta-fields .meta-row.two-col{grid-template-columns:1fr} .detail-images-editor,.product-meta-editor{padding:14px;border-radius:18px} .detail-image-dropzone{padding:12px;min-height:220px} } /* Sold out / stock toggle */ .sold-out-badge{position:absolute;top:12px;left:12px;z-index:2;padding:6px 12px;border-radius:999px;background:rgba(16,15,22,.72);color:#fff;font-size:12px;font-weight:800;backdrop-filter:blur(8px);pointer-events:none} :root[data-theme="light"] .sold-out-badge{background:rgba(255,255,255,.86);color:#171218} .coming-soon-badge{background:rgba(109,76,190,.88);color:#fff} :root[data-theme="light"] .coming-soon-badge{background:rgba(109,76,190,.92);color:#fff} .product-code-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;margin-bottom:7px} .product-code-row .product-code{margin-bottom:0!important} .product-status-badge{display:inline-flex;align-items:center;min-height:22px;padding:3px 8px;border-radius:5px;background:#111318;color:#fff;font-size:11px;font-weight:800;line-height:1;white-space:nowrap} body.glow-mode:not(.world-open) .product-status-badge{background:linear-gradient(135deg,#ed1c6d,#b9145c);color:#fff;box-shadow:0 4px 12px rgba(237,28,109,.3)} .product-card.is-sold-out .product-cover-media img{filter:grayscale(0)} /* keep photo colorful per request */ .product-card .pick-toggle.sold-out{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:rgba(16,15,22,.7);color:#fff;font-size:11px;font-weight:800;pointer-events:none} :root[data-theme="light"] .product-card .pick-toggle.sold-out{background:rgba(255,255,255,.86);color:#171218} .product-card .pick-toggle.unavailable{cursor:not-allowed;pointer-events:none;opacity:1} .product-card .pick-toggle.unavailable:hover{transform:none} .product-card .pick-toggle.unavailable path{fill:transparent !important;stroke:currentColor !important} .viewer-pick-toggle:disabled{opacity:.55;cursor:not-allowed;transform:none !important} .admin-card-actions .stock-toggle{padding:4px 8px;border-radius:8px;border:1px solid var(--line);background:var(--panel-strong);color:var(--text);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap} .admin-card-actions .stock-toggle.soldout{color:var(--rose)} .admin-card-actions .stock-toggle:hover{background:var(--panel)} .admin-card-actions > .admin-card-menu > .coming-soon-toggle{color:#d8c5ff !important} .admin-card-actions > .admin-card-menu > .coming-soon-toggle.active{color:#f3b8d0 !important} /* Picks dialog quantity & inquiry */ .pick-qty-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:8px} .qty-stepper{display:inline-flex;align-items:center;gap:6px;flex-shrink:0} .qty-stepper button{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:var(--panel-strong);color:var(--text);font-size:18px;font-weight:700;cursor:pointer;transition:.2s} .qty-stepper button:hover{background:var(--panel)} .qty-stepper .qty-value{min-width:44px;text-align:center;font-size:14px;font-weight:800} .pick-breakdown{font-size:13px;color:var(--muted);font-weight:700;white-space:nowrap} .picks-inquiry{display:grid;gap:14px;padding-top:14px;border-top:1px solid var(--line);margin-top:14px} .picks-country-label{display:grid;gap:8px;font-size:14px;font-weight:700;color:var(--text)} .picks-country-select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-strong);color:var(--text);font-size:14px;font-weight:600} .contact-channels{display:flex;gap:8px;flex-wrap:wrap} .contact-channel-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px!important;border-radius:14px!important;font-size:13px!important;flex:1;min-width:0} .contact-channel-btn svg{width:18px;height:18px;fill:currentColor;flex-shrink:0} .wabusiness-btn{background:linear-gradient(135deg,#128C7E,#00A882)!important} .wechat-btn{background:linear-gradient(135deg,#07C160,#06AE56)!important} .wechat-login-button{border-color:#07c160!important;color:#078b4b!important} .wechat-login-button:hover{background:rgba(7,193,96,.1)!important} .wechat-login-note{display:block;color:var(--muted);font-size:12px;line-height:1.5;text-align:center} .google-login-button{border-color:#4285f4!important;color:#1967d2!important} .google-login-button:hover{background:rgba(66,133,244,.1)!important} .google-login-note{display:block;color:var(--muted);font-size:12px;line-height:1.5;text-align:center} .wechat-bind-row{display:grid;gap:6px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);text-align:center} .wechat-bind-row small{color:var(--muted);font-size:12px} .google-bind-row{display:grid;gap:6px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);text-align:center} .google-bind-row small{color:var(--muted);font-size:12px} .member-linked-identities{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 16px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft)} .member-linked-identities div{display:grid;gap:4px}.member-linked-identities span{font-size:12px;color:var(--muted)}.member-linked-identities strong{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .member-settings-section-title{padding-top:16px;border-top:1px solid var(--line);font-weight:800;font-size:16px}.member-password-form{margin-top:16px}.member-forgot-password{width:100%;margin-top:10px} .member-password-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft)}.member-password-summary div{display:grid;gap:4px}.member-password-summary span{font-size:12px;color:var(--muted)}.member-password-summary strong{letter-spacing:2px}.member-password-summary button{flex:0 0 auto} .member-bind-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft)}.member-bind-summary div{display:grid;gap:3px}.member-bind-summary span{font-size:12px;color:var(--muted)}.member-bind-summary strong{font-size:14px}.verification-target{margin:-4px 0 0;color:var(--muted);font-size:12px} .admin-form [hidden],.member-bind-form [hidden]{display:none!important} .member-account-dialog{max-height:calc(100vh - 24px);overflow:visible}.member-account-dialog .dialog-heading{margin-bottom:10px}.member-account-dialog .dialog-heading p{margin-top:3px}.member-account-dialog .admin-form{gap:8px}.member-account-dialog .admin-form label{gap:4px}.member-account-dialog .admin-form input{min-height:40px;height:40px;padding:8px 11px}.member-account-dialog .register-verification-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.member-account-dialog .register-verification-row label input{width:100%;max-width:230px}.member-account-dialog .register-verification-row button{white-space:nowrap;padding-inline:14px}.member-account-dialog .primary-button{min-height:42px;padding:9px 14px}.member-account-dialog .member-password-form{gap:8px}.member-account-dialog .member-password-form .member-settings-section-title{padding-top:9px}.member-account-dialog .member-forgot-password{padding:9px 12px}.member-account-dialog .account-danger-zone{margin-top:10px;padding:10px 12px} @media(min-width:681px){.member-account-dialog .member-password-form{grid-template-columns:1fr 1fr}.member-account-dialog .member-password-form .member-settings-section-title,.member-account-dialog .member-password-form .register-verification-row,.member-account-dialog .member-password-form .form-message,.member-account-dialog .member-password-form .primary-button{grid-column:1/-1}.member-account-dialog .member-bind-form{grid-template-columns:1fr 1fr}.member-account-dialog .member-bind-form .register-verification-row,.member-account-dialog .member-bind-form .form-message,.member-account-dialog .member-bind-form .primary-button{grid-column:1/-1}.member-account-dialog .member-bind-form input[name=phoneNumber]{max-width:280px}.member-account-dialog .member-bind-form input[name=password]{max-width:280px}} @media (max-width:680px){.member-linked-identities{grid-template-columns:1fr}} .picks-whatsapp-hint{margin:0;font-size:12px;color:var(--muted);line-height:1.5} /* Mobile overrides for TNTSPACE-style homepage */ @media(max-width:980px){ .hero-carousel{aspect-ratio:16/6.5;min-height:180px;border-radius:18px} .hero-features{grid-template-columns:1fr;gap:12px} .feature-card{min-height:110px;padding:12px 14px} .feature-slider{min-height:62px} } @media(max-width:680px){ .hero{width:calc(100% - 16px);padding-top:8px;gap:10px} .hero-carousel{aspect-ratio:16/7.5;min-height:150px;border-radius:18px} .hero-carousel-dots{bottom:10px} .search.mini{height:42px;max-width:none;margin-top:4px} .hero-features{grid-template-columns:1fr;gap:10px} .feature-card{min-height:100px;border-radius:18px;padding:11px 13px} .feature-card::before{border-radius:18px} .feature-badge{font-size:9px} .feature-contact-body strong{font-size:15px} .feature-slider{min-height:58px} .feature-slide-text strong{font-size:12px} .section-heading{margin-bottom:14px} .section-heading h2{font-size:20px} .section-heading h2 span{display:block;margin:2px 0 0;font-size:12px} .view-more{font-size:12px} .product-copy{padding:10px 10px 12px} .product-copy h3{font-size:13px} .product-price{font-size:12px} .product-tags span{font-size:9px;padding:2px 6px} } @media(prefers-reduced-motion:reduce){ .feature-slide{transition:none} } /* Banner drag-drop zone */ .banner-dropzone{display:grid;place-items:center;gap:6px;padding:28px 20px;border:2px dashed rgba(221,40,102,.35);border-radius:18px;background:linear-gradient(145deg,rgba(221,40,102,.05),rgba(157,123,232,.04));cursor:pointer;transition:.22s;text-align:center}.banner-dropzone span{font-size:14px;font-weight:700;color:var(--text)}.banner-dropzone small{color:var(--muted);font-size:11px}.banner-dropzone:hover{border-color:var(--rose);background:rgba(221,40,102,.1)}.banner-dropzone.is-dragging{border-color:var(--rose);background:rgba(221,40,102,.14);transform:scale(1.005)} /* Crop overlay for banners */ .crop-overlay{position:fixed;inset:0;z-index:200;display:none;place-items:center;background:rgba(0,0,0,.7);backdrop-filter:blur(8px)}.crop-overlay[open]{display:grid}.crop-overlay[hidden]{display:none}.crop-panel{width:min(720px,90vw);background:var(--panel-strong);border-radius:24px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.4)}.crop-heading{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}.crop-heading strong{font-size:15px}.crop-heading small{color:var(--muted);font-size:11px}.crop-canvas-wrap{position:relative;width:100%;height:400px;background:#1a1a1a;overflow:hidden;cursor:crosshair}#bannerCropCanvas{width:100%;height:100%;object-fit:contain}.crop-select{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.5);cursor:move;display:none}.crop-select::before,.crop-select::after{content:'';position:absolute;width:12px;height:12px;border:2px solid #fff;background:var(--rose);border-radius:2px}.crop-select::nw{top:-6px;left:-6px;cursor:nw-resize}.crop-select::ne{top:-6px;right:-6px;cursor:ne-resize}.crop-select::sw{bottom:-6px;left:-6px;cursor:sw-resize}.crop-select::se{bottom:-6px;right:-6px;cursor:se-resize}.crop-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--line)} /* News form: left thumbnail + right text layout */ .news-form-layout{display:flex;gap:20px}.news-form-left{flex:0 0 180px}.news-form-right{flex:1;display:grid;gap:12px} .news-cover-area{position:relative;width:180px;height:160px;border:2px dashed var(--line);border-radius:14px;background:var(--panel);overflow:hidden;display:grid;place-items:center} .news-cover-placeholder{color:var(--muted);font-size:12px;font-weight:700;pointer-events:none} .news-cover-btn{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);padding:5px 14px;border-radius:8px;background:var(--text);color:var(--bg);font-size:10px;font-weight:700;cursor:pointer;transition:.2s}.news-cover-btn:hover{opacity:.85} #newsCoverImg{display:none!important}#newsCoverImg[src]{display:block!important}.news-cover-area:has(#newsCoverImg[src]) .news-cover-placeholder,.news-cover-area:has(#newsCoverImg[src]) .news-cover-btn{display:none} .url-fetch-hint{display:block;margin-top:3px;color:var(--accent);font-size:10px;min-height:14px} /* News list: card style like TNTSPACE */ .news-list .section-row{display:flex;align-items:center;gap:14px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-strong);margin-bottom:8px;transition:.2s}.news-list .section-row:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)} .news-list .section-row img{width:72px;height:52px;border-radius:8px;object-fit:cover;flex-shrink:0} .news-list .section-row .drag-handle{color:var(--muted);font-size:16px;cursor:grab;flex-shrink:0} .news-list .section-row>div[style*="flex:1"]{flex:1;min-width:0}.news-list .section-row strong{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.news-list .section-row small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} .news-list .section-row .ghost-button{font-size:10px;padding:6px 10px;border-radius:8px;flex-shrink:0} /* ===== News/Activities Listing Page (TNTSPACE-style) ===== */ .news-list-dialog{width:min(1200px,calc(100% - 32px));max-height:92vh;overflow-y:auto;padding:0;border-radius:24px;background:var(--bg);color:var(--text)} .news-list-dialog::backdrop{background:rgba(18,12,17,.55);backdrop-filter:blur(14px)} .news-list-dialog .dialog-close{position:sticky;top:0;z-index:10;border-radius:0 0 0 16px} .news-list-header{padding:36px 36px 8px;text-align:center} .news-list-heading span{font-size:10px;letter-spacing:.22em;color:var(--rose);font-weight:900} .news-list-heading h2{margin:6px 0 4px;font-size:28px;font-weight:800} .news-list-header p{color:var(--muted);font-size:13px;margin:0} .news-list-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:20px 36px 40px} @media(max-width:768px){.news-list-grid{grid-template-columns:1fr;padding:16px 16px 28px}.news-list-dialog{width:calc(100% - 16px);border-radius:18px}.news-list-header{padding:24px 16px 4px}} .news-list-card{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--panel-strong);color:inherit;text-decoration:none;cursor:pointer;transition:transform .25s,box-shadow .25s} .news-list-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.1)} .news-list-card-img{aspect-ratio:16/9;overflow:hidden;background:linear-gradient(145deg,#f5dbe5,#ddd3fa)} .news-list-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s} .news-list-card:hover .news-list-card-img img{transform:scale(1.04)} .news-list-card-body{padding:16px 18px;display:flex;flex-direction:column;gap:6px;flex:1} .news-list-card-title{font-size:15px;font-weight:700;line-height:1.35;margin:0} .news-list-card-edited{font-size:11px;color:var(--muted);line-height:1.4} .news-list-card-excerpt{font-size:12px;color:var(--muted);line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1} .news-list-card-footer{display:flex;align-items:center;gap:14px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)} .news-list-card-footer span{display:flex;align-items:center;gap:4px} /* ===== News/Activities Detail Page (Word-like editor) ===== */ .news-detail-dialog{width:min(900px,calc(100% - 28px));max-height:94vh;overflow-y:auto;padding:0;border-radius:24px;background:var(--bg);color:var(--text)} .news-detail-dialog::backdrop{background:rgba(18,12,17,.55);backdrop-filter:blur(14px)} .news-detail-dialog .dialog-close{position:sticky;top:0;z-index:10;border-radius:0 0 0 16px} .news-detail-back{padding:12px 24px 0} .news-detail-back a{color:var(--muted);text-decoration:none;font-size:13px;display:inline-flex;align-items:center;gap:4px} .news-detail-back a:hover{color:var(--accent)} .news-detail-article{max-width:720px;margin:0 auto} .news-detail-hero{border-radius:16px;overflow:hidden;margin:20px 24px 0;background:linear-gradient(145deg,#f5dbe5,#ddd3fa)} .news-detail-hero img{width:100%;display:block;object-fit:cover;aspect-ratio:16/9} .news-detail-body{padding:24px 24px 40px} .news-detail-title{font-size:clamp(22px,4vw,32px);font-weight:800;line-height:1.25;margin:0 0 12px} .news-detail-original-link{margin:-2px 0 14px;font-size:13px;font-weight:700} .news-detail-original-link[hidden]{display:none} .news-detail-original-link a{color:var(--accent);text-decoration:none} .news-detail-original-link a:hover{text-decoration:underline} .news-detail-meta{display:flex;align-items:center;gap:18px;font-size:12px;color:var(--muted);margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--line)} .news-detail-meta span{display:flex;align-items:center;gap:4px} .news-detail-content{font-size:15px;line-height:1.8;color:var(--text)} .news-detail-content p{margin:0 0 16px} .news-detail-content img{max-width:100%;border-radius:12px;margin:16px 0} .news-detail-content h2,.news-detail-content h3{margin:24px 0 10px} .news-detail-cta{margin:28px 0 0}.news-detail-cta .primary-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none} .news-detail-admin{border-top:2px solid var(--line);padding:28px 32px;background:var(--panel-strong)} .news-detail-admin .admin-form textarea{min-height:180px;font-family:inherit;line-height:1.6;resize:vertical} /* Final geometry override for the current WB layout. */ body:not(.world-open) .hero, body:not(.world-open) .catalog-shell { width: min(var(--content), calc(100% - 128px)) !important; margin-left: auto !important; margin-right: auto !important; } body:not(.world-open) .hero { display: flex !important; flex-direction: column !important; align-items: stretch !important; } body:not(.world-open) .hero-carousel { width: 100%; } body:not(.world-open) .hero-features { width: 100%; max-width: none; } body:not(.world-open) .feature-card-header { left: 18px; right: 18px; } body:not(.world-open) .feature-slide { grid-template-columns: 128px minmax(0, 1fr); } body:not(.world-open) .feature-slide img { width: 128px; height: auto; min-height: 0; aspect-ratio: 16 / 9; object-fit: cover; align-self: center; } body:not(.world-open) .feature-slide-text { padding-top: 0; } body:not(.world-open) .catalog-shell { display: flex; flex-wrap: wrap; align-items: center; column-gap: 18px; } body:not(.world-open) .catalog-shell .search-bar-wrap { order: 1; flex: 0 0 300px; width: auto; margin: 0; justify-content: flex-start; } body:not(.world-open) .catalog-shell .media-switch { order: 2; flex: 1 1 640px; width: auto; margin: 0 0 8px auto; } body:not(.world-open) .catalog-shell .section-heading { order: 3; width: 100%; } body:not(.world-open) .catalog-shell #catalogContent { order: 4; width: 100%; } @media(max-width:980px) { body:not(.world-open) .hero, body:not(.world-open) .catalog-shell { width: calc(100% - 32px) !important; } body:not(.world-open) .catalog-shell { display: block; } body:not(.world-open) .catalog-shell .search-bar-wrap, body:not(.world-open) .catalog-shell .media-switch { width: 100%; margin: 0 auto 8px; } } @media(max-width:680px) { body:not(.world-open) .hero, body:not(.world-open) .catalog-shell { width: calc(100% - 16px) !important; } body:not(.world-open) .feature-card-header { left: 13px; right: 13px; } body:not(.world-open) .feature-slide { grid-template-columns: 92px minmax(0, 1fr); } body:not(.world-open) .feature-slide img { width: 92px; } } /* One shared desktop canvas for the hero, promo strips and six-column gallery. */ body:not(.world-open) .hero, body:not(.world-open) .catalog-shell { width: min(1720px, calc(100% - 160px)) !important; max-width: 1720px !important; margin-left: auto !important; margin-right: auto !important; } body:not(.world-open) .hero-carousel, body:not(.world-open) .hero-features, body:not(.world-open) .catalog-shell .search-bar-wrap, body:not(.world-open) .catalog-shell .media-switch, body:not(.world-open) .catalog-shell #catalogContent { max-width: none; } body:not(.world-open) .hero-carousel { width: 100%; } body:not(.world-open) .hero-features { width: 100%; } body:not(.world-open) .catalog-shell #catalogContent { width: 100%; } @media(max-width:980px) { body:not(.world-open) .hero, body:not(.world-open) .catalog-shell { width: calc(100% - 32px) !important; max-width: none !important; } } @media(max-width:680px) { body:not(.world-open) .hero, body:not(.world-open) .catalog-shell { width: calc(100% - 16px) !important; } } /* True final cascade: the main gallery is light, while Samuel World keeps its own atmosphere. */ :root, :root[data-theme="light"], :root[data-theme="dark"] { color-scheme: light; background: #fff; } :root[data-theme="dark"] body:not(.world-open), body:not(.world-open) { background: #fff !important; background-image: none !important; color: #171717 !important; } :root[data-theme="dark"] body:not(.world-open)::after, :root[data-theme="light"] body:not(.world-open)::after { opacity: 0 !important; } /* 2026-08-20 language dropdown: one compact control, always horizontal on macOS/Safari. */ .language-cluster, .language-menu, .language-menu-toggle, .language-menu-toggle span, .language-menu-list, .language-menu-list button { writing-mode: horizontal-tb !important; text-orientation: mixed !important; white-space: nowrap !important; } .language-cluster { position: relative; } .language-menu { position: relative; } .language-menu-toggle { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-width: 126px; min-height: 42px; padding: 8px 12px !important; border: 1px solid #e5dfdf; border-radius: 14px; background: #fff; color: #171717 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; cursor: pointer; } .language-current-code { font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #171717; } .language-current-flag, .language-flag { display: inline-block; width: 20px; height: 14px; flex: 0 0 20px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.08); background-color: #eee; background-position: center; background-repeat: no-repeat; background-size: cover; } .language-current-flag.native-flag, .language-flag.native-flag { width: auto; height: auto; overflow: visible; border-radius: 0; box-shadow: none; background: none; font-size: 18px; line-height: 1; } .language-flag { width: 20px; height: 14px; } .flag-gb { background-image: url('https://flagcdn.com/w40/gb.png'); } .flag-cn { background-image: url('https://flagcdn.com/w40/cn.png'); } .flag-jp { background-image: url('https://flagcdn.com/w40/jp.png'); } .flag-kr { background-image: url('https://flagcdn.com/w40/kr.png'); } .flag-de { background-image: url('https://flagcdn.com/w40/de.png'); } .flag-ru { background-image: url('https://flagcdn.com/w40/ru.png'); } .flag-es { background-image: url('https://flagcdn.com/w40/es.png'); } .language-menu-chevron { margin-left: 3px; color: #555; font-size: 17px; transform: translateY(-2px); } .language-menu-list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000; display: grid; gap: 3px; min-width: 184px; padding: 8px; border: 1px solid #e7e1e1; border-radius: 15px; background: #fff; box-shadow: 0 18px 38px rgba(40, 26, 32, .15); } .language-menu-list[hidden] { display: none !important; } .language-menu-list button { display: grid !important; grid-template-columns: 30px 24px minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 7px 9px !important; border: 0; border-radius: 9px; background: transparent; color: #171717 !important; text-align: left; font-size: 14px !important; font-weight: 600 !important; line-height: 1.2 !important; cursor: pointer; } .language-menu-list button:hover, .language-menu-list button[aria-selected="true"] { background: #fff1f5; color: var(--rose) !important; } .language-menu-list button > span:first-child { font-size: 12px; font-weight: 800; text-align: left; } .language-menu-list button > .language-flag { font-size: 0; text-align: center; } .language-menu { transform: translateX(8px); } .language-menu-list { left: calc(50% + 12px); right: auto; transform: translateX(-50%); } .topbar .top-module-nav, .topbar .top-module-nav button, .topbar .top-actions, .topbar .status-chip { writing-mode: horizontal-tb !important; text-orientation: mixed !important; white-space: nowrap !important; } @media(max-width:760px) { .language-menu-toggle { min-width: 112px; min-height: 38px; padding-inline: 9px !important; font-size: 13px !important; } .language-menu-list { left: calc(50% + 8px); right: auto; min-width: 174px; } } .topbar, body.world-open .topbar { display: flex !important; background: rgba(255, 255, 255, .96) !important; color: #171717 !important; } .topbar .top-module-nav, body.world-open .topbar .top-module-nav, body.world-open .media-switch { display: flex !important; position: static !important; align-items: center; justify-content: center; width: auto !important; min-width: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .topbar .top-module-nav > i, .topbar .top-module-nav .world-nav-mascot { display: none !important; } .topbar .top-module-nav button { position: relative; padding: 12px 2px 11px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #6d6866 !important; box-shadow: none !important; font-size: 14px; font-weight: 600; white-space: nowrap; } .topbar .top-module-nav button:hover { padding-left: 10px !important; padding-right: 10px !important; border-radius: 9px !important; background: #f5f3f2 !important; color: #d92b67 !important; } .topbar .top-module-nav button::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: 2px; height: 2px; border-radius: 2px; background: #d92b67; transition: left .18s ease, right .18s ease; } .topbar .top-module-nav button:hover::after, .topbar .top-module-nav button[aria-selected="true"]::after { left: 0; right: 0; } .topbar .top-module-nav button[aria-selected="true"] { color: #d92b67 !important; } body:not(.world-open) .catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; } body:not(.world-open) .catalog-toolbar-actions { display: flex; align-items: center; gap: 12px; min-width: 0; } body:not(.world-open) .catalog-toolbar .search { width: min(300px, 36vw); min-width: 190px; height: 42px; border: 1px solid #e3dfdd; border-radius: 11px; background: #fff !important; box-shadow: none !important; } body:not(.world-open) .catalog-toolbar select { border: 0; border-bottom: 1px solid #d8d2cf; border-radius: 0; background: transparent; color: #4f4947; } body:not(.world-open) .product-cover { aspect-ratio: 3 / 4 !important; } /* Final World-only navigation treatment. Keep this after legacy compatibility rules. */ body.world-open .topbar .top-module-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2px !important; align-items: stretch !important; width: min(620px, calc(100% - 32px)) !important; margin: 0 auto !important; padding: 3px !important; overflow: hidden !important; box-sizing: border-box !important; border: 1px solid rgba(143, 220, 248, .35) !important; border-radius: 16px !important; background: linear-gradient(145deg, #183566 0%, #245889 100%) !important; box-shadow: 0 10px 24px rgba(4, 18, 52, .24), inset 0 1px rgba(255, 255, 255, .12) !important; } body.world-open .topbar .top-module-nav button { min-width: 0 !important; padding: 7px 3px !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; color: rgba(235, 248, 255, .76) !important; box-shadow: none !important; font-size: 11px !important; line-height: 1.15 !important; white-space: nowrap !important; } body.world-open .topbar .top-module-nav button:hover, body.world-open .topbar .top-module-nav button[aria-selected="true"] { padding: 7px 3px !important; border-radius: 11px !important; background: linear-gradient(145deg, #3c78ad, #326696) !important; color: #fff !important; box-shadow: inset 0 1px rgba(255, 255, 255, .18) !important; } /* 2026-08-21 ACTUAL EOF OVERRIDE: these rules intentionally follow the legacy EOF guard. */ body.world-open .topbar, body.world-open .topbar.glass { border: 0 !important; background: transparent !important; box-shadow: none !important; } body.world-open .topbar .language-cluster, body.world-open .topbar .admin-dropdown, body.world-open .topbar .admin-button, body.world-open .topbar .world-nav-mascot, body.world-open #mediaSwitch::before, body.world-open #mediaSwitch::after, body.world-open #mediaSwitch > i, body.world-open #mediaSwitch .world-nav-mascot { display: none !important; content: none !important; } body.world-open #mediaSwitch, body.world-open .topbar .top-module-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2px !important; align-items: stretch !important; position: static !important; width: min(620px, calc(100% - 32px)) !important; max-width: none !important; min-width: 0 !important; height: auto !important; margin: 0 auto !important; padding: 3px !important; overflow: hidden !important; box-sizing: border-box !important; border: 1px solid rgba(143, 220, 248, .35) !important; border-radius: 16px !important; background: linear-gradient(145deg, #183566 0%, #245889 100%) !important; box-shadow: 0 10px 24px rgba(4, 18, 52, .24), inset 0 1px rgba(255, 255, 255, .12) !important; } body.world-open #mediaSwitch > button, body.world-open #mediaSwitch > button:hover, body.world-open #mediaSwitch > button[aria-selected="true"] { display: block !important; width: 100% !important; min-width: 0 !important; min-height: 34px !important; height: auto !important; margin: 0 !important; padding: 7px 3px !important; box-sizing: border-box !important; overflow: hidden !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; color: rgba(236, 248, 255, .78) !important; box-shadow: none !important; font-size: 11px !important; line-height: 1.15 !important; white-space: nowrap !important; text-overflow: ellipsis !important; transform: none !important; } body.world-open #mediaSwitch > button[aria-selected="true"] { background: linear-gradient(145deg, #3c78ad, #326696) !important; color: #fff !important; box-shadow: inset 0 1px rgba(255, 255, 255, .18) !important; } @media (max-width: 680px) { body.world-open .topbar { width: calc(100% - 32px) !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: max(8px, env(safe-area-inset-top)) auto 0 !important; padding: 0 !important; } body.world-open .topbar .brand, body.world-open .topbar .top-actions { display: none !important; } body.world-open #mediaSwitch, body.world-open .topbar .top-module-nav { width: 100% !important; } } @media (max-width: 680px) { body.world-open .topbar .top-module-nav { width: 100% !important; gap: 1px !important; padding: 3px !important; border-radius: 16px !important; } body.world-open .topbar .top-module-nav button, body.world-open .topbar .top-module-nav button:hover, body.world-open .topbar .top-module-nav button[aria-selected="true"] { padding: 7px 3px !important; font-size: 11px !important; letter-spacing: -.02em !important; } } /* Music manager: keep controls readable in glow mode and make the selected icon visibly previewable before it is uploaded. */ body.glow-mode:not(.world-open) #musicAdminDialog { color: #172033 !important; background: #fff !important; } body.glow-mode:not(.world-open) #musicAdminDialog .dialog-heading h2, body.glow-mode:not(.world-open) #musicAdminDialog .dialog-heading p, body.glow-mode:not(.world-open) #musicAdminDialog .admin-form > label { color: #172033 !important; } body.glow-mode:not(.world-open) #musicAdminDialog .dialog-heading span { color: #d51f63 !important; } body.glow-mode:not(.world-open) #musicAdminDialog .admin-form input { color: #172033 !important; background: #fff !important; border-color: #cbd6e3 !important; } body.glow-mode:not(.world-open) #musicAdminDialog .admin-form input::placeholder { color: #78879a !important; opacity: 1 !important; } body.glow-mode:not(.world-open) #musicAdminDialog .file-drop-content { color: #172033 !important; background: #fff !important; border-color: #bfcddd !important; } body.glow-mode:not(.world-open) #musicAdminDialog .file-drop-content span, body.glow-mode:not(.world-open) #musicAdminDialog .file-drop-content small { color: #526274 !important; } body.glow-mode:not(.world-open) #musicAdminDialog .music-admin-row { border-color: #d8e1ec !important; background: #f7f9fc !important; } body.glow-mode:not(.world-open) #musicAdminDialog .music-admin-row input { background: #fff !important; border-color: #cbd6e3 !important; } body.glow-mode:not(.world-open) #musicAdminDialog .music-admin-actions button { min-height: 36px; border: 1px solid #172033 !important; border-radius: 10px; background: #172033 !important; color: #fff !important; font-size: 12px; font-weight: 700; opacity: 1 !important; } body.glow-mode:not(.world-open) #musicAdminDialog .music-admin-actions button:hover { background: #2c4670 !important; border-color: #2c4670 !important; } body.glow-mode:not(.world-open) #musicAdminDialog .music-admin-actions button:disabled { border-color: #d5dce6 !important; background: #d5dce6 !important; color: #718097 !important; cursor: not-allowed; } body.glow-mode:not(.world-open) #musicAdminDialog .music-icon-remove, body.glow-mode:not(.world-open) #musicAdminDialog .remove-track { background: #a51f52 !important; border-color: #a51f52 !important; } #musicIconPreview { width: 64px !important; height: 64px !important; flex: 0 0 64px; border: 1px solid rgba(36, 88, 135, .22); box-shadow: 0 5px 14px rgba(36, 88, 135, .12); } #musicIconDrop .file-drop-content { min-height: 78px; } .music-admin-row { grid-template-columns: auto 52px minmax(0, 1fr) auto !important; } .music-admin-icon { width: 52px !important; height: 52px !important; border-radius: 12px !important; } /* The crop surface is a top-layer dialog so it works from music management, not only from the banner dialog where it originally lived. */ dialog.crop-overlay { inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; } dialog.crop-overlay[open] { display: grid; place-items: center; } dialog.crop-overlay::backdrop { background: rgba(8, 12, 24, .74); backdrop-filter: blur(10px); } dialog.crop-overlay .crop-panel { max-height: calc(100vh - 32px); } @media (max-width: 680px) { .music-admin-row { grid-template-columns: auto 48px minmax(0, 1fr) !important; } .music-admin-icon { width: 48px !important; height: 48px !important; } dialog.crop-overlay .crop-panel { width: calc(100vw - 18px); } dialog.crop-overlay .crop-heading { display: grid; gap: 5px; } dialog.crop-overlay .crop-heading small { line-height: 1.45; } dialog.crop-overlay .crop-canvas-wrap { height: min(72vw, 380px); } } /* Final precedence overrides (must remain last). */ .music-admin-row { grid-template-columns: auto 40px minmax(0, 1fr) auto !important; min-width: 0; } .music-admin-icon { width: 40px !important; height: 40px !important; border-radius: 10px !important; object-fit: cover; } .music-admin-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; flex-wrap: wrap; } .music-admin-actions button { white-space: nowrap; font-size: 11px; padding: 8px 9px; } #activitiesDialog .section-row { display: grid !important; grid-template-columns: 22px 56px minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; min-height: 76px !important; padding: 10px 12px !important; } #activitiesDialog .section-row .drag-handle { position: static !important; padding: 0 !important; background: transparent !important; } #activitiesDialog .section-row-thumb { width: 56px !important; height: 56px !important; border-radius: 12px !important; object-fit: cover; } #activitiesDialog .section-row-copy { min-width: 0; overflow: hidden; } #activitiesDialog .section-row-copy strong, #activitiesDialog .section-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #activitiesDialog .section-row-copy small { color: var(--muted); font-size: 11px; } #activitiesDialog .section-row-actions { display: flex; gap: 7px; flex-wrap: nowrap; } #activitiesDialog .section-row-actions .ghost-button { white-space: nowrap; padding: 8px 11px !important; } #comicsDialog #comicsList { display: grid !important; grid-template-columns: repeat(4, minmax(130px, 1fr)) !important; gap: 14px !important; max-height: 54vh !important; overflow: auto !important; padding: 4px 3px 8px !important; } #comicsDialog #comicsList .section-row { position: relative !important; display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; min-height: 0 !important; padding: 10px !important; align-items: start !important; } #comicsDialog #comicsList .section-row .drag-handle { position: absolute !important; top: 8px; left: 8px; padding: 4px 7px !important; z-index: 2; } #comicsDialog #comicsList .section-row-thumb { width: 100% !important; height: auto !important; aspect-ratio: 9 / 16 !important; border-radius: 11px !important; object-fit: cover; } #comicsDialog #comicsList .section-row-copy { min-width: 0; width: 100%; } #comicsDialog #comicsList .section-row-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } #comicsDialog #comicsList .section-row-copy small { display: none !important; } #comicsDialog #comicsList .section-row-actions { display: flex; justify-content: flex-end; gap: 6px; width: 100%; } body:not(.world-open) .hero-carousel.square { aspect-ratio: 21 / 9 !important; max-height: none !important; } @media (min-width: 681px) { body:not(.world-open) .topbar .top-module-nav { position: fixed !important; left: max(12px, calc((100vw - min(1720px, calc(100vw - 160px))) / 2 - 86px)) !important; top: 52% !important; transform: translateY(-50%) !important; z-index: 35 !important; display: flex !important; flex-direction: column !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; gap: 8px !important; margin: 0 !important; padding: 8px !important; border-radius: 18px !important; background: linear-gradient(145deg, rgba(229,243,254,.96), rgba(204,228,247,.94)) !important; border: 1px solid rgba(105,164,207,.35) !important; box-shadow: 0 12px 30px rgba(34,84,122,.16) !important; } body:not(.world-open) .topbar .top-module-nav > button, body:not(.world-open) .topbar .top-module-nav > button:hover, body:not(.world-open) .topbar .top-module-nav > button[aria-selected="true"] { width: 100% !important; min-width: 0 !important; min-height: 68px !important; padding: 10px 5px !important; border: 0 !important; border-radius: 12px !important; color: #4b6982 !important; background: rgba(255,255,255,.44) !important; box-shadow: none !important; transform: none !important; font-size: 12px !important; line-height: 1.35 !important; white-space: normal !important; overflow: hidden !important; } body:not(.world-open) .topbar .top-module-nav > button[aria-selected="true"] { color: #fff !important; background: linear-gradient(145deg, #2d76ad, #245887) !important; box-shadow: 0 7px 15px rgba(36,88,135,.24) !important; } } @media (max-width: 900px) and (min-width: 681px) { #comicsDialog #comicsList { grid-template-columns: repeat(3, minmax(120px, 1fr)) !important; } } @media (max-width: 680px) { body:not(.world-open) .hero-carousel.square { aspect-ratio: 16 / 6.2 !important; max-height: 220px !important; } .music-admin-row { grid-template-columns: auto 38px minmax(0, 1fr) !important; } .music-admin-actions { grid-column: 2 / -1; justify-content: flex-start; } #activitiesDialog .section-row { grid-template-columns: 18px 48px minmax(0, 1fr) !important; } #activitiesDialog .section-row-thumb { width: 48px !important; height: 48px !important; } #activitiesDialog .section-row-actions { grid-column: 3; grid-row: 2; justify-content: flex-end; } #comicsDialog #comicsList { grid-template-columns: repeat(2, minmax(120px, 1fr)) !important; } } /* Final video viewer rule: keep source proportions and show the entire video. */ .video-dialog .video-viewer, .video-dialog .video-player-container { min-width: 0 !important; min-height: 0 !important; background: #000 !important; } .video-dialog .video-viewer { height: min(76vh, 760px) !important; } .video-dialog .video-player-container { width: 100% !important; height: 100% !important; overflow: hidden !important; } .video-dialog .video-viewer video, .video-dialog .video-player-container video { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center !important; background: #000 !important; } @media (max-width: 760px) { .video-dialog .video-viewer { height: 68vh !important; min-height: 240px !important; } } /* Final video viewer override: preserve every source aspect ratio and never crop. */ .video-dialog .video-viewer, .video-dialog .video-player-container { min-width: 0 !important; min-height: 0 !important; background: #000 !important; } .video-dialog .video-viewer { height: min(76vh, 760px) !important; } .video-dialog .video-player-container { width: 100% !important; height: 100% !important; overflow: hidden !important; } .video-dialog .video-viewer video, .video-dialog .video-player-container video { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center !important; background: #000 !important; } @media (max-width: 760px) { .video-dialog .video-viewer { height: 68vh !important; min-height: 240px !important; } } /* Final detail-page quick navigation. Keep it beside the centered content and override the earlier circular right-edge treatment. */ .product-detail-page .detail-scroll-top, .product-detail-page .detail-scroll-controls > .detail-scroll-top { display: none !important; } body.detail-open > main > .hero, body.detail-open .hero { display: none !important; } .product-detail-page .detail-scroll-controls { position: fixed; right: max(14px, calc((100vw - min(1320px, calc(100vw - 40px))) / 2 - 62px)); bottom: 24px; z-index: 30; display: grid; gap: 6px; width: 54px; } .product-detail-page .detail-scroll-button { display: grid; place-items: center; gap: 2px; width: 54px; min-height: 54px; padding: 7px 4px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-strong); color: var(--text); font-size: 11px; font-weight: 800; line-height: 1; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; } .product-detail-page .detail-scroll-button:hover { transform: translateY(-2px); background: var(--panel); box-shadow: var(--shadow-md); } .product-detail-page .detail-scroll-arrow { font-size: 24px; font-weight: 900; line-height: .8; } /* Mobile product details: keep the three main navigation buttons in one safe-area row, matching the homepage. The return action remains a separate compact button below it. */ @media (max-width: 680px) { body.detail-open .topbar { position: relative !important; top: 0 !important; width: calc(100% - 16px) !important; min-height: 94px !important; height: auto !important; margin: max(52px, calc(env(safe-area-inset-top) + 38px)) auto 0 !important; padding: 0 0 50px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.detail-open .topbar .brand, body.detail-open .topbar .top-actions { display: none !important; } body.detail-open .topbar .top-module-nav { position: static !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 3px !important; box-sizing: border-box !important; border: 1px solid rgba(105, 164, 207, .55) !important; border-radius: 16px !important; background: linear-gradient(145deg, #183566 0%, #245889 100%) !important; box-shadow: 0 10px 24px rgba(4, 18, 52, .24), inset 0 1px rgba(255,255,255,.12) !important; } body.detail-open .topbar .top-module-nav > button[data-media], body.detail-open .topbar .top-module-nav > button[data-media]:hover, body.detail-open .topbar .top-module-nav > button[data-media][aria-selected="true"] { display: block !important; width: 100% !important; min-width: 0 !important; min-height: 34px !important; height: auto !important; margin: 0 !important; padding: 7px 3px !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; color: rgba(236, 248, 255, .78) !important; box-shadow: none !important; font-size: 11px !important; line-height: 1.15 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } body.detail-open .topbar .top-module-nav > button[data-media][aria-selected="true"] { background: linear-gradient(145deg, #3c78ad, #326696) !important; color: #fff !important; } body.detail-open .topbar .top-module-nav > #privateSpaceButton { display: none !important; } body.detail-open .topbar .top-module-nav > #detailBackButton { display: flex !important; position: absolute !important; left: 0 !important; bottom: 0 !important; width: 72px !important; min-height: 42px !important; margin: 0 !important; padding: 8px 12px !important; box-sizing: border-box !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(143, 220, 248, .35) !important; border-radius: 14px !important; background: linear-gradient(145deg, #386b9b, #2d5d8c) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(4, 18, 52, .24), inset 0 1px rgba(255,255,255,.16) !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; } } @media(max-width:680px) { .product-detail-page .detail-scroll-controls { right: 12px; bottom: 14px; width: 46px; } .product-detail-page .detail-scroll-button { width: 46px; min-height: 46px; font-size: 10px; } .product-detail-page .detail-scroll-arrow { font-size: 20px; } } /* 2026-08-21 ACTUAL EOF OVERRIDE: mobile world navigation. */ body.world-open .topbar, body.world-open .topbar.glass { border: 0 !important; background: transparent !important; box-shadow: none !important; } body.world-open .topbar .language-cluster, body.world-open .topbar .admin-dropdown, body.world-open .topbar .admin-button, body.world-open .topbar .world-nav-mascot, body.world-open #mediaSwitch::before, body.world-open #mediaSwitch::after, body.world-open #mediaSwitch > i, body.world-open #mediaSwitch .world-nav-mascot { display: none !important; content: none !important; } body.world-open #mediaSwitch, body.world-open .topbar .top-module-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2px !important; align-items: stretch !important; position: static !important; width: min(620px, calc(100% - 32px)) !important; max-width: none !important; min-width: 0 !important; height: auto !important; margin: 0 auto !important; padding: 3px !important; overflow: hidden !important; box-sizing: border-box !important; border: 1px solid rgba(143, 220, 248, .35) !important; border-radius: 16px !important; background: linear-gradient(145deg, #183566 0%, #245889 100%) !important; box-shadow: 0 10px 24px rgba(4, 18, 52, .24), inset 0 1px rgba(255, 255, 255, .12) !important; } body.world-open #mediaSwitch > button, body.world-open #mediaSwitch > button:hover, body.world-open #mediaSwitch > button[aria-selected="true"] { display: block !important; width: 100% !important; min-width: 0 !important; min-height: 34px !important; height: auto !important; margin: 0 !important; padding: 7px 3px !important; box-sizing: border-box !important; overflow: hidden !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; color: rgba(236, 248, 255, .78) !important; box-shadow: none !important; font-size: 11px !important; line-height: 1.15 !important; white-space: nowrap !important; text-overflow: ellipsis !important; transform: none !important; } body.world-open #mediaSwitch > button[aria-selected="true"] { background: linear-gradient(145deg, #3c78ad, #326696) !important; color: #fff !important; box-shadow: inset 0 1px rgba(255, 255, 255, .18) !important; } @media (max-width: 680px) { body.world-open .topbar { width: calc(100% - 32px) !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: max(8px, env(safe-area-inset-top)) auto 0 !important; padding: 0 !important; } body.world-open .topbar .brand, body.world-open .topbar .top-actions { display: none !important; } body.world-open #mediaSwitch, body.world-open .topbar .top-module-nav { width: 100% !important; } } /* 2026-08-21 FINAL EOF OVERRIDE: mobile world navigation. */ body.world-open .topbar, body.world-open .topbar.glass { border: 0 !important; background: transparent !important; box-shadow: none !important; } body.world-open .topbar .language-cluster, body.world-open .topbar .admin-dropdown, body.world-open .topbar .admin-button, body.world-open .topbar .world-nav-mascot, body.world-open #mediaSwitch::before, body.world-open #mediaSwitch::after, body.world-open #mediaSwitch > i, body.world-open #mediaSwitch .world-nav-mascot { display: none !important; content: none !important; } body.world-open #mediaSwitch, body.world-open .topbar .top-module-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2px !important; align-items: stretch !important; position: static !important; width: min(620px, calc(100% - 32px)) !important; max-width: none !important; min-width: 0 !important; height: auto !important; margin: 0 auto !important; padding: 3px !important; overflow: hidden !important; box-sizing: border-box !important; border: 1px solid rgba(143, 220, 248, .35) !important; border-radius: 16px !important; background: linear-gradient(145deg, #183566 0%, #245889 100%) !important; box-shadow: 0 10px 24px rgba(4, 18, 52, .24), inset 0 1px rgba(255, 255, 255, .12) !important; } body.world-open #mediaSwitch > button, body.world-open #mediaSwitch > button:hover, body.world-open #mediaSwitch > button[aria-selected="true"] { display: block !important; width: 100% !important; min-width: 0 !important; min-height: 34px !important; height: auto !important; margin: 0 !important; padding: 7px 3px !important; box-sizing: border-box !important; overflow: hidden !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; color: rgba(236, 248, 255, .78) !important; box-shadow: none !important; font-size: 11px !important; line-height: 1.15 !important; white-space: nowrap !important; text-overflow: ellipsis !important; transform: none !important; } body.world-open #mediaSwitch > button[aria-selected="true"] { background: linear-gradient(145deg, #3c78ad, #326696) !important; color: #fff !important; box-shadow: inset 0 1px rgba(255, 255, 255, .18) !important; } @media (max-width: 680px) { body.world-open .topbar { width: calc(100% - 32px) !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: max(8px, env(safe-area-inset-top)) auto 0 !important; padding: 0 !important; } body.world-open .topbar .brand, body.world-open .topbar .top-actions { display: none !important; } body.world-open #mediaSwitch, body.world-open .topbar .top-module-nav { width: 100% !important; } } /* 2026-08-21 final mobile world navigation override. Keep this block last. */ body.world-open .topbar, body.world-open .topbar.glass { border: 0 !important; background: transparent !important; box-shadow: none !important; } body.world-open .topbar .language-cluster, body.world-open .topbar .admin-dropdown, body.world-open .topbar .admin-button, body.world-open .topbar .world-nav-mascot, body.world-open .topbar .top-module-nav::before, body.world-open .topbar .top-module-nav::after, body.world-open .topbar .top-module-nav > i, body.world-open #mediaSwitch::before, body.world-open #mediaSwitch::after, body.world-open #mediaSwitch > i, body.world-open #mediaSwitch .world-nav-mascot { display: none !important; content: none !important; } body.world-open #mediaSwitch, body.world-open .topbar .top-module-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 2px !important; width: min(620px, calc(100% - 32px)) !important; max-width: none !important; min-width: 0 !important; margin: 0 auto !important; padding: 3px !important; overflow: hidden !important; box-sizing: border-box !important; border: 1px solid rgba(143, 220, 248, .35) !important; border-radius: 16px !important; background: linear-gradient(145deg, #183566 0%, #245889 100%) !important; box-shadow: 0 10px 24px rgba(4, 18, 52, .24), inset 0 1px rgba(255, 255, 255, .12) !important; } body.world-open #mediaSwitch > button, body.world-open #mediaSwitch > button:hover, body.world-open #mediaSwitch > button[aria-selected="true"] { display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 34px !important; margin: 0 !important; padding: 7px 3px !important; box-sizing: border-box !important; overflow: hidden !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; color: rgba(236, 248, 255, .78) !important; box-shadow: none !important; font-size: 11px !important; line-height: 1.15 !important; white-space: nowrap !important; text-overflow: ellipsis !important; transform: none !important; } body.world-open #mediaSwitch > button[aria-selected="true"] { background: linear-gradient(145deg, #3c78ad, #326696) !important; color: #fff !important; box-shadow: inset 0 1px rgba(255, 255, 255, .18) !important; } @media (max-width: 680px) { body.world-open .topbar { width: calc(100% - 32px) !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: max(8px, env(safe-area-inset-top)) auto 0 !important; padding: 0 !important; } body.world-open .topbar .brand, body.world-open .topbar .top-actions { display: none !important; } body.world-open #mediaSwitch, body.world-open .topbar .top-module-nav { width: 100% !important; } } /* FINAL OVERRIDE: compact World nav after all legacy compatibility rules. */ body.world-open .topbar #mediaSwitch, body.world-open #mediaSwitch { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:0 !important; position:relative !important; inset:auto !important; width:calc(100% - 32px) !important; max-width:620px !important; height:auto !important; min-height:0 !important; margin:0 auto !important; padding:3px !important; overflow:hidden !important; box-sizing:border-box !important; align-items:stretch !important; border:1px solid rgba(139,222,245,.28) !important; border-radius:16px !important; background:linear-gradient(145deg,#1a2d59 0%,#214b78 100%) !important; box-shadow:inset 0 1px rgba(255,255,255,.1),0 10px 22px rgba(4,18,52,.22) !important; } body.world-open .topbar #mediaSwitch::before, body.world-open .topbar #mediaSwitch::after, body.world-open #mediaSwitch::before, body.world-open #mediaSwitch::after { content:none !important; display:none !important; } body.world-open .topbar #mediaSwitch > *, body.world-open #mediaSwitch > * { position:static !important; inset:auto !important; transform:none !important; } body.world-open .topbar #mediaSwitch > i, body.world-open .topbar #mediaSwitch .world-nav-mascot, body.world-open #mediaSwitch > i, body.world-open #mediaSwitch .world-nav-mascot { display:none !important; } body.world-open .topbar #mediaSwitch > button, body.world-open .topbar #mediaSwitch > button:hover, body.world-open .topbar #mediaSwitch > button[aria-selected="true"], body.world-open #mediaSwitch > button, body.world-open #mediaSwitch > button:hover, body.world-open #mediaSwitch > button[aria-selected="true"] { display:flex !important; align-items:center !important; justify-content:center !important; min-width:0 !important; width:100% !important; min-height:38px !important; height:auto !important; margin:0 !important; padding:7px 2px !important; border:0 !important; border-radius:11px !important; background:transparent !important; color:rgba(235,248,255,.78) !important; box-shadow:none !important; transform:none !important; font-size:clamp(11px,1.1vw,15px) !important; line-height:1.15 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.world-open .topbar #mediaSwitch > button:hover, body.world-open .topbar #mediaSwitch > button[aria-selected="true"], body.world-open #mediaSwitch > button:hover, body.world-open #mediaSwitch > button[aria-selected="true"] { background:linear-gradient(145deg,#386b9b,#2d5d8c) !important; color:#fff !important; box-shadow:inset 0 1px rgba(255,255,255,.16) !important; } @media(max-width:680px) { body.world-open .topbar #mediaSwitch, body.world-open #mediaSwitch { width:calc(100% - 32px) !important; margin:12px auto 0 !important; padding:3px !important; border-radius:15px !important; } body.world-open .topbar #mediaSwitch > button, body.world-open .topbar #mediaSwitch > button:hover, body.world-open .topbar #mediaSwitch > button[aria-selected="true"], body.world-open #mediaSwitch > button, body.world-open #mediaSwitch > button:hover, body.world-open #mediaSwitch > button[aria-selected="true"] { min-height:38px !important; padding:7px 2px !important; font-size:clamp(11px,3.1vw,13px) !important; letter-spacing:-.02em !important; } } /* Final World nav reset: one compact blue pill with three equal cells. */ body.world-open #mediaSwitch { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:0 !important; position:relative !important; inset:auto !important; width:calc(100% - 32px) !important; max-width:620px !important; height:auto !important; min-height:0 !important; margin:0 auto !important; padding:3px !important; overflow:hidden !important; box-sizing:border-box !important; border:1px solid rgba(139,222,245,.28) !important; border-radius:16px !important; background:linear-gradient(145deg,#1a2d59 0%,#214b78 100%) !important; box-shadow:inset 0 1px rgba(255,255,255,.1),0 10px 22px rgba(4,18,52,.22) !important; } body.world-open #mediaSwitch::before, body.world-open #mediaSwitch::after { content:none !important; display:none !important; } body.world-open #mediaSwitch > * { position:static !important; inset:auto !important; transform:none !important; } body.world-open #mediaSwitch > i, body.world-open #mediaSwitch .world-nav-mascot { display:none !important; } body.world-open #mediaSwitch button, body.world-open #mediaSwitch button:hover, body.world-open #mediaSwitch button[aria-selected="true"] { display:flex !important; align-items:center !important; justify-content:center !important; min-width:0 !important; width:100% !important; min-height:38px !important; height:auto !important; margin:0 !important; padding:7px 3px !important; border:0 !important; border-radius:11px !important; background:transparent !important; color:rgba(235,248,255,.78) !important; box-shadow:none !important; transform:none !important; font-size:clamp(11px,1.1vw,15px) !important; line-height:1.15 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; } body.world-open #mediaSwitch button:hover, body.world-open #mediaSwitch button[aria-selected="true"] { background:linear-gradient(145deg,#386b9b,#2d5d8c) !important; color:#fff !important; box-shadow:inset 0 1px rgba(255,255,255,.16) !important; } @media(max-width:680px) { body.world-open #mediaSwitch { width:calc(100% - 32px) !important; margin:12px auto 0 !important; padding:3px !important; border-radius:15px !important; } body.world-open #mediaSwitch button, body.world-open #mediaSwitch button:hover, body.world-open #mediaSwitch button[aria-selected="true"] { min-height:38px !important; padding:7px 2px !important; font-size:clamp(11px,3.1vw,13px) !important; letter-spacing:-.02em !important; } } /* Final world nav reset: one compact bar, no legacy mascot/segment layer. */ body.world-open .topbar .top-module-nav, body.world-open .topbar .media-switch { position: relative !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch !important; justify-content: stretch !important; gap: 2px !important; width: min(100%, 560px) !important; max-width: 560px !important; height: 52px !important; min-height: 0 !important; margin: 0 auto !important; padding: 4px !important; overflow: hidden !important; isolation: isolate !important; border: 1px solid rgba(139, 222, 245, .3) !important; border-radius: 18px !important; background: linear-gradient(145deg, #182c57 0%, #244e7a 100%) !important; box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 10px 22px rgba(4, 18, 52, .22) !important; } body.world-open .topbar .top-module-nav::before, body.world-open .topbar .top-module-nav::after, body.world-open .topbar .media-switch::before, body.world-open .topbar .media-switch::after, body.world-open .topbar .top-module-nav > i, body.world-open .topbar .media-switch > i, body.world-open .topbar .top-module-nav > .world-nav-mascot, body.world-open .topbar .media-switch > .world-nav-mascot { display: none !important; content: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } body.world-open .topbar .top-module-nav button, body.world-open .topbar .media-switch button, body.world-open .topbar .top-module-nav button:hover, body.world-open .topbar .media-switch button:hover, body.world-open .topbar .top-module-nav button[aria-selected="true"], body.world-open .topbar .media-switch button[aria-selected="true"] { position: relative !important; z-index: 1 !important; display: grid !important; place-items: center !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 6px !important; transform: none !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; color: rgba(235, 248, 255, .76) !important; box-shadow: none !important; font-size: clamp(11px, 1.1vw, 15px) !important; line-height: 1.15 !important; white-space: nowrap !important; } body.world-open .topbar .top-module-nav button::before, body.world-open .topbar .top-module-nav button::after, body.world-open .topbar .media-switch button::before, body.world-open .topbar .media-switch button::after { display: none !important; content: none !important; } body.world-open .topbar .top-module-nav button:hover, body.world-open .topbar .media-switch button:hover, body.world-open .topbar .top-module-nav button[aria-selected="true"], body.world-open .topbar .media-switch button[aria-selected="true"] { background: linear-gradient(145deg, #386b9b, #2d5d8c) !important; color: #fff !important; box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 5px 12px rgba(7, 35, 73, .22) !important; } /* EOF CHECK 3 */ @media (max-width: 680px) { body.world-open .topbar .top-module-nav, body.world-open .topbar .media-switch { width: 100% !important; max-width: none !important; height: 48px !important; gap: 1px !important; padding: 3px !important; border-radius: 15px !important; } body.world-open .topbar .top-module-nav button, body.world-open .topbar .media-switch button, body.world-open .topbar .top-module-nav button:hover, body.world-open .topbar .media-switch button:hover, body.world-open .topbar .top-module-nav button[aria-selected="true"], body.world-open .topbar .media-switch button[aria-selected="true"] { padding: 0 3px !important; font-size: 11px !important; letter-spacing: -.02em !important; } } /* Last-pass World navigation override; keep this after legacy compatibility rules. */ body.world-open .topbar .top-module-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2px !important; align-items: stretch !important; width: min(100%, 620px) !important; margin: 0 auto !important; padding: 4px !important; border: 1px solid rgba(139, 222, 245, .28) !important; border-radius: 18px !important; background: linear-gradient(145deg, #1a2d59 0%, #214b78 100%) !important; box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 10px 22px rgba(4, 18, 52, .22) !important; } body.world-open .topbar .top-module-nav button { min-width: 0 !important; padding: 8px 6px !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; color: rgba(235, 248, 255, .76) !important; box-shadow: none !important; font-size: clamp(11px, 1.1vw, 15px) !important; line-height: 1.15 !important; white-space: nowrap !important; } body.world-open .topbar .top-module-nav button:hover, body.world-open .topbar .top-module-nav button[aria-selected="true"] { padding: 8px 6px !important; border-radius: 12px !important; background: linear-gradient(145deg, #386b9b, #2d5d8c) !important; color: #fff !important; box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 5px 12px rgba(7, 35, 73, .22) !important; } @media (max-width: 680px) { body.world-open .topbar .top-module-nav { width: 100% !important; gap: 1px !important; padding: 3px !important; border-radius: 16px !important; } body.world-open .topbar .top-module-nav button, body.world-open .topbar .top-module-nav button:hover, body.world-open .topbar .top-module-nav button[aria-selected="true"] { padding: 7px 3px !important; font-size: 11px !important; letter-spacing: -.02em !important; } } /* EOF CHECK */ /* Final world navigation polish: compact blue control with a restrained active state. */ body.world-open .topbar .top-module-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2px !important; align-items: stretch !important; width: min(100%, 620px) !important; margin: 0 auto !important; padding: 4px !important; border: 1px solid rgba(139, 222, 245, .28) !important; border-radius: 18px !important; background: linear-gradient(145deg, #1a2d59 0%, #214b78 100%) !important; box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 10px 22px rgba(4, 18, 52, .22) !important; } body.world-open .topbar .top-module-nav button { min-width: 0 !important; padding: 8px 6px !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; color: rgba(235, 248, 255, .76) !important; box-shadow: none !important; font-size: clamp(11px, 1.1vw, 15px) !important; line-height: 1.15 !important; white-space: nowrap !important; } body.world-open .topbar .top-module-nav button:hover, body.world-open .topbar .top-module-nav button[aria-selected="true"] { padding: 8px 6px !important; border-radius: 12px !important; background: linear-gradient(145deg, #386b9b, #2d5d8c) !important; color: #fff !important; box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 5px 12px rgba(7, 35, 73, .22) !important; } @media (max-width: 680px) { body.world-open .topbar .top-module-nav { width: 100% !important; gap: 1px !important; padding: 3px !important; border-radius: 16px !important; } body.world-open .topbar .top-module-nav button, body.world-open .topbar .top-module-nav button:hover, body.world-open .topbar .top-module-nav button[aria-selected="true"] { padding: 7px 3px !important; font-size: 11px !important; letter-spacing: -.02em !important; } } /* 小世界顶部栏：使用世界页自己的蓝色画布，并保持紧凑的一行布局。 */ body.world-open .topbar, body.world-open .topbar.glass { display: flex !important; align-items: center !important; min-height: 54px !important; height: 54px !important; margin-top: 8px !important; padding: 6px 12px !important; border: 1px solid rgba(139, 222, 245, .22) !important; border-radius: 16px !important; background: linear-gradient(145deg, #18264c 0%, #1e3e66 100%) !important; box-shadow: 0 14px 30px rgba(4, 18, 52, .24), inset 0 1px rgba(255, 255, 255, .12) !important; } body.world-open .topbar .top-module-nav, body.world-open .topbar .language-cluster, body.world-open .topbar .admin-button, body.world-open .topbar .world-nav-mascot { display: none !important; } body.world-open .topbar .brand, body.world-open .topbar .brand strong { color: #fff !important; } body.world-open .topbar .brand small, body.world-open .topbar .stats { color: rgba(255, 255, 255, .68) !important; } @media (max-width: 680px) { body.world-open .topbar { min-height: 56px !important; height: 56px !important; margin-top: max(8px, env(safe-area-inset-top)) !important; padding: 6px 12px !important; border-radius: 16px !important; } body.world-open .topbar .brand img { width: 34px !important; height: 34px !important; } body.world-open .topbar .brand strong { max-width: 150px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body.world-open .topbar .stats { display: none !important; } } /* 小世界使用自己的功能导航；隐藏图库页顶部的重复控件，避免移动端与品牌图标重叠。 */ body.world-open .topbar .top-module-nav, body.world-open .topbar .language-cluster, body.world-open .topbar .admin-button, body.world-open .topbar .world-nav-mascot { display: none !important; } body.world-open .topbar { grid-template-columns: minmax(0, 1fr) auto; } body.world-open .world-section-switch { background: linear-gradient(135deg, rgba(25, 48, 91, .96), rgba(43, 92, 130, .9)) !important; border-color: rgba(139, 222, 245, .28) !important; box-shadow: 0 16px 36px rgba(3, 18, 52, .28), inset 0 1px rgba(255, 255, 255, .14) !important; } body.world-open .world-section-switch button { color: rgba(255, 255, 255, .76) !important; } body.world-open .world-section-switch button[aria-selected="true"] { color: #ff83b8 !important; background: rgba(255, 255, 255, .1) !important; } @media (max-width: 720px) { body.world-open .topbar { margin-top: max(12px, env(safe-area-inset-top)); padding-top: 14px; padding-bottom: 14px; } body.world-open .topbar .brand { min-width: 0; } body.world-open .topbar .brand strong { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* Final mobile-only multilingual navigation guard. Keep every translated label inside its own equal-width cell. */ @media (max-width: 680px) { .topbar .top-module-nav, body.world-open .topbar .top-module-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: center !important; justify-content: stretch !important; gap: 0 !important; width: 100% !important; min-width: 0 !important; height: 56px !important; min-height: 56px !important; padding: 0 !important; overflow: hidden !important; flex: 1 1 100% !important; } .topbar .top-module-nav button, body.world-open .topbar .top-module-nav button { display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 56px !important; min-height: 56px !important; max-height: 56px !important; margin: 0 !important; padding: 4px 2px !important; font-size: clamp(8px, 2.45vw, 10px) !important; font-weight: 700 !important; line-height: 1.08 !important; text-align: center !important; white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; overflow: hidden !important; } .topbar .top-module-nav button::after { display: none !important; } .topbar .top-module-nav button > * { max-width: 100% !important; } body:not(.world-open) .category-bar { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; align-items: center !important; gap: 0 !important; width: 100% !important; min-width: 0 !important; height: 58px !important; min-height: 58px !important; padding: 3px 0 !important; overflow: hidden !important; } body:not(.world-open) .category-button { display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; margin: 0 !important; padding: 4px 1px !important; font-size: clamp(8px, 2.35vw, 10px) !important; font-weight: 700 !important; line-height: 1.08 !important; text-align: center !important; white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere !important; overflow: hidden !important; } body:not(.world-open) .category-button::before { inset: 2px 0 !important; } } /* Mobile language-safe navigation: equal columns, stable spacing, and intentional wrapping. */ @media (max-width: 680px) { .topbar .top-module-nav, body.world-open .topbar .top-module-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch; justify-content: stretch !important; gap: 0 !important; width: 100% !important; height: 50px !important; min-height: 50px !important; padding: 0 !important; overflow: hidden !important; } .topbar .top-module-nav button, body.world-open .topbar .top-module-nav button { display: flex !important; align-items: center; justify-content: center; width: 100% !important; min-width: 0 !important; min-height: 50px !important; max-height: 50px; padding: 4px 3px !important; font-size: clamp(9px, 2.7vw, 11px) !important; line-height: 1.12 !important; text-align: center; white-space: normal !important; word-break: keep-all; overflow-wrap: anywhere; } body:not(.world-open) .category-bar { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; align-items: stretch; gap: 0 !important; min-height: 54px; padding: 3px 0 !important; } body:not(.world-open) .category-button { display: flex !important; align-items: center; justify-content: center; width: 100% !important; min-width: 0 !important; min-height: 48px; padding: 5px 2px !important; font-size: clamp(9px, 2.65vw, 11px) !important; line-height: 1.12 !important; text-align: center; white-space: normal !important; word-break: keep-all; overflow-wrap: anywhere; } } /* Mobile-only header and gallery navigation correction. Desktop layout is unchanged. */ @media (max-width: 680px) { body { padding-top: max(8px, env(safe-area-inset-top)); } .topbar, body.world-open .topbar { position: sticky !important; top: 8px !important; width: calc(100% - 16px) !important; min-height: 88px !important; height: auto !important; margin: 8px auto 0 !important; padding: 7px 8px 8px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 7px; align-items: center; z-index: 40; } .topbar .brand { grid-column: 1; grid-row: 1; min-width: 0; max-width: none; } .topbar .top-actions { grid-column: 2; grid-row: 1; display: flex !important; align-items: center; gap: 4px; min-width: 0; margin-left: auto; } .topbar .top-actions .status-chip { display: none !important; } .topbar .top-actions .language-cluster { display: flex !important; position: relative; } .topbar .language-cluster > small { display: none !important; } .topbar .language-menu { transform: none !important; } .topbar .language-menu-toggle { min-width: 84px !important; min-height: 34px !important; height: 34px; gap: 4px; padding: 6px 7px !important; border-radius: 10px; font-size: 11px !important; } .topbar .language-current-code { font-size: 10px; } .topbar .language-current-flag { width: 17px; height: 12px; flex-basis: 17px; } .topbar .language-menu-chevron { font-size: 14px; margin-left: 0; } .topbar .language-menu-list { top: calc(100% + 8px); left: auto !important; right: 0 !important; transform: none !important; min-width: 180px; } .topbar .admin-button { max-width: none; min-height: 34px; padding: 7px 9px; border-radius: 10px; font-size: 10px; white-space: nowrap; } .topbar .top-module-nav { grid-column: 1 / -1; grid-row: 2; width: 100% !important; min-width: 0; gap: 0 !important; justify-content: space-between !important; overflow: hidden; } .topbar .top-module-nav button { flex: 1 1 0; min-width: 0; padding: 5px 2px !important; font-size: 10px !important; line-height: 1.1 !important; text-align: center; white-space: nowrap !important; } body:not(.world-open) .hero-features { display: none !important; } body:not(.world-open) .hero { padding-top: 14px !important; } body:not(.world-open) .category-bar { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 !important; width: 100%; overflow: hidden; padding: 3px 0 !important; } body:not(.world-open) .category-button { min-width: 0 !important; padding: 8px 1px !important; font-size: 10px !important; line-height: 1 !important; letter-spacing: -0.04em; white-space: nowrap !important; text-align: center; } } /* Final wide-editor cascade */ #editDialog { width: min(1480px, calc(100vw - 32px)) !important; height: calc(100vh - 24px) !important; max-height: calc(100vh - 24px) !important; margin: auto !important; } #editDialog #editForm { display: grid !important; grid-template-columns: minmax(260px, .42fr) minmax(0, 1fr) !important; gap: 12px !important; margin-top: 12px !important; } #editDialog .edit-basic-grid { display: grid !important; grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr); gap: 12px; } #editDialog .edit-field-group { min-width: 0; padding: 10px 12px; border: 1px solid #eee3e5; border-radius: 14px; background: #fff; } #editDialog .edit-field-group>strong { display: block; margin-bottom: 8px; font-size: 12px; color: #171717; } #editDialog .edit-basic-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #editDialog .edit-language-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } #editDialog .edit-basic-grid label { display: grid; gap: 4px; font-size: 11px; color: #77716e; font-weight: 700; } #editDialog .edit-basic-grid input, #editDialog .edit-basic-grid select { height: 34px; min-height: 34px; padding: 7px 10px; border-radius: 9px; font-size: 12px; } #editDialog #editForm>.switch-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; padding: 0 4px; font-size: 11px; } #editDialog #imageDropZone { grid-column: 1 / -1; min-height: 0; padding: 10px 12px; border-radius: 14px; } #editDialog #imageDropZone .image-editor { display: flex; min-height: 0; max-height: 112px; overflow-x: auto; overflow-y: hidden; gap: 7px; padding: 2px 2px 6px; } #editDialog #imageDropZone .image-editor figure { flex: 0 0 78px; width: 78px; height: 96px; aspect-ratio: 3 / 4; } #editDialog #coverEditor { grid-column: 1; grid-row: span 2; padding: 12px !important; } #editDialog .cover-editor-layout { grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 12px; } #editDialog .cover-preview { width: min(190px, 100%); margin: 0 auto; border-radius: 14px; } #editDialog .cover-controls { padding: 10px !important; border-radius: 12px; } #editDialog #detailImagesEditor, #editDialog #productMetaEditor { grid-column: 2; padding: 12px; border-radius: 14px; } #editDialog #detailImageEditor { display: flex; min-height: 0; max-height: 104px; overflow-x: auto; overflow-y: hidden; gap: 7px; } #editDialog #detailImageEditor figure { flex: 0 0 70px; width: 70px; height: 92px; aspect-ratio: 3 / 4; } #editDialog .product-meta-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } #editDialog .product-meta-fields .meta-row:not(.two-col) { grid-column: 1 / -1; } #editDialog .product-meta-fields .meta-row.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #editDialog .product-meta-fields label { gap: 4px; font-size: 10px; } #editDialog .product-meta-fields input { height: 32px; min-height: 32px; padding: 6px 8px; border-radius: 8px; font-size: 12px; } #editDialog .product-meta-fields .meta-row.two-col input { max-width: 150px; } #editDialog .dimension-inputs { gap: 4px; } #editDialog .dimension-inputs input { min-width: 42px; max-width: 76px; height: 30px; min-height: 30px; padding: 5px 4px; } #editDialog .upload-progress { grid-column: 1 / -1; } @media(max-width:1050px) { #editDialog { width: min(920px, calc(100vw - 24px)) !important; } #editDialog #editForm { grid-template-columns: 1fr !important; } #editDialog .edit-basic-grid { grid-template-columns: 1fr; } #editDialog .edit-language-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } #editDialog #coverEditor, #editDialog #detailImagesEditor, #editDialog #productMetaEditor { grid-column: 1; grid-row: auto; } } @media(max-width:680px) { #editDialog { width: calc(100vw - 12px) !important; height: calc(100vh - 12px) !important; max-height: calc(100vh - 12px) !important; } #editDialog .edit-basic-fields, #editDialog .edit-language-fields, #editDialog .product-meta-fields, #editDialog .product-meta-fields .meta-row.two-col { grid-template-columns: 1fr; } #editDialog .product-meta-fields .meta-row:not(.two-col) { grid-column: auto; } #editDialog .cover-editor-layout { grid-template-columns: 150px 1fr; } } /* Latest typography and compact video-card information row. */ body, button, input, textarea, select { font-family: inherit !important; color: #171717; } .topbar .top-module-nav button { font-family: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif !important; color: #171717 !important; font-size: 15px !important; font-weight: 700 !important; } .topbar .top-module-nav button:hover { color: var(--rose) !important; } .topbar .top-module-nav button[aria-selected="true"] { color: #171717 !important; } .product-card .product-code, .product-card .product-copy h3, .product-card .video-size, .product-detail-page, .product-detail-page button { font-family: Inter, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif !important; } /* 品名：极细纯黑（方案 A）—— 英文/数字走 Inter 200，中文走 PingFang SC 超细字重 */ .product-card .product-copy h3 { font-family: Inter, "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif !important; font-weight: 300 !important; letter-spacing: .02em !important; color: #111 !important; } .product-card .product-code { display: inline-block !important; font-family: Inter, "Helvetica Neue", Arial, sans-serif !important; font-weight: 500 !important; color: #fff !important; background: #1a1a1a !important; padding: 3px 9px !important; border-radius: 5px !important; letter-spacing: .06em !important; } .product-card .product-meta, .video-card .video-size { color: #6f696b !important; } .video-card .product-copy { min-height: 76px !important; padding: 12px 58px 12px 14px !important; } .video-card .video-card-meta { display: flex; align-items: baseline; margin-bottom: 5px !important; } .video-card .video-size { position: absolute; right: 14px; bottom: 46px; font-size: 11px; font-weight: 500; letter-spacing: 0; white-space: nowrap; } .video-card .product-copy h3 { margin: 0 !important; line-height: 1.3 !important; } .video-card .product-meta { display: none !important; } #worldFilmGrid .video-card .product-code, #worldFilmGrid .video-card .product-copy h3, #worldFilmGrid .video-card .video-size { color: #fff !important; } @media(max-width:680px) { .video-card .product-copy { min-height: 62px !important; padding: 9px 45px 10px 10px !important; } .video-card .video-card-meta { margin-bottom: 3px !important; } .video-card .video-size { right: 8px; bottom: 35px; font-size: 9px; } } /* Comics manager refinement: compact single-line title, portrait cover, and calm list rows. */ #comicsDialog { width: min(920px, calc(100% - 28px)) !important; } #comicsDialog .dialog-heading { margin-bottom: 18px !important; } #comicsDialog .dialog-heading h2 { margin: 5px 0 !important; font-size: clamp(24px, 3vw, 34px) !important; line-height: 1.1 !important; white-space: nowrap; } #comicsDialog .dialog-heading p { margin-bottom: 18px !important; } #comicsDialog .comics-form { display: grid !important; grid-template-columns: minmax(220px, .72fr) minmax(240px, 1fr) auto !important; align-items: end; gap: 12px 16px !important; margin-top: 8px !important; } #comicsDialog .comics-form label { color: #575154 !important; } #comicsDialog .comics-title-field { grid-column: 1 / 2; } #comicsDialog .comics-cover-field { grid-column: 2 / 3; } #comicsDialog .comics-form input[type="text"], #comicsDialog .comics-form input:not([type]) { background: #fff !important; color: #171516 !important; } #comicsDialog .comics-cover-area { width: 132px !important; height: 234px !important; aspect-ratio: 9 / 16; border-radius: 16px !important; overflow: hidden; } #comicsDialog #comicsCoverPreview { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 14px !important; } #comicsDialog .comics-form-actions { grid-column: 3 / 4; align-self: end; flex-direction: column; gap: 8px !important; margin: 0 !important; } #comicsDialog .comics-form-actions .ghost-button, #comicsDialog .comics-form-actions .primary-button { min-width: 96px !important; min-height: 42px !important; padding: 9px 12px !important; font-size: 13px !important; } #comicsDialog #comicsList { margin-top: 22px !important; max-height: 40vh; overflow: auto; padding-right: 3px; } #comicsDialog #comicsList .section-row { min-height: 104px; padding: 10px 14px; gap: 14px; background: #fff !important; color: #171516 !important; border-color: #e9e1e4 !important; } #comicsDialog #comicsList .section-row img { width: 84px !important; height: 84px !important; border-radius: 12px !important; object-fit: cover; } #comicsDialog #comicsList .section-row strong { display: block; color: #171516 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; } #comicsDialog #comicsList .section-row small { display: none; } #comicsDialog #comicsList .section-row .ghost-button { width: 44px; min-width: 44px; height: 34px; padding: 4px 7px !important; font-size: 11px !important; background: #fff !important; color: #171516 !important; border: 1px solid #ddd4d8 !important; } #comicsDialog .comics-title-field { align-self: start !important; transform: translateY(-8px); } @media (max-width: 760px) { #comicsDialog .comics-form { grid-template-columns: 1fr auto !important; } #comicsDialog .comics-title-field { grid-column: 1 / -1; } #comicsDialog .comics-cover-field { grid-column: 1 / 2; } #comicsDialog .comics-form-actions { grid-column: 2 / 3; } #comicsDialog .comics-cover-area { width: 112px !important; height: 199px !important; } } /* Admin media uploads: clear drop targets and non-overlapping metadata. */ .file-drop-content { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed #d8cdd2; border-radius: 12px; background: #fff; cursor: pointer; } .file-drop-content small, .file-drop-content span { color: var(--muted); font-size: 12px; } .music-audio-drop.is-dragging .file-drop-content, .music-icon-drop.is-dragging .file-drop-content, .activity-cover-drop.is-dragging .file-drop-content { border-color: var(--rose); background: rgba(221,40,102,.06); } #musicIconPreview { display: none; width: 46px; height: 46px; object-fit: cover; border-radius: 10px; } .music-admin-icon { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; } .music-admin-row { grid-template-columns: auto 34px minmax(0,1fr) auto auto auto; } .banner-slide-setting { position: absolute; left: 6px; bottom: 6px; z-index: 3; display: flex; align-items: center; gap: 3px; padding: 3px 5px; border-radius: 7px; background: rgba(255,255,255,.92); color: #4f474b; font-size: 9px; } .banner-slide-setting select { border: 0; background: transparent; color: inherit; font-size: 9px; } .banner-slide-link { position: absolute; left: 6px; right: 6px; bottom: -31px; width: calc(100% - 12px); min-width: 0; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); font-size: 10px; } #bannerEditor { padding-bottom: 38px; } #bannerEditor { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; overflow: visible; padding: 6px 4px 48px; } #bannerEditor figure { width: auto; height: 220px; min-width: 0; overflow: visible; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); } #bannerEditor figure > img { display: block; width: 100%; height: 150px; border-radius: 16px; object-fit: cover; } #bannerEditor figure > button[data-remove-banner] { z-index: 4; } #bannerEditor .crop-hint { left: 8px; right: auto; top: 114px; bottom: auto; width: auto; height: 28px; padding: 0 10px; border: 1px solid rgba(255,255,255,.7); background: rgba(20,16,20,.76); color: #fff; font-size: 11px; font-weight: 700; } #bannerEditor .crop-hint:hover { background: #fff; color: var(--text); } #bannerEditor .banner-slide-setting { top: 114px; bottom: auto; left: auto; right: 8px; background: rgba(255,255,255,.94); font-size: 10px; } #bannerEditor .banner-product-link { bottom: 30px; font-size: 11px; } #bannerEditor .banner-slide-link { bottom: -8px; font-size: 11px; } #bannerEditor .image-index { z-index: 3; } /* Banner crop controls: real touch-friendly handles replace the old decorative pseudo-elements. */ .crop-canvas-wrap, #bannerCropCanvas { touch-action: none; } .crop-select { touch-action: none; } .crop-select::before, .crop-select::after { content: none; } .crop-handle { position: absolute; width: 16px; height: 16px; border: 2px solid #fff; background: var(--rose); border-radius: 4px; z-index: 2; } .crop-handle-nw { top: -9px; left: -9px; cursor: nwse-resize; } .crop-handle-ne { top: -9px; right: -9px; cursor: nesw-resize; } .crop-handle-sw { bottom: -9px; left: -9px; cursor: nesw-resize; } .crop-handle-se { bottom: -9px; right: -9px; cursor: nwse-resize; } #activitiesDialog .activity-cover-drop .file-drop-content { max-width: 100%; } #activitiesDialog .section-row, #comicsDialog .section-row { display: grid; grid-template-columns: 22px 52px minmax(0,1fr) auto auto; align-items: center; } #activitiesDialog .section-row > div, #comicsDialog .section-row > div { min-width: 0; overflow: hidden; } #activitiesDialog .section-row small { display: block; max-width: min(54vw, 560px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media(max-width:680px) { .music-admin-row { grid-template-columns: auto 34px minmax(0,1fr) auto; } .music-admin-row button[data-track-down], .music-admin-row button[data-track-up] { display: none; } #activitiesDialog .section-row, #comicsDialog .section-row { grid-template-columns: 18px 48px minmax(0,1fr) auto; } #activitiesDialog .section-row [data-delete-activities], #comicsDialog .section-row [data-delete-comics] { grid-column: 4; } .banner-slide-link { font-size: 9px; } } /* Final visual corrections from the latest review. */ .topbar .top-module-nav button, .topbar .top-module-nav button[aria-selected="true"] { color: #000 !important; font-weight: 780 !important; text-shadow: 0 0 .01px #000; } .topbar .top-module-nav button:hover { color: var(--rose) !important; } body:not(.world-open) .news-card { background: #fff !important; box-shadow: 0 12px 28px rgba(76, 143, 214, .20) !important; } body:not(.world-open) .activity-card { background: #fff !important; box-shadow: 0 12px 28px rgba(224, 94, 145, .20) !important; } body:not(.world-open) .contact-card { background: #fff !important; box-shadow: 0 12px 28px rgba(229, 181, 63, .24) !important; } body:not(.world-open) .news-card:hover { box-shadow: 0 18px 38px rgba(76, 143, 214, .30) !important; } body:not(.world-open) .activity-card:hover { box-shadow: 0 18px 38px rgba(224, 94, 145, .30) !important; } body:not(.world-open) .contact-card:hover { background: #fff !important; box-shadow: 0 18px 38px rgba(229, 181, 63, .34) !important; } .product-card .product-copy h3 { color: #111 !important; } .product-card .product-copy { padding-right: 58px !important; } .product-card .product-copy h3 { font-family: Inter, "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif !important; font-size: 15px !important; font-weight: 300 !important; letter-spacing: .02em !important; color: #111 !important; line-height: 1.42 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; overflow-wrap: normal !important; word-break: normal !important; } .product-card .pick-toggle { box-shadow: none !important; filter: none !important; right: 12px !important; bottom: 13px !important; } .product-card .pick-toggle:hover { filter: none !important; } .product-card .pick-toggle[aria-pressed="true"] path { filter: none !important; } .video-dialog .video-viewer video { object-fit: contain !important; background: #fff !important; } .video-dialog .video-player-container { background: #fff !important; } @media(max-width:680px) { .product-card .product-copy { padding-right: 46px !important; } .product-card .product-copy h3 { font-size: 13px !important; } .product-card .pick-toggle { right: 7px !important; bottom: 9px !important; } } /* 2026-08-20 UI refinement: quiet navigation, balanced controls and 3:4 media cards. */ .topbar .top-module-nav button { color: #171717 !important; font-size: 15px !important; font-weight: 700 !important; } .topbar .top-module-nav button[aria-selected="true"], .topbar .top-module-nav button:hover { color: var(--rose) !important; } .language-switch { --segments: 4 !important; width: 190px !important; } .language-switch i { width: calc((100% - 10px) / 4) !important; } .language-switch[data-position="1"] i { transform: translateX(100%) !important; } .language-switch[data-position="2"] i { transform: translateX(200%) !important; } .language-switch[data-position="3"] i { transform: translateX(300%) !important; } .language-switch.compact button { padding-left: 7px !important; padding-right: 7px !important; font-size: 10px !important; } .search kbd { display: none !important; } body:not(.world-open) .hero-carousel.square { aspect-ratio: 16 / 5.2 !important; min-height: 0 !important; max-height: 330px !important; } body:not(.world-open) .category-bar { position: relative !important; top: auto !important; margin-top: 16px !important; justify-content: center !important; gap: 0 !important; overflow: visible !important; } body:not(.world-open) .category-button { flex: 1 1 0 !important; max-width: 190px !important; min-width: 0 !important; text-align: center !important; padding: 13px 8px !important; font-size: 14px !important; } body:not(.world-open) .feature-card:hover { background: linear-gradient(135deg, rgba(255, 231, 239, .92), rgba(244, 244, 255, .96)) !important; box-shadow: 0 18px 42px rgba(213, 82, 126, .16) !important; } body:not(.world-open) .feature-card:nth-child(2):hover { background: linear-gradient(135deg, rgba(235, 243, 255, .96), rgba(255, 235, 241, .92)) !important; } .video-card .product-cover { aspect-ratio: 3 / 4 !important; } .video-card .product-copy { min-height: 94px; padding-bottom: 18px; } .video-card .product-meta { justify-content: space-between; padding-right: 30px; } .video-card .play-badge { right: 13px; bottom: 13px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.82); background: rgba(255,255,255,.92); color: var(--rose); font-size: 0; display: grid; place-items: center; } .video-card .play-badge::before { content: ""; width: 0; height: 0; margin-left: 3px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid currentColor; } .video-card .video-pick-card-toggle { z-index: 5; } .video-dialog[open] { width: min(1080px, calc(100% - 24px)) !important; max-height: 92vh !important; grid-template-columns: 1fr !important; grid-template-rows: minmax(0, 1fr) auto !important; background: #fff !important; } .video-dialog .video-viewer { height: min(76vh, 760px) !important; min-height: 360px !important; background: #fff !important; } .video-dialog .video-player-container { width: 100%; height: 100%; position: relative; display: grid; place-items: center; background: #fff; overflow: hidden; } .video-dialog .video-viewer video { width: 100%; height: 100%; max-height: none !important; object-fit: cover !important; background: #fff; } .video-dialog .video-detail-bar { min-height: 108px; padding: 20px 28px !important; display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 20px; background: #fff; color: #171717; } .video-detail-copy { min-width: 0; } .video-detail-bar strong { display: block; margin: 0 0 6px !important; color: var(--rose); font-size: 13px; letter-spacing: .15em; } .video-detail-bar h2 { margin: 0 !important; font-size: clamp(20px, 2.8vw, 34px) !important; color: #171717; } .video-detail-bar p { margin: 7px 0 0 !important; color: #777; } .video-pick-toggle { flex: 0 0 auto; border: 0; background: transparent; color: #171717; width: 58px; height: 58px; display: grid; place-items: center; cursor: pointer; } .video-pick-toggle svg { width: 38px; height: 38px; } .video-pick-toggle path { fill: transparent; stroke: currentColor; stroke-width: 1.55; transition: fill .2s, stroke .2s, transform .2s; } .video-pick-toggle[aria-pressed="true"] { color: var(--rose); } .video-pick-toggle[aria-pressed="true"] path { fill: var(--rose); stroke: var(--rose); } .video-play-overlay { right: 22px !important; bottom: 22px !important; left: auto !important; top: auto !important; transform: none !important; width: 58px !important; height: 58px !important; border-radius: 50% !important; background: rgba(255,255,255,.94) !important; color: var(--rose) !important; display: grid !important; place-items: center !important; box-shadow: 0 12px 30px rgba(30,20,28,.2) !important; } .video-play-overlay svg { width: 23px; height: 23px; display: block; margin-left: 3px; } .detail-pick-bar .detail-pick-toggle { width: 68px !important; height: 68px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #222 !important; } .detail-pick-bar .detail-pick-toggle svg { width: 38px !important; height: 38px !important; } .detail-pick-bar .detail-pick-toggle path { fill: transparent; stroke: currentColor; stroke-width: 1.5; } .detail-pick-bar .detail-pick-toggle[aria-pressed="true"] { color: var(--rose) !important; background: transparent !important; } .detail-pick-bar .detail-pick-toggle[aria-pressed="true"] path { fill: var(--rose) !important; stroke: var(--rose) !important; } .cover-editor { color: #171717 !important; background: #fff !important; border: 1px solid #eadfe3 !important; border-radius: 22px !important; box-shadow: 0 14px 34px rgba(72, 45, 58, .06); } .cover-editor-heading strong { color: #171717 !important; } .cover-editor-heading small { color: #777 !important; } .cover-controls { padding: 16px !important; border: 1px solid #eee3e5; border-radius: 18px; background: #fcfafb; align-self: stretch; } .cover-controls input[type="range"] { width: 100%; margin: 0; accent-color: var(--rose); } .cover-controls output { color: var(--rose); font-weight: 800; } .admin-dialog { border-radius: 26px !important; } .admin-dialog .dialog-heading { margin-bottom: 20px; } .admin-dialog .admin-form { gap: 18px; } .admin-dialog .form-actions { gap: 10px; margin-top: 8px; } .admin-dialog .ghost-button, .admin-dialog .primary-button { min-height: 44px; border-radius: 14px; } .drag-handle { display: none !important; } body.admin-mode .product-grid[data-sort-mode="custom"] .drag-handle { display: block !important; } .news-admin-page { min-height: calc(100vh - 120px); padding: 32px 24px 90px; background: var(--bg); color: var(--text); } .news-admin-page-inner { width: min(1280px, 100%); margin: 0 auto; } .news-admin-page-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; margin-bottom: 30px; } .news-admin-page-header h1 { margin: 6px 0 4px; font-size: clamp(30px, 4vw, 52px); } .news-admin-page-header p { margin: 0; color: var(--muted); } .news-admin-layout { display: grid; grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr); gap: 26px; align-items: start; } .news-admin-list { display: grid; gap: 10px; } .news-admin-row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; text-align: left; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-strong); color: var(--text); cursor: pointer; transition: .2s; } .news-admin-row:hover, .news-admin-row.is-active { border-color: rgba(221,40,102,.45); box-shadow: 0 12px 28px rgba(221,40,102,.1); transform: translateY(-1px); } .news-admin-row-cover { width: 92px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #f4edef; } .news-admin-row-cover img { width: 100%; height: 100%; display: block; object-fit: cover; } .news-admin-row strong, .news-admin-row small { display: block; } .news-admin-row strong { font-size: 16px; margin-bottom: 8px; } .news-admin-row small { color: var(--muted); line-height: 1.5; } .news-admin-empty { padding: 50px 22px; color: var(--muted); border: 1px dashed var(--line); border-radius: 18px; text-align: center; } .news-article-editor { display: grid; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel-strong); box-shadow: 0 18px 44px rgba(72,45,58,.07); } .news-article-editor label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 750; } .news-article-editor input { width: 100%; border: 1px solid var(--line); border-radius: 13px; padding: 12px 14px; background: var(--panel); color: var(--text); } .news-article-cover-button { justify-self: start; } .news-article-cover-preview { width: 170px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; } .rich-editor-toolbar { display: flex; gap: 6px; align-items: center; padding: 7px; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; background: #faf8f9; } .rich-editor-toolbar button, .rich-editor-toolbar select { min-height: 34px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #222; padding: 5px 10px; } .news-rich-editor { min-height: 300px; padding: 16px; border: 1px solid var(--line); border-radius: 0 0 14px 14px; background: #fff; color: #171717; line-height: 1.75; outline: 0; } .news-rich-editor { max-width: 100%; overflow-x: hidden; overflow-wrap: anywhere; } .news-rich-editor img { display: block; width: auto; max-width: 100%; height: auto !important; max-height: none; object-fit: contain; border-radius: 10px; margin: 12px 0; } .news-detail-content { max-width: 100%; overflow-x: hidden; overflow-wrap: anywhere; } .news-detail-content img { display: block; width: auto; max-width: 100%; height: auto !important; object-fit: contain; } .news-admin-row-wrap { display: grid; gap: 6px; } .small-slider-setting { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; padding-left: 4px; } .small-slider-setting select { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); padding: 4px 7px; font-size: 11px; } .banner-product-link { position: absolute; left: 6px; right: 6px; bottom: -38px; display: flex; align-items: center; gap: 4px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--text); font-size: 10px; z-index: 2; } .banner-product-link select { min-width: 0; flex: 1; border: 0; background: transparent; color: inherit; font-size: 10px; } #bannerEditor .banner-product-link { bottom: 30px; font-size: 11px; } #bannerEditor .banner-slide-link { bottom: -8px; } #bannerEditor { padding-bottom: 82px; } .news-rich-editor:empty::before { content: attr(data-placeholder); color: #aaa; } @media(max-width: 760px) { .language-switch { width: 166px !important; } body:not(.world-open) .category-button { font-size: 12px !important; padding-inline: 4px !important; } .video-dialog[open] { width: 100% !important; max-height: 100vh !important; border-radius: 0 !important; } .video-dialog .video-viewer { height: 68vh !important; } .video-dialog .video-detail-bar { min-height: 100px; padding: 16px !important; } .news-admin-page { padding: 22px 12px 60px; } .news-admin-page-header { grid-template-columns: 1fr auto; gap: 14px; } .news-admin-page-header .detail-back { grid-column: 1 / -1; } .news-admin-layout { grid-template-columns: 1fr; } .news-article-editor { padding: 16px; } } @media(max-width:680px) { .drag-handle { display: none !important; } body:not(.world-open) .hero-carousel.square { aspect-ratio: 16 / 6.2 !important; max-height: 220px !important; } body:not(.world-open) .category-bar { margin-top: 12px !important; } body:not(.world-open) .category-button { padding-block: 11px !important; } .video-card .product-copy { min-height: 82px; } .video-card .play-badge { width: 38px; height: 38px; right: 9px; bottom: 9px; } .video-card .pick-toggle { right: 7px; bottom: 7px; } } :root[data-theme="dark"] body:not(.world-open), body:not(.world-open) { background: #fff !important; background-image: none !important; color: #171717 !important; } :root[data-theme="dark"] body:not(.world-open)::after, :root[data-theme="light"] body:not(.world-open)::after { opacity: 0 !important; } .detail-pick-bar { display: flex !important; align-items: center; justify-content: center; min-height: 76px; padding: 10px 18px; border: 1px solid #e7e1df; border-radius: 18px; background: #fff !important; box-shadow: 0 10px 24px rgba(39, 26, 31, .05); } .detail-pick-bar .detail-pick-toggle { width: 48px; height: 48px; border: 1px solid #e2dcda; border-radius: 50%; background: #fff !important; color: #d92b67; box-shadow: none; } .admin-dialog, #editDialog, .image-gallery-dropzone, .cover-editor, .detail-images-editor, .product-meta-editor { color: #171717 !important; background: #fff !important; } .admin-dialog input, .admin-dialog select, .admin-dialog textarea, #editDialog input, #editDialog select, #editDialog textarea { border-color: #ded9d6 !important; background: #fff !important; color: #171717 !important; } @media(max-width:760px) { .topbar .top-module-nav { gap: 10px; } .topbar .top-module-nav button { font-size: 11px; } body:not(.world-open) .catalog-toolbar { align-items: stretch; flex-direction: column; } body:not(.world-open) .catalog-toolbar-actions, body:not(.world-open) .catalog-toolbar .search { width: 100%; } body:not(.world-open) .catalog-toolbar .search { min-width: 0; flex: 1; } } @media(max-width:480px) { .topbar .top-module-nav { gap: 7px; } .topbar .top-module-nav button { padding-left: 0 !important; padding-right: 0 !important; font-size: 10px; } } /* Final navigation/theme guard: keep the main gallery light and the three module links visible. */ :root, :root[data-theme="light"], :root[data-theme="dark"] { color-scheme: light; background: #fff; } :root[data-theme="dark"] body:not(.world-open) { background: #fff !important; background-image: none !important; color: #171717 !important; } :root[data-theme="dark"] body:not(.world-open)::after { opacity: 0 !important; } body:not(.world-open) { background: #fff !important; background-image: none !important; color: #171717; } .topbar .top-module-nav, body.world-open .topbar .top-module-nav { display: flex !important; position: static !important; align-items: center; justify-content: center; width: auto !important; min-width: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .topbar .top-module-nav > i, .topbar .top-module-nav .world-nav-mascot { display: none !important; } .topbar .top-module-nav button { padding: 12px 2px 11px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #6d6866 !important; box-shadow: none !important; font-size: 14px; font-weight: 600; white-space: nowrap; } .topbar .top-module-nav button:hover { padding-left: 10px !important; padding-right: 10px !important; border-radius: 9px !important; background: #f5f3f2 !important; } .topbar .top-module-nav button::after { left: 50%; right: 50%; background: #d92b67; } .topbar .top-module-nav button:hover, .topbar .top-module-nav button[aria-selected="true"] { color: #d92b67 !important; } .topbar .top-module-nav button:hover::after, .topbar .top-module-nav button[aria-selected="true"]::after { left: 0; right: 0; } body.world-open .topbar { display: flex !important; } body.world-open .media-switch { display: flex !important; } body:not(.world-open) .catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; } body:not(.world-open) .catalog-toolbar-actions { display: flex; align-items: center; gap: 12px; min-width: 0; } body:not(.world-open) .catalog-toolbar .search { width: min(300px, 36vw); min-width: 190px; height: 42px; border: 1px solid #e3dfdd; border-radius: 11px; background: #fff; box-shadow: none; } body:not(.world-open) .catalog-toolbar select { border: 0; border-bottom: 1px solid #d8d2cf; border-radius: 0; background: transparent; color: #4f4947; } body:not(.world-open) .product-cover { aspect-ratio: 3 / 4 !important; } .detail-pick-bar { display: flex !important; align-items: center; justify-content: center; min-height: 76px; padding: 10px 18px; border: 1px solid #e7e1df; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(39, 26, 31, .05); } .detail-pick-bar .detail-pick-toggle { width: 48px; height: 48px; border: 1px solid #e2dcda; border-radius: 50%; background: #fff; color: #d92b67; box-shadow: none; } .admin-dialog, #editDialog, .image-gallery-dropzone, .cover-editor, .detail-images-editor, .product-meta-editor { color: #171717; background: #fff !important; } .admin-dialog input, .admin-dialog select, .admin-dialog textarea, #editDialog input, #editDialog select, #editDialog textarea { border-color: #ded9d6 !important; background: #fff !important; color: #171717 !important; } @media(max-width:760px) { .topbar .top-module-nav { gap: 10px; } .topbar .top-module-nav button { font-size: 11px; } body:not(.world-open) .catalog-toolbar { align-items: stretch; flex-direction: column; } body:not(.world-open) .catalog-toolbar-actions, body:not(.world-open) .catalog-toolbar .search { width: 100%; } body:not(.world-open) .catalog-toolbar .search { min-width: 0; flex: 1; } } @media(max-width:480px) { .topbar .top-module-nav { gap: 7px; } .topbar .top-module-nav button { padding-left: 0 !important; padding-right: 0 !important; font-size: 10px; } } /* 2026-08-20: approved light editorial direction for the main gallery. */ :root, :root[data-theme="light"], :root[data-theme="dark"] { color-scheme: light; --bg: #fff; --panel: #fff; --panel-strong: #fff; --text: #171717; --muted: #76716f; --line: #e7e3e1; --accent: #d92b67; --accent-2: #d92b67; --rose: #d92b67; --shadow: 0 16px 40px rgba(39, 26, 31, .07); } :root[data-theme="dark"] body:not(.world-open) { background: #fff !important; color: #171717 !important; } .topbar { width: min(1720px, calc(100% - 80px)); min-height: 68px; padding: 8px 18px; border: 1px solid #ece8e6; border-radius: 16px; background: rgba(255, 255, 255, .96); box-shadow: 0 10px 28px rgba(39, 26, 31, .05); backdrop-filter: none; -webkit-backdrop-filter: none; } .topbar .top-module-nav { --segments: 3; position: static; display: flex !important; align-items: center; justify-content: center; width: auto; min-width: 0; margin: 0 auto; padding: 0 12px; gap: clamp(18px, 3vw, 54px); border: 0; border-radius: 0; background: transparent; box-shadow: none; isolation: auto; } .topbar .top-module-nav > i, .topbar .top-module-nav .world-nav-mascot { display: none !important; } .topbar .top-module-nav button { position: relative; z-index: 1; padding: 12px 2px 11px; border: 0; border-radius: 0; background: transparent; color: #6d6866; font-size: 14px; font-weight: 600; white-space: nowrap; transition: color .2s ease; } .topbar .top-module-nav button::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: 2px; height: 2px; border-radius: 2px; background: var(--rose); transition: left .2s ease, right .2s ease; } .topbar .top-module-nav button:hover, .topbar .top-module-nav button[aria-selected="true"] { color: var(--rose); } .topbar .top-module-nav button:hover::after, .topbar .top-module-nav button[aria-selected="true"]::after { left: 0; right: 0; } .topbar .top-actions { flex: 0 0 auto; gap: 14px; } .topbar .status-chip { padding: 0; font-size: 11px; color: #8b8582; white-space: nowrap; } .topbar .language-cluster > small { color: #8b8582; } .topbar .language-cluster .segmented.compact { width: 74px; padding: 3px; border: 1px solid #e5e0de; border-radius: 999px; background: #fff; box-shadow: none; } .topbar .language-cluster .segmented.compact i { top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 2); border-radius: 999px; background: var(--rose); box-shadow: none; } .topbar .language-cluster .segmented.compact button { padding: 6px 4px; color: #78716e; font-size: 10px; } .topbar .language-cluster .segmented.compact button[aria-selected="true"] { color: #fff; } body.world-open .topbar { display: flex !important; } body.world-open .topbar .top-module-nav { display: flex !important; } .category-bar { display: flex; align-items: center; gap: clamp(18px, 3vw, 42px); padding: 0 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .category-button { flex: 0 0 auto; padding: 13px 0 11px; border-radius: 0; background: transparent; color: #333; font-size: 13px; font-weight: 600; position: relative; } .category-button::before { display: none; } /* 分类栏下划线：未选中收起为 0 宽，选中时展开（从短变长动画） */ .category-button::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 0; height: 2px; border-radius: 1px; background: #0ea5e9; transform: translateX(-50%); transition: width .25s ease; } .category-button[aria-selected="true"] { color: #0369a1 !important; font-size: 14px !important; font-weight: 700 !important; } .category-button[aria-selected="true"]::after { width: 100%; } .category-button:hover { color: #0284c7 !important; transform: none; } .catalog-toolbar { padding: 26px 4px 14px; color: #5f5957; } .catalog-toolbar-actions { display: flex; align-items: center; gap: 12px; min-width: 0; } .catalog-toolbar .search { width: min(300px, 36vw); height: 42px; padding: 0 12px; gap: 8px; border: 1px solid #e3dfdd; border-radius: 11px; background: #fff; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .catalog-toolbar .search > span { font-size: 22px; } .catalog-toolbar .search input { font-size: 12px; } .catalog-toolbar .search kbd { padding: 4px 6px; border-color: #e3dfdd; background: #faf9f8; font-size: 9px; } .catalog-toolbar select { border: 0; border-bottom: 1px solid #d8d2cf; border-radius: 0; background: transparent; padding: 8px 2px; color: #4f4947; font-size: 12px; } .detail-title-row { margin-bottom: 0; } .detail-pick-bar { display: flex; align-items: center; justify-content: center; min-height: 76px; padding: 10px 18px; border: 1px solid #e7e1df; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(39, 26, 31, .05); } .detail-pick-bar .detail-pick-toggle { width: 48px; height: 48px; border: 1px solid #e2dcda; border-radius: 50%; background: #fff; color: var(--rose); box-shadow: none; } .detail-pick-bar .detail-pick-toggle:hover { border-color: var(--rose); background: #fff7f9; } .detail-pick-bar .detail-pick-toggle[aria-pressed="true"] { background: var(--rose); border-color: var(--rose); color: #fff; } /* Admin and upload surfaces: white canvas, black text, restrained rose accents. */ .admin-dialog, #editDialog { color: #171717; background: #fff; border: 1px solid #e8e3e1; box-shadow: 0 28px 90px rgba(39, 26, 31, .16); } .admin-dialog .dialog-heading h2, #editDialog .dialog-heading h2, .admin-dialog .dialog-heading p, #editDialog .dialog-heading p { color: #171717; } .admin-dialog .dialog-heading p, #editDialog .dialog-heading p, .admin-dialog small, #editDialog small { color: #77716e; } .admin-dialog .dialog-close, #editDialog .dialog-close { border: 1px solid #e4dfdd; background: #fff; color: #171717; } .admin-dialog input, .admin-dialog select, .admin-dialog textarea, #editDialog input, #editDialog select, #editDialog textarea { border-color: #ded9d6; background: #fff; color: #171717; } .admin-dialog .ghost-button, #editDialog .ghost-button { border-color: #dcd6d3; background: #fff; color: #171717; } .admin-dialog .ghost-button:hover, #editDialog .ghost-button:hover { border-color: var(--rose); color: var(--rose); background: #fff8fa; } .image-gallery-dropzone, .cover-editor, .detail-images-editor, .product-meta-editor { border-color: #e5dfdd; background: #fff; box-shadow: 0 8px 24px rgba(39, 26, 31, .04); } .image-gallery-dropzone .image-sort-hint small, .image-gallery-dropzone .image-sort-hint span, .cover-editor-heading strong, .product-meta-editor-heading strong, .detail-images-editor-heading strong, .cover-zoom-label { color: #171717; } .image-gallery-dropzone .ghost-button, .detail-images-editor .ghost-button, .product-meta-editor .ghost-button, .cover-editor .ghost-button { color: #171717; border-color: #dcd6d3; } .image-editor figure, .detail-image-dropzone .image-editor figure { border-color: #e2ddda; background: #f8f7f6; } .image-editor .image-index, .detail-image-dropzone .image-editor figure .image-index { background: rgba(23, 23, 23, .78); color: #fff; } .image-editor button, .detail-image-dropzone .image-editor figure button { background: #fff; border: 1px solid #e2ddda; color: #171717; } .cover-preview { border-color: #e1dcda; background: #f7f6f5; color: #77716e; } .news-cover-area { background: #faf9f8; border-color: #ddd7d4; } .news-cover-btn, .admin-dialog .primary-button, #editDialog .primary-button { background: #171717; color: #fff; } /* Login methods are intentionally separated so account-password login and member verification-code login are easy to understand at a glance. */ #loginDialog .admin-form { gap: 14px; } #loginDialog .member-code-login { display: grid; gap: 12px; margin-top: 2px; padding: 16px; border: 1px solid #e5dfdd; border-radius: 18px; background: #fcfafb; } #loginDialog .member-code-login-title { color: #171717; font-size: 16px; font-weight: 800; } #loginDialog .member-code-login > label { gap: 6px; } #loginDialog .member-code-login .register-verification-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; } #loginDialog .member-code-login .register-verification-row label { min-width: 0; } #loginDialog .member-code-login .register-verification-row input { max-width: 180px; } #loginDialog .member-code-login > button { justify-self: start; } @media (max-width: 1160px) { .topbar { width: calc(100% - 32px); } .topbar .top-module-nav { gap: 20px; } .topbar .status-chip { display: none; } } @media (max-width: 760px) { .topbar { width: calc(100% - 16px); min-height: 56px; padding: 6px 10px; } .topbar .brand b { font-size: 12px; } .topbar .top-module-nav { gap: 10px; padding: 0 5px; } .topbar .top-module-nav button { font-size: 11px; } .topbar .language-cluster { display: none; } .catalog-toolbar { display: grid; grid-template-columns: 1fr; gap: 10px; } .catalog-toolbar-actions { width: 100%; } .catalog-toolbar .search { width: auto; flex: 1; } } @media (max-width: 480px) { .topbar .brand { max-width: 108px; } .topbar .brand img { width: 28px; height: 28px; } .topbar .top-module-nav { gap: 7px; } .topbar .top-module-nav button { padding-left: 0; padding-right: 0; font-size: 10px; } .detail-pick-bar { min-height: 66px; } } /* 2026-08-20: keep the splash artwork in normal flow at every viewport size. */ .startup-splash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 1.6vh, 16px); min-height: 100vh; min-height: 100dvh; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); overflow: auto; text-align: center; } .startup-box { position: relative; flex: 0 0 auto; width: clamp(76px, 15vw, 108px); height: clamp(58px, 11vw, 78px); margin: 0 0 clamp(2px, 0.8vh, 8px); transform: rotate(-3deg); animation: box-wiggle 2.4s ease-in-out infinite; } .startup-logo { flex: 0 0 auto; width: clamp(56px, 10vw, 72px); height: clamp(56px, 10vw, 72px); } .startup-splash strong, .startup-splash small { flex: 0 0 auto; width: min(100%, 360px); max-width: calc(100vw - 48px); overflow-wrap: anywhere; text-align: center; } .startup-splash strong { font-size: clamp(16px, 2.2vw, 22px); line-height: 1.2; } .startup-splash small { font-size: clamp(11px, 1.4vw, 13px); line-height: 1.4; } .startup-progress { flex: 0 0 auto; width: min(180px, calc(100vw - 48px)); margin-top: clamp(2px, 1.2vh, 18px); } .startup-countdown { flex: 0 0 auto; min-height: 1em; color: #796b76; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: .04em; } /* The bar is a steady 14-second visual cue; loading completion still wins. */ .startup-progress i { width: 0; background: #dd2866 !important; animation: none !important; } @keyframes splash-progress-linear { from { width: 0; } to { width: 100%; } } /* Approved editor layout: compact fields, cover tools on the left, media and product specifications in the right column. This final cascade is kept after the legacy dialog rules so the approved arrangement remains stable. */ #editDialog { width: min(1480px, calc(100vw - 32px)) !important; height: calc(100vh - 24px) !important; max-height: calc(100vh - 24px) !important; } #editDialog #editForm { display: grid !important; grid-template-columns: minmax(280px, .4fr) minmax(0, 1fr) !important; grid-auto-rows: auto; gap: 12px !important; } #editDialog #editForm > .edit-basic-grid, #editDialog #editForm > .switch-row, #editDialog #editForm > #imageDropZone, #editDialog #editForm > .upload-progress { grid-column: 1 / -1 !important; } #editDialog #editForm > #coverEditor { grid-column: 1 !important; grid-row: span 2 !important; } #editDialog #editForm > #detailImagesEditor, #editDialog #editForm > #productMetaEditor { grid-column: 2 !important; grid-row: auto !important; } #editDialog .edit-basic-grid { grid-template-columns: minmax(250px, .34fr) minmax(0, 1fr) !important; gap: 10px !important; } #editDialog .edit-language-fields { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 7px !important; } #editDialog .edit-field-group { padding: 9px 11px !important; } #editDialog .edit-basic-grid input, #editDialog .edit-basic-grid select { height: 32px !important; min-height: 32px !important; padding: 6px 9px !important; font-size: 11px !important; } #editDialog .cover-editor-layout { grid-template-columns: minmax(145px, 180px) minmax(0, 1fr) !important; gap: 10px !important; } #editDialog .cover-preview { width: min(180px, 100%) !important; aspect-ratio: 3 / 4 !important; } #editDialog #detailImagesEditor, #editDialog #productMetaEditor { padding: 11px !important; } #editDialog #imageDropZone .image-editor, #editDialog #detailImageEditor { display: flex !important; max-height: 108px !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 7px !important; } #editDialog .product-meta-fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px 10px !important; } #editDialog .product-meta-fields .meta-row.two-col { gap: 10px !important; } #editDialog .product-meta-fields input { height: 30px !important; min-height: 30px !important; padding: 5px 8px !important; font-size: 11px !important; } #editDialog .product-meta-fields .meta-row.two-col input { width: min(160px, 100%) !important; max-width: 160px !important; } #editDialog .dimension-inputs input { width: 72px !important; min-width: 42px !important; max-width: 72px !important; } /* Mobile-only safety corrections. Desktop navigation and editor geometry are intentionally untouched. */ @media (max-width: 680px) { body { overflow-x: hidden !important; padding-top: max(12px, env(safe-area-inset-top)) !important; } .topbar, body.world-open .topbar { top: 0 !important; margin-top: max(8px, env(safe-area-inset-top)) !important; min-height: 132px !important; grid-template-rows: auto auto !important; row-gap: 8px !important; } .topbar .top-actions .language-cluster { display: flex !important; } .topbar .top-module-nav, body.world-open .topbar .top-module-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch !important; justify-content: stretch !important; gap: 0 !important; width: 100% !important; padding: 0 !important; overflow: visible !important; } .topbar .top-module-nav button, .topbar .top-module-nav button:hover, .topbar .top-module-nav button[aria-selected="true"] { min-width: 0 !important; width: 100% !important; min-height: 42px !important; padding: 7px 3px !important; font-size: clamp(10px, 2.7vw, 13px) !important; line-height: 1.08 !important; text-align: center !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; } body:not(.world-open) .category-bar { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; overflow: visible !important; } body:not(.world-open) .category-button, body:not(.world-open) .category-button:hover, body:not(.world-open) .category-button[aria-selected="true"] { min-width: 0 !important; width: 100% !important; min-height: 48px !important; padding: 7px 3px !important; font-size: clamp(10px, 2.7vw, 13px) !important; line-height: 1.12 !important; letter-spacing: 0 !important; text-align: center !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; } #editDialog { width: calc(100vw - 12px) !important; height: calc(100vh - 12px) !important; max-height: calc(100vh - 12px) !important; } #editDialog #editForm { grid-template-columns: 1fr !important; } #editDialog #editForm > #coverEditor, #editDialog #editForm > #detailImagesEditor, #editDialog #editForm > #productMetaEditor { grid-column: 1 !important; grid-row: auto !important; } #editDialog .edit-basic-grid, #editDialog .edit-basic-fields, #editDialog .edit-language-fields, #editDialog .product-meta-fields, #editDialog .product-meta-fields .meta-row.two-col { grid-template-columns: 1fr !important; } #editDialog .cover-editor-layout { grid-template-columns: 150px minmax(0, 1fr) !important; } } @keyframes box-wiggle { 50% { transform: rotate(3deg); } } @media (max-width: 420px), (max-height: 620px) { .startup-splash { gap: 7px; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); } .startup-box { margin-bottom: 0; } .startup-logo { width: 58px; height: 58px; } .startup-progress { margin-top: 5px; } } /* 2026-08-20: give Safari's root canvas the same dark background as the page. */ html, body { width: 100%; min-height: 100%; overflow-x: hidden; background-color: var(--bg); } html { background-repeat: no-repeat; background-size: cover; } body { min-height: 100vh; min-height: 100dvh; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } :root[data-theme="dark"] { background-color: #13162b; background-image: linear-gradient(125deg, #111326 0%, #20233d 38%, #334360 64%, #12142a 100%); } :root[data-theme="dark"] body:not(.world-open) { background-color: #13162b; background-image: linear-gradient(125deg, #111326 0%, #20233d 38%, #334360 64%, #12142a 100%); } @media (prefers-reduced-motion: reduce) { .startup-box { transform: rotate(-3deg); } } /* TNTSPACE-inspired final homepage polish: quiet cards, clear breathing room. */ body:not(.world-open) .feature-card { min-height: 118px !important; height: 118px !important; padding: 0 !important; border: 0 !important; border-radius: 18px !important; background: var(--panel-strong) !important; box-shadow: 0 12px 30px rgba(44, 35, 55, .10) !important; } body:not(.world-open) .feature-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(44, 35, 55, .16) !important; } /* 三张小轮播卡片：柔和彩色阴影（蓝/粉/黄），与左侧导航方案 C 同风格 */ body:not(.world-open) .feature-card.news-card { box-shadow: 0 8px 20px rgba(14, 165, 233, .12), 0 1px 4px rgba(14, 165, 233, .06) !important; border: 1px solid rgba(14, 165, 233, .18) !important; } body:not(.world-open) .feature-card.news-card:hover { box-shadow: 0 12px 28px rgba(14, 165, 233, .18), 0 2px 8px rgba(14, 165, 233, .1) !important; } body:not(.world-open) .feature-card.activity-card { box-shadow: 0 8px 20px rgba(236, 72, 153, .12), 0 1px 4px rgba(236, 72, 153, .06) !important; border: 1px solid rgba(236, 72, 153, .18) !important; } body:not(.world-open) .feature-card.activity-card:hover { box-shadow: 0 12px 28px rgba(236, 72, 153, .18), 0 2px 8px rgba(236, 72, 153, .1) !important; } body:not(.world-open) .feature-card.contact-card { box-shadow: 0 8px 20px rgba(234, 179, 8, .12), 0 1px 4px rgba(234, 179, 8, .06) !important; border: 1px solid rgba(234, 179, 8, .22) !important; } body:not(.world-open) .feature-card.contact-card:hover { box-shadow: 0 12px 28px rgba(234, 179, 8, .18), 0 2px 8px rgba(234, 179, 8, .1) !important; } body:not(.world-open) .feature-card-header { position: absolute !important; inset: 10px 12px auto !important; z-index: 5 !important; margin: 0 !important; pointer-events: none; } body:not(.world-open) .feature-card-header .feature-badge { padding: 4px 8px !important; border-radius: 999px !important; background: rgba(255,255,255,.86) !important; box-shadow: 0 4px 12px rgba(40,30,50,.08); } body:not(.world-open) .feature-card-header .feature-more { pointer-events: auto; color: var(--muted); font-size: 11px; font-weight: 400; text-shadow: 0 1px 8px rgba(255,255,255,.7); } body:not(.world-open) .feature-slider { position: absolute !important; inset: 0 !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; border-radius: inherit !important; } body:not(.world-open) .feature-slide { grid-template-columns: 43% minmax(0, 57%) !important; gap: 0 !important; height: 100% !important; padding: 0 !important; border: 0 !important; border-radius: inherit !important; background: var(--panel-strong) !important; } body:not(.world-open) .feature-slide img { width: 100% !important; height: 100% !important; min-height: 0 !important; border-radius: 18px 0 0 18px !important; object-fit: cover !important; } body:not(.world-open) .feature-slide-text { align-self: center; padding: 26px 16px 12px !important; } body:not(.world-open) .feature-slide-text strong { margin: 0 0 5px !important; font-size: 15px !important; line-height: 1.25 !important; } body:not(.world-open) .feature-slide-text small { font-size: 11px !important; } body:not(.world-open) .contact-card .feature-contact-body { height: 100%; padding: 26px 18px 10px !important; } /* The World view is a destination panel; remove the redundant gallery switch above it. */ body.world-open .media-switch { display: none !important; } /* Light gallery mode should be clean white; keep Samuel World dark and atmospheric. */ :root[data-theme="light"] body:not(.world-open) { background: #fff !important; } :root[data-theme="light"] body:not(.world-open)::after { opacity: 0 !important; } @media(max-width:680px) { body:not(.world-open) .feature-card { min-height: 96px !important; height: 96px !important; } body:not(.world-open) .feature-slide-text { padding: 23px 11px 9px !important; } body:not(.world-open) .feature-slide-text strong { font-size: 12px !important; } body:not(.world-open) .feature-slide-text small { font-size: 9px !important; } } /* Keep the gallery/world switch available; hide only the global top control bar in World. */ body.world-open .topbar { display: none !important; } body.world-open .media-switch { display: grid !important; } /* Give the World view breathing room below the browser edge so the mascot is visible. */ body.world-open .catalog-shell { padding-top: 36px !important; } /* Gallery cover proportions: product photos and videos use a vertical 3:4 frame. */ body:not(.world-open) .product-cover { aspect-ratio: 3 / 4 !important; } /* Micro films use the taller cinematic 9:16 cover inside Samuel World. */ body.world-open .world-film-grid .product-cover { aspect-ratio: 9 / 16 !important; } /* Final homepage alignment: feature strips share the waterfall gallery edges. */ body:not(.world-open) .hero, body:not(.world-open) .catalog-shell { width: calc(100% - 128px) !important; max-width: none; } body:not(.world-open) .hero { gap: 14px; } body:not(.world-open) .hero-features { width: 100%; max-width: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(220px, .85fr); gap: 14px; } body:not(.world-open) .feature-card { height: 96px; min-height: 96px; padding: 8px 12px; border-radius: 18px; } body:not(.world-open) .feature-card-header { position: absolute; inset: 10px 12px auto; margin: 0; z-index: 4; pointer-events: none; } body:not(.world-open) .feature-card-header .feature-more { pointer-events: auto; } body:not(.world-open) .feature-slider { position: absolute; inset: 8px 12px; height: auto; min-height: 0; margin: 0; border-radius: 12px; } body:not(.world-open) .feature-slide { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; height: 100%; padding: 6px; border-radius: 12px; } body:not(.world-open) .feature-slide img { width: 72px; height: 100%; min-height: 70px; border-radius: 9px; } body:not(.world-open) .feature-slide-text { padding-top: 22px; } body:not(.world-open) .contact-card .feature-contact-body { height: 100%; padding: 22px 4px 0; } @media(max-width:980px) { body:not(.world-open) .hero, body:not(.world-open) .catalog-shell { width: calc(100% - 32px) !important; } body:not(.world-open) .hero-features { grid-template-columns: 1fr; } } @media(max-width:680px) { body:not(.world-open) .hero, body:not(.world-open) .catalog-shell { width: calc(100% - 16px) !important; } body:not(.world-open) .hero-features { gap: 9px; } body:not(.world-open) .feature-card { height: 82px; min-height: 82px; border-radius: 16px; padding: 7px 9px; } body:not(.world-open) .feature-card-header { inset: 8px 9px auto; } body:not(.world-open) .feature-slider { inset: 7px 9px; } body:not(.world-open) .feature-slide { grid-template-columns: 54px minmax(0, 1fr); gap: 8px; padding: 4px; } body:not(.world-open) .feature-slide img { width: 54px; min-height: 60px; } body:not(.world-open) .feature-slide-text { padding-top: 20px; } } /* Final shared canvas: keep the hero, promo strips, controls and gallery aligned. */ body:not(.world-open) .hero, body:not(.world-open) .catalog-shell { width: min(1720px, calc(100% - 160px)) !important; max-width: 1720px !important; margin-left: auto !important; margin-right: auto !important; } body:not(.world-open) .hero { display: flex !important; flex-direction: column !important; align-items: stretch !important; } body:not(.world-open) .hero-carousel, body:not(.world-open) .hero-features, body:not(.world-open) .catalog-shell .search-bar-wrap, body:not(.world-open) .catalog-shell .media-switch, body:not(.world-open) .catalog-shell #catalogContent { width: 100% !important; max-width: none !important; } @media(max-width:980px) { body:not(.world-open) .hero, body:not(.world-open) .catalog-shell { width: calc(100% - 32px) !important; max-width: none !important; } } @media(max-width:680px) { body:not(.world-open) .hero, body:not(.world-open) .catalog-shell { width: calc(100% - 16px) !important; } } /* EARLY compatibility guard: legacy rules retained for reference. */ body.world-open .topbar { display: flex !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.world-open .topbar .top-module-nav, body.world-open .media-switch { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2px !important; position: static !important; width: min(620px, calc(100% - 32px)) !important; max-width: none !important; min-width: 0 !important; margin: 0 auto !important; padding: 3px !important; overflow: hidden !important; box-sizing: border-box !important; border: 1px solid rgba(143, 220, 248, .35) !important; border-radius: 16px !important; background: linear-gradient(145deg, #183566 0%, #245889 100%) !important; box-shadow: 0 10px 24px rgba(4, 18, 52, .24), inset 0 1px rgba(255, 255, 255, .12) !important; } .topbar .top-module-nav > i, .topbar .top-module-nav .world-nav-mascot { display: none !important; } .topbar .top-module-nav button { min-width: 0 !important; width: 100% !important; padding: 7px 3px !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; color: rgba(236, 248, 255, .78) !important; box-shadow: none !important; font-size: 11px !important; line-height: 1.15 !important; white-space: nowrap !important; } .topbar .top-module-nav button:hover { padding: 7px 3px !important; border-radius: 11px !important; background: rgba(60, 120, 173, .72) !important; color: #fff !important; } .topbar .top-module-nav button[aria-selected="true"] { background: linear-gradient(145deg, #3c78ad, #326696) !important; color: #fff !important; box-shadow: inset 0 1px rgba(255, 255, 255, .18) !important; } body.world-open .topbar .language-cluster, body.world-open .topbar .admin-dropdown, body.world-open .topbar .admin-button, body.world-open .topbar .world-nav-mascot, body.world-open #mediaSwitch::before, body.world-open #mediaSwitch::after, body.world-open #mediaSwitch > i, body.world-open #mediaSwitch .world-nav-mascot { display: none !important; content: none !important; } body:not(.world-open) .product-cover { aspect-ratio: 3 / 4 !important; } /* Final World-only navigation treatment. Keep this after legacy compatibility rules. */ body.world-open .topbar .top-module-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2px !important; align-items: stretch !important; width: min(100%, 620px) !important; margin: 0 auto !important; padding: 4px !important; border: 1px solid rgba(139, 222, 245, .28) !important; border-radius: 18px !important; background: linear-gradient(145deg, #1a2d59 0%, #214b78 100%) !important; box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 10px 22px rgba(4, 18, 52, .22) !important; } body.world-open .topbar .top-module-nav button { min-width: 0 !important; padding: 8px 6px !important; border: 0 !important; border-radius: 12px !important; background: transparent !important; color: rgba(235, 248, 255, .76) !important; box-shadow: none !important; font-size: clamp(11px, 1.1vw, 15px) !important; line-height: 1.15 !important; white-space: nowrap !important; } body.world-open .topbar .top-module-nav button:hover, body.world-open .topbar .top-module-nav button[aria-selected="true"] { padding: 8px 6px !important; border-radius: 12px !important; background: linear-gradient(145deg, #386b9b, #2d5d8c) !important; color: #fff !important; box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 5px 12px rgba(7, 35, 73, .22) !important; } @media (max-width: 680px) { body.world-open .topbar { width: calc(100% - 32px) !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: max(8px, env(safe-area-inset-top)) auto 0 !important; padding: 0 !important; } body.world-open .topbar .brand, body.world-open .topbar .top-actions { display: none !important; } body.world-open #mediaSwitch, body.world-open .topbar .top-module-nav { width: 100% !important; } body.world-open .topbar .top-module-nav { width: 100% !important; gap: 1px !important; padding: 3px !important; border-radius: 16px !important; } body.world-open .topbar .top-module-nav button, body.world-open .topbar .top-module-nav button:hover, body.world-open .topbar .top-module-nav button[aria-selected="true"] { padding: 7px 3px !important; font-size: 11px !important; letter-spacing: -.02em !important; } } /* Persistent navigation for gallery and product detail pages. */ .detail-back-nav-button { display: none !important; pointer-events: auto !important; } body.detail-open .detail-back-nav-button { display: block !important; } body.detail-open:not(.world-open) .catalog-shell #mediaSwitch { position: fixed !important; left: max(12px, calc((100vw - min(1720px, calc(100vw - 160px))) / 2 - 86px)) !important; top: 12px !important; transform: none !important; z-index: 1000 !important; } body.detail-open:not(.world-open) main { position: relative !important; z-index: 1000 !important; } body.detail-open:not(.world-open) .catalog-shell { position: relative !important; z-index: 1002 !important; } body.detail-open:not(.world-open) .catalog-shell #mediaSwitch { z-index: 2147483647 !important; isolation: isolate !important; } body:not(.detail-open):not(.world-open) .catalog-shell #mediaSwitch { position: fixed !important; left: 12px !important; top: 12px !important; transform: none !important; z-index: 2147483647 !important; isolation: isolate !important; } .gallery-scroll-controls { position: fixed; left: var(--gallery-controls-left, auto); right: auto; bottom: 28px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; pointer-events: auto !important; } body.detail-open .gallery-scroll-controls, body.world-open .gallery-scroll-controls { display: none; } .product-detail-page .detail-scroll-controls { z-index: 1000 !important; pointer-events: auto !important; } .detail-scroll-button { pointer-events: auto !important; } /* Private Space / 异世界入口：文字按钮，融入导航栏 */ .private-space-button { border: 1px solid rgba(139, 92, 246, .35) !important; background: linear-gradient(145deg, #8b5cf6, #7c3aed) !important; color: #fff !important; font-weight: 600 !important; font-size: 12px !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 32px !important; padding: 6px 12px !important; border-radius: 10px !important; line-height: 1.3 !important; box-shadow: 0 4px 12px rgba(139, 92, 246, .2) !important; letter-spacing: .04em !important; } .private-space-button::before { content: none !important; } .private-space-button:hover { background: linear-gradient(145deg, #a78bfa, #8b5cf6) !important; transform: translateY(-1px) !important; } .member-row-readonly { grid-template-columns: minmax(0, 1fr) auto !important; } .member-row-readonly .member-row-actions { justify-content: flex-end; } .member-account-dialog { width: min(520px, calc(100% - 28px)) !important; } .member-account-username { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); } .member-account-username span { color: var(--muted); font-size: 12px; } .member-account-username strong { min-width: 0; color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-danger-zone { display: grid; gap: 6px; margin-top: 24px; padding: 16px; border: 1px solid rgba(199, 43, 104, .22); border-radius: 14px; background: rgba(255, 244, 248, .72); } .account-danger-zone span { color: var(--muted); font-size: 12px; } .danger-button { border-color: #c72b68 !important; color: #c72b68 !important; } .private-space-button:hover { background: linear-gradient(145deg, #a44b83, #7d386f) !important; } .member-account-dialog .member-bind-summary[hidden], .member-account-dialog .member-linked-identities[hidden], .member-account-dialog .member-password-summary[hidden], .member-account-dialog #memberBindForm[hidden], .member-account-dialog #memberPasswordForm[hidden], .member-account-dialog .wechat-bind-row[hidden], .member-account-dialog .google-bind-row[hidden], .member-account-dialog .account-danger-zone[hidden], .member-account-dialog #memberForgotPasswordButton[hidden] { display: none !important; } .member-account-dialog .member-bind-form, .member-account-dialog .member-password-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; row-gap: 7px; } .member-account-dialog .member-bind-form > label, .member-account-dialog .member-password-form > label { min-width: 0; } .member-account-dialog .member-bind-form .register-verification-row, .member-account-dialog .member-password-form .register-verification-row, .member-account-dialog .member-bind-form .form-message, .member-account-dialog .member-password-form .form-message, .member-account-dialog .member-bind-form .primary-button, .member-account-dialog .member-password-form .primary-button { grid-column: 1 / -1; } .member-account-dialog .member-bind-form input[name="phoneNumber"], .member-account-dialog .member-bind-form input[name="password"] { max-width: 100%; } /* 会员管理弹窗在异世界主题下也必须保持白底深字，避免资料文字几乎不可见。 */ #memberManagementDialog, #memberManagementDialog .member-row, #memberManagementDialog .member-row-main { color: #171717 !important; } #memberManagementDialog .member-row { background: #fff !important; border-color: #e7e1e4 !important; } #memberManagementDialog .member-row-main strong { color: #171717 !important; } #memberManagementDialog .member-row-main small { color: #5f5957 !important; } #memberManagementDialog .member-row-actions button { color: #171717 !important; background: #fff !important; border-color: #ded9d6 !important; } #memberManagementDialog .member-row-actions [data-member-approve] { color: #0f766e !important; border-color: rgba(15, 118, 110, .32) !important; } #memberManagementDialog .member-row-actions [data-member-reject], #memberManagementDialog .member-row-actions [data-member-delete] { color: #c72b68 !important; border-color: rgba(199, 43, 104, .32) !important; } #memberManagementDialog #memberManagementMessage { color: #c72b68 !important; font-weight: 700; } @media (min-width: 681px) { body:not(.world-open) .catalog-shell > #mediaSwitch > .private-space-button { position: static !important; left: auto !important; top: auto !important; z-index: auto !important; display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 32px !important; padding: 6px 10px !important; border-radius: 10px !important; font-size: 12px !important; line-height: 1.3 !important; text-align: center !important; } } @media (max-width: 680px) { .private-space-button { position: static !important; left: auto !important; top: auto !important; bottom: auto !important; z-index: auto !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 32px !important; padding: 6px 10px !important; border-radius: 10px !important; font-size: 12px !important; line-height: 1.3 !important; text-align: center !important; } .private-space-button::before { content: none !important; } body:not(.world-open) #mediaSwitch > .private-space-button { height: auto !important; min-height: 32px !important; } /* 小世界：异世界按钮融入深色导航栏 */ body.world-open #mediaSwitch > .private-space-button { border: 1px solid rgba(139, 222, 245, .3) !important; background: rgba(14, 165, 233, .15) !important; color: #bae6fd !important; height: auto !important; min-height: 32px !important; } body.world-open #mediaSwitch > .private-space-button:hover { background: rgba(14, 165, 233, .28) !important; color: #fff !important; } .private-space-password-dialog { width: min(320px, calc(100% - 28px)) !important; max-width: 320px !important; max-height: calc(100dvh - 24px) !important; margin: auto !important; padding: 26px 20px 22px !important; border-radius: 18px !important; overflow: auto !important; background: linear-gradient(165deg, #1a1f35 0%, #0d1225 50%, #0a0e1a 100%) !important; border: 1px solid rgba(99, 132, 255, .25) !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 80px rgba(59, 130, 246, .08) !important; } .private-space-password-dialog .dialog-close { top: 8px !important; right: 8px !important; width: 28px !important; height: 28px !important; font-size: 14px !important; } .private-space-password-dialog .admin-form { gap: 14px !important; margin-top: 6px !important; } .private-space-password-dialog input { min-height: 46px !important; padding: 10px 14px !important; font-size: 16px !important; border-radius: 10px !important; background: rgba(15, 23, 42, .7) !important; color: #e2e8f0 !important; border-color: rgba(99, 132, 255, .3) !important; } .private-space-password-dialog .primary-button { width: 100% !important; height: 46px !important; min-height: 46px !important; padding: 0 16px !important; border-radius: 10px !important; font-size: 15px !important; letter-spacing: .12em !important; } } .gallery-scroll-controls .detail-scroll-button { width: 72px; min-height: 42px; padding: 7px 6px; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; border: 1px solid #111; border-radius: 12px; background: #111; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; box-shadow: 0 8px 18px rgba(0, 0, 0, .18); } .gallery-scroll-controls .detail-scroll-button:hover { background: #000; color: #fff; transform: translateY(-2px); } .gallery-scroll-controls .detail-scroll-arrow { font-size: 20px; } body:has(#startupSplash) .gallery-scroll-controls { display: none !important; } @media (max-width: 680px) { .gallery-scroll-controls { right: 14px; bottom: 16px; } body.detail-open:not(.world-open) .catalog-shell #mediaSwitch { left: 12px !important; top: 12px !important; } body:not(.detail-open):not(.world-open) .catalog-shell #mediaSwitch { left: 12px !important; top: 12px !important; } body.detail-open .detail-back-nav-button { display: block !important; } } /* Mobile-only corrections: keep the iPhone safe area clear and prevent the gallery quick controls from inheriting desktop horizontal positioning. */ @media (max-width: 680px) { body:not(.world-open) .topbar { height: 54px !important; min-height: 54px !important; padding: 5px 10px !important; overflow: visible !important; } body:not(.world-open) .topbar .admin-button { height: 34px !important; min-height: 34px !important; padding: 6px 10px !important; border-radius: 9px !important; line-height: 1 !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch !important; justify-content: center !important; gap: 2px !important; width: calc(100% - 24px) !important; height: 40px !important; margin: 0 !important; padding: 3px !important; position: fixed !important; left: 12px !important; top: max(4px, env(safe-area-inset-top)) !important; z-index: 2147483647 !important; border: 1px solid rgba(36, 88, 135, .35) !important; border-radius: 13px !important; background: linear-gradient(145deg, #2d76ad, #245887) !important; box-shadow: 0 8px 18px rgba(36, 88, 135, .22) !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button, body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button:hover, body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[aria-selected="true"] { width: 100% !important; min-width: 0 !important; min-height: 32px !important; height: 32px !important; margin: 0 !important; padding: 5px 3px !important; border: 0 !important; border-radius: 9px !important; background: rgba(255, 255, 255, .14) !important; color: #fff !important; box-shadow: none !important; font-size: 11px !important; line-height: 1.1 !important; white-space: nowrap !important; transform: none !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[aria-selected="true"] { background: #174d7c !important; box-shadow: inset 0 1px rgba(255, 255, 255, .18) !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button::after { display: none !important; } .gallery-scroll-controls { left: auto !important; right: 12px !important; bottom: calc(env(safe-area-inset-bottom) + 16px) !important; transform: none !important; } } /* 异世界按钮：手机端也用文字按钮，融入导航栏 */ @media (max-width: 680px) { body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button, body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button:hover { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 32px !important; padding: 6px 8px !important; border-radius: 10px !important; font-size: 11px !important; } } /* Final mobile detail navigation override: match the homepage's safe-area row. */ @media (max-width: 680px) { body.detail-open .topbar { position: relative !important; top: 0 !important; width: calc(100% - 16px) !important; min-height: 94px !important; height: auto !important; margin: max(52px, calc(env(safe-area-inset-top) + 38px)) auto 0 !important; padding: 0 0 50px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.detail-open .topbar .brand, body.detail-open .topbar .top-actions { display: none !important; } body.detail-open .topbar .top-module-nav { position: static !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 2px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 3px !important; box-sizing: border-box !important; border: 1px solid rgba(105,164,207,.55) !important; border-radius: 16px !important; background: linear-gradient(145deg,#183566 0%,#245889 100%) !important; box-shadow: 0 10px 24px rgba(4,18,52,.24), inset 0 1px rgba(255,255,255,.12) !important; } body.detail-open .topbar .top-module-nav > button[data-media], body.detail-open .topbar .top-module-nav > button[data-media]:hover, body.detail-open .topbar .top-module-nav > button[data-media][aria-selected="true"] { display: block !important; width: 100% !important; min-width: 0 !important; min-height: 34px !important; height: auto !important; margin: 0 !important; padding: 7px 3px !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; color: rgba(236,248,255,.78) !important; box-shadow: none !important; font-size: 11px !important; line-height: 1.15 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } body.detail-open .topbar .top-module-nav > button[data-media][aria-selected="true"] { background: linear-gradient(145deg,#3c78ad,#326696) !important; color: #fff !important; } body.detail-open .topbar .top-module-nav > #privateSpaceButton { display: none !important; } body.detail-open .topbar .top-module-nav > #detailBackButton { display: flex !important; position: absolute !important; left: 0 !important; bottom: 0 !important; width: 72px !important; min-height: 42px !important; margin: 0 !important; padding: 8px 12px !important; box-sizing: border-box !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(143,220,248,.35) !important; border-radius: 14px !important; background: linear-gradient(145deg,#386b9b,#2d5d8c) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(4,18,52,.24), inset 0 1px rgba(255,255,255,.16) !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; } } /* PWA standalone (「添加到主屏幕」后以独立应用打开) 专用补偿。 该模式下没有浏览器地址栏占位，且 apple-mobile-web-app-status-bar-style=black-translucent 配合 viewport-fit=cover 会让内容直接顶到屏幕最上方，env(safe-area-inset-top) 可能返回 0， 导致详情页顶部导航被刘海/灵动岛遮挡。此处为独立应用模式单独加大顶部间距。 命中条件：由 index.html 的内联脚本检测 navigator.standalone(iOS) 或 matchMedia('(display-mode: standalone)')(其他平台)，命中后给 加 .pwa-standalone。 注意：不要改用 @media (display-mode: standalone) —— iOS Safari 对该 media query 的支持 不可靠，实测不生效，必须用 navigator.standalone 检测。 普通浏览器标签页与微信内置浏览器不会加上该 class，因此不影响已有的网页端表现。 */ @media (max-width: 680px) { html.pwa-standalone body.detail-open .topbar { margin: max(96px, calc(env(safe-area-inset-top) + 44px)) auto 0 !important; } } /* ============================================================ 首页左侧纵向导航（#mediaSwitch）外观改版：方案 C「左侧色条」+ 天蓝 只改外观，位置/尺寸/吸附行为一律不动（定位写在 index.html 的 @media(min-width:681px) 内联规则里，此处不覆盖 left/top/width）。 另：显式锁定单列堆叠。原布局没有单列声明，实际是三列被内容撑破 后折行形成的纵向，这种隐式行为不可靠，容易被其他规则打断。 ============================================================ */ @media (min-width: 681px) { body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; gap: 4px !important; padding: 6px !important; border: 1px solid rgba(14, 165, 233, .22) !important; border-radius: 14px !important; background: rgba(255, 255, 255, .94) !important; box-shadow: 0 8px 20px rgba(14, 165, 233, .12) !important; } /* 旧 segmented 的粉色滑块与下划线指示器不再参与新外观 */ body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > i { display: none !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media]::after { display: none !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media] { position: relative !important; display: flex !important; align-items: center; width: 100% !important; min-height: 40px !important; height: auto !important; margin: 0 !important; padding: 8px 10px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: #78838f !important; box-shadow: none !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.25 !important; text-align: left !important; white-space: normal !important; word-break: break-word !important; transform: none !important; transition: background .2s ease, color .2s ease !important; } /* 左侧色条：未选中收起为 0 高，选中时展开 */ body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media]::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 0 3px 3px 0; background: #0ea5e9; transform: translateY(-50%); transition: height .22s ease; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media]:hover { background: rgba(14, 165, 233, .07) !important; color: #0284c7 !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media][aria-selected="true"] { background: rgba(14, 165, 233, .1) !important; color: #0369a1 !important; font-weight: 600 !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media][aria-selected="true"]::before { height: 22px; } /* 异世界按钮：与上面三个导航按钮保持一致的字体风格 */ body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: 40px !important; height: auto !important; margin: 0 !important; padding: 8px 10px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: #78838f !important; box-shadow: none !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.25 !important; text-align: left !important; white-space: normal !important; word-break: break-word !important; transform: none !important; transition: background .2s ease, color .2s ease !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button::before { content: none !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button:hover { background: rgba(14, 165, 233, .07) !important; color: #0284c7 !important; } } /* ============================================================ 首页左侧纵向导航（#mediaSwitch）—— 方案 C「左侧色条」+ 天蓝强调 仅改外观：容器配色、按钮底色、字色、左侧竖条。 位置/尺寸沿用 index.html 中 @media(min-width:681px) 的定位规则， 此处不写 left / top / width，避免影响吸附与对齐。 同时显式锁定单列堆叠（原本依赖三列被内容撑破后折行，不够稳）。 ============================================================ */ @media (min-width: 681px) { body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; padding: 6px !important; border: 1px solid rgba(14, 165, 233, .22) !important; border-radius: 14px !important; background: rgba(255, 255, 255, .94) !important; box-shadow: 0 8px 20px rgba(14, 165, 233, .12) !important; } /* 旧 segmented 的粉色滑块与下划线指示器一律不参与新外观 */ body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > i { display: none !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media]::after { display: none !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media] { position: relative !important; width: 100% !important; min-height: 40px !important; padding: 8px 10px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: #78838f !important; box-shadow: none !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.25 !important; text-align: left !important; white-space: normal !important; word-break: break-word !important; transform: none !important; transition: background .2s ease, color .2s ease !important; } /* 左侧色条：未选中收起为 0，选中时展开 */ body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media]::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 0 3px 3px 0; background: #0ea5e9; transform: translateY(-50%); transition: height .22s ease; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media]:hover { background: rgba(14, 165, 233, .07) !important; color: #0284c7 !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media][aria-selected="true"] { background: rgba(14, 165, 233, .10) !important; color: #0369a1 !important; font-weight: 600 !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media][aria-selected="true"]::before { height: 22px; } } /* ============================================================ 小世界（world-open）：「异世界」按钮并入三项导航同一行 根因：index.html 内联规则把小世界导航写死成 grid 三列 （repeat(3, minmax(0,1fr))），而容器里可见按钮有 4 个 （图片展示区 / 视频展示区 / 三小毛的小世界 / 异世界）， 第 4 个必然折行到第二行，把导航撑成两行高度。 这里改用 flex 单行均分：无论可见 3 个还是 4 个都能填满， 不会再折行，也不依赖写死列数。 特异性 (1,2,1) 高于内联的 (1,1,1)，同为 !important 时生效。 ============================================================ */ body.world-open .catalog-shell #mediaSwitch { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 2px !important; } body.world-open .catalog-shell #mediaSwitch > button { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; } /* 异世界：融入深色导航，但保留一点区分度（天蓝半透明描边） */ body.world-open .catalog-shell #mediaSwitch > .private-space-button, body.world-open .catalog-shell #mediaSwitch > .private-space-button:hover { display: block !important; min-height: 34px !important; height: auto !important; margin: 0 !important; padding: 7px 3px !important; box-sizing: border-box !important; border: 1px solid rgba(143, 220, 248, .38) !important; border-radius: 11px !important; background: rgba(14, 165, 233, .16) !important; color: #dff3ff !important; box-shadow: inset 0 1px rgba(255, 255, 255, .1) !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.15 !important; white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; transform: none !important; letter-spacing: .02em !important; } body.world-open .catalog-shell #mediaSwitch > .private-space-button:hover { background: rgba(14, 165, 233, .3) !important; color: #fff !important; } @media (max-width: 680px) { body.world-open .catalog-shell #mediaSwitch > button { font-size: 10px !important; padding: 7px 2px !important; } body.world-open .catalog-shell #mediaSwitch > .private-space-button, body.world-open .catalog-shell #mediaSwitch > .private-space-button:hover { font-size: 10px !important; padding: 7px 2px !important; } } /* 产品卡片右上角操作：统一聚合为 ⋮ 下拉菜单（电脑端 + 手机端） */ .admin-card-actions > .admin-inline-action { display: none !important; } .admin-card-actions > .admin-card-menu-trigger { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 3px !important; width: 26px !important; height: 26px !important; min-width: 0 !important; padding: 0 !important; border: 1px solid rgba(255, 255, 255, .42) !important; border-radius: 8px !important; background: rgba(23, 19, 24, .46) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none !important; color: #fff !important; cursor: pointer !important; transition: background .2s ease, border-color .2s ease; } .admin-card-actions > .admin-card-menu-trigger:hover { background: rgba(23, 19, 24, .72) !important; border-color: rgba(255, 255, 255, .68) !important; } .admin-card-actions > .admin-card-menu-trigger[aria-expanded="true"] { background: rgba(23, 19, 24, .84) !important; border-color: rgba(255, 255, 255, .8) !important; } .admin-card-actions > .admin-card-menu-trigger > i { display: block; width: 3px; height: 3px; border-radius: 50%; background: #fff; } .admin-card-actions > .admin-card-menu { position: absolute !important; top: 32px !important; right: 0 !important; display: grid !important; gap: 2px !important; min-width: 104px !important; padding: 4px !important; border: 1px solid rgba(255, 255, 255, .32) !important; border-radius: 10px !important; background: rgba(23, 19, 24, .88) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 28px rgba(0, 0, 0, .28) !important; z-index: 5 !important; } .admin-card-actions > .admin-card-menu[hidden] { display: none !important; } .admin-card-actions > .admin-card-menu > button { display: block !important; width: 100% !important; padding: 6px 9px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #fff !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.35 !important; text-align: left !important; white-space: nowrap !important; backdrop-filter: none !important; box-shadow: none !important; transition: background .18s ease; } .admin-card-actions > .admin-card-menu > button:hover { background: rgba(255, 255, 255, .16) !important; } .admin-card-actions > .admin-card-menu > .stock-toggle.soldout { color: #ff9dbd !important; } .admin-card-actions > .admin-card-menu > .stock-toggle.restock { color: #8fe3b0 !important; } @media (max-width: 680px) { .admin-card-actions > .admin-card-menu-trigger { width: 32px !important; height: 32px !important; border-radius: 10px !important; } .admin-card-actions > .admin-card-menu-trigger > i { width: 4px; height: 4px; } .admin-card-actions > .admin-card-menu { top: 38px !important; min-width: 112px !important; } .admin-card-actions > .admin-card-menu > button { padding: 9px 11px !important; font-size: 13px !important; } } /* 首页大轮播辉光模式切换按钮（仅电脑端，手机端完全隐藏） */ .hero-glow-toggle { display: none; } /* 全屏流动极光背景层：默认隐藏，glow-mode 下显示（仅电脑端） */ .aurora-backdrop { display: none; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #f0f4f8; overflow: hidden; } .aurora-beam { position: absolute; top: -10%; bottom: -10%; width: 14%; filter: blur(46px); opacity: 0; animation: aurora-flow 10s ease-in-out infinite; } .aurora-beam.beam-1 { left: 4%; background: linear-gradient(180deg, rgba(14, 165, 233, 0) 0%, rgba(14, 165, 233, .50) 45%, rgba(14, 165, 233, 0) 100%); animation-delay: 0s; } .aurora-beam.beam-2 { left: 22%; width: 18%; background: linear-gradient(180deg, rgba(236, 72, 153, 0) 0%, rgba(236, 72, 153, .42) 50%, rgba(236, 72, 153, 0) 100%); animation-delay: -2s; } .aurora-beam.beam-3 { left: 44%; width: 12%; background: linear-gradient(180deg, rgba(139, 92, 246, 0) 0%, rgba(139, 92, 246, .38) 45%, rgba(139, 92, 246, 0) 100%); animation-delay: -4s; } .aurora-beam.beam-4 { left: 60%; width: 16%; background: linear-gradient(180deg, rgba(34, 197, 94, 0) 0%, rgba(34, 197, 94, .30) 50%, rgba(34, 197, 94, 0) 100%); animation-delay: -6s; } .aurora-beam.beam-5 { left: 78%; width: 10%; background: linear-gradient(180deg, rgba(250, 204, 21, 0) 0%, rgba(250, 204, 21, .28) 45%, rgba(250, 204, 21, 0) 100%); animation-delay: -8s; } .aurora-beam.beam-6 { left: 92%; width: 14%; background: linear-gradient(180deg, rgba(14, 165, 233, 0) 0%, rgba(14, 165, 233, .40) 50%, rgba(14, 165, 233, 0) 100%); animation-delay: -10s; } .aurora-backdrop::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0, transparent 90px, rgba(255, 255, 255, .55) 90px, rgba(255, 255, 255, .55) 91px); opacity: .55; animation: aurora-lines-flow 10s linear infinite; } @keyframes aurora-flow { 0%, 100% { transform: translateX(-18px) scaleY(1); opacity: .55; } 25% { transform: translateX(14px) scaleY(1.07); opacity: .88; } 50% { transform: translateX(-8px) scaleY(.94); opacity: .72; } 75% { transform: translateX(20px) scaleY(1.04); opacity: .92; } } @keyframes aurora-lines-flow { from { transform: translateX(0); } to { transform: translateX(-182px); } } @media (min-width: 681px) { .hero-glow-toggle { display: inline-flex; position: absolute; top: 14px; left: 14px; z-index: 4; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; background: rgba(255, 255, 255, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 16px rgba(0, 0, 0, .12); color: #0ea5e9; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease; } .hero-glow-toggle:hover { transform: scale(1.08) rotate(12deg); background: #fff; box-shadow: 0 6px 22px rgba(14, 165, 233, .28); } .hero-glow-toggle[aria-pressed="true"] { background: #0ea5e9 !important; color: #fff !important; box-shadow: 0 0 0 4px rgba(14, 165, 233, .25), 0 6px 22px rgba(14, 165, 233, .4) !important; } .hero-glow-toggle[aria-pressed="true"]:hover { background: #0284c7 !important; } body.glow-mode .aurora-backdrop { display: block; background: linear-gradient(135deg, #0b1225 0%, #1a0f2e 55%, #0b1225 100%); } body.glow-mode .aurora { display: none; } } @media (max-width: 680px) { .hero-glow-toggle, .aurora-backdrop { display: none !important; } } /* 三张小轮播 hover 标题高亮颜色：news 蓝 / activity 粉 / contact 黄 */ body:not(.world-open) .feature-card.news-card:hover .feature-slide-text strong, body:not(.world-open) .feature-card.news-card:hover .feature-contact-body strong { color: #0ea5e9 !important; } body:not(.world-open) .feature-card.activity-card:hover .feature-slide-text strong, body:not(.world-open) .feature-card.activity-card:hover .feature-contact-body strong { color: #ec4899 !important; } body:not(.world-open) .feature-card.contact-card:hover .feature-slide-text strong, body:not(.world-open) .feature-card.contact-card:hover .feature-contact-body strong { color: #eab308 !important; } /* 修复 iOS Safari 聚焦输入框时自动缩放：移动端 dialog 表单控件字号 >= 16px */ @media (max-width: 680px) { dialog input, dialog select, dialog textarea { font-size: 16px !important; } } /* 小世界：完全隐藏顶部模块导航，仅保留固定「返回」按钮 */ body.world-open .catalog-shell > #mediaSwitch, body.world-open .catalog-shell #mediaSwitch, body.world-open .topbar .top-module-nav { display: none !important; } /* 手机端小世界：内容上移 + 返回按钮改小扁方形箭头 */ @media (max-width: 680px) { body.world-open .catalog-shell { padding-top: 12px !important; } body.world-open .samuel-world { margin-top: 0 !important; padding-top: 14px !important; } body.world-open .catalog-shell #worldBackButton { left: 14px !important; top: 70px !important; width: 34px !important; min-height: 28px !important; height: 28px !important; padding: 0 !important; border-radius: 8px !important; background: #2d6fa3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 19l-7-7 7-7' stroke='%23fff' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat !important; color: transparent !important; font-size: 0 !important; } body.world-open .catalog-shell #worldBackButton span { display: none !important; } body.world-open .catalog-shell #worldBackButton:hover { background-color: #3b82b8 !important; transform: none !important; } } /* 小世界分类导航改版：彩色标签方案 — 整体更扁 */ body.world-open .world-section-switch { padding: 4px !important; border-radius: 15px !important; margin: -4px 0 26px !important; } body.world-open .world-section-switch i { display: none !important; } body.world-open .world-section-switch button { position: relative !important; gap: 1px !important; padding: 7px 8px !important; border-radius: 12px !important; transition: color .25s ease, background .25s ease !important; } body.world-open .world-section-switch button span { font-size: 13px !important; } body.world-open .world-section-switch button small { font-size: 7px !important; } body.world-open .world-section-switch button:not([aria-selected="true"]):hover { color: rgba(255, 255, 255, .92) !important; } body.world-open .world-section-switch button[aria-selected="true"] { color: #ff6fb1 !important; background: rgba(255, 255, 255, .09) !important; } body.world-open .world-section-switch button[data-world-section="films"][aria-selected="true"] { color: #35e9ff !important; } body.world-open .world-section-switch button[data-world-section="music"][aria-selected="true"] { color: #aa75ff !important; } body.world-open .world-section-switch button[data-world-section="games"][aria-selected="true"] { color: #ff3d9a !important; } body.world-open .world-section-switch button[data-world-section="comics"][aria-selected="true"] { color: #ffd13d !important; } body.world-open .world-section-switch button::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 0; height: 2px; border-radius: 2px; transform: translateX(-50%); opacity: 0; transition: width .3s ease, opacity .3s ease; } body.world-open .world-section-switch button[data-world-section="films"]::after { background: #35e9ff; } body.world-open .world-section-switch button[data-world-section="music"]::after { background: #aa75ff; } body.world-open .world-section-switch button[data-world-section="games"]::after { background: #ff3d9a; } body.world-open .world-section-switch button[data-world-section="comics"]::after { background: #ffd13d; } body.world-open .world-section-switch button[aria-selected="true"]::after { width: 20px; opacity: 1; } @media (max-width: 680px) { body.world-open .world-section-switch { padding: 3px !important; border-radius: 13px !important; } body.world-open .world-section-switch button { padding: 5px 2px !important; } body.world-open .world-section-switch button span { font-size: 11px !important; } body.world-open .world-section-switch button small { font-size: 6px !important; } body.world-open .world-section-switch button[aria-selected="true"]::after { width: 16px; } } /* Analytics record notes. */ .analytics-remark-hint{margin:5px 0 0;color:var(--muted);font-size:11px}.analytics-visit-count{display:block;margin-top:3px;color:var(--muted);font-size:10px;line-height:1.2}.analytics-remember-row{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}.analytics-remember-row input{width:auto;margin:0} .analytics-remark-cell{display:flex!important;align-items:center;gap:6px;min-width:220px}.analytics-remark-cell input{width:150px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--panel-strong);color:var(--text);font-size:11px}.analytics-remark-save{border:1px solid rgba(221,40,102,.32);border-radius:8px;padding:6px 9px;background:rgba(221,40,102,.08);color:var(--rose);font-size:11px;cursor:pointer}.analytics-remark-save:hover{background:rgba(221,40,102,.16)}.analytics-remark-save:disabled{opacity:.6;cursor:default} .analytics-pagination{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 4px 2px;color:var(--muted);font-size:12px}.analytics-pagination[hidden]{display:none!important}.analytics-pagination .ghost-button{min-width:72px;padding:7px 10px}.analytics-pagination .ghost-button:disabled{opacity:.45;cursor:default} /* glow-mode：极光直接画在 body 背景，不依赖会被白底盖住的负层级浮层。 */ /* :root[data-theme] 的优先级必须高于文件中浅色页面的 :root[data-theme="light"] body:not(.world-open) 白底规则。 */ :root[data-theme] body.glow-mode:not(.world-open), :root:not([data-theme]) body.glow-mode:not(.world-open) { /* 必须用 background 简写 + !important：页面后段的 body:not(.world-open){background:white!important} 会重置 image。 */ background: radial-gradient(78% 72% at 50% 52%, rgba(24, 87, 177, .88) 0%, rgba(14, 58, 130, .70) 36%, rgba(8, 29, 73, .34) 63%, transparent 80%), radial-gradient(44% 48% at 84% 18%, rgba(63, 62, 178, .22), transparent 72%), radial-gradient(46% 54% at 14% 90%, rgba(8, 96, 148, .18), transparent 72%), linear-gradient(125deg, #050609 0%, #080a11 48%, #090b16 100%) #050609 !important; background-size: 100% 100%, 200% 200%, 200% 200%, 200% 200%; background-repeat: no-repeat; /* 固定到视口，保证任何滚动位置都能看见居中的深蓝向黑色过渡。 */ background-attachment: fixed; animation: glowAurora 16s ease-in-out infinite alternate; } @keyframes glowAurora { 0% { background-position: 0% 0%, 100% 0%, 50% 100%, 80% 100%; } 100% { background-position: 0% 0%, 0% 50%, 0% 0%, 20% 0%; } } /* 炫彩模式的文字与控制器对比度。 白色信息卡维持深色文字；只有直接落在极光底上的内容才反转为白色。 */ :root[data-theme] body.glow-mode:not(.world-open), :root:not([data-theme]) body.glow-mode:not(.world-open) { --text: #f8fbff; --muted: rgba(226, 239, 255, .82); --line: rgba(202, 235, 255, .34); --panel: rgba(9, 24, 57, .64); --panel-strong: rgba(11, 27, 64, .82); } body.glow-mode:not(.world-open) .topbar.glass { background: rgba(8, 20, 51, .78) !important; border-color: rgba(211, 240, 255, .28) !important; } body.glow-mode:not(.world-open) .brand, body.glow-mode:not(.world-open) .topbar .status-chip, body.glow-mode:not(.world-open) .category-button, body.glow-mode:not(.world-open) .catalog-toolbar, body.glow-mode:not(.world-open) .detail-page-name, body.glow-mode:not(.world-open) .detail-page-name-en, body.glow-mode:not(.world-open) .detail-images-section > h3, body.glow-mode:not(.world-open) .detail-section dt, body.glow-mode:not(.world-open) .detail-section dd { color: #f8fbff !important; } body.glow-mode:not(.world-open) .category-bar { border-bottom-color: rgba(202, 235, 255, .42) !important; } body.glow-mode:not(.world-open) .category-button[aria-selected="true"] { color: #43ddff !important; text-shadow: 0 0 14px rgba(67, 221, 255, .62); } body.glow-mode:not(.world-open) .category-button::after { background: #43ddff !important; box-shadow: 0 0 10px rgba(67, 221, 255, .85); } body.glow-mode:not(.world-open) .category-button:hover { color: #b8f5ff !important; } body.glow-mode:not(.world-open) .catalog-toolbar .search { background: rgba(8, 23, 55, .76) !important; border-color: rgba(202, 235, 255, .38) !important; } body.glow-mode:not(.world-open) .catalog-toolbar .search input, body.glow-mode:not(.world-open) .catalog-toolbar .search input::placeholder, body.glow-mode:not(.world-open) .catalog-toolbar select { color: #f8fbff !important; } body.glow-mode:not(.world-open) .catalog-toolbar select { border-bottom-color: rgba(202, 235, 255, .54) !important; } body.glow-mode:not(.world-open) .catalog-toolbar select option { color: #111827; background: #fff; } body.glow-mode:not(.world-open) .detail-section, body.glow-mode:not(.world-open) .detail-pick-toggle, body.glow-mode:not(.world-open) .detail-page-category { background: rgba(8, 22, 54, .76) !important; border-color: rgba(202, 235, 255, .28) !important; } /* 联系销售卡与前两张轮播卡使用同一张深色高对比底，避免金色文字陷进浅色卡片。 */ body.glow-mode:not(.world-open) .feature-card.contact-card, body.glow-mode:not(.world-open) .feature-card.contact-card:hover { background: rgba(8, 25, 64, .88) !important; border-color: rgba(120, 213, 255, .42) !important; box-shadow: 0 12px 28px rgba(43, 187, 255, .20), 0 2px 8px rgba(43, 187, 255, .12) !important; } body.glow-mode:not(.world-open) .contact-card .feature-contact-body strong, body.glow-mode:not(.world-open) .contact-card .feature-contact-body small, body.glow-mode:not(.world-open) .contact-card:hover .feature-contact-body strong { color: #f8fbff !important; } /* 鼠标悬停封面时，沿用分类高亮的青蓝色辉光，同时保留原有上移交互。 */ @media (hover: hover) and (pointer: fine) { body.glow-mode:not(.world-open) .product-card:hover { border-color: #43ddff !important; box-shadow: 0 0 0 1px rgba(67, 221, 255, .58), 0 0 18px rgba(67, 221, 255, .42), 0 0 38px rgba(67, 221, 255, .22) !important; } /* 浅色模式沿用相同的悬停上移，并补上更克制的青蓝轮廓辉光。 */ :root[data-theme="light"] body:not(.world-open):not(.glow-mode) .product-card:hover, :root:not([data-theme]) body:not(.world-open):not(.glow-mode) .product-card:hover { border-color: rgba(67, 221, 255, .78) !important; box-shadow: 0 0 0 1px rgba(67, 221, 255, .46), 0 0 15px rgba(67, 221, 255, .26), 0 18px 36px rgba(44, 153, 219, .17) !important; } } /* 炫彩模式的深底内容全部采用白色文字，避免产品名与管理员入口丢失对比。 */ body.glow-mode:not(.world-open) .product-copy h3 { color: #fff !important; } body.glow-mode:not(.world-open) .topbar .admin-button { background: linear-gradient(135deg, #38bdf8, #7c3aed) !important; color: #fff !important; box-shadow: 0 8px 20px rgba(59, 130, 246, .32) !important; } body.glow-mode:not(.world-open) .topbar .language-cluster > small { color: #fff !important; } body.glow-mode:not(.world-open) .picks-fab em { background: #43ddff !important; color: #061a35 !important; border: 1px solid rgba(232, 251, 255, .88) !important; box-shadow: 0 0 14px rgba(67, 221, 255, .52) !important; font-weight: 900 !important; } /* 炫彩模式首页左侧导航：仅更新深海玻璃配色，保留原本的文字结构与左侧竖线伸展动画。 */ @media (min-width: 681px) { body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch { border-color: rgba(151, 214, 255, .36) !important; background: rgba(7, 27, 59, .76) !important; box-shadow: 0 14px 30px rgba(2, 12, 33, .36), inset 0 1px rgba(225, 246, 255, .13) !important; backdrop-filter: blur(20px) saturate(145%) !important; -webkit-backdrop-filter: blur(20px) saturate(145%) !important; } body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media], body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button { color: rgba(222, 240, 255, .76) !important; } body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media]:hover, body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button:hover { background: rgba(102, 196, 255, .11) !important; color: #d9f7ff !important; } body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media][aria-selected="true"] { background: linear-gradient(135deg, rgba(83, 186, 244, .25), rgba(89, 124, 222, .16)) !important; color: #43ddff !important; text-shadow: 0 0 12px rgba(67, 221, 255, .58) !important; box-shadow: inset 0 1px rgba(239, 252, 255, .24), 0 0 16px rgba(67, 221, 255, .18) !important; } body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media]::before { background: #43ddff !important; box-shadow: 0 0 10px rgba(67, 221, 255, .86) !important; } } body.glow-mode:not(.world-open) .contact-card .feature-badge { background: #fff !important; color: #ef476f !important; } /* 电脑端小世界返回：缩小留白，换为半透明磨砂玻璃；不改变固定位置与行为。 */ @media (min-width: 681px) { body.world-open .catalog-shell > #worldBackButton { width: 50px !important; min-height: 30px !important; padding: 4px 7px !important; border-color: rgba(194, 235, 255, .44) !important; border-radius: 12px !important; background: rgba(119, 190, 226, .22) !important; box-shadow: 0 8px 18px rgba(4, 18, 52, .20), inset 0 1px rgba(238, 251, 255, .28) !important; backdrop-filter: blur(18px) saturate(155%) !important; -webkit-backdrop-filter: blur(18px) saturate(155%) !important; font-size: 12px !important; } body.world-open .catalog-shell > #worldBackButton:hover { background: rgba(119, 190, 226, .36) !important; } } /* 已选产品弹窗：避免浅色主题变量在深色面板上形成白字白底。 */ body.glow-mode:not(.world-open) .picks-dialog .ghost-button, body.glow-mode:not(.world-open) .pick-image-dialog .ghost-button { border-color: rgba(158, 216, 255, .42) !important; background: rgba(11, 33, 76, .72) !important; color: #f8fbff !important; } body.glow-mode:not(.world-open) .picks-dialog .primary-button:not(.contact-channel-btn), body.glow-mode:not(.world-open) .pick-image-dialog .primary-button { background: linear-gradient(135deg, #2563eb, #7c3aed) !important; color: #fff !important; } body.glow-mode:not(.world-open) .picks-dialog .contact-channel-btn:not(:disabled) { color: #fff !important; } body.glow-mode:not(.world-open) .picks-dialog #contactWhatsApp { background: linear-gradient(135deg, #128c7e, #00a882) !important; color: #fff !important; } body.glow-mode:not(.world-open) .picks-dialog #contactWhatsApp:disabled { background: rgba(148, 163, 184, .20) !important; color: rgba(240, 249, 255, .58) !important; } body.glow-mode:not(.world-open) .picks-dialog .primary-button:disabled, body.glow-mode:not(.world-open) .picks-dialog .ghost-button:disabled, body.glow-mode:not(.world-open) .pick-image-dialog .primary-button:disabled, body.glow-mode:not(.world-open) .pick-image-dialog .ghost-button:disabled { border-color: rgba(191, 219, 254, .20) !important; background: rgba(148, 163, 184, .20) !important; color: rgba(240, 249, 255, .52) !important; opacity: 1 !important; } /* 切换键只以色彩区分模式：浅色为纯白圆点，炫彩为蓝紫渐变圆点。 */ @media (min-width: 681px) { .hero-glow-toggle, .hero-glow-toggle:hover { border: 1px solid rgba(15, 23, 42, .10) !important; background: #fff !important; color: transparent !important; transform: none !important; box-shadow: 0 6px 18px rgba(15, 23, 42, .16) !important; } .hero-glow-toggle[aria-pressed="true"], .hero-glow-toggle[aria-pressed="true"]:hover { border-color: rgba(255, 255, 255, .36) !important; background: linear-gradient(135deg, #38bdf8 0%, #6366f1 48%, #a855f7 100%) !important; box-shadow: 0 0 0 4px rgba(129, 92, 246, .20), 0 8px 22px rgba(93, 75, 201, .42) !important; } } /* 浅色页面的管理导航改为可透出产品色彩的磨砂玻璃。 */ body:not(.world-open):not(.glow-mode) .admin-dock.glass { background: rgba(255, 255, 255, .68) !important; border-color: rgba(255, 255, 255, .78) !important; box-shadow: 0 14px 32px rgba(43, 58, 92, .18), inset 0 1px rgba(255, 255, 255, .72) !important; backdrop-filter: blur(22px) saturate(150%) !important; -webkit-backdrop-filter: blur(22px) saturate(150%) !important; } body:not(.world-open):not(.glow-mode) .admin-dock.glass button:hover { background: rgba(255, 255, 255, .52) !important; } /* 浅色模式首页左侧导航：选中黑底白字 + 橙色竖线。 仅替换色彩与磨砂材质；定位、尺寸、文字结构和左侧竖线伸展动画保持原样。 */ @media (min-width: 681px) { :root[data-theme="light"] body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch, :root:not([data-theme]) body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch { border-color: rgba(14, 165, 233, .22) !important; background: rgba(255, 255, 255, .74) !important; box-shadow: 0 12px 26px rgba(24, 56, 104, .12), inset 0 1px rgba(255, 255, 255, .88) !important; backdrop-filter: blur(20px) saturate(145%) !important; -webkit-backdrop-filter: blur(20px) saturate(145%) !important; } :root[data-theme="light"] body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[data-media], :root[data-theme="light"] body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > .private-space-button, :root:not([data-theme]) body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[data-media], :root:not([data-theme]) body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > .private-space-button { color: #78838f !important; font-weight: 500 !important; } :root[data-theme="light"] body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[data-media]:hover, :root[data-theme="light"] body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > .private-space-button:hover, :root:not([data-theme]) body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[data-media]:hover, :root:not([data-theme]) body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > .private-space-button:hover { background: transparent !important; color: #66717e !important; } :root[data-theme="light"] body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[data-media][aria-selected="true"], :root:not([data-theme]) body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[data-media][aria-selected="true"] { background: #111318 !important; color: #fff !important; font-weight: 700 !important; box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 6px 14px rgba(15, 23, 42, .18) !important; } :root[data-theme="light"] body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[data-media]::before, :root:not([data-theme]) body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[data-media]::before { background: #ff7a00 !important; box-shadow: 0 0 9px rgba(255, 122, 0, .42) !important; } } /* 炫彩模式货号标签：玫红底与深蓝产品卡拉开对比；浅色模式继续使用原本的黑底。 */ body.glow-mode:not(.world-open) .product-card .product-code { background: linear-gradient(135deg, #ed1c6d, #b9145c) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(237, 28, 109, .30) !important; } body.glow-mode:not(.world-open) .video-card .video-size { color: rgba(234, 246, 255, .78) !important; } /* 浅色模式分类导航：沿用左侧导航的深色按钮语汇；保留现有横向切换与横线伸展机制。 */ @media (min-width: 681px) { :root[data-theme="light"] body:not(.world-open):not(.glow-mode) .category-bar, :root:not([data-theme]) body:not(.world-open):not(.glow-mode) .category-bar { display: flex !important; align-items: stretch !important; gap: 8px !important; padding: 0 4px 5px !important; border-bottom-color: rgba(15, 23, 42, .13) !important; } :root[data-theme="light"] body:not(.world-open):not(.glow-mode) .category-button, :root:not([data-theme]) body:not(.world-open):not(.glow-mode) .category-button { flex: 1 1 0 !important; min-width: 0 !important; min-height: 36px !important; height: 36px !important; margin-bottom: 4px !important; padding: 6px 12px !important; border: 1px solid transparent !important; border-radius: 10px !important; background: transparent !important; color: #20242a !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important; } :root[data-theme="light"] body:not(.world-open):not(.glow-mode) .category-button:hover, :root:not([data-theme]) body:not(.world-open):not(.glow-mode) .category-button:hover { background: rgba(15, 23, 42, .04) !important; color: #111318 !important; } :root[data-theme="light"] body:not(.world-open):not(.glow-mode) .category-button[aria-selected="true"], :root:not([data-theme]) body:not(.world-open):not(.glow-mode) .category-button[aria-selected="true"] { background: #111318 !important; color: #fff !important; font-weight: 700 !important; box-shadow: 0 8px 18px rgba(15, 23, 42, .18) !important; } :root[data-theme="light"] body:not(.world-open):not(.glow-mode) .category-button::after, :root:not([data-theme]) body:not(.world-open):not(.glow-mode) .category-button::after { bottom: -4px !important; background: #ff7a00 !important; box-shadow: 0 0 8px rgba(255, 122, 0, .36) !important; } :root[data-theme="light"] body:not(.world-open):not(.glow-mode) .category-button::after, :root:not([data-theme]) body:not(.world-open):not(.glow-mode) .category-button::after { width: 0 !important; } :root[data-theme="light"] body:not(.world-open):not(.glow-mode) .category-button[aria-selected="true"]::after, :root:not([data-theme]) body:not(.world-open):not(.glow-mode) .category-button[aria-selected="true"]::after { width: calc(100% - 8px) !important; } } /* 手机触控：关闭浏览器的默认黑色 tap highlight，分类切换仍沿用现有选中动画。 */ @media (max-width: 680px) { .category-button, #mediaSwitch > button, .product-card, .product-card button, .picks-fab, .gallery-scroll-controls button { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; touch-action: manipulation; } .category-button:active, #mediaSwitch > button:active, .product-card button:active { transform: none !important; filter: none !important; } .product-cover, .product-cover-media { background-color: #f7f8fb; } } /* Product detail desktop: the persistent rail is the same navigation system as the gallery home. Only the return action is additional here. */ @media (min-width: 681px) { body.detail-open:not(.world-open) .catalog-shell #mediaSwitch { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: stretch !important; gap: 4px !important; width: 122px !important; padding: 6px !important; border-radius: 22px !important; overflow: hidden !important; } body.detail-open:not(.world-open) .catalog-shell #mediaSwitch > i, body.detail-open:not(.world-open) .catalog-shell #mediaSwitch > button[data-media]::after { display: none !important; } body.detail-open:not(.world-open) .catalog-shell #mediaSwitch > button[data-media], body.detail-open:not(.world-open) .catalog-shell #mediaSwitch > .detail-back-nav-button, body.detail-open:not(.world-open) .catalog-shell #mediaSwitch > .private-space-button { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-height: 58px !important; margin: 0 !important; padding: 9px 12px !important; border: 0 !important; border-radius: 14px !important; background: transparent !important; box-shadow: none !important; font-size: 13px !important; font-family: inherit !important; font-weight: 500 !important; letter-spacing: normal !important; line-height: 1.25 !important; text-align: left !important; white-space: normal !important; word-break: break-word !important; transform: none !important; transition: background .2s ease, color .2s ease !important; } body.detail-open:not(.world-open) .catalog-shell #mediaSwitch > button[data-media]::before { content: '' !important; position: absolute !important; left: 0 !important; top: 50% !important; width: 3px !important; height: 0 !important; border-radius: 0 3px 3px 0 !important; transform: translateY(-50%) !important; transition: height .22s ease !important; } body.detail-open:not(.world-open) .catalog-shell #mediaSwitch > button[data-media][aria-selected="true"]::before { height: 30px !important; } /* Light mode: black selected surface, white label, and orange rail. */ :root[data-theme="light"] body.detail-open:not(.world-open):not(.glow-mode) .catalog-shell #mediaSwitch, :root:not([data-theme]) body.detail-open:not(.world-open):not(.glow-mode) .catalog-shell #mediaSwitch { border-color: rgba(14, 165, 233, .22) !important; background: rgba(255, 255, 255, .74) !important; box-shadow: 0 12px 26px rgba(24, 56, 104, .12), inset 0 1px rgba(255, 255, 255, .88) !important; backdrop-filter: blur(20px) saturate(145%) !important; -webkit-backdrop-filter: blur(20px) saturate(145%) !important; } :root[data-theme="light"] body.detail-open:not(.world-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[data-media], :root[data-theme="light"] body.detail-open:not(.world-open):not(.glow-mode) .catalog-shell #mediaSwitch > .detail-back-nav-button, :root:not([data-theme]) body.detail-open:not(.world-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[data-media], :root:not([data-theme]) body.detail-open:not(.world-open):not(.glow-mode) .catalog-shell #mediaSwitch > .detail-back-nav-button { color: #78838f !important; } :root[data-theme="light"] body.detail-open:not(.world-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[data-media]:hover, :root[data-theme="light"] body.detail-open:not(.world-open):not(.glow-mode) .catalog-shell #mediaSwitch > .detail-back-nav-button:hover, :root:not([data-theme]) body.detail-open:not(.world-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[data-media]:hover, :root:not([data-theme]) body.detail-open:not(.world-open):not(.glow-mode) .catalog-shell #mediaSwitch > .detail-back-nav-button:hover { background: transparent !important; color: #66717e !important; } :root[data-theme="light"] body.detail-open:not(.world-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[data-media][aria-selected="true"], :root:not([data-theme]) body.detail-open:not(.world-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[data-media][aria-selected="true"] { background: #111318 !important; color: #fff !important; font-weight: 700 !important; box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 6px 14px rgba(15, 23, 42, .18) !important; } :root[data-theme="light"] body.detail-open:not(.world-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[data-media]::before, :root:not([data-theme]) body.detail-open:not(.world-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[data-media]::before { background: #ff7a00 !important; box-shadow: 0 0 9px rgba(255, 122, 0, .42) !important; } /* Glow mode: deep-blue glass, cyan selected text, and cyan rail. */ body.glow-mode.detail-open:not(.world-open) .catalog-shell #mediaSwitch { border-color: rgba(151, 214, 255, .36) !important; background: rgba(7, 27, 59, .76) !important; box-shadow: 0 14px 30px rgba(2, 12, 33, .36), inset 0 1px rgba(225, 246, 255, .13) !important; backdrop-filter: blur(20px) saturate(145%) !important; -webkit-backdrop-filter: blur(20px) saturate(145%) !important; } body.glow-mode.detail-open:not(.world-open) .catalog-shell #mediaSwitch > button[data-media], body.glow-mode.detail-open:not(.world-open) .catalog-shell #mediaSwitch > .detail-back-nav-button, body.glow-mode.detail-open:not(.world-open) .catalog-shell #mediaSwitch > .private-space-button { color: #fff !important; } body.glow-mode.detail-open:not(.world-open) .catalog-shell #mediaSwitch > .private-space-button, body.glow-mode.detail-open:not(.world-open) .catalog-shell #mediaSwitch > .private-space-button:hover { border: 0 !important; background: transparent !important; box-shadow: none !important; } body.glow-mode.detail-open:not(.world-open) .catalog-shell #mediaSwitch > button[data-media]:hover, body.glow-mode.detail-open:not(.world-open) .catalog-shell #mediaSwitch > .detail-back-nav-button:hover, body.glow-mode.detail-open:not(.world-open) .catalog-shell #mediaSwitch > .private-space-button:hover { background: rgba(102, 196, 255, .11) !important; color: #fff !important; } body.glow-mode.detail-open:not(.world-open) .catalog-shell #mediaSwitch > button[data-media][aria-selected="true"] { background: linear-gradient(135deg, rgba(83, 186, 244, .25), rgba(89, 124, 222, .16)) !important; color: #43ddff !important; font-weight: 700 !important; text-shadow: 0 0 12px rgba(67, 221, 255, .58) !important; box-shadow: inset 0 1px rgba(239, 252, 255, .24), 0 0 16px rgba(67, 221, 255, .18) !important; } body.glow-mode.detail-open:not(.world-open) .catalog-shell #mediaSwitch > button[data-media]::before { background: #43ddff !important; box-shadow: 0 0 10px rgba(67, 221, 255, .86) !important; } } /* Glow detail cards must never fall back to black typography or a white pick tray. */ body.glow-mode.detail-open:not(.world-open) .detail-section h3, body.glow-mode.detail-open:not(.world-open) .detail-section h3 span, body.glow-mode.detail-open:not(.world-open) .detail-section dt, body.glow-mode.detail-open:not(.world-open) .detail-section dd { color: #f8fbff !important; } body.glow-mode.detail-open:not(.world-open) .detail-pick-bar { border-color: rgba(202, 235, 255, .28) !important; background: rgba(8, 22, 54, .76) !important; box-shadow: 0 12px 30px rgba(2, 12, 33, .24) !important; } body.glow-mode.detail-open:not(.world-open) .detail-pick-bar .detail-pick-toggle { width: 68px !important; height: 68px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #43ddff !important; box-shadow: none !important; } body.glow-mode.detail-open:not(.world-open) .detail-pick-bar .detail-pick-toggle:hover { background: transparent !important; color: #7ceaff !important; } body.glow-mode.detail-open:not(.world-open) .detail-pick-bar .detail-pick-toggle[aria-pressed="true"] { border: 0 !important; background: transparent !important; color: #ed1c6d !important; box-shadow: none !important; } body.glow-mode.detail-open:not(.world-open) .detail-pick-bar .detail-pick-toggle[aria-pressed="true"] path { fill: #ed1c6d !important; stroke: #ed1c6d !important; } /* Desktop video dialog: the information bar must size to its content. The generic image-dialog minimum height otherwise leaves a large blank panel on some macOS window/zoom combinations and steals space from portrait videos. */ @media (min-width: 761px) { .video-dialog[open] { grid-template-rows: auto auto !important; align-content: start !important; } .video-dialog .video-viewer { height: min(76vh, calc(92vh - 120px), 760px) !important; min-height: 0 !important; background: #000 !important; } .video-dialog .video-player-container { background: #000 !important; } .video-dialog .video-detail-bar { height: auto !important; min-height: 0 !important; max-height: none !important; flex: 0 0 auto !important; padding: 18px 28px !important; } } /* Mobile gallery: use the same restrained black-and-white module treatment as desktop instead of the legacy blue segmented control. */ @media (max-width: 680px) { :root[data-theme="light"] body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch, :root:not([data-theme]) body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch { height: auto !important; min-height: 40px !important; border-color: rgba(15, 23, 42, .16) !important; background: rgba(255, 255, 255, .94) !important; box-shadow: 0 8px 18px rgba(15, 23, 42, .14), inset 0 1px rgba(255, 255, 255, .9) !important; } :root[data-theme="light"] body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > button, :root[data-theme="light"] body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > .private-space-button, :root:not([data-theme]) body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > button, :root:not([data-theme]) body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > .private-space-button { background: transparent !important; color: #20242a !important; font-weight: 600 !important; box-shadow: none !important; } :root[data-theme="light"] body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[aria-selected="true"], :root:not([data-theme]) body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > button[aria-selected="true"] { background: #111318 !important; color: #fff !important; box-shadow: 0 5px 12px rgba(15, 23, 42, .18) !important; } /* The prior 108px brand cap cut "Samuel World" after the first word. */ .topbar { grid-template-columns: minmax(148px, 1fr) auto !important; column-gap: 4px !important; } .topbar .brand { max-width: none !important; min-width: 148px !important; overflow: visible !important; } .topbar .brand span, .topbar .brand b { overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; } .topbar .top-actions { gap: 2px !important; } .topbar .language-menu-toggle { padding-inline: 7px !important; } } /* Mobile homepage: keep the three primary sections in one quiet top module. "异世界" is a secondary destination, so it becomes a separate lower-left glass orb rather than taking a fourth grid slot and forcing a second row. */ @media (max-width: 680px) { body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button { position: fixed !important; left: max(14px, env(safe-area-inset-left)) !important; bottom: max(116px, calc(72px + env(safe-area-inset-bottom))) !important; z-index: 1050 !important; display: grid !important; place-items: center !important; width: 62px !important; min-width: 62px !important; height: 62px !important; min-height: 62px !important; margin: 0 !important; padding: 7px !important; border: 1px solid rgba(255, 255, 255, .72) !important; border-radius: 50% !important; background: rgba(27, 22, 37, .56) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(20, 16, 30, .20), inset 0 1px rgba(255, 255, 255, .22) !important; backdrop-filter: blur(14px) saturate(130%) !important; -webkit-backdrop-filter: blur(14px) saturate(130%) !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: .02em !important; text-align: center !important; white-space: normal !important; transform: none !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button:hover, body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button:focus-visible { background: rgba(48, 35, 66, .70) !important; color: #fff !important; transform: translateY(-2px) !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button:active { transform: scale(.96) !important; } } /* Mobile floating shortcuts: keep the homepage controls light on the image grid. The picks count sits inside one rose heart, with no extra white container. */ @media (max-width: 680px) { body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button { bottom: max(126px, calc(82px + env(safe-area-inset-bottom))) !important; width: 50px !important; min-width: 50px !important; height: 50px !important; min-height: 50px !important; padding: 5px !important; font-size: 11px !important; box-shadow: 0 8px 18px rgba(20, 16, 30, .18), inset 0 1px rgba(255, 255, 255, .20) !important; } .picks-fab { left: 14px !important; bottom: max(66px, calc(18px + env(safe-area-inset-bottom))) !important; width: 46px !important; min-width: 46px !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } .picks-fab .picks-icon { width: 46px !important; height: 46px !important; border-radius: 0 !important; background: transparent !important; color: transparent !important; box-shadow: none !important; font-size: 0 !important; } .picks-fab .picks-icon::before { content: '♥' !important; color: #d72b70 !important; font-family: Arial, sans-serif !important; font-size: 47px !important; line-height: 1 !important; text-shadow: 0 5px 11px rgba(176, 25, 82, .28) !important; } .picks-fab .picks-icon i, .picks-fab b { display: none !important; } .picks-fab em, body.glow-mode:not(.world-open) .picks-fab em { position: absolute !important; inset: 0 !important; z-index: 1 !important; display: grid !important; min-width: 0 !important; width: 46px !important; height: 46px !important; padding: 2px 0 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #fff !important; box-shadow: none !important; font-size: 11px !important; font-style: normal !important; font-weight: 900 !important; line-height: 1 !important; text-align: center !important; place-items: center !important; } .picks-fab:hover { transform: translateY(-2px) scale(1.04) !important; } } /* Final mobile MY PICKS mark: one rose circle, using the same rounded heart outline as the product-card action. */ @media (max-width: 680px) { .picks-fab { display: grid !important; place-items: center !important; border: 1px solid rgba(255, 255, 255, .46) !important; border-radius: 50% !important; background: rgba(255, 255, 255, .48) !important; box-shadow: 0 8px 18px rgba(20, 16, 30, .16), inset 0 1px rgba(255, 255, 255, .46) !important; backdrop-filter: blur(14px) saturate(130%) !important; -webkit-backdrop-filter: blur(14px) saturate(130%) !important; } .picks-fab .picks-icon { position: absolute !important; inset: 9px !important; display: grid !important; place-items: center !important; width: 28px !important; height: 28px !important; } .picks-fab .picks-icon::before { content: '' !important; width: 28px !important; height: 28px !important; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z' fill='none' stroke='%23d72b70' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; filter: none !important; text-shadow: none !important; } .picks-fab em, body.glow-mode:not(.world-open) .picks-fab em { width: 28px !important; min-width: 28px !important; height: 28px !important; min-height: 28px !important; inset: 9px !important; padding: 1px 0 0 !important; font-size: 10px !important; color: #d72b70 !important; text-shadow: 0 1px 2px rgba(255, 255, 255, .52) !important; } } /* Final front-end-only polish: readable glow editor labels and a larger portrait video viewer without changing source data or cropping the video. */ body.glow-mode:not(.world-open) #videoEditDialog .admin-form > label, body.glow-mode:not(.world-open) #videoEditDialog .admin-form > .switch-row, body.glow-mode:not(.world-open) #videoEditDialog .video-dropzone-area, body.glow-mode:not(.world-open) #videoEditDialog #videoDropZone > span, body.glow-mode:not(.world-open) #videoEditDialog #videoDropZoneArea > span, body.glow-mode:not(.world-open) #videoEditDialog .video-dropzone-area small, body.glow-mode:not(.world-open) #videoEditDialog .cover-editor-heading small, body.glow-mode:not(.world-open) #videoEditDialog .video-capture-status { color:#4a4248 !important; } body.glow-mode:not(.world-open) #videoEditDialog .video-dropzone-area { background:#f4f1f3 !important; border-color:#cfc6cc !important; } body.glow-mode:not(.world-open) #videoEditDialog .video-dropzone-area small { color:#665e63 !important; } body.glow-mode:not(.world-open) #videoEditDialog .dialog-heading p { color:#625a60 !important; } body.glow-mode dialog.admin-dialog #videoUploadProgress { border-color: #eadfe3 !important; background: #fff !important; color: #171717 !important; } body.glow-mode dialog.admin-dialog #videoUploadProgress .upload-progress-ring::before { background: #fff !important; } body.glow-mode dialog.admin-dialog #videoUploadProgress .upload-progress-track { background: #e7e0e3 !important; } body.glow-mode dialog.admin-dialog #videoUploadProgressTitle { color: #171717 !important; } body.glow-mode dialog.admin-dialog #videoUploadProgressDetail { color: #77716e !important; } @media (min-width:761px) { #videoDialog.video-dialog[open] { width:min(1180px,calc(100% - 32px)) !important; max-height:96vh !important; } #videoDialog.video-dialog .video-viewer { height:min(86vh,900px) !important; min-height:520px !important; } #videoDialog.video-dialog .video-player-container { padding:0 !important; } #videoDialog.video-dialog .video-viewer video, #videoDialog.video-dialog .video-player-container video { object-fit:contain !important; } } /* Show stock state as text over the cover's upper-left corner. Keep it out of the code row so it does not reserve space beside the heart action. */ .product-card .product-code-row { position: static !important; display: flex !important; align-items: flex-start !important; width: auto !important; margin-right: 0 !important; } .product-card .product-status-badge { position: absolute !important; top: 14px !important; left: 14px !important; right: auto !important; z-index: 8 !important; display: inline-flex !important; align-items: center !important; min-height: 22px !important; height: 22px !important; margin: 0 !important; padding: 3px 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #fff !important; text-shadow: 0 1px 5px rgba(0,0,0,.62) !important; line-height: 1 !important; } body.glow-mode:not(.world-open) .product-card .product-status-badge { background: transparent !important; box-shadow: none !important; color: #fff !important; } /* Video editor covers use the same vertical 9:16 framing as the video cards. */ #videoEditDialog .cover-preview, #videoEditDialog .cover-choice { aspect-ratio: 9 / 16 !important; } @media (min-width: 701px) { #videoEditDialog .cover-editor-layout { grid-template-columns: minmax(220px, 360px) minmax(180px, 1fr) !important; } #videoEditDialog .cover-preview { width: min(360px, 100%) !important; margin: 0 auto; } } /* Videos with small intrinsic dimensions should still fill the viewer height; preserve their proportions and keep the full frame visible. */ #videoDialog.video-dialog .video-viewer video, #videoDialog.video-dialog .video-player-container video { width: auto !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } /* Smaller frosted play control for video cards. */ .video-card .play-badge { width: 36px !important; height: 36px !important; background: rgba(255, 255, 255, .56) !important; border: 1px solid rgba(255, 255, 255, .62) !important; box-shadow: 0 8px 18px rgba(18, 18, 28, .22), inset 0 1px rgba(255, 255, 255, .58) !important; backdrop-filter: blur(12px) saturate(130%) !important; -webkit-backdrop-filter: blur(12px) saturate(130%) !important; } .video-card .play-badge::before { border-top-width: 6px !important; border-bottom-width: 6px !important; border-left-width: 9px !important; } @media (max-width: 680px) { .product-card .product-code-row { width: auto !important; margin-right: 0 !important; } .product-card .product-status-badge { top: 10px !important; left: 10px !important; } .video-card .play-badge { width: 32px !important; height: 32px !important; right: 8px !important; bottom: 8px !important; } } /* Final music manager sizing: keep the thumbnail visible beside the title and leave enough room for its action buttons at every breakpoint. */ .music-admin-row { grid-template-columns: auto 52px minmax(0, 1fr) auto !important; } .music-admin-icon { width: 52px !important; height: 52px !important; border-radius: 12px !important; } @media (max-width: 680px) { .music-admin-row { grid-template-columns: auto 48px minmax(0, 1fr) !important; } .music-admin-icon { width: 48px !important; height: 48px !important; } } /* Keep every management surface in the light-mode visual language. The gallery can still use the glow background, but administrative dialogs and editor pages must remain a calm white canvas with dark text and rose accents so controls stay readable in either theme. */ body.glow-mode dialog.admin-dialog, body.glow-mode dialog.news-list-dialog, body.glow-mode dialog.news-detail-dialog, body.glow-mode .news-admin-page { --bg: #fff !important; --panel: #f7f7f8 !important; --panel-strong: #fff !important; --surface-soft: #fcfafb !important; --text: #171717 !important; --ink: #171717 !important; --muted: #77716e !important; --line: #e5dfdd !important; --accent: #dd2866 !important; --accent-2: #8357d7 !important; --rose: #dd2866 !important; color: #171717 !important; background: #fff !important; } body.glow-mode dialog.admin-dialog, body.glow-mode dialog.news-list-dialog, body.glow-mode dialog.news-detail-dialog { border-color: #e8e3e1 !important; box-shadow: 0 28px 90px rgba(39, 26, 31, .16) !important; } body.glow-mode dialog.admin-dialog::backdrop, body.glow-mode dialog.news-list-dialog::backdrop, body.glow-mode dialog.news-detail-dialog::backdrop { background: rgba(20, 14, 19, .55) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } /* Headings, labels and helper copy. */ body.glow-mode dialog.admin-dialog .dialog-heading h2, body.glow-mode dialog.admin-dialog .dialog-heading h3, body.glow-mode dialog.admin-dialog .analytics-heading h2, body.glow-mode dialog.admin-dialog .analytics-panel-heading h3, body.glow-mode dialog.admin-dialog .edit-field-group > strong, body.glow-mode dialog.admin-dialog .cover-editor-heading strong, body.glow-mode dialog.admin-dialog .detail-images-editor-heading strong, body.glow-mode dialog.admin-dialog .product-meta-editor-heading strong, body.glow-mode dialog.admin-dialog .cover-zoom-label, body.glow-mode dialog.admin-dialog .admin-form > label, body.glow-mode dialog.admin-dialog .switch-row, body.glow-mode dialog.admin-dialog .section-row, body.glow-mode dialog.admin-dialog .section-row strong, body.glow-mode dialog.admin-dialog .member-row, body.glow-mode dialog.admin-dialog .member-row strong, body.glow-mode dialog.admin-dialog .asset-library-group-heading strong, body.glow-mode dialog.admin-dialog .asset-library-product-summary strong, body.glow-mode dialog.admin-dialog .analytics-summary strong, body.glow-mode dialog.admin-dialog .analytics-table-panel td strong, body.glow-mode .news-admin-page h1, body.glow-mode .news-admin-page label, body.glow-mode .news-admin-page .news-admin-row, body.glow-mode .news-admin-page .news-admin-row strong { color: #171717 !important; } body.glow-mode dialog.admin-dialog .dialog-heading p, body.glow-mode dialog.admin-dialog .admin-form small, body.glow-mode dialog.admin-dialog .image-sort-hint, body.glow-mode dialog.admin-dialog .image-sort-hint small, body.glow-mode dialog.admin-dialog .cover-editor-heading small, body.glow-mode dialog.admin-dialog .detail-images-editor-heading small, body.glow-mode dialog.admin-dialog .product-meta-editor-heading small, body.glow-mode dialog.admin-dialog .cover-preview, body.glow-mode dialog.admin-dialog .video-capture-status, body.glow-mode dialog.admin-dialog .file-drop-content span, body.glow-mode dialog.admin-dialog .file-drop-content small, body.glow-mode dialog.admin-dialog .banner-dropzone small, body.glow-mode dialog.admin-dialog .asset-library-toolbar label, body.glow-mode dialog.admin-dialog .asset-library-group-heading, body.glow-mode dialog.admin-dialog .asset-library-card-copy small, body.glow-mode dialog.admin-dialog .member-row-main small, body.glow-mode dialog.admin-dialog .member-identity-header > span, body.glow-mode dialog.admin-dialog .member-account-username span, body.glow-mode dialog.admin-dialog .member-password-summary span, body.glow-mode dialog.admin-dialog .member-bind-summary span, body.glow-mode dialog.admin-dialog .account-danger-zone span, body.glow-mode dialog.admin-dialog .analytics-heading p, body.glow-mode dialog.admin-dialog .analytics-updated, body.glow-mode dialog.admin-dialog .analytics-kpi small, body.glow-mode dialog.admin-dialog .analytics-kpi span, body.glow-mode dialog.admin-dialog .analytics-panel-heading > strong, body.glow-mode dialog.admin-dialog .legend-item span, body.glow-mode dialog.admin-dialog .legend-item small, body.glow-mode dialog.admin-dialog .bar-column span, body.glow-mode dialog.admin-dialog .bar-column small, body.glow-mode dialog.admin-dialog .analytics-visit-count, body.glow-mode dialog.admin-dialog .analytics-pagination, body.glow-mode dialog.admin-dialog #analyticsPageInfo, body.glow-mode dialog.news-list-dialog .news-list-header p, body.glow-mode dialog.news-list-dialog .news-list-card-edited, body.glow-mode dialog.news-list-dialog .news-list-card-excerpt, body.glow-mode dialog.news-list-dialog .news-list-card-footer, body.glow-mode dialog.news-detail-dialog .news-detail-back a, body.glow-mode dialog.news-detail-dialog .news-detail-meta, body.glow-mode .news-admin-page .news-admin-page-header p, body.glow-mode .news-admin-page .news-admin-row small { color: #77716e !important; } body.glow-mode dialog.admin-dialog .dialog-heading > span, body.glow-mode dialog.admin-dialog .analytics-heading > div > span, body.glow-mode dialog.admin-dialog .analytics-panel-heading span, body.glow-mode dialog.news-list-dialog .news-list-heading span, body.glow-mode dialog.news-detail-dialog .news-detail-original-link a, body.glow-mode .news-admin-page .eyebrow { color: #dd2866 !important; } /* Inputs and basic controls use the same light-mode contrast everywhere. */ body.glow-mode dialog.admin-dialog input:not([type="checkbox"]):not([type="radio"]), body.glow-mode dialog.admin-dialog select, body.glow-mode dialog.admin-dialog textarea, body.glow-mode dialog.news-detail-dialog input, body.glow-mode dialog.news-detail-dialog textarea, body.glow-mode .news-admin-page input, body.glow-mode .news-admin-page select, body.glow-mode .news-admin-page textarea, body.glow-mode .news-admin-page .news-rich-editor { border-color: #ded9d6 !important; background: #fff !important; color: #171717 !important; color-scheme: light !important; } body.glow-mode dialog.admin-dialog input::placeholder, body.glow-mode dialog.admin-dialog textarea::placeholder, body.glow-mode .news-admin-page input::placeholder, body.glow-mode .news-admin-page textarea::placeholder { color: #9a918d !important; opacity: 1 !important; } body.glow-mode dialog.admin-dialog input[type="checkbox"], body.glow-mode dialog.admin-dialog input[type="radio"], body.glow-mode dialog.admin-dialog input[type="range"], body.glow-mode .news-admin-page input[type="checkbox"], body.glow-mode .news-admin-page input[type="radio"], body.glow-mode .news-admin-page input[type="range"] { accent-color: #dd2866 !important; } /* Buttons: primary actions remain black/white; secondary actions are white with a quiet border, matching the light-mode editor screenshots. */ body.glow-mode dialog.admin-dialog .primary-button, body.glow-mode dialog.admin-dialog .dialog-save-top, body.glow-mode dialog.news-detail-dialog .primary-button, body.glow-mode .news-admin-page .primary-button { border-color: #171717 !important; background: #171717 !important; color: #fff !important; } body.glow-mode dialog.admin-dialog .ghost-button, body.glow-mode dialog.admin-dialog .member-identity-action, body.glow-mode dialog.admin-dialog .member-row-actions button, body.glow-mode dialog.admin-dialog .asset-library-card-actions button, body.glow-mode dialog.news-detail-dialog .ghost-button, body.glow-mode .news-admin-page .ghost-button, body.glow-mode .news-admin-page .rich-editor-toolbar button { border-color: #dcd6d3 !important; background: #fff !important; color: #171717 !important; } body.glow-mode dialog.admin-dialog .ghost-button:hover, body.glow-mode dialog.admin-dialog .member-identity-action:hover, body.glow-mode dialog.admin-dialog .member-row-actions button:hover, body.glow-mode dialog.admin-dialog .asset-library-card-actions button:hover, body.glow-mode dialog.news-detail-dialog .ghost-button:hover, body.glow-mode .news-admin-page .ghost-button:hover, body.glow-mode .news-admin-page .rich-editor-toolbar button:hover { border-color: #dd2866 !important; background: #fff8fa !important; color: #dd2866 !important; } body.glow-mode dialog.admin-dialog .danger-button, body.glow-mode dialog.admin-dialog .ghost-button.danger, body.glow-mode dialog.admin-dialog .remove-section, body.glow-mode dialog.admin-dialog .remove-track, body.glow-mode dialog.admin-dialog .music-icon-remove, body.glow-mode dialog.admin-dialog .member-row-actions button:last-child { border-color: rgba(199, 43, 104, .36) !important; color: #c72b68 !important; } body.glow-mode dialog.admin-dialog .danger-button.primary-button { border-color: #c72b68 !important; background: #c72b68 !important; color: #fff !important; } body.glow-mode dialog.admin-dialog .dialog-close, body.glow-mode dialog.news-list-dialog .dialog-close, body.glow-mode dialog.news-detail-dialog .dialog-close { border: 1px solid #e4dfdd !important; background: #fff !important; color: #171717 !important; box-shadow: none !important; } /* Panels, rows and upload targets. */ body.glow-mode dialog.admin-dialog .edit-field-group, body.glow-mode dialog.admin-dialog .image-gallery-dropzone, body.glow-mode dialog.admin-dialog .cover-editor, body.glow-mode dialog.admin-dialog .detail-images-editor, body.glow-mode dialog.admin-dialog .product-meta-editor, body.glow-mode dialog.admin-dialog .cover-controls, body.glow-mode dialog.admin-dialog .detail-image-dropzone, body.glow-mode dialog.admin-dialog .video-dropzone-area, body.glow-mode dialog.admin-dialog .file-drop-content, body.glow-mode dialog.admin-dialog .banner-dropzone, body.glow-mode dialog.admin-dialog .news-cover-area, body.glow-mode dialog.admin-dialog .section-row, body.glow-mode dialog.admin-dialog .member-row, body.glow-mode dialog.admin-dialog .member-account-username, body.glow-mode dialog.admin-dialog .member-linked-identities, body.glow-mode dialog.admin-dialog .member-password-summary, body.glow-mode dialog.admin-dialog .member-bind-summary, body.glow-mode dialog.admin-dialog .account-danger-zone, body.glow-mode dialog.admin-dialog .asset-library-notice, body.glow-mode dialog.admin-dialog .asset-library-card, body.glow-mode dialog.admin-dialog .asset-library-empty, body.glow-mode dialog.admin-dialog .analytics-kpi, body.glow-mode dialog.admin-dialog .analytics-panel, body.glow-mode dialog.admin-dialog .analytics-summary p, body.glow-mode dialog.admin-dialog .analytics-table-panel, body.glow-mode dialog.admin-dialog .analytics-mode-switch, body.glow-mode dialog.admin-dialog .image-editor figure, body.glow-mode dialog.news-list-dialog .news-list-card, body.glow-mode dialog.news-detail-dialog .news-detail-admin, body.glow-mode .news-admin-page .news-admin-row, body.glow-mode .news-admin-page .news-article-editor { border-color: #e5dfdd !important; background: #fff !important; color: #171717 !important; box-shadow: 0 8px 24px rgba(39, 26, 31, .04) !important; } body.glow-mode dialog.admin-dialog .cover-controls, body.glow-mode dialog.admin-dialog .detail-image-dropzone, body.glow-mode dialog.admin-dialog .file-drop-content, body.glow-mode dialog.admin-dialog .analytics-mode-switch, body.glow-mode dialog.news-list-dialog .news-list-card-img { background: #f8f7f6 !important; } body.glow-mode dialog.admin-dialog .analytics-mode-switch button, body.glow-mode dialog.admin-dialog .analytics-controls select { border-color: #ded9d6 !important; background: #fff !important; color: #171717 !important; } body.glow-mode dialog.admin-dialog .analytics-mode-switch button.active { background: #171717 !important; color: #fff !important; } body.glow-mode dialog.admin-dialog .analytics-table-panel th, body.glow-mode dialog.admin-dialog .analytics-table-panel td { border-bottom-color: #e5dfdd !important; color: #171717 !important; } body.glow-mode dialog.admin-dialog .analytics-table-panel th, body.glow-mode dialog.admin-dialog .analytics-table-panel td small, body.glow-mode dialog.admin-dialog .analytics-summary { color: #77716e !important; } body.glow-mode dialog.admin-dialog .analytics-summary p { background: #f8f7f6 !important; color: #171717 !important; } body.glow-mode dialog.admin-dialog .analytics-remark-cell input { border-color: #ded9d6 !important; background: #fff !important; color: #171717 !important; } body.glow-mode dialog.admin-dialog .analytics-remark-save { border-color: rgba(221, 40, 102, .32) !important; background: rgba(221, 40, 102, .08) !important; color: #c72b68 !important; } body.glow-mode dialog.admin-dialog .image-editor figure { background: #f8f7f6 !important; border-color: #e2ddda !important; } body.glow-mode dialog.admin-dialog .image-editor button, body.glow-mode dialog.admin-dialog .detail-image-dropzone .image-editor figure button { border: 1px solid #e2ddda !important; background: #fff !important; color: #171717 !important; } body.glow-mode dialog.admin-dialog .image-editor .image-index, body.glow-mode dialog.admin-dialog .detail-image-dropzone .image-editor figure .image-index { background: rgba(23, 23, 23, .78) !important; color: #fff !important; } /* News and activity management pages are full-page editors rather than dialogs, so they receive the same light canvas when opened from glow mode. */ body.glow-mode .news-admin-page .news-admin-row:hover, body.glow-mode .news-admin-page .news-admin-row.is-active { border-color: rgba(221, 40, 102, .45) !important; background: #fff !important; } body.glow-mode .news-admin-page .rich-editor-toolbar { border-color: #e5dfdd !important; background: #f8f7f6 !important; } body.glow-mode .news-admin-page .rich-editor-toolbar select { border-color: #ded9d6 !important; background: #fff !important; color: #171717 !important; } /* Keep the special music drop zones and current icon preview aligned with the same light-mode treatment after the generic overrides above. */ body.glow-mode:not(.world-open) #musicAdminDialog .file-drop-content, body.glow-mode.world-open #musicAdminDialog .file-drop-content { border-color: #d8cdd2 !important; background: #f8f7f6 !important; color: #77716e !important; } body.glow-mode:not(.world-open) #musicAdminDialog .music-admin-row, body.glow-mode.world-open #musicAdminDialog .music-admin-row { border-color: #e5dfdd !important; background: #fff !important; color: #171717 !important; } body.glow-mode:not(.world-open) #musicAdminDialog .music-admin-row input, body.glow-mode.world-open #musicAdminDialog .music-admin-row input { border-color: #ded9d6 !important; background: #fff !important; color: #171717 !important; } /* These ID-scoped rules intentionally mirror the specificity of the older glow-mode exceptions above them, ensuring the light surface wins even for analytics, editor and music selectors that previously used !important. */ body.glow-mode:not(.world-open) #musicAdminDialog, body.glow-mode.world-open #musicAdminDialog { background: #fff !important; color: #171717 !important; border-color: #e8e3e1 !important; } body.glow-mode:not(.world-open) #musicAdminDialog .dialog-heading h2, body.glow-mode.world-open #musicAdminDialog .dialog-heading h2, body.glow-mode:not(.world-open) #musicAdminDialog .admin-form > label, body.glow-mode.world-open #musicAdminDialog .admin-form > label { color: #171717 !important; } body.glow-mode:not(.world-open) #musicAdminDialog .dialog-heading p, body.glow-mode.world-open #musicAdminDialog .dialog-heading p, body.glow-mode:not(.world-open) #musicAdminDialog .file-drop-content span, body.glow-mode.world-open #musicAdminDialog .file-drop-content span, body.glow-mode:not(.world-open) #musicAdminDialog .file-drop-content small, body.glow-mode.world-open #musicAdminDialog .file-drop-content small { color: #77716e !important; } body.glow-mode:not(.world-open) #musicAdminDialog .dialog-heading > span, body.glow-mode.world-open #musicAdminDialog .dialog-heading > span { color: #dd2866 !important; } body.glow-mode:not(.world-open) #musicAdminDialog .admin-form input, body.glow-mode.world-open #musicAdminDialog .admin-form input { background: #fff !important; color: #171717 !important; border-color: #ded9d6 !important; } body.glow-mode:not(.world-open) #musicAdminDialog .music-admin-actions button, body.glow-mode.world-open #musicAdminDialog .music-admin-actions button { border-color: #dcd6d3 !important; background: #fff !important; color: #171717 !important; } body.glow-mode:not(.world-open) #musicAdminDialog .music-admin-actions button:hover, body.glow-mode.world-open #musicAdminDialog .music-admin-actions button:hover { border-color: #dd2866 !important; background: #fff8fa !important; color: #dd2866 !important; } body.glow-mode:not(.world-open) #musicAdminDialog .music-icon-remove, body.glow-mode.world-open #musicAdminDialog .music-icon-remove, body.glow-mode:not(.world-open) #musicAdminDialog .remove-track, body.glow-mode.world-open #musicAdminDialog .remove-track { border-color: rgba(199, 43, 104, .36) !important; background: #fff !important; color: #c72b68 !important; } body.glow-mode:not(.world-open) #analyticsDialog, body.glow-mode.world-open #analyticsDialog { background: #fff !important; color: #171717 !important; border-color: #e8e3e1 !important; } body.glow-mode:not(.world-open) #analyticsDialog .analytics-kpi, body.glow-mode.world-open #analyticsDialog .analytics-kpi, body.glow-mode:not(.world-open) #analyticsDialog .analytics-panel, body.glow-mode.world-open #analyticsDialog .analytics-panel { border-color: #e5dfdd !important; background: #fff !important; color: #171717 !important; box-shadow: 0 8px 24px rgba(39, 26, 31, .04) !important; } body.glow-mode:not(.world-open) #analyticsDialog .analytics-kpi small, body.glow-mode.world-open #analyticsDialog .analytics-kpi small, body.glow-mode:not(.world-open) #analyticsDialog .analytics-kpi span, body.glow-mode.world-open #analyticsDialog .analytics-kpi span, body.glow-mode:not(.world-open) #analyticsDialog .analytics-panel-heading h3, body.glow-mode.world-open #analyticsDialog .analytics-panel-heading h3, body.glow-mode:not(.world-open) #analyticsDialog .analytics-panel-heading > strong, body.glow-mode.world-open #analyticsDialog .analytics-panel-heading > strong, body.glow-mode:not(.world-open) #analyticsDialog .legend-item span, body.glow-mode.world-open #analyticsDialog .legend-item span, body.glow-mode:not(.world-open) #analyticsDialog .legend-item small, body.glow-mode.world-open #analyticsDialog .legend-item small, body.glow-mode:not(.world-open) #analyticsDialog .bar-column span, body.glow-mode.world-open #analyticsDialog .bar-column span, body.glow-mode:not(.world-open) #analyticsDialog .bar-column small, body.glow-mode.world-open #analyticsDialog .bar-column small, body.glow-mode:not(.world-open) #analyticsDialog .analytics-table-panel th, body.glow-mode.world-open #analyticsDialog .analytics-table-panel th, body.glow-mode:not(.world-open) #analyticsDialog .analytics-visit-count, body.glow-mode.world-open #analyticsDialog .analytics-visit-count, body.glow-mode:not(.world-open) #analyticsDialog .analytics-pagination, body.glow-mode.world-open #analyticsDialog .analytics-pagination, body.glow-mode:not(.world-open) #analyticsDialog #analyticsPageInfo, body.glow-mode.world-open #analyticsDialog #analyticsPageInfo { color: #77716e !important; } body.glow-mode:not(.world-open) #analyticsDialog .analytics-panel-heading span, body.glow-mode.world-open #analyticsDialog .analytics-panel-heading span { color: #dd2866 !important; } body.glow-mode:not(.world-open) #analyticsDialog .analytics-summary, body.glow-mode.world-open #analyticsDialog .analytics-summary, body.glow-mode:not(.world-open) #analyticsDialog .analytics-table-panel td, body.glow-mode.world-open #analyticsDialog .analytics-table-panel td { color: #171717 !important; } body.glow-mode:not(.world-open) #analyticsDialog .analytics-summary p, body.glow-mode.world-open #analyticsDialog .analytics-summary p { border-color: #e5dfdd !important; background: #f8f7f6 !important; color: #171717 !important; } body.glow-mode:not(.world-open) #analyticsDialog .analytics-table-panel th, body.glow-mode.world-open #analyticsDialog .analytics-table-panel th, body.glow-mode:not(.world-open) #analyticsDialog .analytics-table-panel td, body.glow-mode.world-open #analyticsDialog .analytics-table-panel td { border-bottom-color: #e5dfdd !important; } body.glow-mode:not(.world-open) #analyticsDialog .analytics-mode-switch, body.glow-mode.world-open #analyticsDialog .analytics-mode-switch { border-color: #ded9d6 !important; background: #f8f7f6 !important; } body.glow-mode:not(.world-open) #analyticsDialog .analytics-mode-switch button, body.glow-mode.world-open #analyticsDialog .analytics-mode-switch button, body.glow-mode:not(.world-open) #analyticsDialog .analytics-controls select, body.glow-mode.world-open #analyticsDialog .analytics-controls select { border-color: #ded9d6 !important; background: #fff !important; color: #171717 !important; } body.glow-mode:not(.world-open) #analyticsDialog .analytics-mode-switch button.active, body.glow-mode.world-open #analyticsDialog .analytics-mode-switch button.active { background: #171717 !important; color: #fff !important; } body.glow-mode:not(.world-open) #analyticsDialog .analytics-remark-save, body.glow-mode.world-open #analyticsDialog .analytics-remark-save { border-color: rgba(221, 40, 102, .32) !important; background: rgba(221, 40, 102, .08) !important; color: #c72b68 !important; } body.glow-mode:not(.world-open) #editDialog .edit-field-group, body.glow-mode.world-open #editDialog .edit-field-group, body.glow-mode:not(.world-open) #editDialog .image-gallery-dropzone, body.glow-mode.world-open #editDialog .image-gallery-dropzone, body.glow-mode:not(.world-open) #editDialog .cover-editor, body.glow-mode.world-open #editDialog .cover-editor, body.glow-mode:not(.world-open) #editDialog .detail-images-editor, body.glow-mode.world-open #editDialog .detail-images-editor, body.glow-mode:not(.world-open) #editDialog .product-meta-editor, body.glow-mode.world-open #editDialog .product-meta-editor { border-color: #e5dfdd !important; background: #fff !important; color: #171717 !important; } body.glow-mode:not(.world-open) #editDialog .cover-controls, body.glow-mode.world-open #editDialog .cover-controls, body.glow-mode:not(.world-open) #editDialog .detail-image-dropzone, body.glow-mode.world-open #editDialog .detail-image-dropzone { border-color: #e5dfdd !important; background: #fcfafb !important; } body.glow-mode:not(.world-open) #editDialog .edit-field-group > strong, body.glow-mode.world-open #editDialog .edit-field-group > strong, body.glow-mode:not(.world-open) #editDialog .edit-basic-grid label, body.glow-mode.world-open #editDialog .edit-basic-grid label, body.glow-mode:not(.world-open) #editDialog #editForm > .switch-row, body.glow-mode.world-open #editDialog #editForm > .switch-row, body.glow-mode:not(.world-open) #editDialog .product-meta-fields label, body.glow-mode.world-open #editDialog .product-meta-fields label { color: #171717 !important; } body.glow-mode:not(.world-open) #editDialog .image-sort-hint, body.glow-mode.world-open #editDialog .image-sort-hint, body.glow-mode:not(.world-open) #editDialog .cover-editor-heading small, body.glow-mode.world-open #editDialog .cover-editor-heading small, body.glow-mode:not(.world-open) #editDialog .detail-images-editor-heading small, body.glow-mode.world-open #editDialog .detail-images-editor-heading small, body.glow-mode:not(.world-open) #editDialog .product-meta-editor-heading small, body.glow-mode.world-open #editDialog .product-meta-editor-heading small, body.glow-mode:not(.world-open) #editDialog .cover-preview, body.glow-mode.world-open #editDialog .cover-preview { color: #77716e !important; } body.glow-mode:not(.world-open) #videoEditDialog .video-dropzone-area, body.glow-mode.world-open #videoEditDialog .video-dropzone-area { border-color: #d8cdd2 !important; background: #f8f7f6 !important; color: #171717 !important; } body.glow-mode:not(.world-open) #videoEditDialog .video-dropzone-area > span, body.glow-mode.world-open #videoEditDialog .video-dropzone-area > span, body.glow-mode:not(.world-open) #videoEditDialog .video-dropzone-area small, body.glow-mode.world-open #videoEditDialog .video-dropzone-area small, body.glow-mode:not(.world-open) #videoEditDialog .admin-form > label, body.glow-mode.world-open #videoEditDialog .admin-form > label, body.glow-mode:not(.world-open) #videoEditDialog .admin-form > .switch-row, body.glow-mode.world-open #videoEditDialog .admin-form > .switch-row { color: #171717 !important; } body.glow-mode:not(.world-open) #videoEditDialog .video-dropzone-area small, body.glow-mode.world-open #videoEditDialog .video-dropzone-area small, body.glow-mode:not(.world-open) #videoEditDialog .video-capture-status, body.glow-mode.world-open #videoEditDialog .video-capture-status, body.glow-mode:not(.world-open) #videoEditDialog .dialog-heading p, body.glow-mode.world-open #videoEditDialog .dialog-heading p { color: #77716e !important; } /* Product detail: keep the optional video action in its own surface above the heart. */ .detail-video-action { display: flex; align-items: center; justify-content: center; margin: 12px 0 10px; } .detail-video-action[hidden] { display: none !important; } .detail-pick-bar { flex-direction: row; gap: 0; } .detail-video-button { width: min(300px, 100%); min-height: 42px; padding: 9px 16px; border: 1px solid var(--rose); border-radius: 12px; background: #fff; color: var(--rose); font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .02em; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; } .detail-video-button:hover, .detail-video-button:focus-visible { background: var(--rose); color: #fff; transform: translateY(-1px); } body.glow-mode.detail-open:not(.world-open) .detail-video-button { border-color: #43ddff !important; background: rgba(8, 22, 54, .4) !important; color: #43ddff !important; } body.glow-mode.detail-open:not(.world-open) .detail-video-button:hover, body.glow-mode.detail-open:not(.world-open) .detail-video-button:focus-visible { background: rgba(67, 221, 255, .2) !important; color: #fff !important; } /* Multiple clips on one cover: unobtrusive previous/next controls in the viewer. */ .video-nav-button { position: absolute; top: 50%; z-index: 4; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.82); border-radius: 50%; background: rgba(255,255,255,.9); color: var(--rose); font: 400 34px/36px system-ui, sans-serif; cursor: pointer; transform: translateY(-50%); box-shadow: 0 8px 22px rgba(24, 16, 24, .18); } .video-nav-button:hover, .video-nav-button:focus-visible { background: #fff; transform: translateY(-50%) scale(1.06); } .video-nav-prev { left: 18px; } .video-nav-next { right: 18px; } .video-sequence { position: absolute; top: 16px; left: 50%; z-index: 4; padding: 5px 10px; border-radius: 999px; background: rgba(20, 18, 22, .62); color: #fff; font-size: 12px; font-weight: 800; transform: translateX(-50%); pointer-events: none; } .video-selected-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; font-size: 12px; } .video-selected-list:empty { display: none; } .video-selected-list span { padding: 5px 9px; border-radius: 999px; background: #f7f0f3; color: #6f5962; } .video-selected-list .video-selected-label { color: var(--rose); } body.glow-mode:not(.world-open) #videoEditDialog .video-selected-list span, body.glow-mode.world-open #videoEditDialog .video-selected-list span { background: #f7f0f3 !important; color: #6f5962 !important; } body.glow-mode:not(.world-open) #videoEditDialog .video-selected-list .video-selected-label, body.glow-mode.world-open #videoEditDialog .video-selected-list .video-selected-label { color: #c72b68 !important; } @media (max-width: 680px) { .detail-video-action { margin: 9px 0 8px; } .detail-pick-bar { gap: 0; padding: 9px 12px; } .detail-video-button { width: 100%; min-height: 42px; } .video-nav-button { width: 38px; height: 38px; font-size: 30px; line-height: 32px; } .video-nav-prev { left: 10px; } .video-nav-next { right: 10px; } .video-sequence { top: 10px; } } /* Video editor: compact controls around a larger, touch-friendly capture area. */ #videoEditDialog .ghost-button, #videoEditDialog .primary-button, #videoEditDialog .poster-tab { min-height: 36px; padding: 8px 12px; border-radius: 10px; font-size: 12px; } #videoEditDialog #captureFrameButton { min-height: 42px; padding: 10px 14px; } #videoEditDialog .video-dropzone-area { min-height: 68px; padding: 11px 14px; } #videoEditDialog .video-selected-list { align-items: flex-start; gap: 8px; padding: 2px 0 0; overflow-x: auto; flex-wrap: nowrap; } #videoEditDialog .video-source-choice { position: relative; flex: 0 0 74px; width: 74px; padding: 0; border: 2px solid #ddd5d8; border-radius: 11px; background: #fff; color: #171717; overflow: hidden; cursor: pointer; text-align: left; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } #videoEditDialog .video-source-choice:hover, #videoEditDialog .video-source-choice:focus-visible { transform: translateY(-1px); border-color: var(--rose); } #videoEditDialog .video-source-choice.selected { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(221,40,102,.16); } #videoEditDialog .video-source-thumb { display: block; width: 100%; aspect-ratio: 9 / 14; background: #eee9eb; object-fit: cover; } #videoEditDialog .video-source-choice video.video-source-thumb { pointer-events: none; } #videoEditDialog .video-source-number { position: absolute; top: 4px; left: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: rgba(20,16,20,.72); color: #fff; font-size: 10px; font-weight: 800; line-height: 20px; text-align: center; } #videoEditDialog .video-source-check { position: absolute; right: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--rose); color: #fff; font-size: 11px; font-weight: 900; line-height: 18px; text-align: center; opacity: 0; } #videoEditDialog .video-source-choice.selected .video-source-check { opacity: 1; } #videoEditDialog .video-source-label { display: block; overflow: hidden; padding: 5px 6px 6px; color: #51494d; font-size: 10px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } #videoEditDialog .video-selected-list .video-source-choice span { padding: 0; border-radius: 0; background: transparent; } #videoEditDialog .video-selected-list .video-source-choice .video-source-number { padding: 0 5px; border-radius: 999px; background: rgba(20,16,20,.72); } #videoEditDialog .video-selected-list .video-source-choice .video-source-check { padding: 0; border-radius: 50%; background: var(--rose); } #videoEditDialog .video-selected-list .video-source-choice .video-source-label { padding: 5px 6px 6px; background: transparent; } #videoEditDialog .video-source-loading { display: grid; place-items: center; width: 100%; aspect-ratio: 9 / 14; color: #81767b; font-size: 10px; text-align: center; } #videoEditDialog .video-capture-timeline { position: relative; display: grid; gap: 5px; margin: 5px 0 9px; } #videoEditDialog .video-capture-filmstrip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; min-height: 54px; padding: 3px; border: 1px solid #e3dce0; border-radius: 10px; background: #f7f3f5; overflow: hidden; } #videoEditDialog .video-capture-filmstrip > span { grid-column: 1 / -1; align-self: center; color: #8a7e83; font-size: 10px; text-align: center; } #videoEditDialog .video-capture-frame { min-width: 0; height: 48px; padding: 0; border: 2px solid transparent; border-radius: 6px; background: #eae4e7; overflow: hidden; cursor: pointer; } #videoEditDialog .video-capture-frame img { display: block; width: 100%; height: 100%; object-fit: cover; } #videoEditDialog .video-capture-frame.active { border-color: var(--rose); box-shadow: 0 0 0 2px rgba(221,40,102,.14); } #videoEditDialog #videoCaptureSeek { width: 100%; margin: 0; accent-color: var(--rose); } @media (max-width: 680px) { #videoEditDialog .video-source-choice { flex-basis: 64px; width: 64px; } #videoEditDialog .video-capture-filmstrip { grid-template-columns: repeat(10, minmax(0, 1fr)); min-height: 48px; } #videoEditDialog .video-capture-frame { height: 42px; } } /* Source cards have a separate select surface and a small remove control. */ #videoEditDialog .video-source-choice { height: auto; min-height: 0; overflow: hidden; } #videoEditDialog .video-source-select { display: block; width: 100%; padding: 0; border: 0; background: #fff; color: #171717; text-align: left; cursor: pointer; } #videoEditDialog .video-source-remove { position: absolute; top: 3px; right: 3px; z-index: 3; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(20,16,20,.72); color: #fff; font: 700 14px/16px system-ui, sans-serif; cursor: pointer; } #videoEditDialog .video-source-remove:hover, #videoEditDialog .video-source-remove:focus-visible { background: var(--rose); } /* Portrait source preview: fill the 9:16 frame instead of letterboxing vertical clips. */ #videoEditDialog .video-capture-preview { width: min(100%, 300px); aspect-ratio: 9 / 16; max-height: min(58vh, 520px); margin: 0 auto 10px; background: #17151a; } #videoEditDialog .video-capture-preview video { object-fit: cover; } /* Video viewer play control: smaller, lifted above the native timeline, with a translucent dark surface so the white triangle remains legible. */ .video-play-overlay { right: 18px !important; bottom: 58px !important; left: auto !important; top: auto !important; transform: none !important; width: 42px !important; height: 42px !important; border: 1px solid rgba(255,255,255,.58) !important; border-radius: 50% !important; background: rgba(18, 20, 30, .58) !important; backdrop-filter: blur(3px); color: #fff !important; box-shadow: 0 7px 18px rgba(0,0,0,.24) !important; } .video-play-overlay svg { width: 17px !important; height: 17px !important; margin-left: 2px !important; } @media (max-width: 680px) { .video-play-overlay { right: 12px !important; bottom: 50px !important; width: 38px !important; height: 38px !important; } .video-play-overlay svg { width: 15px !important; height: 15px !important; } } /* 2026-09-04 mobile homepage/video polish. Keep these rules last so they win over the older mobile experiments above without changing desktop. */ @media (max-width: 680px) { /* Align the two left shortcuts with the upper/lower buttons on the right. */ body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button { bottom: calc(env(safe-area-inset-bottom) + 108px) !important; } body:not(.world-open):not(.detail-open) .picks-fab { bottom: calc(env(safe-area-inset-bottom) + 16px) !important; } /* The video detail bar inherits .product-detail's 40vh cap on phones; remove that cap so the title hugs the video instead of leaving a blank white block below it. A small top inset keeps the video and close button clear of the status-bar/PWA chrome. */ #videoDialog.video-dialog[open] { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; padding: max(28px, calc(env(safe-area-inset-top) + 12px)) 0 env(safe-area-inset-bottom) !important; border-radius: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) auto !important; align-content: stretch !important; overflow: hidden !important; background: #fff !important; } #videoDialog.video-dialog > .dialog-close { top: max(18px, calc(env(safe-area-inset-top) + 12px)) !important; right: max(12px, calc(env(safe-area-inset-right) + 12px)) !important; z-index: 20 !important; width: 40px !important; height: 40px !important; border-radius: 13px !important; background: rgba(20, 16, 20, .82) !important; color: #fff !important; } #videoDialog .video-viewer { width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; background: #000 !important; } #videoDialog .video-player-container { width: 100% !important; height: 100% !important; min-height: 0 !important; background: #000 !important; } #videoDialog .video-detail-bar { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 10px 16px max(10px, calc(env(safe-area-inset-bottom) + 8px)) !important; gap: 10px !important; background: #fff !important; } #videoDialog .video-detail-bar strong { margin: 0 0 3px !important; font-size: 11px !important; } #videoDialog .video-detail-bar h2 { font-size: 19px !important; line-height: 1.2 !important; } #videoDialog .video-detail-bar p { margin: 4px 0 0 !important; font-size: 11px !important; line-height: 1.25 !important; } #videoDialog .video-pick-toggle { width: 42px !important; height: 42px !important; } #videoDialog .video-pick-toggle svg { width: 30px !important; height: 30px !important; } /* Keep the custom play control centered on phones. The native WebKit start/play glyph is redundant there, but the rest of the native timeline remains available. */ #videoDialog .video-play-overlay { left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: 48px !important; height: 48px !important; } #videoDialog .video-play-overlay svg { width: 18px !important; height: 18px !important; } #videoDialog #viewerVideo::-webkit-media-controls-play-button, #videoDialog #viewerVideo::-webkit-media-controls-start-playback-button, #videoDialog #viewerVideo::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none !important; } } /* Standalone/PWA mode has no browser address-bar inset on some iOS versions; give the close target a deterministic drop from the status-bar area. */ @media (max-width: 680px) { html.pwa-standalone #videoDialog.video-dialog > .dialog-close { top: max(52px, calc(env(safe-area-inset-top) + 28px)) !important; right: max(14px, calc(env(safe-area-inset-right) + 14px)) !important; } } /* 2026-09-05 mobile alignment: the left shortcuts use the same compact horizontal control silhouette as the right gallery controls, while the shared video dialog is centered against the full visual viewport. */ @media (max-width: 680px) { body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button { position: fixed !important; left: max(12px, env(safe-area-inset-left)) !important; right: auto !important; top: auto !important; bottom: calc(env(safe-area-inset-bottom) + 66px) !important; z-index: 2147483647 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 72px !important; min-width: 72px !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 7px 10px !important; box-sizing: border-box !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 12px !important; background: rgba(17,17,17,.84) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(0,0,0,.18) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; transform: none !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button:hover, body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button:focus-visible { background: rgba(17,17,17,.94) !important; color: #fff !important; transform: translateY(-2px) !important; } body:not(.world-open):not(.detail-open) .picks-fab { position: fixed !important; left: max(12px, env(safe-area-inset-left)) !important; right: auto !important; top: auto !important; bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px)) !important; z-index: 2147483647 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 72px !important; min-width: 72px !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 7px 10px !important; box-sizing: border-box !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 12px !important; background: rgba(17,17,17,.84) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(0,0,0,.18) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; overflow: visible !important; } body:not(.world-open):not(.detail-open) .picks-fab .picks-icon { position: static !important; inset: auto !important; display: grid !important; place-items: center !important; width: 22px !important; height: 22px !important; flex: 0 0 22px !important; border-radius: 0 !important; background: transparent !important; color: transparent !important; box-shadow: none !important; font-size: 0 !important; } body:not(.world-open):not(.detail-open) .picks-fab .picks-icon::before { width: 22px !important; height: 22px !important; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z' fill='none' stroke='%23ff83b8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; filter: none !important; text-shadow: none !important; } body:not(.world-open):not(.detail-open) .picks-fab .picks-icon i, body:not(.world-open):not(.detail-open) .picks-fab b { display: none !important; } body:not(.world-open):not(.detail-open) .picks-fab em { position: static !important; inset: auto !important; display: grid !important; place-items: center !important; width: 22px !important; min-width: 22px !important; height: 22px !important; min-height: 22px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: #fff !important; box-shadow: none !important; font-size: 12px !important; font-style: normal !important; font-weight: 900 !important; line-height: 1 !important; text-shadow: none !important; } /* Use the full viewport box so iOS/Safari cannot leave a right-side strip. */ #videoDialog.video-dialog[open] { position: fixed !important; left: 50% !important; right: auto !important; top: 50% !important; bottom: auto !important; width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; box-sizing: border-box !important; transform: translate(-50%, -50%) !important; } #videoDialog.video-dialog > .dialog-close { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; top: max(18px, calc(env(safe-area-inset-top) + 12px)) !important; right: max(12px, calc(env(safe-area-inset-right) + 12px)) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 10px !important; background: rgba(20,16,20,.74) !important; box-shadow: none !important; color: #fff !important; font-size: 21px !important; font-weight: 400 !important; line-height: 1 !important; } html.pwa-standalone #videoDialog.video-dialog > .dialog-close { top: max(42px, calc(env(safe-area-inset-top) + 22px)) !important; right: max(12px, calc(env(safe-area-inset-right) + 12px)) !important; } } /* 2026-09-05 navigation and video-card polish. Keep the controls compact while leaving the main media switcher readable on both desktop and mobile. */ @media (min-width: 681px) { body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch { gap: 6px !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media], body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .ip-nav-button, body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button { min-height: 44px !important; height: 44px !important; padding: 6px 4px !important; border-radius: 10px !important; font-size: 11px !important; line-height: 1.15 !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .ip-nav-button[aria-current="true"] { color: #fff !important; background: linear-gradient(145deg, #2d76ad, #245887) !important; box-shadow: 0 7px 15px rgba(36,88,135,.24) !important; } body.detail-open .catalog-shell #mediaSwitch > .ip-nav-button, body.world-open .catalog-shell #mediaSwitch > .ip-nav-button, body.world-open .catalog-shell #mediaSwitch > .other-ip-menu-toggle { display: none !important; } .other-ip-menu-toggle, .other-ip-menu { display: none !important; } } @media (max-width: 680px) { /* The mobile menu is the single compact entry for all non-private IPs. */ body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .ip-nav-button, body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button { display: none !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .other-ip-menu-toggle { position: fixed !important; left: max(12px, env(safe-area-inset-left)) !important; right: auto !important; top: auto !important; bottom: calc(env(safe-area-inset-bottom) + 108px) !important; z-index: 2147483647 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: 78px !important; min-width: 78px !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 5px 7px !important; box-sizing: border-box !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 11px !important; background: rgba(17,17,17,.84) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(0,0,0,.18) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1 !important; white-space: nowrap !important; } .other-ip-menu-chevron { font-size: 14px; line-height: 1; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .other-ip-menu-toggle[aria-expanded="true"] { background: rgba(17,17,17,.96) !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .other-ip-menu { position: fixed !important; left: max(12px, env(safe-area-inset-left)) !important; right: auto !important; bottom: calc(env(safe-area-inset-bottom) + 151px) !important; z-index: 2147483647 !important; display: grid !important; gap: 5px !important; width: 116px !important; min-width: 116px !important; margin: 0 !important; padding: 6px !important; box-sizing: border-box !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 12px !important; background: rgba(17,17,17,.92) !important; box-shadow: 0 12px 26px rgba(0,0,0,.24) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .other-ip-menu[hidden] { display: none !important; } .other-ip-menu > button { display: block !important; width: 100% !important; min-height: 32px !important; padding: 6px 8px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; color: #fff !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.1 !important; text-align: left !important; white-space: nowrap !important; } .other-ip-menu > button:hover, .other-ip-menu > button:focus-visible { background: rgba(255,255,255,.14) !important; } body.world-open #mediaSwitch > .other-ip-menu-toggle, body.world-open #mediaSwitch > .other-ip-menu, body.detail-open #mediaSwitch > .other-ip-menu-toggle, body.detail-open #mediaSwitch > .other-ip-menu { display: none !important; } /* Flatten the four floating shortcuts without losing a comfortable touch target. */ body:not(.world-open):not(.detail-open) .picks-fab, body:not(.world-open):not(.detail-open) .gallery-scroll-controls .detail-scroll-button { height: 38px !important; min-height: 38px !important; width: 72px !important; min-width: 72px !important; padding: 5px 8px !important; border-radius: 10px !important; } body:not(.world-open):not(.detail-open) .picks-fab { display: inline-flex !important; gap: 4px !important; background: rgba(255,255,255,.56) !important; border: 1px solid rgba(255,255,255,.62) !important; } body:not(.world-open):not(.detail-open) .picks-fab .picks-icon { position: static !important; inset: auto !important; width: 20px !important; height: 20px !important; flex: 0 0 20px !important; } body:not(.world-open):not(.detail-open) .picks-fab em { position: static !important; inset: auto !important; width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; font-size: 10px !important; } /* The close control sits inside the video frame and has no glow/pink ring. */ #videoDialog.video-dialog > .dialog-close { top: max(34px, calc(env(safe-area-inset-top) + 24px)) !important; right: max(18px, calc(env(safe-area-inset-right) + 18px)) !important; width: 30px !important; min-width: 30px !important; height: 30px !important; min-height: 30px !important; border: 0 !important; outline: 0 !important; border-radius: 9px !important; background: rgba(20,16,20,.72) !important; box-shadow: none !important; font-size: 19px !important; } html.pwa-standalone #videoDialog.video-dialog > .dialog-close { top: max(58px, calc(env(safe-area-inset-top) + 34px)) !important; right: max(18px, calc(env(safe-area-inset-right) + 18px)) !important; } } /* Video status badges use the same readable upper-left treatment as image cards. */ .video-card .product-status-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(17,19,24,.82) !important; color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.5); } @media (max-width: 680px) { body.private-space-open:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button { display: inline-flex !important; left: max(12px, env(safe-area-inset-left)) !important; bottom: calc(env(safe-area-inset-bottom) + 108px) !important; width: 92px !important; min-width: 92px !important; height: 38px !important; min-height: 38px !important; border-radius: 10px !important; white-space: nowrap !important; } body.private-space-open:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .other-ip-menu-toggle, body.private-space-open:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .other-ip-menu { display: none !important; } } /* 2026-09-05 IP navigation alignment and theme parity. The three independent IP entries intentionally reuse the image/video navigation language: left aligned labels, the same compact height, and the same selected-state treatment in both themes. */ @media (min-width: 681px) { body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .ip-nav-button { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-height: 40px !important; height: auto !important; margin: 0 !important; padding: 8px 4px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; color: #78838f !important; box-shadow: none !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.25 !important; text-align: left !important; white-space: nowrap !important; word-break: normal !important; overflow: hidden !important; text-overflow: clip !important; text-indent: 0 !important; transform: none !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .ip-nav-button::before { content: '' !important; position: absolute !important; left: 0 !important; top: 50% !important; width: 3px !important; height: 0 !important; border-radius: 0 3px 3px 0 !important; background: #0ea5e9 !important; transform: translateY(-50%) !important; transition: height .22s ease !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .ip-nav-button:hover { background: rgba(14, 165, 233, .07) !important; color: #0284c7 !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .ip-nav-button[aria-current="true"] { background: #111318 !important; color: #fff !important; font-weight: 700 !important; box-shadow: inset 0 1px rgba(255,255,255,.12), 0 6px 14px rgba(15,23,42,.18) !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .ip-nav-button[aria-current="true"]::before { height: 22px !important; background: #ff7a00 !important; box-shadow: 0 0 9px rgba(255,122,0,.42) !important; } } @media (min-width: 681px) { body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .ip-nav-button { color: rgba(222, 240, 255, .76) !important; } body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .ip-nav-button:hover { background: rgba(102, 196, 255, .11) !important; color: #d9f7ff !important; } body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .ip-nav-button[aria-current="true"] { background: linear-gradient(135deg, rgba(83, 186, 244, .25), rgba(89, 124, 222, .16)) !important; color: #43ddff !important; text-shadow: 0 0 12px rgba(67, 221, 255, .58) !important; box-shadow: inset 0 1px rgba(239, 252, 255, .24), 0 0 16px rgba(67, 221, 255, .18) !important; } body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .ip-nav-button::before { background: #43ddff !important; box-shadow: 0 0 10px rgba(67, 221, 255, .86) !important; } } /* Keep the compact mobile submenu in the same visual family as the active theme while retaining its small touch target. */ @media (max-width: 680px) { :root[data-theme="light"] body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > .other-ip-menu, :root:not([data-theme]) body:not(.world-open):not(.detail-open):not(.glow-mode) .catalog-shell #mediaSwitch > .other-ip-menu { background: rgba(255,255,255,.96) !important; border-color: rgba(14,165,233,.22) !important; } :root[data-theme="light"] body:not(.world-open):not(.detail-open):not(.glow-mode) .other-ip-menu > button, :root:not([data-theme]) body:not(.world-open):not(.detail-open):not(.glow-mode) .other-ip-menu > button { color: #78838f !important; } :root[data-theme="light"] body:not(.world-open):not(.detail-open):not(.glow-mode) .other-ip-menu > button:hover, :root[data-theme="light"] body:not(.world-open):not(.detail-open):not(.glow-mode) .other-ip-menu > button:focus-visible, :root:not([data-theme]) body:not(.world-open):not(.detail-open):not(.glow-mode) .other-ip-menu > button:hover, :root:not([data-theme]) body:not(.world-open):not(.detail-open):not(.glow-mode) .other-ip-menu > button:focus-visible { background: rgba(14,165,233,.09) !important; color: #0284c7 !important; } } /* In glow mode, the gallery controls/count/category labels follow the same gray/deep text palette as light mode. Product-card code badges and media overlays keep their own contrast colors. */ body.glow-mode:not(.world-open) .catalog-shell #catalogCount, body.glow-mode:not(.world-open) .catalog-shell .catalog-toolbar, body.glow-mode:not(.world-open) .catalog-shell .category-button, body.glow-mode:not(.world-open) .catalog-shell .catalog-toolbar select, body.glow-mode:not(.world-open) .catalog-shell .catalog-toolbar select:hover, body.glow-mode:not(.world-open) .catalog-shell .empty-state { color: #5f5957 !important; } body.glow-mode:not(.world-open) .catalog-shell .category-button[aria-selected="true"] { color: #0369a1 !important; text-shadow: none !important; } body.glow-mode:not(.world-open) .catalog-shell .category-button:hover { color: #0284c7 !important; } body.glow-mode:not(.world-open) .catalog-shell .catalog-toolbar .search input, body.glow-mode:not(.world-open) .catalog-shell .catalog-toolbar .search input::placeholder { color: #6f696b !important; } body.glow-mode:not(.world-open) .catalog-shell .catalog-toolbar .search > span { color: #78838f !important; } body.glow-mode:not(.world-open) .catalog-shell .category-button::after { background: #0ea5e9 !important; box-shadow: none !important; } /* 2026-09-05: keep glow-mode navigation and gallery controls readable on the deep blue background. Active states may retain their accent surface, but labels and supporting controls must not fall back to muted gray. */ body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media], body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .ip-nav-button, body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button { color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,.22) !important; } body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media]:hover, body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .ip-nav-button:hover, body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .private-space-button:hover { color: #fff !important; } body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #catalogCount, body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell .catalog-toolbar, body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell .category-button, body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell .catalog-toolbar select, body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell .empty-state { color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,.2) !important; } body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell .category-button[aria-selected="true"], body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell .category-button:hover { color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,.2) !important; } body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell .catalog-toolbar .search input, body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell .catalog-toolbar .search input::placeholder, body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell .catalog-toolbar .search > span, body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell .catalog-toolbar select { color: #fff !important; } /* The mobile OTHER IP sheet is also a glow-mode navigation surface. */ @media (max-width: 680px) { body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .other-ip-menu-toggle, body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .other-ip-menu > button { color: #fff !important; text-shadow: 0 1px 8px rgba(0,0,0,.22) !important; } } /* Glow-mode selected states stay bright cyan like the active vertical navigation; only the unselected labels use the readable white treatment. */ body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell .category-button[aria-selected="true"], body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell .category-button[aria-selected="true"]:hover { color: #43ddff !important; text-shadow: 0 0 14px rgba(67, 221, 255, .62) !important; } body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell .category-button[aria-selected="true"]::after { background: #43ddff !important; box-shadow: 0 0 10px rgba(67, 221, 255, .85) !important; } body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > button[data-media][aria-selected="true"], body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .ip-nav-button[aria-current="true"], body.glow-mode:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .other-ip-menu > button[aria-current="true"] { color: #43ddff !important; text-shadow: 0 0 12px rgba(67, 221, 255, .58) !important; } /* Keep the analytics summary isolated from gallery navigation colors. The analytics dialog uses a white management surface, so its data copy stays dark even when the surrounding page is in glow mode. */ body.glow-mode dialog#analyticsDialog .analytics-summary, body.glow-mode dialog#analyticsDialog .analytics-summary p, body.glow-mode dialog#analyticsDialog .analytics-summary p strong { color: #171717 !important; text-shadow: none !important; } body.glow-mode dialog#analyticsDialog .analytics-summary p { background: #f8f7f6 !important; border-color: #e5dfdd !important; } /* 2026-09-05 mobile quick-control alignment. Keep OTHER IP at the same vertical level and height as the right-side TOP/BOTTOM controls. Lock the expanded state too, because the media-switch grid otherwise stretches it. */ @media (max-width: 680px) { body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .other-ip-menu-toggle, body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .other-ip-menu-toggle[aria-expanded="true"] { bottom: calc(env(safe-area-inset-bottom) + 66px) !important; width: 78px !important; min-width: 78px !important; max-width: 78px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; flex: 0 0 78px !important; align-self: flex-start !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .other-ip-menu { bottom: calc(env(safe-area-inset-bottom) + 113px) !important; width: 116px !important; min-width: 116px !important; max-width: 116px !important; grid-auto-rows: 32px !important; } body:not(.world-open):not(.detail-open) .catalog-shell #mediaSwitch > .other-ip-menu > button { height: 32px !important; min-height: 32px !important; max-height: 32px !important; } } /* The favourites shortcut should appear only after the startup splash has fully left the document, so it never floats over the loading animation. */ body:has(#startupSplash) .picks-fab { display: none !important; } /* Mobile detail navigation: keep the original media choices plus the return action; IP shortcuts and the private-space entry belong to the homepage. */ @media (max-width: 680px) { body.detail-open:not(.world-open) .catalog-shell > #mediaSwitch > .ip-nav-button, body.detail-open:not(.world-open) .catalog-shell > #mediaSwitch > .private-space-button, body.detail-open:not(.world-open) .catalog-shell > #mediaSwitch > .other-ip-menu-toggle, body.detail-open:not(.world-open) .catalog-shell > #mediaSwitch > .other-ip-menu { display: none !important; } body.detail-open:not(.world-open) .catalog-shell > #mediaSwitch > #detailBackButton { display: flex !important; position: static !important; } /* Match the homepage's compact rectangular favourites shortcut. */ body.detail-open:not(.world-open) .picks-fab { position: fixed !important; left: max(12px, env(safe-area-inset-left)) !important; right: auto !important; top: auto !important; bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px)) !important; z-index: 2147483647 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 72px !important; min-width: 72px !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 7px 10px !important; box-sizing: border-box !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 12px !important; background: rgba(17,17,17,.84) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(0,0,0,.18) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; overflow: visible !important; } body.detail-open:not(.world-open) .picks-fab .picks-icon { position: static !important; inset: auto !important; display: grid !important; place-items: center !important; width: 22px !important; height: 22px !important; flex: 0 0 22px !important; border-radius: 0 !important; background: transparent !important; color: transparent !important; box-shadow: none !important; font-size: 0 !important; } body.detail-open:not(.world-open) .picks-fab .picks-icon::before { width: 22px !important; height: 22px !important; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z' fill='none' stroke='%23ff83b8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; filter: none !important; text-shadow: none !important; } body.detail-open:not(.world-open) .picks-fab .picks-icon i, body.detail-open:not(.world-open) .picks-fab b { display: none !important; } body.detail-open:not(.world-open) .picks-fab em { position: static !important; inset: auto !important; display: grid !important; place-items: center !important; width: 22px !important; min-width: 22px !important; height: 22px !important; min-height: 22px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: #fff !important; box-shadow: none !important; font-size: 12px !important; font-style: normal !important; font-weight: 900 !important; line-height: 1 !important; text-shadow: none !important; } } /* 2026-09-09 visitor dashboard v2 final layout and ledger. */ #analyticsVisitorDashboard { grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr) !important; grid-template-areas: "clusters insights" "quality quality" !important; align-items: stretch; gap: 12px !important; } #analyticsVisitorDashboard .analytics-visitor-insights { grid-area: insights !important; } #analyticsVisitorDashboard .analytics-visitor-clusters-panel { grid-area: clusters !important; display: flex; flex-direction: column; min-height: min(640px, calc(100vh - 285px)) !important; } #analyticsVisitorDashboard .analytics-visitor-clusters-panel .analytics-panel-heading, #analyticsVisitorDashboard .analytics-visitor-list-tools, #analyticsVisitorDashboard .analytics-cluster-pagination { flex: 0 0 auto; } #analyticsVisitorDashboard .analytics-cluster-list { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow: auto; padding-right: 3px; } #analyticsVisitorDashboard .analytics-visitor-list-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(150px, 1.45fr) minmax(100px, .8fr); gap: 7px; margin: 0 0 10px; } #analyticsVisitorDashboard .analytics-visitor-list-tools select, #analyticsVisitorDashboard .analytics-visitor-list-tools input { min-width: 0; width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-strong); color: var(--text); font-size: 11px; } #analyticsVisitorDashboard .analytics-cluster-summary { grid-template-columns: auto minmax(0, 1.35fr) minmax(150px, .9fr) auto !important; cursor: default; } #analyticsVisitorDashboard .analytics-cluster-summary:hover { background: transparent; } #analyticsVisitorDashboard .analytics-cluster-detail-button { flex: 0 0 auto; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); color: var(--accent); font-size: 10px; cursor: pointer; white-space: nowrap; } #analyticsVisitorDashboard .analytics-cluster-remark { display: flex; align-items: center; gap: 5px; min-width: 0; } #analyticsVisitorDashboard .analytics-cluster-remark input { width: 100%; min-width: 0; padding: 6px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-strong); color: var(--text); font-size: 10px; } #analyticsVisitorDashboard .analytics-cluster-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); background: var(--panel); } #analyticsVisitorDashboard .analytics-cluster-pagination .ghost-button { padding: 8px 11px; font-size: 11px; } #analyticsVisitorDashboard .analytics-cluster-pagination span { color: var(--muted); font-size: 11px; text-align: center; } #analyticsVisitorDashboard .analytics-lulu-list { max-height: 240px; } #analyticsVisitorDashboard .analytics-lulu-pagination { margin-top: 9px; padding-top: 9px; } #analyticsVisitorDataQuality { grid-area: quality !important; grid-column: auto !important; margin-top: 0; padding: 9px 12px; border: 1px solid color-mix(in srgb, #47c695 35%, var(--line)); border-radius: 11px; background: color-mix(in srgb, #47c695 9%, var(--panel)); color: var(--muted); font-size: 11px; line-height: 1.5; } #analyticsVisitorDataQuality.is-warning { border-color: color-mix(in srgb, #e59835 55%, var(--line)); background: color-mix(in srgb, #e59835 10%, var(--panel)); color: #a55e12; } #analyticsDialog .analytics-auto-refresh { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 11px; white-space: nowrap; } #analyticsDialog .analytics-auto-refresh input { width: auto; margin: 0; accent-color: var(--accent); } #analyticsDialog .analytics-auto-refresh small { color: var(--muted); font-size: 10px; } body.glow-mode #analyticsDialog .analytics-auto-refresh, body.glow-mode #analyticsVisitorDashboard .analytics-visitor-list-tools select, body.glow-mode #analyticsVisitorDashboard .analytics-visitor-list-tools input, body.glow-mode #analyticsVisitorDashboard .analytics-cluster-detail-button, body.glow-mode #analyticsVisitorDashboard .analytics-cluster-remark input { background: #fff; color: #171717; border-color: #e5dfdd; } body.glow-mode #analyticsVisitorDataQuality { border-color: #b8e4d2; background: #f5fcf8; color: #557467; } body.glow-mode #analyticsVisitorDataQuality.is-warning { border-color: #efc788; background: #fff9ee; color: #a55e12; } @media (max-width: 900px) { #analyticsVisitorDashboard { grid-template-columns: 1fr !important; grid-template-areas: "insights" "clusters" "quality" !important; } #analyticsVisitorDashboard .analytics-visitor-clusters-panel { min-height: 0 !important; } #analyticsVisitorDashboard .analytics-cluster-list { overflow: visible; } #analyticsVisitorDashboard .analytics-visitor-list-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { #analyticsVisitorDashboard .analytics-visitor-list-tools { grid-template-columns: 1fr 1fr; } #analyticsVisitorDashboard .analytics-visitor-list-tools input { grid-column: 1 / -1; } #analyticsVisitorDashboard .analytics-cluster-summary { grid-template-columns: auto minmax(0, 1fr) auto !important; } #analyticsVisitorDashboard .analytics-cluster-meta { grid-column: 2 / 3; grid-row: 2; text-align: left; } #analyticsVisitorDashboard .analytics-cluster-detail-button { grid-column: 3; grid-row: 1 / span 2; } } /* 2026-09-09 visitor dashboard layout pass 2: fit the 1920x1080 viewport. */ #analyticsDialog.analytics-dialog[open] { height: 92vh !important; max-height: 92vh !important; padding: 22px 24px !important; overflow: hidden !important; } #analyticsDialog.is-visitor-mode .analytics-layout { display: block !important; height: 100% !important; overflow: hidden !important; } #analyticsDialog.is-visitor-mode .analytics-overview { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden !important; } #analyticsDialog.is-visitor-mode .analytics-heading { flex: 0 0 auto; } #analyticsDialog.is-visitor-mode .analytics-updated { flex: 0 0 auto; margin-bottom: 8px; } #analyticsDialog.is-visitor-mode .analytics-kpis { flex: 0 0 auto; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px; margin-bottom: 10px; } #analyticsDialog.is-visitor-mode .analytics-kpi { min-width: 0; min-height: 0; padding: 10px 14px; border-radius: 14px; gap: 2px; } #analyticsDialog.is-visitor-mode .analytics-kpi strong { font-size: 22px; line-height: 1.05; } #analyticsDialog.is-visitor-mode .analytics-kpi small, #analyticsDialog.is-visitor-mode .analytics-kpi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 1.85fr) minmax(300px, 1fr) !important; grid-template-rows: minmax(0, 1fr) auto !important; grid-template-areas: "clusters insights" "quality quality" !important; gap: 10px !important; overflow: hidden; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-visitor-clusters-panel { min-height: 0 !important; overflow: hidden; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-visitor-insights { display: grid; grid-template-rows: minmax(150px, .85fr) minmax(180px, 1fr) minmax(220px, 1.2fr); align-content: stretch; min-height: 0; gap: 10px; overflow: hidden; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-visitor-insights > .analytics-panel { min-height: 0; overflow: hidden; padding: 12px 14px; border-radius: 14px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-visitor-composition-panel .analytics-visitor-composition { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-visitor-composition-panel .donut-chart { width: 112px; height: 112px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-visitor-composition-panel .donut-chart::after { inset: 22px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-visitor-composition-panel .legend-list { gap: 7px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-panel-heading { margin-bottom: 8px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-panel-heading h3 { font-size: 15px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-country-panel, #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-lulu-panel { display: flex; flex-direction: column; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-country-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 8px 12px; min-height: 0; overflow: auto; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-country-bar { gap: 4px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-country-bar-track { height: 6px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-country-bar-head { font-size: 11px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-country-bar-head strong { font-size: 10px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-lulu-list { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow: auto; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-lulu-pagination { flex: 0 0 auto; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-visitor-list-tools { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(130px, 1.2fr) minmax(92px, .75fr); gap: 5px; margin-bottom: 7px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-list { gap: 5px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-row { border-radius: 10px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-summary { display: grid; grid-template-columns: minmax(78px, .75fr) minmax(110px, 1.2fr) minmax(125px, 1.35fr) minmax(55px, .55fr) minmax(105px, 1.1fr) minmax(76px, .8fr) minmax(100px, 1fr) minmax(150px, 1.55fr) auto !important; align-items: center; gap: 8px; padding: 8px 10px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-category, #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-summary > span { min-width: 0; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-main, #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-ip, #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-meta, #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-recent, #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-device, #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-source { min-width: 0; overflow: hidden; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-main strong, #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-ip strong, #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-meta strong, #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-recent strong, #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-device strong, #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-source strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-main strong { font-size: 11px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-meta { text-align: right; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-remark { display: flex; align-items: center; gap: 4px; min-width: 0; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-remark input { min-width: 0; width: 100%; padding: 5px 6px; font-size: 10px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-remark .analytics-remark-save { flex: 0 0 auto; padding: 5px 6px; font-size: 10px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-detail-button { padding: 6px 8px; font-size: 10px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-detail-grid { gap: 10px; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-pagination { margin-top: 7px; padding-top: 7px; } @media (max-width: 900px) { #analyticsDialog.analytics-dialog[open] { height: 92vh !important; max-height: 92vh !important; overflow: hidden !important; } #analyticsDialog.is-visitor-mode .analytics-overview { overflow: auto !important; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard { grid-template-columns: 1fr !important; grid-template-rows: auto auto auto !important; grid-template-areas: "insights" "clusters" "quality" !important; overflow: visible; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-visitor-insights { grid-template-rows: auto auto auto; overflow: visible; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-visitor-clusters-panel { overflow: visible; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-list { overflow: visible; } #analyticsDialog.is-visitor-mode .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 560px) { #analyticsDialog.is-visitor-mode .analytics-kpis { grid-template-columns: 1fr !important; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-visitor-list-tools { grid-template-columns: 1fr 1fr; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-visitor-list-tools input { grid-column: 1 / -1; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-summary { grid-template-columns: auto minmax(0, 1fr) auto !important; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-meta, #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-recent, #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-device, #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-source { grid-column: 2; text-align: left; } #analyticsDialog.is-visitor-mode #analyticsVisitorDashboard .analytics-cluster-detail-button { grid-column: 3; grid-row: 1 / span 5; } }