*{box-sizing:border-box}
:root{--bg:#434b5e;--panel:#3b4355;--line:#7d8493;--text:#c8c6c2;--muted:#aaa9a6;--title:#dbcdb9;--link:#32bfff;--green:#45d354;--danger:#d96b6b}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{font-family:"Courier New",monospace}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
.page{max-width:1380px;margin:0 auto;padding:34px 22px 20px}
.narrow{max-width:650px}
.hero{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:18px}
.hero h1{font-family:Arial,sans-serif;font-size:46px;line-height:1;margin:0 0 7px;color:var(--title)}
.hero p{margin:0;color:var(--muted)}
.owner-card{display:flex;align-items:center;gap:12px;padding:11px 15px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(0,0,0,.08)}
.owner-card small{display:block;color:var(--muted);margin-top:3px}
.owner-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 20px Arial;background:#32394a;color:var(--title);border:1px solid #697186}
.owner-avatar.big{width:64px;height:64px;font-size:28px;margin:0 auto 14px}
.listing{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.table-head,.row{display:grid;grid-template-columns:minmax(300px,1.7fr) 180px 90px minmax(160px,1fr);align-items:center;gap:10px}
.table-head{padding:9px 8px 14px;font-weight:bold}
.row{min-height:39px;padding:4px 8px;border-top:1px solid rgba(255,255,255,.035)}
.row:hover{background:rgba(255,255,255,.025)}
.name{display:flex;align-items:center;min-width:0}
.name a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon{width:34px;flex:0 0 34px;font-size:20px;text-align:center}
.back{color:var(--green)}
.muted{color:var(--muted)}
.empty{padding:28px 8px;color:var(--muted)}
.site-footer{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 8px 8px;color:var(--muted);font-size:13px}
.site-footer strong{color:var(--title)}.dot{margin:0 8px}
.socials{display:flex;gap:18px}
.login-card,.panel{background:rgba(0,0,0,.09);border:1px solid rgba(255,255,255,.12);border-radius:12px}
.login-card{margin:45px auto 20px;padding:32px;max-width:460px}
.login-card h1{text-align:center;font-family:Arial,sans-serif;color:var(--title);margin:0 0 5px}
.login-card>p{text-align:center;color:var(--muted);margin-top:0}
label{display:block;margin:14px 0 6px}
input[type=text],input[type=password],input:not([type]),.small-input{width:100%;padding:11px 12px;border:1px solid #6a7285;border-radius:7px;background:#343b4c;color:#eee;font:inherit}
input[type=file]{width:100%;margin:8px 0 14px}
button,.btn{display:inline-block;padding:10px 15px;border:0;border-radius:7px;background:#168dc3;color:white;font:inherit;cursor:pointer;text-decoration:none}
button:hover,.btn:hover{filter:brightness(1.08);text-decoration:none}
.login-card button{width:100%;margin-top:18px}
.back-link{display:block;text-align:center;margin-top:20px}
.alert{background:#6f3f49;padding:10px 12px;border-radius:6px;margin:15px 0}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.panel{padding:18px}.panel h2{font-family:Arial,sans-serif;color:var(--title);font-size:19px;margin:0 0 12px}
.top-actions{display:flex;gap:10px}.secondary{background:#555e72}.danger{background:#a64b58!important}
.admin-head,.admin-row{grid-template-columns:minmax(260px,1.4fr) 170px 90px minmax(340px,1.3fr)}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inline{display:flex;gap:6px;align-items:center;margin:0}
.small-input{width:170px;padding:7px 8px}.small{padding:7px 9px;font-size:12px}
@media(max-width:850px){
 .page{padding:22px 12px}.hero{align-items:flex-start;flex-direction:column}.hero h1{font-size:36px}
 .listing{overflow-x:auto}.table-head,.row{min-width:850px}
 .admin-grid{grid-template-columns:1fr}.site-footer{flex-direction:column;align-items:flex-start}
}


/* ===== v5 motion & polish ===== */

html {
  scroll-behavior: smooth;
}

body {
  opacity: 1;
  transition: opacity .28s ease, background-color .28s ease;
}

body.js-ready {
  opacity: 0;
}

body.js-ready.page-loaded {
  opacity: 1;
}

.hero,
.listing,
.site-footer,
.admin-grid {
  transform: translateY(0);
  transition:
    transform .28s cubic-bezier(.22, 1, .36, 1),
    opacity .28s ease;
}

.owner-card,
.panel,
.login-card {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

.owner-card,
.panel,
.login-card,
.btn,
button,
.row,
a,
.small-input,
input {
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    opacity .18s ease;
}

.owner-card:hover,
.panel:hover {
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 14px 36px rgba(0,0,0,.14);
}

.row {
  position: relative;
}

.row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(50,191,255,.00),
    rgba(50,191,255,.035),
    rgba(50,191,255,.00)
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.row:hover::before {
  opacity: 1;
}

.row:hover {
  transform: translateX(2px);
}

.name a {
  position: relative;
}

.name a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  opacity: .7;
  transition: transform .18s ease;
}

.name a:hover {
  text-decoration: none;
}

.name a:hover::after {
  transform: scaleX(1);
}

.icon {
  transition: transform .18s ease, filter .18s ease;
}

.row:hover .icon {
  transform: translateY(-1px) scale(1.06);
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.18));
}

.btn,
button {
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 14px rgba(0,0,0,.12);
}

.btn:hover,
button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.btn:active,
button:active {
  transform: translateY(0) scale(.985);
}

button:disabled {
  cursor: wait;
  opacity: .72;
}

.ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.40);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: yuan-ripple .62s ease-out forwards;
}

@keyframes yuan-ripple {
  to {
    transform: translate(-50%, -50%) scale(18);
    opacity: 0;
  }
}

.row-animate {
  opacity: 0;
  transform: translateY(6px);
  animation: yuan-row-in .34s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: var(--row-delay, 0ms);
}

@keyframes yuan-row-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.soft-focus-in {
  animation: yuan-soft-focus .55s ease;
}

@keyframes yuan-soft-focus {
  0% {
    opacity: .72;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.file-meta {
  margin: -6px 0 12px;
  color: var(--muted);
  font-size: 12px;
}

input:focus,
.small-input:focus {
  outline: none;
  border-color: rgba(50,191,255,.75);
  box-shadow: 0 0 0 3px rgba(50,191,255,.10);
}

.top-actions {
  animation: yuan-actions-in .34s ease both;
}

@keyframes yuan-actions-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.site-footer a {
  opacity: .86;
}

.site-footer a:hover {
  opacity: 1;
  text-shadow: 0 0 16px rgba(50,191,255,.16);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}