/* styles.css */
:root{
  --bg:#0b0b0b;
  --panel:#0f0f0f;
  --accent:#ff8a00;
  --muted:#ffb87a;
  --card:#121212;
  --glass: rgba(255,138,0,0.06);
  --radius:14px;
  --shadow: 0 6px 18px rgba(0,0,0,0.6);
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100%;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(255,138,0,0.04), transparent),
              radial-gradient(900px 400px at 90% 90%, rgba(255,138,0,0.02), transparent),
              var(--bg);
  color:var(--accent);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:28px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

/* container */
.container{
  width:100%;
  max-width:980px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:18px;
  padding:20px;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,138,0,0.06);
}

/* header */
.header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.logo{
  width:56px;
  height:56px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--muted));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0b0b0b;
  font-weight:800;
  font-size:20px;
  box-shadow: 0 6px 18px rgba(255,138,0,0.08), inset 0 -6px 18px rgba(0,0,0,0.2);
}
.h1{
  font-size:20px;
  font-weight:700;
  color:var(--accent);
  letter-spacing:0.6px;
}

/* layout */
.topbar{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:16px;
}
.filter{
  flex:1;
}
input[type="search"], input[type="date"]{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,138,0,0.12);
  background:linear-gradient(180deg, rgba(255,138,0,0.02), rgba(255,138,0,0.01));
  color:var(--accent);
  outline:none;
  font-size:14px;
}
.controls{
  display:flex;
  gap:8px;
  align-items:center;
}

/* grid */
.grid-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
@media (min-width:900px){
  .grid-wrap{ grid-template-columns: 1fr 360px; }
}

/* list */
.list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:8px;
  background:linear-gradient(180deg, rgba(255,138,0,0.01), transparent);
  border-radius:12px;
  min-height:220px;
}
.card{
  background: linear-gradient(180deg, rgba(255,138,0,0.03), rgba(255,138,0,0.01));
  border:1px solid rgba(255,138,0,0.08);
  color:var(--accent);
  padding:10px 14px;
  border-radius:12px;
  min-width:88px;
  cursor:pointer;
  font-weight:700;
  box-shadow: 0 4px 10px rgba(0,0,0,0.6);
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:focus, .card:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow: 0 12px 30px rgba(255,138,0,0.08);
  outline:none;
}

/* panel */
.panel{
  background: linear-gradient(180deg, rgba(255,138,0,0.02), rgba(255,138,0,0.01));
  border-radius:12px;
  padding:14px;
  border:1px solid rgba(255,138,0,0.06);
  min-height:220px;
}
.panel .title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
  color:var(--accent);
  font-weight:800;
  font-size:16px;
}
.panel .body{
  white-space:pre-wrap;
  color: #ffd9b3;
  line-height:1.6;
  font-size:14px;
  margin-bottom:12px;
}
.panel .date{
  color: #ffb87a;
  font-size:13px;
  font-weight:700;
}

/* close button */
.btn-close{
  background:transparent;
  border:1px solid rgba(255,138,0,0.08);
  color:var(--accent);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:700;
}

/* empty */
.empty{
  color: #7a3b00;
  padding:12px;
}

/* cute accents */
.footer-note{
  margin-top:12px;
  color:#ffb87a;
  font-size:13px;
  text-align:right;
}

/* accessibility focus */
:focus{ outline: 3px solid rgba(255,138,0,0.12); outline-offset:2px; }