:root{
  --navy:#171a2a;
  --gold:#c49331;
  --gold2:#e4bc5e;
  --bg:#f5f6f9;
  --card:#fff;
  --ink:#171a28;
  --muted:#8e93a3;
  --line:#e6e8ed;
  --line2:#dfe2e8;
  --green:#2f9a70;
  --green-bg:#edf8f1;
  --red:#c65b55;
  --red-bg:#fff1ef;
  --orange:#b87524;
  --blue:#507aa0;
  --shadow:0 18px 46px rgba(22,25,40,.055);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Manrope,Arial,sans-serif;color:var(--ink);background:var(--bg)}
body{font-size:14px}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app{min-height:100vh;display:flex}

/* Sidebar */
.sidebar{
  position:fixed;z-index:30;inset:0 auto 0 0;width:304px;
  display:flex;flex-direction:column;background:var(--navy);color:#fff
}
.sidebar__head{height:96px;display:flex;align-items:center;padding:0 26px;border-bottom:1px solid rgba(255,255,255,.065)}
.brand img{display:block;max-width:194px;max-height:58px;object-fit:contain}
.sidebar__context{
  margin:21px 20px 19px;padding:16px 14px;display:flex;align-items:center;gap:12px;
  border:1px solid rgba(255,255,255,.085);border-radius:18px;background:rgba(255,255,255,.035)
}
.avatar,.profile__avatar{
  display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border-radius:13px;
  background:linear-gradient(135deg,#efc866,#bd8529);color:#1b1d2a;font-weight:800
}
.sidebar__context-copy{min-width:0}
.sidebar__context-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar__context-copy span{display:block;margin-top:4px;color:#9298aa;font-size:12px}
.menu{padding:3px 15px}
.menu__caption{padding:14px 13px 9px;color:#8088a2;font-size:11px;font-weight:800;letter-spacing:.12em}
.menu__caption--space{margin-top:12px}
.menu__link{
  position:relative;display:flex;align-items:center;gap:13px;min-height:52px;margin:2px 0;padding:0 14px;
  border-radius:12px;color:#c5cada;font-weight:700;transition:.18s
}
.menu__link:hover{background:rgba(255,255,255,.045);color:#fff}
.menu__link.active{background:rgba(255,255,255,.075);color:#fff}
.menu__link.active:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:4px;background:var(--gold2)}
.menu__icon{
  display:grid;place-items:center;width:31px;height:31px;border-radius:9px;
  background:rgba(255,255,255,.055);color:#afb5c7;font-weight:800
}
.menu__link.active .menu__icon{background:rgba(214,174,80,.12);color:var(--gold2)}
.sidebar__footer{margin-top:auto;padding:13px 15px 24px;border-top:1px solid rgba(255,255,255,.065)}

/* Topbar */
.workspace{width:calc(100% - 304px);margin-left:304px;min-height:100vh}
.topbar{
  position:relative;z-index:20;height:96px;display:flex;align-items:center;justify-content:space-between;
  padding:0 39px;background:#fff;border-bottom:1px solid #e9e9ed
}
.topbar__title span{display:block;color:#979baa;font-size:11px;font-weight:800;letter-spacing:.08em}
.topbar__title strong{display:block;margin-top:7px;font-size:13px}
.topbar__actions{display:flex;align-items:center;gap:15px}
.topbar__mobile-brand{display:none}
.language{display:flex;padding:4px;border:1px solid #e2e3e8;border-radius:14px;background:#f9f9fa}
.language button{width:55px;height:39px;border:0;border-radius:10px;background:transparent;color:#838895;font-size:12px;font-weight:800}
.language button.active{background:linear-gradient(135deg,#e5bd61,#c48e31);color:#282216}
.profile{position:relative}
.profile__button{display:flex;align-items:center;gap:11px;border:0;background:transparent;text-align:left}
.profile__avatar{width:42px;height:42px;border-radius:12px}
.profile__copy{min-width:0;max-width:210px}
.profile__copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.profile__copy small{display:block;margin-top:4px;color:#979ba9;font-size:11px}
.profile__chevron{color:#999eaa;font-size:17px}
.profile__menu{
  position:absolute;right:0;top:54px;display:none;width:215px;padding:8px;
  border:1px solid #e7e7eb;border-radius:14px;background:#fff;box-shadow:0 18px 50px rgba(17,20,35,.14)
}
.profile.open .profile__menu{display:block}
.profile__menu a{display:block;padding:10px 12px;border-radius:9px;color:#545968;font-size:12px;font-weight:700}
.profile__menu a:hover{background:#f5f6f8}

/* Main */
.main{padding:38px 39px 110px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:20px}
.eyebrow{margin:0 0 10px;color:#b57d1b;font-size:12px;font-weight:800;letter-spacing:.09em}
.page-head h1{margin:0;font-size:42px;line-height:1.07;letter-spacing:-.05em}
.lead{margin:10px 0 0;color:#8d92a0;font-size:13px;line-height:1.55}
.page-head__actions{display:flex;gap:9px;flex-wrap:wrap}
.action{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:43px;padding:10px 15px;
  border:1px solid #dfe1e6;border-radius:12px;background:#fff;color:#555b69;font-size:11px;font-weight:800;
  transition:.18s
}
.action:hover:not(:disabled){transform:translateY(-1px);border-color:#d1b36c}
.action--gold{border-color:#bc882e;background:linear-gradient(135deg,#e6be62,#c28e31);color:#292216}
.action--dark{border-color:#252a40;background:#20243a;color:#fff}
.action:disabled{opacity:.52;cursor:default}

.data-state{
  display:none;align-items:center;gap:10px;margin-bottom:17px;padding:11px 14px;
  border:1px solid #e4e6eb;border-radius:13px;background:#fff;color:#6f7483;font-size:11px
}
.data-state.show{display:flex}
.data-state.is-error{border-color:#f0cbc7;background:#fff6f5;color:#a24640}
.data-state.is-ready{border-color:#cce6d8;background:#f7fcf9;color:#37765a}
.spinner{width:14px;height:14px;border:2px solid #dedfe3;border-top-color:#bf892e;border-radius:50%;animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Pick lesson */
.lesson-picker{
  display:grid;grid-template-columns:190px minmax(320px,1fr) 230px;gap:12px;align-items:end;
  margin-bottom:16px;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)
}
.picker-field{display:grid;gap:7px}
.picker-field--grow{min-width:0}
.picker-field label,.field span{color:#686e7e;font-size:10px;font-weight:800}
.picker-field input,.picker-field select,.field input,.field select{
  width:100%;height:43px;padding:0 12px;border:1px solid var(--line2);border-radius:11px;background:#fff;color:#252938;outline:none
}
.picker-field input:focus,.picker-field select:focus,.field input:focus,.field select:focus{
  border-color:#c99b43;box-shadow:0 0 0 3px rgba(201,155,67,.12)
}
.journal-state{display:flex;align-items:center;gap:11px;min-height:43px;padding:8px 12px;border:1px solid #e4e6eb;border-radius:12px;background:#fafafb}
.journal-state__dot{width:9px;height:9px;border-radius:50%;background:#adb2bd}
.journal-state[data-state="DRAFT"] .journal-state__dot{background:#c28b2d}
.journal-state[data-state="COMPLETED"] .journal-state__dot{background:var(--green)}
.journal-state small{display:block;color:#999dab;font-size:9px}
.journal-state strong{display:block;margin-top:3px;font-size:11px}

/* Lesson */
.lesson-card{
  display:flex;justify-content:space-between;gap:18px;align-items:center;
  margin-bottom:14px;padding:20px 22px;border:1px solid #ead5a3;border-radius:20px;
  background:linear-gradient(105deg,#fffdf8,#fff8e9)
}
.lesson-card__main{display:flex;align-items:center;gap:15px;min-width:0}
.lesson-card__mark{
  display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:14px;
  background:linear-gradient(135deg,#e5bd5e,#bf882b);font-weight:800
}
.lesson-card__copy{min-width:0}
.lesson-card__line{display:flex;gap:8px;flex-wrap:wrap;color:#8c7a5a;font-size:9px;font-weight:800}
.lesson-card__line span{padding:5px 8px;border:1px solid #ebd7aa;border-radius:18px;background:rgba(255,255,255,.68)}
.lesson-card h2{margin:8px 0 0;font-size:20px;letter-spacing:-.03em}
.lesson-card p{margin:5px 0 0;color:#8c91a0;font-size:11px}
.mini-action{
  display:inline-flex;align-items:center;gap:12px;min-height:38px;padding:0 12px;
  border:1px solid #e2c98e;border-radius:10px;background:#fffdf8;color:#8d641b;font-size:10px;font-weight:800
}

/* Meta */
.journal-meta{
  display:grid;grid-template-columns:120px minmax(300px,1fr) 230px;gap:12px;margin-bottom:16px;
  padding:17px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)
}
.field{display:grid;gap:7px}
.field--grow{min-width:0}

/* Summary */
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.summary-card{
  padding:17px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(20,24,44,.035)
}
.summary-card span{display:block;color:#9095a3;font-size:10px;font-weight:700}
.summary-card strong{display:block;margin-top:9px;font-size:27px;letter-spacing:-.05em}
.summary-card small{display:block;margin-top:4px;color:#a2a6b2;font-size:9px}
.summary-card--green{border-left:3px solid var(--green)}
.summary-card--red{border-left:3px solid var(--red)}
.summary-card--gold{border-left:3px solid var(--gold)}

/* Table */
.journal-panel{border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.journal-panel__head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:20px 20px 16px;border-bottom:1px solid #eceef2
}
.journal-panel__head h2{margin:0;font-size:18px}
.journal-panel__head p{max-width:780px;margin:6px 0 0;color:#9297a5;font-size:10px;line-height:1.5}
.bulk-actions{display:flex;gap:8px;flex-wrap:wrap}
.small-button{
  min-height:35px;padding:0 11px;border:1px solid #e0e2e7;border-radius:10px;background:#fff;
  color:#626879;font-size:9px;font-weight:800
}
.small-button:hover{border-color:#d7bc7a;background:#fffaf0;color:#8b641e}
.table-wrap{overflow:auto}
.journal-table{width:100%;min-width:1040px;border-collapse:collapse}
.journal-table th{
  position:sticky;top:0;z-index:2;padding:11px 10px;border-bottom:1px solid #e9ebef;background:#f8f9fb;
  color:#767c8c;font-size:9px;text-align:left;white-space:nowrap
}
.journal-table td{padding:11px 10px;border-bottom:1px solid #edf0f3;vertical-align:middle}
.journal-table tbody tr:hover{background:#fcfcfd}
.col-no{width:54px;text-align:center!important}
.col-gps{width:145px}
.col-attendance{width:180px}
.col-score{width:105px}
.col-comment{width:260px}
.student-cell{display:flex;align-items:center;gap:10px;min-width:220px}
.student-avatar{
  display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:11px;
  background:#f3f0e8;color:#936a23;font-size:10px;font-weight:800
}
.student-cell strong{display:block;font-size:11px}
.student-cell small{display:block;margin-top:4px;color:#9aa0ad;font-size:8px}
.gps-badge{
  display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:5px 9px;border-radius:16px;
  background:#f2f3f6;color:#717787;font-size:8px;font-weight:800;white-space:nowrap
}
.gps-badge i{width:6px;height:6px;border-radius:50%;background:#aeb3bd}
.gps-badge.is-present{background:var(--green-bg);color:#287550}
.gps-badge.is-present i{background:var(--green)}
.gps-badge.is-late{background:#fff4dc;color:#8c641d}
.gps-badge.is-late i{background:#c58b28}
.attendance-select,.score-input,.comment-input{
  width:100%;height:36px;border:1px solid #dfe2e7;border-radius:9px;background:#fff;color:#2f3443;outline:none;font-size:9px
}
.attendance-select{padding:0 8px}
.score-input{padding:0 9px;text-align:center;font-weight:800}
.comment-input{padding:0 9px}
.attendance-select:focus,.score-input:focus,.comment-input:focus{border-color:#ca9d48;box-shadow:0 0 0 3px rgba(202,157,72,.1)}
.attendance-select[data-value="PRESENT"]{background:#f5fcf8;border-color:#cce7d9;color:#25714d}
.attendance-select[data-value="ABSENT"]{background:#fff7f6;border-color:#efcfcb;color:#a04842}
.attendance-select[data-value="LATE"]{background:#fffaf0;border-color:#ead49e;color:#896219}
.attendance-select[data-value="EXCUSED"]{background:#f4f7fb;border-color:#d9e1eb;color:#536e8a}
.table-empty{padding:30px;text-align:center;color:#9ca1ad;font-size:11px}

/* Save bar */
.save-bar{
  position:fixed;z-index:18;left:304px;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:78px;padding:12px 39px;border-top:1px solid #e1e3e8;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);box-shadow:0 -12px 35px rgba(20,24,44,.055)
}
.save-bar__state{display:flex;align-items:center;gap:10px}
.save-bar__dot{width:9px;height:9px;border-radius:50%;background:#b7bbc4}
.save-bar__dot.is-dirty{background:#d08e26;box-shadow:0 0 0 5px rgba(208,142,38,.12)}
.save-bar__state strong{display:block;font-size:10px}
.save-bar__state small{display:block;margin-top:4px;color:#9b9fac;font-size:8px}
.save-bar__actions{display:flex;gap:8px}
.toast{
  position:fixed;z-index:1000;right:24px;bottom:96px;max-width:390px;padding:13px 15px;
  border:1px solid #e2e4e8;border-radius:13px;background:#fff;box-shadow:0 18px 50px rgba(21,24,40,.18);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;font-size:10px;font-weight:700
}
.toast.show{opacity:1;visibility:visible;transform:none}
.toast.success{border-color:#cce6d8;background:#f5fbf7;color:#2d7253}
.toast.error{border-color:#efc9c5;background:#fff6f5;color:#9e443e}

.mobile-nav{display:none}

@media(max-width:1280px){
  .sidebar{width:254px}
  .workspace{width:calc(100% - 254px);margin-left:254px}
  .save-bar{left:254px}
  .main,.topbar{padding-left:28px;padding-right:28px}
  .lesson-picker{grid-template-columns:170px minmax(260px,1fr) 210px}
  .journal-meta{grid-template-columns:110px minmax(260px,1fr) 210px}
}

@media(max-width:980px){
  .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lesson-picker{grid-template-columns:1fr 1fr}
  .journal-state{grid-column:1/-1}
  .journal-meta{grid-template-columns:1fr 1fr}
  .field--grow{grid-column:1/-1}
}

@media(max-width:900px){
  .sidebar{display:none}
  .workspace{width:100%;margin-left:0}
  .save-bar{left:0;bottom:68px}
  .topbar{height:74px;padding:0 17px}
  .topbar__title{display:none}
  .topbar__mobile-brand{display:block}
  .topbar__mobile-brand img{max-width:150px;max-height:42px}
  .profile__copy{display:none}
  .main{padding:24px 16px 165px}
  .page-head{flex-direction:column}
  .page-head h1{font-size:34px}
  .page-head__actions{width:100%}
  .lesson-card{align-items:flex-start}
  .mobile-nav{
    position:fixed;z-index:35;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);
    height:68px;border-top:1px solid #e7e8ec;background:#fff
  }
  .mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#9297a4}
  .mobile-nav b{font-size:8px}
  .mobile-nav a.active{color:#b77f22}
}

@media(max-width:640px){
  .language button{width:42px}
  .page-head h1{font-size:30px}
  .lesson-picker,.journal-meta{grid-template-columns:1fr}
  .field--grow,.journal-state{grid-column:auto}
  .summary-grid{grid-template-columns:1fr 1fr}
  .lesson-card{display:grid}
  .journal-panel__head{display:grid}
  .save-bar{padding:10px 14px}
  .save-bar__state small{max-width:150px}
  .save-bar__actions .action span:first-child{display:none}
  .save-bar__actions .action{padding:9px 11px;font-size:9px}
}

@media(max-width:420px){
  .summary-grid{grid-template-columns:1fr}
  .save-bar__state{display:none}
}

/* FINAL UNIVERSAL JOURNAL MODEL */
.journal-meta--final{
  grid-template-columns:110px minmax(280px,1.45fr) minmax(180px,.8fr) minmax(170px,.75fr);
  align-items:end;
}
.journal-meta--final .field--grow:nth-of-type(5){grid-column:1/4}
.scale-card{
  min-height:68px;padding:11px 13px;border:1px solid #ead7a9;border-radius:12px;
  background:linear-gradient(135deg,#fffdf8,#fff8e8);display:flex;flex-direction:column;justify-content:center
}
.scale-card small{color:#8c7a5a;font-size:9px;font-weight:800}
.scale-card strong{margin-top:3px;color:#8a641d;font-size:18px}
.scale-card span{margin-top:2px;color:#a18c66;font-size:8px;line-height:1.35}
.journal-table .score-input:disabled{background:#f3f4f6;color:#a0a5b0;cursor:not-allowed}
.journal-table tr.is-locked input,.journal-table tr.is-locked select{pointer-events:none;background:#f5f6f8;color:#9b9faa}

@media(max-width:1180px){
  .journal-meta--final{grid-template-columns:110px minmax(260px,1fr) 190px}
  .journal-meta--final .field:nth-of-type(4){grid-column:1/2}
  .journal-meta--final .field--grow:nth-of-type(5){grid-column:2/4}
  .scale-card{grid-column:1/4}
}
@media(max-width:760px){
  .journal-meta--final{grid-template-columns:1fr}
  .journal-meta--final .field,.journal-meta--final .field--grow:nth-of-type(5),.scale-card{grid-column:auto}
}