:root {
--ink:#073f35;
--green:#075143;
--gold:#c6a45d;
--paper:#f7f2e6;
--muted:#718078;
--line:#e4dcc8;
--white:#fffdf8;
--danger:#a12e37;
--surface:#fffdf8;
--sand:#eee7d6
}
@font-face {
font-family:Qomra;
src:url('../fonts/qomra-light.otf') format('opentype');
font-style:normal;
font-weight:300;
font-display:swap
}
@font-face {
font-family:Qomra;
src:url('../fonts/qomra-regular.otf') format('opentype');
font-style:normal;
font-weight:400;
font-display:swap
}
@font-face {
font-family:Qomra;
src:url('../fonts/qomra-bold.otf') format('opentype');
font-style:normal;
font-weight:700;
font-display:swap
}
* {
box-sizing:border-box
}
body {
margin:0;
background:var(--paper);
 color:#123d34;
 font:16px/1.8 Qomra,Tahoma,Arial,sans-serif
}
a {
color:var(--green);
text-decoration:none
}
button,input,select,textarea {
font:inherit
}
header {
background:var(--ink);
color:white;
padding:12px max(5vw,20px);
border-bottom:3px solid var(--gold)
}
header a {
color:white
}
.header-inner {
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px
}
.brand {
display:flex;
align-items:center;
gap:15px;
font-size:22px;
font-weight:700;
line-height:1.4
}
.brand img {
display:block;
width:150px;
height:76px;
object-fit:contain
}
.brand small {
display:block;
font-size:13px;
letter-spacing:0;
color:#e1c681;
font-weight:400
}
nav {
display:flex;
gap:5px;
flex-wrap:wrap
}
nav a {
padding:10px 13px;
border-radius:8px;
font-size:14px
}
nav a:hover,nav a.active {
background:#ffffff18;
color:#efd39b
}
main {
max-width:1200px;
margin:32px auto;
padding:0 22px 80px
}
h1 {
font-size:28px;
line-height:1.4;
margin:0 0 10px
}
h2 {
font-size:20px;
margin:0 0 14px
}
.muted {
color:var(--muted)
}
.topline {
display:flex;
justify-content:space-between;
gap:16px;
align-items:center;
margin-bottom:24px
}
.card {
background:var(--surface);
border:1px solid var(--line);
border-radius:14px;
padding:24px;
margin-bottom:20px;
box-shadow:0 5px 20px #173d3010
}
.grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:18px
}
.stat {
border-top:3px solid var(--gold)
}
.stat strong {
display:block;
font-size:34px;
color:var(--green)
}
.button,button {
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:10px 18px;
border:0;
border-radius:8px;
background:var(--green);
color:white;
cursor:pointer;
gap:8px;
font-weight:600
}
.secondary {
background:#e9eee6;
color:var(--green)
}
.danger {
background:#fae9e9;
color:var(--danger)
}
.small {
font-size:14px
}
.actions {
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center
}
label {
display:block;
font-size:14px;
font-weight:600;
margin-bottom:6px
}
input:not([type=checkbox]),select,textarea {
display:block;
width:100%;
min-height:46px;
border:1px solid #b9c8bd;
border-radius:7px;
padding:9px 12px;
 background:var(--surface);
color:#1c3829
}
input:focus,select:focus,textarea:focus {
outline:3px solid #b6cfbc;
outline-offset:1px
}
input[type=checkbox] {
width:22px;
height:22px;
accent-color:var(--green)
}
.field {
margin-bottom:18px
}
.fields {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 20px
}
.full {
grid-column:1/-1
}
.table-wrap {
overflow:auto
}
table {
border-collapse:collapse;
width:100%;
font-size:15px
}
th {
text-align:right;
font-size:13px;
color:var(--muted);
background:#f6f8f4
}
td,th {
padding:14px 12px;
border-bottom:1px solid var(--line)
}
td input,td select {
min-width:100px
}
.notice {
padding:14px 20px;
border-radius:10px;
margin-bottom:20px;
background:#e5f1e6
}
.error {
background:#fdeeee;
color:#832731
}
.pill {
font-size:13px;
 background:#e9eee6;
padding:4px 10px;
border-radius:20px;
display:inline-block
}
.empty {
padding:40px 15px;
text-align:center;
color:var(--muted)
}
.numbers {
font-variant-numeric:tabular-nums;
direction:ltr;
display:inline-block
}
.badge {
width:38px;
height:38px;
border-radius:50%;
background:#f1ead9;
display:inline-flex;
align-items:center;
justify-content:center;
color:#826227;
font-weight:700
}
.gift-img {
width:100%;
height:180px;
object-fit:contain;
background:var(--paper);
border-radius:8px
}
.catalog-filter {
margin-bottom:20px
}
.catalog-row {
padding:14px 0;
margin:0;
border-bottom:1px solid var(--line)
}
.catalog-row:last-child {
border-bottom:0
}
.catalog-row a {
display:grid;
gap:3px
}
nav[role=navigation] {
display:flex;
gap:8px;
align-items:center;
justify-content:center;
margin:24px 0
}
nav[role=navigation] a,nav[role=navigation] span {
padding:8px 12px;
border:1px solid var(--line);
border-radius:7px;
 background:var(--surface)
}
nav[role=navigation] span[aria-current=page] {
background:var(--green);
color:white
}
.stack {
display:flex;
gap:12px;
align-items:center
}
.checks {
max-height:340px;
overflow:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:6px
}
.check {
display:flex;
align-items:center;
gap:10px;
padding:10px;
border:1px solid var(--line);
border-radius:7px
}
.check label {
margin:0;
font-size:15px
}
.attendance-student,.point-student {
cursor:pointer;
gap:12px;
min-height:52px
}
.attendance-student-name,.point-student>span:nth-child(2) {
flex:1
}
.attendance-student .pill,.point-student .pill {
margin-inline-start:auto;
white-space:nowrap
}
.point-entry-detail-row>div:first-child {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap
}
button:disabled {
opacity:.48;
cursor:not-allowed
}
.entry-log-filter {
margin:18px 0
}
.entry-log-search {
display:grid;
grid-template-columns:minmax(160px,1fr) auto auto;
align-items:end;
gap:10px
}
.entry-log-search>label {
display:none
}
.entry-filter-panel {
position:absolute;
z-index:3;
inset-inline-end:22px;
margin-top:8px;
min-width:min(620px,calc(100vw - 44px));
box-shadow:0 8px 30px #173d3020
}
.entry-log-wrap {
border-radius:12px
}
.entry-log-table td,.entry-log-table th {
padding:12px 10px
}
.tabs {
display:flex;
gap:8px;
flex-wrap:wrap;
margin:18px 0
}
.tabs a {
padding:10px 15px;
 background:var(--surface);
border:1px solid var(--line);
border-radius:8px
}
.login {
max-width:430px;
margin:70px auto
}
.divider {
margin:25px 0;
border-top:1px solid var(--line)
}
.mobile-row {
display:grid;
grid-template-columns:minmax(170px,1.8fr) repeat(3,minmax(100px,1fr));
align-items:end;
gap:14px;
border-bottom:1px solid var(--line);
padding:16px 0
}
.mobile-row .field {
margin:0
}
.footer-note {
font-size:13px;
color:var(--muted);
margin-top:24px
}
.sticky-actions {
position:sticky;
bottom:12px;
background:#fffdf8ed;
padding:12px;
border:1px solid var(--line);
border-radius:12px;
box-shadow:0 4px 18px #153b3010;
z-index:2
}
.inline {
display:inline
}
details summary {
cursor:pointer;
min-height:44px;
padding:8px 0;
font-weight:600
}
:focus-visible {
outline:3px solid #af8840;
outline-offset:3px
}
@media(max-width:700px) {
header {
padding:18px 16px
}
.header-inner {
align-items:flex-start;
flex-direction:column;
gap:12px
}
.brand {
font-size:20px;
gap:10px
}
.brand img {
width:130px;
height:66px
}
nav {
gap:2px
}
nav a {
padding:8px 10px
}
main {
margin-top:22px;
padding:0 14px 70px
}
h1 {
font-size:24px
}
.topline {
align-items:flex-start;
flex-direction:column
}
.card {
padding:18px 15px
}
.fields {
grid-template-columns:1fr
}
.mobile-row {
grid-template-columns:1fr 1fr;
gap:12px
}
.mobile-row .student-name {
grid-column:1/-1
}
.mobile-row .field:last-child {
grid-column:1/-1
}
.grid {
grid-template-columns:1fr
}
.stats-grid {
grid-template-columns:1fr 1fr
}
.stat strong {
font-size:26px
}
.checks {
grid-template-columns:1fr
}
.button,button {
min-height:46px
}
.table-wrap table {
min-width:480px
}
.login {
margin:30px auto
}
.actions {
width:100%
}
.actions .button,.actions button {
flex-grow:1
}
.entry-log-search {
grid-template-columns:minmax(120px,1fr) auto auto
}
.entry-filter-panel {
position:static;
min-width:0;
margin:8px 0
}
.entry-log-table thead {
display:none
}
.entry-log-table,.entry-log-table tbody,.entry-log-table tr,.entry-log-table td {
display:block;
width:100%
}
.entry-log-table tr {
padding:8px 0;
border-bottom:1px solid var(--line)
}
.entry-log-table td {
display:grid;
grid-template-columns:110px minmax(0,1fr);
gap:10px;
text-align:start;
padding:7px 4px
}
.entry-log-table td::before {
content:attr(data-label);
font-weight:700;
color:var(--muted)
}

}
@media print {
header,nav,.actions,.sticky-actions,button {
display:none
}
main {
max-width:none;
padding:0
}
.card {
break-inside:avoid
}

}