*
{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body
{
   font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
   background: linear-gradient(#cccccc, #ffffff);;
   color: #000;
   min-height: 100vh;
   display: flex;
   justify-content: center;
   padding: 2rem 1rem;
}

.container
{
   width: 100%;
   max-width: 600px;
   background: #c0c0c0;
   border-radius: 0;
   box-shadow:
      inset -1px -1px 0 #000,
      inset 1px 1px 0 #fff,
      inset -2px -2px 0 #808080,
      inset 2px 2px 0 #dfdfdf,
      2px 2px 0 rgba(0, 0, 0, 0.4);
   padding: 0;
}

h1
{
   text-align: left;
   margin: 0;
   padding: 0.35rem 0.6rem;
   font-size: 0.95rem;
   font-weight: bold;
   color: #fff;
   background: linear-gradient(to bottom, #5a9bd4 0%, #2c689c 48%, #1f5689 52%, #3a7fb8 100%);
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
   border-bottom: 1px solid #000;
}

h2
{
   font-size: 0.95rem;
   font-weight: bold;
   margin-bottom: 0.6rem;
}

/* Tabs. */
.tabs
{
   display: flex;
   gap: 2px;
   margin-bottom: 0.6rem;
   padding: 0.6rem 0.6rem 0;
}

.tab-btn
{
   flex: 1;
   padding: 0.4rem;
   border: 1px solid #000;
   background: linear-gradient(to bottom, #cfcfcf, #a0a0a0);
   color: #000;
   border-radius: 0;
   cursor: pointer;
   font-size: 0.8rem;
   font-family: inherit;
   box-shadow:
      inset -1px -1px 0 #808080,
      inset 1px 1px 0 #fff;
   transition: none;
}

.tab-btn.active
{
   background: linear-gradient(to bottom, #7db8e8 0%, #3a7fb8 50%, #2c689c 51%, #5a9bd4 100%);
   color: #fff;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

/* Forms. */
form
{
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
   margin-bottom: 0.6rem;
   padding: 0 0.6rem;
}

input[type="text"],
input[type="password"]
{
   padding: 0.3rem;
   border: 1px solid #000;
   border-radius: 0;
   font-size: 0.8rem;
   font-family: inherit;
   outline: none;
   background: #fff;
   box-shadow:
      inset 1px 1px 0 #808080,
      inset -1px -1px 0 #fff;
   transition: none;
}

input:focus
{
   border-color: #000;
}

button[type="submit"]
{
   padding: 0.35rem;
   background: linear-gradient(to bottom, #7db8e8 0%, #3a7fb8 50%, #2c689c 51%, #5a9bd4 100%);
   color: #fff;
   border: 1px solid #000;
   border-radius: 0;
   font-size: 0.8rem;
   font-family: inherit;
   cursor: pointer;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
   box-shadow:
      inset -1px -1px 0 #1f5689,
      inset 1px 1px 0 #b0d8f0;
   transition: none;
}

button[type="submit"]:hover
{
   background: linear-gradient(to bottom, #8fc8f0 0%, #4a90d9 50%, #357ab8 51%, #6aabe0 100%);
}

button[type="submit"]:active
{
   box-shadow:
      inset 1px 1px 0 #1f5689,
      inset -1px -1px 0 #b0d8f0;
}

/* Header. */
.header
{
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.6rem;
   padding: 0 0.6rem;
}

.logout-btn
{
   padding: 0.3rem 0.8rem;
   background: linear-gradient(to bottom, #e88080 0%, #c0392b 50%, #a5281b 51%, #d05040 100%);
   color: #fff;
   border: 1px solid #000;
   border-radius: 0;
   cursor: pointer;
   font-size: 0.8rem;
   font-family: inherit;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
   box-shadow:
      inset -1px -1px 0 #802018,
      inset 1px 1px 0 #f0b0a0;
}

.logout-btn:hover
{
   background: linear-gradient(to bottom, #f09090 0%, #d04030 50%, #b53020 51%, #e06050 100%);
}

.logout-btn:active
{
   box-shadow:
      inset 1px 1px 0 #802018,
      inset -1px -1px 0 #f0b0a0;
}

#task-list
{
   list-style: none;
   margin-top: 0.6rem;
   padding: 0 0.6rem;
}

.task-item
{
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.4rem;
   border: 1px solid #000;
   background: #fff;
   box-shadow:
      inset 1px 1px 0 #808080,
      inset -1px -1px 0 #fff;
   margin-bottom: 3px;
   transition: none;
}

.task-item:hover
{
   background: #e8eef5;
}

.task-item input[type="checkbox"]
{
   width: 16px;
   height: 16px;
   cursor: pointer;
}

.task-info
{
   flex: 1;
}

.task-title
{
   font-weight: bold;
   font-size: 0.8rem;
}

.task-title.done
{
   text-decoration: line-through;
   color: #808080;
}

.task-desc
{
   font-size: 0.75rem;
   color: #606060;
   margin-top: 0.1rem;
}

.delete-btn
{
   background: #c0c0c0;
   border: 1px solid #000;
   color: #000;
   cursor: pointer;
   font-size: 0.9rem;
   font-family: inherit;
   padding: 0.1rem 0.4rem;
   box-shadow:
      inset -1px -1px 0 #808080,
      inset 1px 1px 0 #fff;
}

.delete-btn:hover
{
   color: #c0392b;
}

.delete-btn:active
{
   box-shadow:
      inset 1px 1px 0 #808080,
      inset -1px -1px 0 #fff;
}

/* Messages. */
.error
{
   color: #c0392b;
   font-size: 0.8rem;
   text-align: center;
   padding: 0 0.6rem;
}

.empty-msg
{
   text-align: center;
   color: #606060;
   padding: 1.5rem 0;
   font-size: 0.8rem;
}