:root{
    --forest:#EFA63C;
    --forest-dark:#000000;
    --canvas:#FBF3E7;
    --card:#ffffff;
    --ember:#EB7054;
    --ember-dark:#C6573C;
    --sky:#73ADAC;
    --sky-dark:#4C7F7E;
    --ink:#3A342A;
    --muted:#8C8271;
    --line:#E8DFCE;
    --danger:#c14444;
    --sage:#9FB68C;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:'Karla',sans-serif;
    background:var(--canvas);
    color:var(--ink);
  }
  h1,h2,h3{font-family:'Gochi Hand',sans-serif; font-weight:400;}

  header{
    background:var(--forest);
    color:white;
    padding:clamp(1rem, 4vw, 1.6rem) clamp(1rem, 4vw, 1.5rem);
    text-align:center;
  }
  header h1{margin:0; font-size:clamp(1.5rem, 6vw, 2.6rem); line-height:1.15;}
  header p{margin:0.3rem 0 0; color:#cfe3d3; font-size:clamp(0.82rem, 2.5vw, 0.95rem);}

  .tabs{
    display:flex;
    justify-content:center;
    gap:0.5rem;
    margin-top:1.1rem;
    flex-wrap:wrap;
  }
  .tabs button{
    font-family:'Gochi Hand',sans-serif;
    font-size:1.15rem;
    padding:0.55rem 1.4rem;
    border-radius:999px;
    border:1.5px solid rgba(255,255,255,0.55);
    background:transparent;
    color:white;
    cursor:pointer;
    transition:background 0.15s ease;
  }
  .tabs button:hover{background:rgba(255,255,255,0.12);}
  .tabs button.active{background:var(--ember); border-color:var(--ember);}
  .tabs button.admin-btn.active{background:var(--sky); border-color:var(--sky);}

  main{max-width:1180px; margin:0 auto; padding:1.75rem 1.25rem 3rem;}
  .page{display:none;}
  .page.active{display:block;}
  .page.two-col.active{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    align-items:start;
  }
  #page-deltaker.two-col.active{align-items:stretch;}
  #page-deltaker.two-col.active section.card{display:flex; flex-direction:column;}
  #page-deltaker.two-col.active section.card form{display:flex; flex-direction:column; flex:1;}
  #page-deltaker.two-col.active section.card.form-card form button{margin-top:auto;}
  .page.two-col.active > section.card{margin-bottom:0;}
  .page.two-col .flash{grid-column:1 / -1;}
  .page.two-col .span-2{grid-column:1 / -1;}
  @media (max-width:760px){
    .page.two-col.active{grid-template-columns:1fr;}
    main{padding:1.25rem 1rem 2.5rem;}
    .tabs button{font-size:1rem; padding:0.5rem 1.1rem;}
  }

  section.card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;
    padding:1.25rem 1.5rem;
    margin-bottom:1.5rem;
  }
  section.card.form-card{
    padding:1.75rem 1.75rem 2.1rem;
    min-height:420px;
  }
  section.card h2{
    margin:0 0 0.85rem;
    color:var(--forest-dark);
    font-size:1.25rem;
    display:inline-block;
    border-bottom:3px solid var(--ember);
    padding-bottom:0.2rem;
  }
  .leder-side section.card h2{border-bottom-color:var(--sky);}
  .admin-side section.card h2{border-bottom-color:var(--sky-dark);}

  table{width:100%; border-collapse:collapse; margin-top:0.5rem;}
  th,td{text-align:left; padding:0.5rem 0.55rem; border-bottom:1px solid var(--line); font-size:0.92rem;}
  th{background:#eef4ee; color:var(--forest-dark); font-weight:700;}
  .leder-side th{background:#eaf2f7; color:#1e4a63;}
  .admin-side th{background:#eaf2f7; color:#1e4a63;}

  .day-block{margin-bottom:0.9rem;}
  .day-block h3{margin:0 0 0.3rem; color:var(--forest); font-size:1.02rem;}
  .dagsplan-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 2rem;
  }
  @media (max-width:600px){
    .dagsplan-cols{grid-template-columns:1fr;}
  }
  ul.day-list{list-style:none; padding:0; margin:0;}
  ul.day-list li{padding:0.25rem 0; border-bottom:1px dashed var(--line); font-size:0.92rem;}

  ol.rules{padding-left:1.2rem; margin:0;}
  ol.rules li{margin-bottom:0.4rem;}

  form label{display:block; margin:0.7rem 0 0.25rem; font-weight:700; font-size:0.9rem;}
  form input, form select{
    width:100%; padding:0.55rem; border:1px solid var(--line);
    border-radius:6px; font-size:1rem; font-family:'Karla',sans-serif;
    background:#fbfbf8;
  }
  form button{
    margin-top:1rem;
    background:var(--ember);
    color:white; border:none;
    padding:0.6rem 1.3rem;
    border-radius:6px; font-size:1rem;
    font-family:'Gochi Hand',sans-serif;
   
    cursor:pointer;
  }
  form button:hover{background:var(--ember-dark);}

  .flash{
    background:#e7f5ec; border:1px solid var(--forest);
    color:var(--forest-dark); padding:0.7rem 1rem;
    border-radius:8px; margin-bottom:1.25rem; font-size:0.92rem;
    display:none;
  }
  .flash.show{display:block;}

  .badge{
    display:inline-block; background:var(--sky); color:white;
    border-radius:999px; padding:0.1rem 0.6rem; font-size:0.78rem;
    font-weight:700; margin-left:0.4rem; vertical-align:middle;
  }

  .empty{color:var(--muted); font-style:italic; font-size:0.9rem;}

  /* --- Turneringsbrakett --- */
  .bracket{
    display:flex;
    gap:2.75rem;
    overflow-x:auto;
    padding:0.5rem 0.25rem 1.25rem;
  }
  .bracket-round{
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    min-width:200px;
  }
  .bracket-round-title{
    font-size:0.85rem;
    color:var(--forest-dark);
    text-align:center;
    margin-bottom:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
  }
  .bracket-match{
    background:#fbfbf8;
    border:1px solid var(--line);
    border-radius:8px;
    margin:0.6rem 0;
    position:relative;
  }
  .bracket-round:not(:last-child) .bracket-match::after{
    content:'';
    position:absolute;
    top:50%;
    right:-1.4rem;
    width:1.4rem;
    height:1px;
    background:var(--line);
  }
  .bracket-team{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0.45rem 0.7rem;
    font-size:0.9rem;
  }
  .bracket-team:first-child{border-bottom:1px dashed var(--line);}
  .bracket-meta{
    font-size:0.72rem;
    color:var(--muted);
    text-align:center;
    padding:0.3rem 0.5rem 0.4rem;
    border-top:1px solid var(--line);
  }

  /* --- Admin-panel --- */
  .admin-side table input, .admin-side table select{
    width:100%; padding:0.35rem 0.4rem; border:1px solid var(--line);
    border-radius:5px; font-size:0.88rem; font-family:'Karla',sans-serif;
    background:#fbfbf8;
  }
  .admin-side td.action-cell{width:38px; text-align:center;}
  .row-delete{
    background:none; border:none; color:var(--danger);
    cursor:pointer; font-size:1.1rem; line-height:1; padding:0.2rem;
  }
  .row-delete:hover{color:#7d1f1f;}
  .add-row-btn{
    margin-top:0.7rem;
    background:transparent;
    border:1.5px dashed var(--sky);
    color:var(--sky-dark);
    padding:0.4rem 0.9rem;
    border-radius:6px;
    font-family:'Gochi Hand',sans-serif;
    font-size:0.88rem;
    cursor:pointer;
  }
  .add-row-btn:hover{background:#eaf2f7;}
  .add-row-btn.small{padding:0.3rem 0.7rem; font-size:0.8rem; margin-top:0.4rem;}

  .admin-day{margin-bottom:1.2rem; padding-bottom:1rem; border-bottom:1px solid var(--line);}
  .admin-day:last-child{border-bottom:none; padding-bottom:0;}
  .admin-day h3{margin:0 0 0.5rem; color:var(--forest);}
  .point-row{display:flex; gap:0.4rem; margin-bottom:0.4rem; align-items:center;}
  .point-row input{flex:1;}

  .rule-row{display:flex; gap:0.4rem; margin-bottom:0.4rem; align-items:center;}
  .rule-row input{flex:1;}
  .rule-row span.num{width:1.4rem; color:var(--muted); font-size:0.85rem; flex-shrink:0;}

  .admin-round{margin-bottom:1.3rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line);}
  .admin-round:last-child{border-bottom:none;}
  .admin-round-header{display:flex; align-items:center; gap:0.6rem; margin-bottom:0.5rem;}
  .admin-round-header input{
    font-family:'Gochi Hand',sans-serif; font-size:1rem; max-width:220px;
    border:1px solid var(--line); border-radius:6px; padding:0.3rem 0.5rem; background:#fbfbf8;
  }
  .admin-round-header .row-delete{font-size:1.15rem;}
  .round-actions{display:flex; gap:0.5rem; margin-top:0.9rem; flex-wrap:wrap;}

  .save-status{
    font-size:0.82rem; color:var(--muted); margin-top:0.6rem; min-height:1.1em;
  }
  .save-status.ok{color:var(--forest);}

  .admin-intro{
    background:#eaf2f7; border:1px solid #cfe0ea; color:#1e4a63;
    border-radius:8px; padding:0.8rem 1rem; margin-bottom:1.5rem; font-size:0.9rem;
  }

  #grupper-body tr{cursor:pointer;}
  #grupper-body tr:hover{background:#eaf2f7;}

  .modal-overlay{
    display:none;
    position:fixed; inset:0;
    background:rgba(21,52,32,0.5);
    align-items:center; justify-content:center;
    z-index:100;
    padding:1rem;
  }
  .modal-overlay.show{display:flex;}
  .modal-box{
    background:var(--card);
    border-radius:12px;
    padding:1.5rem 1.6rem;
    max-width:420px;
    width:100%;
    max-height:80vh;
    overflow-y:auto;
  }
  .modal-box-header{
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:0.9rem;
  }
  .modal-box-header h3{margin:0; color:var(--forest-dark); font-size:1.2rem;}
  .modal-close{
    background:none; border:none; font-size:1.3rem; line-height:1;
    color:var(--muted); cursor:pointer; padding:0.2rem 0.4rem;
  }
  .modal-close:hover{color:var(--ink);}
  .modal-participant-list{list-style:none; margin:0; padding:0;}
  .modal-participant-list li{
    padding:0.5rem 0; border-bottom:1px solid var(--line); font-size:0.92rem;
  }
  .modal-participant-list li:last-child{border-bottom:none;}

  .soverom-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:1rem;
  }
  .soverom-card{
    background:#fbfbf8;
    border:1px solid var(--line);
    border-radius:8px;
    padding:0.9rem 1rem;
  }
  .soverom-card h3{
    margin:0 0 0.2rem; color:var(--forest-dark); font-size:1.05rem;
  }
  .soverom-capacity{
    font-size:0.82rem; color:var(--muted); margin-bottom:0.5rem;
  }
  .soverom-card ul{list-style:none; margin:0; padding:0;}
  .soverom-card ul li{
    padding:0.25rem 0; border-bottom:1px dashed var(--line); font-size:0.9rem;
  }
  .soverom-card ul li:last-child{border-bottom:none;}

  .admin-soverom-block{
    margin-bottom:1.3rem; padding-bottom:1.1rem; border-bottom:1px solid var(--line);
  }
  .admin-soverom-block:last-child{border-bottom:none;}
  .admin-soverom-header{
    display:flex; gap:0.6rem; align-items:center; margin-bottom:0.4rem; flex-wrap:wrap;
  }
  .admin-soverom-header input[type="text"]{flex:1 1 160px;}
  .admin-soverom-header input[type="number"]{width:90px; flex:0 0 90px;}
  .soverom-fill-status{
    font-size:0.82rem; color:var(--muted); margin-bottom:0.6rem;
  }
  .soverom-fill-status.full{color:var(--ember-dark); font-weight:700;}
  .soverom-checklist{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
    gap:0.35rem 0.9rem;
  }
  .soverom-checklist label{
    display:flex; align-items:center; gap:0.4rem;
    font-size:0.88rem; font-weight:400;
    margin:0; cursor:pointer;
  }
  .soverom-checklist input[type="checkbox"]{
    width:auto; margin:0; cursor:pointer;
  }
  .soverom-checklist label.disabled-check{
    color:var(--muted); cursor:not-allowed;
  }

  .import-box{
    background:#f4f7f1; border:1px dashed var(--line);
    border-radius:8px; padding:0.9rem 1rem; margin-bottom:1rem;
    display:flex; align-items:center; gap:0.9rem; flex-wrap:wrap;
  }
  .import-hint{
    font-size:0.85rem; color:var(--muted); margin:0; flex:1 1 260px;
  }
  .import-label{margin-top:0; cursor:pointer; white-space:nowrap;}
  .import-status{font-size:0.85rem; color:var(--forest-dark); font-weight:700;}

  .login-gate{
    max-width:360px;
    margin:2.5rem auto;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;
    padding:2rem 1.75rem;
    text-align:center;
  }
  .login-gate .lock-icon{font-size:2rem; margin-bottom:0.5rem;}
  .login-gate h2{margin:0 0 0.4rem; color:var(--forest-dark); font-size:1.3rem;}
  .login-gate p{color:var(--muted); font-size:0.9rem; margin:0 0 1.2rem;}
  .login-gate input{
    width:100%; padding:0.6rem; border:1px solid var(--line);
    border-radius:6px; font-size:1rem; text-align:center;
    font-family:'Karla',sans-serif; background:#fbfbf8;
  }
  .login-gate button{
    margin-top:0.9rem; width:100%;
    background:var(--sky); color:white; border:none;
    padding:0.65rem; border-radius:6px; font-size:1rem;
    font-family:'Gochi Hand',sans-serif; cursor:pointer;
  }
  .login-gate button:hover{background:var(--sky-dark);}
  .login-gate .login-error{
    color:var(--danger); font-size:0.85rem; margin-top:0.7rem; min-height:1.1em;
  }
  .logout-row{
    display:flex; justify-content:flex-end; margin-bottom:1rem;
  }
  .logout-btn{
    background:transparent; border:1px solid var(--line);
    color:var(--muted); padding:0.35rem 0.8rem; border-radius:6px;
    font-size:0.82rem; cursor:pointer; font-family:'Karla',sans-serif;
  }
  .logout-btn:hover{background:#f1f1eb;}

  .card-header-row{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:0.6rem; margin-bottom:0.85rem;
  }
  .card-header-row h2{margin-bottom:0;}
  .visibility-toggle{
    display:flex; align-items:center; gap:0.5rem;
    font-size:0.85rem; color:var(--muted); user-select:none;
  }
  .switch{
    position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0;
  }
  .switch input{opacity:0; width:0; height:0;}
  .switch-track{
    position:absolute; cursor:pointer; inset:0;
    background:#c7cfc0; border-radius:999px; transition:background 0.15s ease;
  }
  .switch-track::before{
    content:''; position:absolute; height:16px; width:16px; left:3px; bottom:3px;
    background:white; border-radius:50%; transition:transform 0.15s ease;
  }
  .switch input:checked + .switch-track{background:var(--sky);}
  .switch input:checked + .switch-track::before{transform:translateX(18px);}
  .hidden-note{
    font-size:0.78rem; color:var(--muted); font-style:italic;
  }