/* 第三页：Kiyo 的 4×4 Mellow Archive 组件。保留原组件的结构与质感，
   初始不内置任何图片；用户可像原版一样点头像或照片位置换成自己的图片。 */
.kiyo-widget-wrap {
    --kiyo-ink: #262626;
    --kiyo-muted: #8f8f8a;
    --kiyo-line: rgba(75,75,75,.12);
    --kiyo-panel: rgba(247,247,244,.86);
    --kiyo-bar: rgba(227,227,224,.88);
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 0;
    color: var(--kiyo-ink);
    font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}

.kiyo-widget-wrap .kiyo-widget {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 46px;
    background: var(--kiyo-panel);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 0 70px rgba(255,255,255,.32);
    backdrop-filter: blur(20px) saturate(.78);
    -webkit-backdrop-filter: blur(20px) saturate(.78);
}

.kiyo-widget-wrap .kiyo-widget::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .26;
    background-image: radial-gradient(circle at 12% 19%,rgba(255,255,255,.95) 0 1px,transparent 1.4px), radial-gradient(circle at 72% 28%,rgba(255,255,255,.78) 0 .8px,transparent 1.2px), radial-gradient(circle at 34% 75%,rgba(112,112,108,.18) 0 .75px,transparent 1.15px), radial-gradient(circle at 82% 83%,rgba(255,255,255,.7) 0 .7px,transparent 1.1px);
    background-size: 52px 48px,66px 72px,58px 62px,78px 84px;
    mix-blend-mode: soft-light;
}

.kiyo-widget-wrap .kiyo-noise { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.13; z-index:9; }
.kiyo-widget-wrap .kiyo-browser-head { height:19%; padding:4.7% 6.2% 0; border-bottom:1px solid var(--kiyo-line); position:relative; z-index:2; }
.kiyo-widget-wrap .kiyo-url-bar { height:38%; min-height:38px; width:100%; border-radius:14px; background:var(--kiyo-bar); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:0 16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.58); }
.kiyo-widget-wrap .kiyo-aa { font-family:Georgia,"Times New Roman",serif; font-size:clamp(20px,3.55vw,31px); line-height:1; letter-spacing:-2.5px; transform:translateY(-1px); white-space:nowrap; }
.kiyo-widget-wrap .kiyo-url { min-width:0; display:flex; align-items:center; justify-content:center; gap:9px; font-size:clamp(13px,2.15vw,21px); font-weight:600; letter-spacing:-.7px; white-space:nowrap; }
.kiyo-widget-wrap .kiyo-lock { width:15px; height:15px; background:#121212; border-radius:3px; position:relative; flex:0 0 auto; }
.kiyo-widget-wrap .kiyo-lock::before { content:""; position:absolute; width:9px; height:9px; border:2.2px solid #121212; border-bottom:0; border-radius:8px 8px 0 0; left:1px; top:-8px; }
.kiyo-widget-wrap .kiyo-refresh-top { border:0; background:transparent; padding:0; cursor:pointer; font-size:clamp(20px,3.5vw,31px); line-height:1; color:#111; transform:rotate(-16deg); }
.kiyo-widget-wrap .kiyo-content { position:relative; z-index:2; height:81%; padding:4.3% 7.5% 3%; display:grid; grid-template-rows:24% 45% 10% 1fr; gap:2.6%; }
.kiyo-widget-wrap .kiyo-profile { display:grid; grid-template-columns:21% 1fr; gap:5%; align-items:center; min-height:0; }
.kiyo-widget-wrap .kiyo-avatar-wrap { position:relative; width:100%; aspect-ratio:1; justify-self:center; max-width:104px; }
.kiyo-widget-wrap .kiyo-avatar { width:100%; height:100%; border:1px solid rgba(255,255,255,.72); border-radius:50%; display:block; object-fit:cover; cursor:pointer; background:linear-gradient(135deg,#d8d8d5,#f3f3f0); filter:grayscale(1) contrast(.86) brightness(1.05) saturate(.4); }
.kiyo-widget-wrap .kiyo-bubble { position:absolute; right:-9%; top:-7%; width:31%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; color:#b6b6b2; font-size:clamp(12px,2vw,18px); letter-spacing:2.5px; box-shadow:0 3px 12px rgba(0,0,0,.03); }
.kiyo-widget-wrap .kiyo-copy h1 { margin:0 0 2.8%; font-size:clamp(17px,2.9vw,27px); font-weight:700; letter-spacing:-.35px; }
.kiyo-widget-wrap .kiyo-copy p { margin:0; color:#9b9b96; font-size:clamp(11px,1.9vw,17px); line-height:1.34; font-weight:560; letter-spacing:.05px; }
.kiyo-widget-wrap .kiyo-photo-frame { border:2px solid rgba(255,255,255,.88); padding:1.8%; display:grid; grid-template-columns:repeat(3,1fr); gap:2.2%; min-height:0; background:rgba(255,255,255,.08); box-shadow:0 0 0 1px rgba(210,210,206,.16); transform:translateY(4.5%); }
.kiyo-widget-wrap .kiyo-photo { width:100%; height:100%; min-height:0; display:block; object-fit:cover; cursor:pointer; background:linear-gradient(145deg,#d4d4d1,#f4f4f1); filter:grayscale(1) contrast(.84) brightness(1.08) saturate(.28); transition:filter .2s ease; }
.kiyo-widget-wrap .kiyo-photo:hover, .kiyo-widget-wrap .kiyo-avatar:hover { filter:grayscale(.75) contrast(.9) brightness(1.04); }
.kiyo-widget-wrap .kiyo-controls { display:grid; grid-template-columns:1fr 31% 1fr; align-items:center; gap:7%; padding:0 15%; transform:translateY(11%); }
.kiyo-widget-wrap .kiyo-arrow { border:0; background:transparent; color:#aaa9a5; font-size:clamp(24px,4.2vw,36px); font-weight:300; cursor:pointer; line-height:1; }
.kiyo-widget-wrap .kiyo-reload { height:30px; min-height:30px; border:0; border-radius:9px; background:rgba(255,255,255,.95); color:#a5a5a0; font-size:clamp(12px,1.8vw,16px); letter-spacing:1.35px; font-weight:500; box-shadow:0 1px 8px rgba(0,0,0,.045),inset 0 0 0 1px rgba(225,225,221,.52); cursor:pointer; }
.kiyo-widget-wrap .kiyo-reload:active { transform:translateY(1px); }
.kiyo-widget-wrap .kiyo-tag { position:absolute; left:50%; bottom:7px; transform:translateX(-50%); color:#2d2d2d; font-size:clamp(11px,1.7vw,15px); font-weight:600; letter-spacing:.2px; line-height:1; z-index:4; }
.kiyo-widget-wrap .kiyo-picker { display:none; }
.kiyo-widget-wrap .kiyo-hint { position:absolute; left:50%; bottom:34px; z-index:20; transform:translateX(-50%); padding:6px 10px; border-radius:999px; background:rgba(28,28,28,.82); color:#fff; font-size:11px; opacity:0; pointer-events:none; transition:.2s; white-space:nowrap; }
.kiyo-widget-wrap .kiyo-hint.show { opacity:1; }

@media (max-width:520px) {
    .kiyo-widget-wrap .kiyo-widget { border-radius:34px; }
    .kiyo-widget-wrap .kiyo-browser-head { padding-left:7%; padding-right:7%; }
    .kiyo-widget-wrap .kiyo-url-bar { min-height:34px; border-radius:12px; padding:0 12px; gap:7px; }
    .kiyo-widget-wrap .kiyo-url { gap:5px; }
    .kiyo-widget-wrap .kiyo-lock { width:12px; height:12px; }
    .kiyo-widget-wrap .kiyo-lock::before { width:8px; height:8px; border-width:1.8px; left:.3px; top:-6px; }
    .kiyo-widget-wrap .kiyo-content { padding-left:8%; padding-right:8%; }
    .kiyo-widget-wrap .kiyo-controls { padding:0 13%; gap:5%; }
    .kiyo-widget-wrap .kiyo-reload { height:27px; min-height:27px; }
}