:root{
  --card-bg: rgba(14, 23, 69, 0.92);
  --line: rgba(255,255,255,0.15);
  --txt: #ffffff;
  --txt-dark: #1c2557;
  --shadow: 0 10px 30px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;color:var(--txt);background:#06113a}
.screen-body{
  min-height:100vh; display:flex; align-items:center; justify-content:center; background:#06113a;
}
.screen-frame{
  position:relative; width:min(100vw, 768px); aspect-ratio:3/4; overflow:hidden; background:#000;
}
.screen-image{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.overlay-form{position:absolute; inset:0}
.login-input{
  position:absolute; left:21%; width:57.5%; height:7.2%;
  border:none; outline:none; background:transparent; color:#1d2556; font-size:clamp(20px, 2.6vw, 36px);
  padding:0 18px; font-weight:600;
}
.username-field{ top:37.9%; }
.password-field{ top:50.9%; }
.remember-toggle{
  position:absolute; left:17.2%; top:63.55%; width:6%; height:5.8%;
  border:none; background:transparent; cursor:pointer; border-radius:10px;
}
.remember-toggle.checked::after{
  content:''; position:absolute; inset:13%; border-radius:8px; background:transparent;
}
.sign-in-button{
  position:absolute; left:33%; top:77.8%; width:39%; height:7.8%;
  border:none; background:transparent; cursor:pointer; border-radius:22px;
}
.forgot-link{
  position:absolute; left:33%; top:86.2%; width:39%; height:4%; display:block;
}
.login-error{
  position:absolute; left:10%; right:10%; bottom:3%; padding:12px 14px; text-align:center;
  background:rgba(170,20,20,.92); color:#fff; border-radius:14px; box-shadow:var(--shadow); font-weight:700;
}
.menu-overlay{position:absolute; inset:0}
.menu-hit,.logout-hit{position:absolute; display:block; border-radius:24px}
.logout-hit{right:4%; top:2%; width:28%; height:8%}
.menu-hit.animation{left:8.2%; top:28.4%; width:24.8%; height:17.6%}
.menu-hit.picture{left:37.5%; top:28.4%; width:24.8%; height:17.6%}
.menu-hit.video{left:67%; top:28.4%; width:24.8%; height:17.6%}
.menu-hit.time{left:8.2%; top:48.5%; width:24.8%; height:17.6%}
.menu-hit.speed{left:37.5%; top:48.5%; width:24.8%; height:17.6%}
.menu-hit.plan{left:67%; top:48.5%; width:24.8%; height:17.6%}
.menu-hit.panic{left:8.2%; top:69.2%; width:24.8%; height:17.6%}
.menu-hit.help{left:37.5%; top:69.2%; width:24.8%; height:17.6%}
.menu-hit.screen{left:67%; top:69.2%; width:24.8%; height:17.6%}

.clickable-card{
  transition: transform .16s ease, box-shadow .18s ease, filter .18s ease;
}
.clickable-card:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 30px rgba(255,255,255,.12), 0 18px 35px rgba(0,0,0,.24);
}
.clickable-card.pressed,
.clickable-card:active{
  transform: scale(.96);
  filter: brightness(.96);
}

.detail-body{
  min-height:100vh;
  background:linear-gradient(180deg,#06113a 0%, #0d1b61 100%);
}
.detail-shell{
  max-width:900px; margin:0 auto; min-height:100vh; padding:18px 16px 28px;
}
.detail-topbar{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px;
  background:rgba(15,23,73,.78); backdrop-filter: blur(14px); border:1px solid var(--line);
  border-radius:20px; padding:14px 16px; box-shadow:var(--shadow);
}
.back-link,.logout-link{
  color:#fff; text-decoration:none; background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14); padding:11px 14px; border-radius:14px; font-weight:700;
}
.back-link{cursor:pointer}
.detail-title-wrap{flex:1; text-align:center}
.detail-title{font-size:clamp(22px,4vw,34px); font-weight:800}
.detail-subtitle{opacity:.86; margin-top:4px}
.detail-content{padding-top:18px}
.card{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:24px;
  padding:22px; box-shadow:var(--shadow);
}
.card + .card{margin-top:18px}
.card-danger{background:rgba(120,16,16,.36)}
h2{margin:0 0 12px}
p{line-height:1.5}
.text-area,.text-input,.file-input{
  width:100%; padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.95); color:#1c2557; font-size:16px; margin-top:8px;
}
.stack-form label{display:block; margin:10px 0}
.button-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:16px}
.primary-btn,.secondary-btn,.danger-btn{
  border:none; border-radius:18px; padding:15px 18px; font-size:16px; font-weight:800; cursor:pointer;
}
.primary-btn{background:#fff; color:#1c2557}
.secondary-btn{background:#d7defc; color:#1c2557}
.danger-btn{background:#ff4c4c; color:#fff; width:100%; padding:18px 20px}
.status-box,.preview-box,.value-pill{
  margin-top:16px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.09); border:1px solid var(--line);
}
.generated-preview{display:grid; gap:12px}
.generated-title{font-weight:800}
.generated-prompt{color:#fff}
.generated-note{opacity:.85}
input[type=range]{width:100%; margin-top:14px}
code{background:rgba(255,255,255,.1); padding:2px 6px; border-radius:6px}

@media (max-width: 680px){
  .detail-shell{padding:12px 12px 24px}
  .detail-topbar{padding:12px}
  .button-row{flex-direction:column}
  .back-link,.logout-link{padding:10px 12px}
}