* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: system-ui
   }

   /* body {
      background: #111;
      color: #eee;
      padding: 20px
    } */

   .container {
       max-width: 400px;
       margin: 0 auto;
       display: grid;
       gap: 16px
   }

   /* 
    .card {
      background: #1c1c1c;
      border-radius: 16px;
      padding: 16px
    } */

   .title {
       font-size: 16px;
       margin-bottom: 10px
   }

   .time {
       font-size: 32px;
       text-align: center;
       margin: 10px 0
   }

   input,
   button {
       width: 100%;
       padding: 10px;
       border-radius: 10px;
       border: none;
       margin: 4px 0;
       background: var(--btn-hover);
       color: var(--text);
   }

   button {
       background: var(--btn-bg);

   }

   .grid {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
       gap: 8px;
   }

   .cal {
       display: grid;
       grid-template-columns: repeat(7, 1fr);
       text-align: center;
       gap: 4px;
       margin-top: 10px;
   }

   .cal-head {
       color: #888;
   }

   .cal-day {
       padding: 4px;
       border-radius: 6px;
   }

   .today {
       background: var(--main);
       color: var(--text);
   }

   .marquee {
       background: var(--bg);
       border-radius: 12px;
       padding: 10px;
       text-align: center;
       margin-bottom: 10px;
   }

   .save-tip {
       font-size: 12px;
       color: #888;
       text-align: center;
   }