:root{
  /* Ålcom-inspired palette (logo + site) */
  --bg: #f2f6fb;          /* very light blue-gray page background */
  --card: #ffffff;        /* card background */
  --muted: #556777;       /* muted text */
  --brand-gray: #4A4A4A;  /* logotype dark gray */
  --brand-blue: #2F6FD6;  /* primary action blue */
  --brand-green: #00A651; /* post accent green */
  --brand-orange: #F68B1F;/* small highlight / accent orange */
  --max-width:720px;
  --radius:10px;
  --gap:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
  color:var(--brand-gray);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.container{
  width:100%;
  max-width:var(--max-width);
}

h1{
  margin:0 0 8px 0;
  font-size:1.6rem;
  color:var(--brand-gray);
  letter-spacing:0.2px;
}
h2{
  font-size:1rem;
  color:var(--muted);
  margin:0;
}

/* header for the list, containing controls */
.list-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:20px 0 8px;
}

/* controls (filter + search) */
.controls{
  display:flex;
  gap:8px;
  align-items:center;
}
.controls select,
.controls input[type="search"]{
  border:1px solid #e6eef7;
  border-radius:8px;
  padding:8px 10px;
  font-size:0.9rem;
  background:transparent;
  color:var(--brand-gray);
  min-width:120px;
}
.controls input[type="search"]{
  min-width:200px;
}

/* visually-hidden for accessibility labels */
.visually-hidden{
  position:absolute!important;
  height:1px;width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}

/* Card / form styles */
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 1px 8px rgba(6,30,71,0.06);
  margin-bottom:12px;
  border: 1px solid rgba(6,30,71,0.04);
}

.row{display:flex;flex-direction:column;margin-bottom:12px}
.row label{
  font-size:0.85rem;
  color:var(--muted);
  margin-bottom:6px;
}
input[type="text"], textarea, select{
  border:1px solid #e6eef7;
  border-radius:8px;
  padding:10px 12px;
  font-size:0.95rem;
  background:transparent;
  resize:vertical;
  color: var(--brand-gray);
}
select{height:40px}
textarea{min-height:72px}
.actions{display:flex;justify-content:flex-end}
button{
  background:var(--brand-blue);
  color:white;
  border:none;
  padding:8px 14px;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  box-shadow: 0 2px 6px rgba(47,111,214,0.12);
}
button:disabled{opacity:0.6;cursor:default}

/* subtle accent bar for the post list heading */
section > h2{
  display:flex;
  align-items:center;
  gap:10px;
}
section > h2::before{
  content:"";
  width:10px;
  height:10px;
  background:var(--brand-orange);
  border-radius:2px;
  box-shadow: 0 0 0 4px rgba(246,139,31,0.06);
}

.posts{list-style:none;padding:0;margin:0}
.post{
  background:var(--card);
  border-radius:10px;
  padding:12px;
  margin-bottom:10px;
  box-shadow:0 1px 3px rgba(6,30,71,0.04);
  display:flex;
  flex-direction:column;
  gap:6px;
  border-left:4px solid rgba(0,0,0,0.06); /* default subtle accent */
}

/* positive / negative accents */
.post.positive{ border-left-color: rgba(0,166,81,0.7); }
.post.negative{ border-left-color: rgba(246,139,31,0.75); }

.meta{display:flex;justify-content:space-between;align-items:center;font-size:0.82rem;color:var(--muted)}
.meta-left{display:flex;align-items:center;gap:8px}
.name{font-weight:700;color:var(--brand-gray)}
.time{font-size:0.8rem;color:var(--muted)}
.message{white-space:pre-wrap;font-size:0.95rem;color:var(--brand-gray)}

/* type badge */
.type-badge{
  display:inline-block;
  font-size:0.75rem;
  padding:4px 8px;
  border-radius:999px;
  color:white;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.6px;
}
.type-badge.positive{ background:var(--brand-green); box-shadow: 0 1px 0 rgba(0,0,0,0.05); }
.type-badge.negative{ background:var(--brand-orange); box-shadow: 0 1px 0 rgba(0,0,0,0.05); }

.empty{color:var(--muted);padding:12px}

@media (max-width:720px){
  .controls input[type="search"]{min-width:140px}
}
@media (max-width:520px){
  .container{padding:0 8px}
  .list-header{flex-direction:column;align-items:flex-start;gap:8px}
  .post{padding:10px}
  button{padding:8px 12px}
  .controls{width:100%;gap:6px}
  .controls input[type="search"]{width:100%}
}