:root{
  --page-bg:#f3f2f0;
  --panel:#ffffff;
  --text:#111111;
  --muted:#727272;
  --line:#dbd7d2;
  --accent:#e77700;
  --accent-dark:#cf6900;
  --danger:#c14a33;
  --success:#236e43;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Arial, Helvetica, sans-serif;
  background:var(--page-bg);
  color:var(--text);
  min-width:320px;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea{font:inherit}
button{cursor:pointer}

.shell{
  width:min(1240px, calc(100% - 56px));
  margin:0 auto;
  padding:36px 0 54px;
}

.page-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:32px;
  margin-bottom:28px;
}

.page-header--index,
.page-header--login{
  align-items:flex-start;
}

.logo{
  position:relative;
  display:inline-block;
  width:420px;
  min-width:420px;
  color:var(--accent);
  font-weight:800;
  letter-spacing:0;
  padding-left:30px;
  padding-top:18px;
}
.logo::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:10px;
  height:84px;
  background:var(--accent);
}
.logo::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:275px;
  height:10px;
  background:var(--accent);
}
.logo-text{
  display:block;
  font-size:0;
}
.logo-line{
  display:block;
  font-size:37px;
  line-height:.92;
  white-space:nowrap;
}

.header-right,
.header-actions{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:nowrap;
  justify-content:flex-end;
}

.id-box{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:280px;
}
.id-box__label{
  font-size:14px;
  font-weight:700;
  color:#666;
}
.id-box__row{
  display:flex;
  gap:10px;
  align-items:stretch;
}

.auth-summary{
  min-height:54px;
  border:1px solid #d8d3cd;
  background:#fff;
  color:var(--text);
  border-radius:14px;
  padding:8px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.auth-summary__name{
  font-size:18px;
  font-weight:700;
  line-height:1.1;
}
.auth-summary__email{
  font-size:13px;
  line-height:1.15;
  color:#666;
  margin-top:4px;
  word-break:break-word;
}

.text-input,
.textarea{
  width:100%;
  border:1px solid #d8d3cd;
  background:#fff;
  color:var(--text);
  border-radius:14px;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.text-input{
  min-height:54px;
  padding:0 18px;
}
.text-input--full{width:100%}
.page-list .id-box .text-input{
  width:220px;
}
.textarea{
  min-height:128px;
  padding:14px 16px;
  resize:vertical;
}
.text-input:focus,
.textarea:focus{
  border-color:rgba(231,119,0,.75);
  box-shadow:0 0 0 4px rgba(231,119,0,.11);
}
.textarea[readonly]{
  background:#f4f1ec;
  color:#4c4c4c;
  cursor:default;
}


.btn{
  min-height:54px;
  border-radius:14px;
  border:1px solid transparent;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  white-space:nowrap;
  transition:background .18s ease, transform .08s ease, border-color .18s ease;
}
.btn:hover{background:var(--accent-dark)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.68;cursor:not-allowed}
.btn--white{
  background:#fff;
  color:var(--text);
  border-color:#d8d3cd;
}
.btn--white:hover{background:#f7f5f2}
.btn--outline{
  background:#fff;
  color:var(--text);
  border-color:#d8d3cd;
}
.btn--outline:hover{background:#f7f5f2}
.btn--wide{padding:0 30px}
.btn--list-action{min-width:230px}

.page-main{display:block}
.list-area{max-width:950px}
.page-title{
  margin:0 0 12px;
  font-size:36px;
  font-weight:800;
  line-height:1;
}
.page-subtitle{
  margin:0 0 22px;
  font-size:15px;
  color:#666;
}

.login-main{
  max-width:560px;
}
.login-block{
  max-width:520px;
}
.login-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.actions-row--login{
  margin-top:4px;
}

.state{
  padding:18px 0;
  color:#666;
  font-size:16px;
}
.state--error{color:var(--danger)}

.participant-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.participant-card{
  display:flex;
  width:100%;
  min-height:94px;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:22px 26px;
  border-radius:14px;
  border:1px solid #e2ddd7;
  color:#111 !important;
  font-size:34px;
  line-height:1.12;
  font-weight:400;
  position:relative;
  transition:transform .06s ease, box-shadow .18s ease;
}
.participant-card:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.participant-card--accent{background:var(--accent)}
.participant-card--light{background:#fff}
.participant-card.is-scored{opacity:.48;filter:grayscale(1)}
.participant-card__meta{
  position:absolute;
  top:11px;
  right:14px;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  opacity:.72;
}

.subnav{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:26px;
}
.subnav--list{
  justify-content:flex-end;
  margin:-4px 0 20px;
  max-width:950px;
}

.data-card{
  background:transparent;
  border:0;
  border-radius:0;
}
.participant-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:34px;
  align-items:start;
}
.participant-table{
  display:flex;
  flex-direction:column;
}
.info-row{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:16px;
  padding:13px 0;
  border-bottom:1px solid #ddd8d3;
}
.info-row__label{font-weight:700}
.info-row__value{min-width:0}

.photo-card{
  border:1px solid #ddd8d3;
  border-radius:16px;
  padding:14px;
  background:transparent;
}
.photo-card img,
.photo-card__empty{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  border-radius:12px;
  background:#fff;
  border:1px solid #ddd8d3;
}
.photo-card__empty{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#777;
  border-style:dashed;
}

.criteria-list{
  margin-top:44px;
  display:flex;
  flex-direction:column;
  gap:26px;
  max-width:860px;
}
.criterion{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.criterion__title{
  font-size:22px;
  font-weight:700;
  line-height:1.05;
}
.criterion__hint{
  font-size:14px;
  color:#818181;
}
.score-options{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  border:1px solid #202020;
  min-height:50px;
}
.score-option{position:relative}
.score-option input{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.score-option span{
  height:100%;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border-right:1px solid #202020;
  transition:background .16s ease, color .16s ease;
}
.score-option:last-child span{border-right:0}
.score-option input:checked + span{
  background:var(--accent);
  color:#fff;
  font-weight:700;
}
.score-option input:focus + span{box-shadow:inset 0 0 0 3px rgba(231,119,0,.16)}
.score-option input[disabled] + span{
  cursor:default;
}
.score-option.is-locked span{
  background:#fbfaf8;
}
.score-options--locked{
  border-color:#8e8e8e;
}
.notice--info{
  background:#f5f1ea;
  border-color:#ded2c2;
  color:#5a5148;
}


.form-block{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.form-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.field-label{
  font-size:15px;
  font-weight:700;
}
.actions-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:2px;
}

.notice{
  border-radius:14px;
  padding:16px 18px;
  font-size:16px;
  line-height:1.45;
  border:1px solid transparent;
  margin:8px 0 0;
}
.notice--error{
  background:#fbefec;
  border-color:#eda899;
  color:#a64939;
}
.notice--success{
  background:#edf7f0;
  border-color:#b9dcc2;
  color:#2d6e43;
}
.preview-note{margin-bottom:24px}
.hidden{display:none !important}

.comments-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:8px;
}
.juror-badge{
  border:1px solid #d8d3cd;
  border-radius:14px;
  padding:14px 18px;
  background:#fff;
  font-size:15px;
  font-weight:700;
}
.comments-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.comment-card{
  background:#fff;
  border:1px solid #e2ddd7;
  border-radius:16px;
  padding:20px;
}
.comment-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}
.comment-card__name{
  font-size:28px;
  line-height:1.1;
  font-weight:400;
}
.comment-card__meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.kpi{
  border:1px solid #d8d3cd;
  border-radius:999px;
  padding:8px 12px;
  font-size:14px;
  background:#f7f5f2;
}
.comment-card__text{
  margin:0 0 12px;
  font-size:16px;
  line-height:1.5;
}
.comment-card__notes{
  font-size:15px;
  color:#666;
  margin-bottom:14px;
}
.comment-card__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.meta-text{font-size:14px;color:#666}

@media (max-width: 1180px){
  .header-right,
  .header-actions{
    flex-wrap:wrap;
    justify-content:flex-start;
  }
}

@media (max-width: 980px){
  .shell{
    width:min(100%, calc(100% - 28px));
    padding:24px 0 42px;
  }
  .page-header{
    flex-direction:column;
    gap:22px;
  }
  .logo{
    width:100%;
    min-width:0;
    max-width:420px;
  }
  .header-right,
  .header-actions{
    width:100%;
    align-items:stretch;
  }
  .id-box{
    width:100%;
    min-width:0;
  }
  .btn--list-action{min-width:0}
  .list-area{max-width:none}
  .participant-layout{
    grid-template-columns:1fr;
  }
  .info-row{
    grid-template-columns:1fr;
    gap:8px;
  }
  .photo-card{
    max-width:420px;
  }
  .comments-top,
  .comment-card__top{
    flex-direction:column;
  }
}

@media (max-width: 640px){
  .logo{
    padding-left:24px;
    padding-top:16px;
  }
  .logo::before{
    width:8px;
    height:72px;
  }
  .logo::after{
    width:230px;
    height:8px;
  }
  .logo-line{
    font-size:30px;
    line-height:.94;
  }
  .page-title{
    font-size:30px;
  }
  .participant-card{
    min-height:86px;
    font-size:24px;
    padding:20px 16px;
  }
  .criterion__title{
    font-size:20px;
  }
  .comment-card__name{
    font-size:22px;
  }
}
