* {
    font-family: 'Times New Roman';
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
}

:root{
  --bg: #0b0c10;
  --panel: #11131a;
  --muted: #8b93a7;
  --text: #e7ecf3;
  --accent: #4fb3ff;
  --accent-2: #8fff8f;
  --danger: #ff6b6b;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --bg--color: #081b29;
  --second-bg--color: #112e42;
  --text--color: #ededed;
  --main--color: #00abf0;
}
:root.light{
  --bg: #f6f7fb;
  --panel: #ffffff;
  --muted: #5b6478;
  --text: #1f8de7;
  --accent: #2563eb;
  --accent-2: #059669;
  --danger: #dc2626;
  --text--color: #1bc245;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.4 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
}

.app-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 22px; position:sticky; top:0; z-index:10;
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--text) 8%, transparent);
}
.app-header h1{margin:0; letter-spacing:.3px}
.controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.controls input, .controls select, .controls button{
  height:38px; border-radius: 10px; border:1px solid transparent;
  padding: 0 12px; background: var(--panel); color:var(--text);
  box-shadow: var(--shadow);
}
.controls input[type="search"]{min-width:240px}
.controls .primary{background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-weight:600;}
.controls .danger{background: var(--danger); color:#fff}
.controls .ghost{background: transparent; border:1px solid color-mix(in oklab, var(--text) 15%, transparent)}

.board{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;
  padding: 18px 22px 80px;
}
@media (max-width:1100px){ .board{grid-template-columns: repeat(2, 1fr);} }
@media (max-width:640px){ .board{grid-template-columns: 1fr;} }

.column{
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; min-height:60vh; overflow:hidden;
}
.column header{
  font-weight:700; letter-spacing:.4px; padding:14px 16px;
  border-bottom: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
}
.dropzone{flex:1; padding:12px; display:grid; gap:12px; align-content:start}

.card{
  background: color-mix(in oklab, var(--panel) 90%, var(--bg));
  border:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  border-radius: 14px; padding:12px; display:grid; gap:8px;
  cursor:grab; user-select:none; box-shadow: var(--shadow);
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.card:active{cursor:grabbing}
.card.dragging{opacity:.6; transform: rotate(1deg) scale(.98)}
.card .title{font-weight:700}
.card .meta{display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:.85rem}
.badge{
  border-radius:999px; padding:2px 8px; font-size:.78rem; border:1px solid transparent;
}
.badge.priority-low{background:#0d5f3d22; border-color:#16a34a55}
.badge.priority-normal{background:#0b4c9d22; border-color:#3b82f655}
.badge.priority-high{background:#7a142522; border-color:#ef444477}
.badge.assignee{background: color-mix(in oklab, var(--text) 8%, transparent); color: var(--text)}

.card .actions{display:flex; gap:6px; justify-content:flex-end}
button.icon{
  background: transparent; border:1px solid color-mix(in oklab, var(--text) 18%, transparent);
  border-radius:10px; padding:6px 8px; cursor:pointer; color:var(--text)
}
button.icon:hover{background: color-mix(in oklab, var(--text) 8%, transparent)}

.drop-hint{
  border:2px dashed color-mix(in oklab, var(--accent) 70%, transparent);
  border-radius:12px; height:52px; opacity:.7;
}

dialog{
  width:min(720px, 92vw); border:none; border-radius: 18px;
  padding: 0; overflow:hidden; background: var(--panel); color: var(--text);
  box-shadow: var(--shadow);
}
dialog::backdrop{background: rgba(0,0,0,.45); backdrop-filter: blur(2px)}
#taskForm{display:grid; gap:12px; padding:18px}
#taskForm h3{margin:.2rem 0 0}
#taskForm label{display:grid; gap:6px; font-weight:600}
#taskForm input, #taskForm textarea, #taskForm select{
  background: color-mix(in oklab, var(--panel) 90%, var(--bg));
  border:1px solid color-mix(in oklab, var(--text) 14%, transparent);
  color: var(--text); padding:10px 12px; border-radius: 10px;
}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
menu{display:flex; gap:10px; justify-content:flex-end; margin:0; padding:0}




/* .app-footer{
  position:fixed; bottom:0; inset-inline:0; padding:10px 16px;
  border-top:1px solid color-mix(in oklab, var(--text) 10%, transparent);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter: blur(6px);
} */
kbd{
  background: color-mix(in oklab, var(--text) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--text) 25%, transparent);
  border-bottom-width:2px; border-radius:6px; padding:0 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.85em;
}

/* footer design section */

.footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 2rem 9%;
    background: var(--second-bg--color);
}

.footer-text,
.footer-iconTop {
    position: relative;
}

.footer-text p{
    font-size: 1.6rem;
}

.footer-iconTop a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .8rem;
    background: var(--main--color);
    border: .2rem solid var(--main--color);
    border-radius: .6rem;
    z-index: 1;
    overflow: hidden;
}

.footer-iconTop a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--second-bg--color);
    z-index: -1;
    transition: .5s;
}

.footer-iconTop a:hover::before{
    width: 100%;
}


.footer-iconTop a i{
    font-size: 2.4rem;
    color: var(--bg--color);
    transition: .5s;
}

.footer-iconTop a:hover i {
    color: var(--main--color);
}

@media (max-width: 991px){
    .footer{
        padding: 2rem 4%;
    }
  }

@media (max-width: 462px){

    .footer{
        flex-direction: column-reverse;
    }
      .footer p{
        margin-top: 2rem;
        text-align: center;
    }
  }