body { border-color:#280f3d; font-family: system-ui, sans-serif;
  background: #170525;color: #dcdcdc;margin: 0;padding: 1em;line-height: 1.6;}
body.light {background: #f2f2f2;color: #150824;border-color: #280f3d; }
header {text-align: center;margin-bottom: 1em;}
h1 {font-size: 1.4em;margin: 0 1em;color: #ffffff;display: inline-block;}
h2,h3,h4 {color: #fff}
button {  background: #3a294e;color: #eee;border: 1px solid #65457a;
  transition: background 0.3s ease;padding: 0.4em 0.8em;
  margin: 0 0.2em;font-size: 1em;cursor: pointer;border-radius: 5px;}
button:hover {background: #543d6d;}
body.light button {background: #ddd;color: #150824;border-color: #444;}
#calgrid {display: grid;grid-template-columns: repeat(7, 1fr);gap: 1px;border-color: #280f3d;}
#calgrid div {border: 1px solid #5a4a6f;aspect-ratio: 1 / 1;background: #280f3d;
  padding: 0.3em;overflow: hidden;display: flex;flex-direction: column;
  justify-content: start;font-size: 0.9em;}
body.light #calgrid div {background: #eee;color: #150824;border: 1px solid #ccc;}
  @media (max-width: 600px) 
  { #calgrid div {aspect-ratio: 1 / 1.4;font-size: 0.8em;padding: 0.5em;}}
#calgrid div:hover {background: #4e3c53;cursor: pointer;}
#mevent {position: fixed;top: 0; left: 0; right: 0;bottom: 0;
  background: rgba(0, 0, 0, 0.7);display: flex;justify-content: center;align-items: center;}
.hidden { display: none !important; }
.mcontent {  background: #2a2a2a;border: 1px solid #444;padding: 1em;
  border-radius: 10px;max-width: 90%;width: 300px;}
textarea {width: 100%;min-height: 80px;
  margin: 0.5em 0;background: #222;color: #e0e0e0;
  border: 1px solid #555;border-radius: 4px;padding: 0.5em;}
.mactions {text-align: right;}
.mfield {  width: 100%;margin: 0.5em 0;background: #222;color: #e0e0e0;
  border: 1px solid #555;border-radius: 4px;padding: 0.5em;}
  body.light .mcontent {background: #fefefe;color: #150824;}
body.light .mfield,body.light textarea {background: #fff;color: #150824;
  border: 1px solid #aaa;}
.preview {font-size: 0.75em;white-space: nowrap;
  overflow: hidden;text-overflow: ellipsis;  line-height: 1.2;}
  .preview, small, .note {color: #aaa;}
body.light .preview {color: #444;}
.boxed {max-width: 750px;margin: 2em auto;background: #241033;
  border: 3px solid #3a294e;box-shadow: 0 0 12px rgba(0,0,0,0.4);
   border-radius: 12px;padding: 1.5em;box-shadow: 2px 2px 8px rgba(0,0,0,0.3);}
body.light .boxed {border: 3px solid #ccc;background: #868472;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.05);}
#toggle-theme {position: fixed;top: 1em;right: 1em;z-index: 1000;}
a:link {color: #ffffff; }
a:visited {color: rgb(119, 152, 152); }
a:hover {color: rgb(225, 229, 193); }
a:active {color: rgb(255, 255, 255); }
body.light a:link {color: rgb(42, 0, 139); }
body.light a:visited {color: rgb(69, 65, 65); }
body.light a:hover {color: darkred; }
body.light a:active {color: rgb(59, 2, 46);}
#meep {position: fixed;top: 10px;left: 10px;z-index: 9999; }
#meep img {width: 80px;height: auto;border-radius: 45px; }
@media (max-width: 600px) {
#meep {bottom: 20px;right: 10px; }  }
#meep img {width: 60px;}
#nomnom {position: fixed;bottom: 10px;right: 10px;z-index: 9999; }
#nomnom img {width: 80px;height: auto;border-radius: 45px; }
@media (max-width: 600px) {#nomnom {bottom: 20px;right: 10px; }  }
#nomnom img {width: 60px;  }