/*
Theme Name: 纸鸢WP图床-ImageShiroki
Theme URI: https://shiroki.live/
Author: 白木
Author URI: https://shiroki.live/
Description: 扁平风的图床系统，适配了上传、后台设置、用户头像等功能
Version: 1.0.0
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.2.27
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ZeeUrnSha-ImageShiroki
Tags: featured-images, photography, portfolio, grid-layout
*/

:root { --ish-primary: #6b8afd; --ish-bg: #0f1220; --ish-card: #171a2a; --ish-accent: #94b0ff; --ish-text: #e8ecff; --ish-muted: #aab3d9; --ish-radius: 18px; --ish-avatar-size: 28px; }
* , *::before, *::after { box-sizing: border-box; }
html { background: transparent; }
body { background: var(--ish-bg); color: var(--ish-text); min-height: 100vh; }
html::before { content:""; position:fixed; inset:0; pointer-events:none; background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1.5px); background-size: 20px 20px; opacity:0.35; }
html[data-theme="light"] { --ish-bg:#f6f7fb; --ish-card:#ffffff; --ish-text:#1f2435; --ish-muted:#5f6a8a; --ish-accent:#3b6bff; }
html[data-theme="light"]::before { opacity:0; background-image:none; }
html[data-theme="light"] body {
  background:
    radial-gradient(1800px 1400px at 10% 10%, rgba(255,182,193,0.6), transparent 60%),
    radial-gradient(1800px 1400px at 90% 20%, rgba(102,187,255,0.6), transparent 60%),
    radial-gradient(1800px 1480px at 85% 85%, rgba(255,182,193,0.6), transparent 60%),
    linear-gradient(120deg, #ffe6f0, #e8f3ff 70%);
}
html[data-theme="light"]::after { background: none; }
html::after { content:""; position:fixed; inset:0; pointer-events:none; background: none; }
 

 
body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Microsoft YaHei", sans-serif; line-height: 1.6; }
a { color: var(--ish-accent); text-decoration: none; }
a:hover { color: var(--ish-primary); }

.ish-container { max-width: 1100px; margin: 40px auto; padding: 24px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); backdrop-filter: blur(8px); border-radius: var(--ish-radius); box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); }
html[data-theme="light"] .ish-container { background: rgba(255,255,255,0.55); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 18px 40px rgba(0,0,0,0.12); }
.ish-title { font-size: 28px; font-weight: 700; letter-spacing: 0.3px; }
.ish-subtitle { color: var(--ish-muted); margin-top: 4px; font-size: 14px; }

.ish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ish-card { position: relative; background: var(--ish-card); border-radius: calc(var(--ish-radius) + 6px); overflow: hidden; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
.ish-card img { display: block; width: 100%; height: 280px; object-fit: cover; }
.ish-card-footer { display: flex; gap: 8px; padding: 12px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); }
.ish-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); color: var(--ish-text); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04)); cursor: pointer; }
.ish-btn:hover { border-color: rgba(255,255,255,0.16); transform: translateY(-1px); transition: transform 120ms ease, border-color 120ms ease; }

.ish-upload { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin: 24px 0; padding: 16px; background: var(--ish-card); border-radius: calc(var(--ish-radius) + 4px); border: 1px solid rgba(255,255,255,0.06); }
.ish-input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.2); color: var(--ish-text); }
.ish-hint { color: var(--ish-muted); font-size: 12px; }

.ish-copy-status { font-size: 12px; color: var(--ish-muted); }

.ish-card-badges { position:absolute; top:8px; left:8px; display:flex; gap:6px; }
.ish-badge-sm { font-size:12px; padding:6px 10px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05)); border:1px solid rgba(255,255,255,0.12); color: var(--ish-text); box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.ish-badge-format { background: linear-gradient(90deg, #8a2be2, #1e90ff); border: 1px solid rgba(255,255,255,0.20); color: #ffffff; box-shadow: 0 8px 20px rgba(30,144,255,0.35); }

.ish-waterfall { column-width: 240px; column-gap: 16px; }
.ish-waterfall .ish-card { break-inside: avoid; margin-bottom: 16px; display: inline-block; width: 100%; }
.ish-waterfall .ish-card img { height: auto; object-fit: cover; }
@media (max-width: 640px) { .ish-waterfall { column-width: 180px; column-gap: 12px; } }

/* Navbar */
.ish-navbar-wrap { position:sticky; top:12px; z-index:1000; padding:0 30px; }
.ish-navbar { max-width:1100px; margin:0 auto; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-radius: calc(var(--ish-radius) + 6px); background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter: blur(10px); }
html[data-theme="light"] .ish-navbar { background: transparent; border: none; box-shadow: none; }
.ish-logo { display:flex; align-items:center; gap:10px; color:var(--ish-text); }
.ish-logo:hover { color: var(--ish-accent); }
.ish-logo:hover .ish-logo-text { color: transparent; background: linear-gradient(90deg, #8a2be2, #ff7eb3, #1e90ff); -webkit-background-clip: text; background-clip: text; }
.ish-logo-mark { width:26px; height:26px; border-radius:8px; background: linear-gradient(135deg, var(--ish-primary), var(--ish-accent)); box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.ish-logo-img { height:26px; display:block; border-radius:8px; box-shadow: none; }
.ish-logo-text { font-weight:800; letter-spacing:0.2px; background: linear-gradient(90deg, #8a2be2, #ff7eb3, #1e90ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ish-nav-right { display:flex; align-items:center; gap:10px; }
.ish-nav-search { display: inline-flex; align-items: center; gap: 8px; }
.ish-nav-search-input { width: 220px; height: 36px; padding: 8px 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--ish-text); outline: none; box-shadow: none; }
.ish-nav-search-input::placeholder { color: var(--ish-muted); }
.ish-navbar .ish-nav-search-input:hover, .ish-navbar .ish-nav-search-input:focus { background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)); border-color: rgba(255,255,255,0.14); }
html[data-theme="light"] .ish-navbar .ish-nav-search-input:hover,
html[data-theme="light"] .ish-navbar .ish-nav-search-input:focus { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.10); }
@media (max-width: 640px) { .ish-nav-search-input { width: 160px; } }
.ish-user { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background: transparent; border:1px solid transparent; position: relative; }
.ish-avatar { width: var(--ish-avatar-size); height: var(--ish-avatar-size); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ish-avatar-img { width: 100%; height: 100%; border-radius:999px; object-fit: cover; display:block; }
.ish-user-name { font-size:14px; background: linear-gradient(90deg, #ff7400, #ff9d65, #ff609a); -webkit-background-clip: text; background-clip: text; color: transparent; }

 
.ish-navbar .ish-btn { background: transparent; border-color: transparent; color: var(--ish-accent); transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease; }
.ish-navbar .ish-btn:hover, .ish-navbar .ish-btn:focus-visible { background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)); border-color: rgba(255,255,255,0.14); color: var(--ish-primary); transform: none; }
.ish-navbar .ish-icon-btn svg { color: var(--ish-accent); }
.ish-navbar .ish-icon-btn:hover svg, .ish-navbar .ish-icon-btn:focus-visible svg { color: var(--ish-primary); }
.ish-navbar .ish-user:hover, .ish-navbar .ish-user:focus-within { background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)); border-color: rgba(255,255,255,0.14); }
.ish-navbar .ish-user:hover .ish-user-name, .ish-navbar .ish-user:focus-within .ish-user-name { color: transparent; background: linear-gradient(90deg, #ff7400, #ff9d65, #ff609a); -webkit-background-clip: text; background-clip: text; }
html[data-theme="light"] .ish-navbar .ish-btn:hover,
html[data-theme="light"] .ish-navbar .ish-user:hover,
html[data-theme="light"] .ish-navbar .ish-btn:focus-visible,
html[data-theme="light"] .ish-navbar .ish-user:focus-within { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.10); }

@media (max-width: 640px) { :root { --ish-avatar-size: 24px; } }

/* User dropdown (flat style) */
.ish-user-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; padding: 8px; border-radius: 12px; background: var(--ish-card); border: 1px solid rgba(255,255,255,0.12); box-shadow: none; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease; z-index: 1000; }
.ish-user:hover .ish-user-menu, .ish-user:focus-within .ish-user-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ish-user-menu-item { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ish-text); }
.ish-user-menu-item:hover, .ish-user-menu-item:focus-visible { background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06)); color: var(--ish-primary); }
html[data-theme="light"] .ish-user-menu { background: #ffffff; border: 1px solid rgba(0,0,0,0.06); }
html[data-theme="light"] .ish-user-menu-item:hover, html[data-theme="light"] .ish-user-menu-item:focus-visible { background: rgba(0,0,0,0.06); }

/* Sweep light effect for navbar items */
.ish-navbar .ish-btn,
.ish-navbar .ish-user,
.ish-navbar .ish-icon-btn { position: relative; overflow: hidden; }
.ish-navbar .ish-btn::after,
.ish-navbar .ish-user::after,
.ish-navbar .ish-icon-btn::after { content: ""; position: absolute; top: 0; left: -120%; height: 100%; width: 40%; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.35), rgba(255,255,255,0)); transform: skewX(-20deg); }
.ish-navbar .ish-btn:hover::after,
.ish-navbar .ish-btn:focus-visible::after,
.ish-navbar .ish-user:hover::after,
.ish-navbar .ish-user:focus-within::after,
.ish-navbar .ish-icon-btn:hover::after,
.ish-navbar .ish-icon-btn:focus-visible::after { animation: ish-sweep 900ms ease forwards; }
html[data-theme="light"] .ish-navbar .ish-btn::after,
html[data-theme="light"] .ish-navbar .ish-user::after,
html[data-theme="light"] .ish-navbar .ish-icon-btn::after { background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.10), rgba(0,0,0,0)); }

/* Ensure dropdown not clipped by user container */
.ish-navbar .ish-user { overflow: visible; }

/* Clean Home - no borders */
.home .ish-container { background: transparent; border: none; box-shadow: none; padding: 0; }
.home main.ish-container { max-width: none; width: 100%; padding: 0 30px; margin: 24px 0; }
.home main.ish-container section.ish-container { max-width: none; width: 100%; padding: 0 30px; margin: 0; background: transparent; border: none; box-shadow: none;}
.home section.ish-container > h2.ish-title, .home section.ish-container > .ish-upload, .home section.ish-container > #ish-upload-status { display: none; }
.home .ish-container > .ish-title, .home .ish-container > .ish-subtitle, .home .ish-upload, .home #ish-upload-status { display: none; }
.home .ish-grid { width: 100%; max-width: 100%; margin: 0; gap: clamp(8px, 2vw, 16px); grid-template-columns: repeat(auto-fit, minmax(clamp(160px, 22vw, 320px), 1fr)); overflow-x: hidden; }
.home .ish-card { background: transparent; border: none; box-shadow: none; }
.home .ish-card-badges { display: flex; }
.home .ish-card-badges .ish-badge-sm { display: none; }
.home .ish-card-badges .ish-badge-format { display: inline-flex; }
.home .ish-card img { width: 100%; height: auto; max-width: 100%; border-radius: calc(var(--ish-radius) + 8px); display: block; }
@media (max-width: 640px) {
  .home .ish-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* Light mode: remove extra white layers on content */
html[data-theme="light"] .ish-container { background: transparent; border: none; box-shadow: none; }
html[data-theme="light"] .ish-grid .ish-card { background: transparent; border: none; box-shadow: none; }

/* Upload page unify background */
.ish-upload-page .ish-container { background: transparent; border: none; box-shadow: none; }
/* Upload layout inside main: remove container shadow/background */
main.ish-container:has(.ish-upload-layout) { background: transparent; border: none; box-shadow: none; }

/* Copy buttons - blue with sweep hover */
.ish-btn.ish-copy-modal { position: relative; overflow: hidden; color: #fff; background: linear-gradient(90deg, var(--ish-primary), var(--ish-accent)); border-color: rgba(255,255,255,0.20); box-shadow: 0 8px 20px rgba(107,138,253,0.35); }
.ish-btn.ish-copy-modal::after { content: ""; position: absolute; top: 0; left: -120%; height: 100%; width: 40%; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.35), rgba(255,255,255,0)); transform: skewX(-20deg); }
.ish-btn.ish-copy-modal:hover::after { animation: ish-sweep 900ms ease forwards; }
@keyframes ish-sweep { 0% { left: -120%; } 50% { left: 40%; } 100% { left: 160%; } }
/* Disable sweep light on navbar items to remove white stripe */
.ish-navbar .ish-btn::after,
.ish-navbar .ish-user::after,
.ish-navbar .ish-icon-btn::after { content: none; }
.ish-navbar .ish-btn:hover::after,
.ish-navbar .ish-btn:focus-visible::after,
.ish-navbar .ish-user:hover::after,
.ish-navbar .ish-user:focus-within::after,
.ish-navbar .ish-icon-btn:hover::after,
.ish-navbar .ish-icon-btn:focus-visible::after { animation: none; }

.ish-navbar .ish-upload-btn,
.ish-navbar .ish-theme-toggle { position: relative; overflow: hidden; }
.ish-navbar .ish-user { position: relative; overflow: visible; }
.ish-user-inner { position: relative; overflow: hidden; border-radius: 999px; display: flex; align-items: center; gap: 8px; }
.ish-navbar .ish-upload-btn::after,
.ish-navbar .ish-theme-toggle::after,
.ish-navbar .ish-user-inner::after { content: ""; position: absolute; top: 0; left: -120%; height: 100%; width: 40%; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.25), rgba(255,255,255,0)); transform: skewX(-20deg); }
.ish-navbar .ish-upload-btn:hover::after,
.ish-navbar .ish-upload-btn:focus-visible::after,
.ish-navbar .ish-theme-toggle:hover::after,
.ish-navbar .ish-theme-toggle:focus-visible::after,
.ish-navbar .ish-user:hover .ish-user-inner::after,
.ish-navbar .ish-user:focus-within .ish-user-inner::after { animation: ish-sweep 900ms ease forwards; }
html[data-theme="light"] .ish-navbar .ish-upload-btn::after,
html[data-theme="light"] .ish-navbar .ish-theme-toggle::after,
html[data-theme="light"] .ish-navbar .ish-user-inner::after { background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.08), rgba(0,0,0,0)); }

/* Home navbar: flat, aligned to content section */
.home .ish-navbar { max-width: none; width: 100%; padding: 0; border-radius: 0; background: transparent; border: none; box-shadow: none; backdrop-filter: none; }
/* Theme toggle icons visibility */
.ish-theme-toggle .ish-icon-sun, .ish-theme-toggle .ish-icon-moon { display: none; }
html[data-theme="light"] .ish-theme-toggle .ish-icon-moon { display: inline; }
html:not([data-theme="light"]) .ish-theme-toggle .ish-icon-sun { display: inline; }