:root{
      --bg:#f6f7fb;
      --card:#ffffff;
      --accent:#1f6feb;
      --muted:#6b7280;
      --shadow:0 6px 18px rgba(22,24,35,.06);
      --radius:10px;
      --gap:16px;
      --maxw:1000px;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
      color:#111827;
    }

    html,body{
      height:100%;
      margin:0;
      background:linear-gradient(180deg,var(--bg),#eef2f7);
      background-attachment: scroll;
      background-repeat: no-repeat;
      background-size: cover;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    .container{
      max-width:var(--maxw);
      margin:28px auto;
      padding:20px;
    }

    /* Banner */
    .banner{
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      display:flex;
      gap:var(--gap);
      padding:18px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    
    .box{
      top:24px;
      gap:18px;
      background:var(--card);
      padding:16px;
      border-radius:10px;
      box-shadow:var(--shadow);
      align-items:center;
    }

    .logo{
      display:flex;
      gap:12px;
      align-items:center;
      min-width:160px;
    }
    .logo .mark{
      width:75px;
      height:75px;
      border-radius:10px;
      background:linear-gradient(135deg,var(--accent),#8b5cf6);
      display:flex;
      align-items:center;
      justify-content:center;
      color:white;
      font-weight:700;
      box-shadow:0 6px 16px rgba(31,111,235,.16);
    }
    .logo .title{
      font-size:18px;
      font-weight:600;
      letter-spacing:0.2px;
    }
    .categories{
      display:flex;
      gap:10px;
      flex:1;
      justify-content:center;
      flex-wrap:wrap;
      min-width:260px;
    }

    .category{
      background:transparent;
      border:1px solid rgba(15,23,42,.06);
      border-radius:10px;
      padding:10px 14px;
      text-decoration:none;
      color:var(--accent);
      font-weight:600;
      display:inline-flex;
      gap:10px;
      align-items:center;
      transition:transform .12s ease, box-shadow .12s ease;
    }
    .category:hover{
      transform:translateY(-4px);
      box-shadow:0 8px 24px rgba(15,23,42,.06);
    }

    .action{
      min-width:160px;
      text-align:right;
    }
    .action a{
      color:var(--accent);
      text-decoration:none;
      font-weight:600;
    }

    /* Feed */
    .feed{
      margin-top:20px;
      display:grid;
      gap:14px;
    }

    .event{
      display:grid;
      grid-template-columns:110px 1fr;
      gap:18px;
      background:var(--card);
      padding:16px;
      border-radius:10px;
      box-shadow:var(--shadow);
      align-items:center;
    }

    .event .date{
      text-align:center;
      border-right:1px dashed rgba(17,24,39,.04);
      padding-right:12px;
    }
    .date .day{
      font-size:22px;
      font-weight:700;
      color:var(--accent);
    }
    .date .month{
      font-size:13px;
      color:var(--muted);
      margin-top:6px;
    }

    .event .body{
      padding-left:6px;
    }
    .event .title{
      font-weight:700;
      font-size:16px;
      margin:0 0 6px 0;
    }
    .event .meta{
      color:var(--muted);
      font-size:13px;
      margin-bottom:8px;
    }
    .event .desc{
      margin:0;
      color:#111827;
      line-height:1.45;
    }

    /* Responsive */
    @media (max-width:720px){
      .event{ grid-template-columns:1fr; }
      .event .date{ border-right:none; text-align:left; padding-right:0; display:flex; gap:10px; align-items:center; }
      .date .month{ margin-top:0; }
      .banner{ padding:12px; gap:10px; }
      .action{ text-align:left; min-width:0; }
    }

    /* small helper for placeholder links */
    .placeholder{
      color:#374151;
      font-size:13px;
      margin-left:6px;
    }

	.myheader{
	  font-size:22px;
      font-weight:700;
      color:var(--accent);
	}
	
	.subheader{
      margin-bottom:20px;
	}
	
	.input_block_r{
      margin-right:20px;
      float:left;	
	}
	
	.input_block_l{
	  margin-right:20px;
      float:block;
	}
	
	.info{
      gap:18px;
      background:var(--card);
      padding:16px;
      border-radius:10px;
      box-shadow:var(--shadow);
      align-items:center;
    }