/* GRAFIKA_R5_UI */
:root{color-scheme:dark;--bg:#0d0f10;--panel:#171a1d;--panel2:#202429;--line:#343a40;--text:#f1f3f4;--muted:#9da4aa;--orange:#f59e0b;--green:#4ade80;--red:#ef4444;--shadow:0 18px 50px rgba(0,0,0,.28)}*{box-sizing:border-box}html{min-height:100%}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(circle at 15% 5%,rgba(245,158,11,.08),transparent 34rem),radial-gradient(circle at 85% 20%,rgba(74,222,128,.05),transparent 28rem),var(--bg);color:var(--text)}a{color:#ffc45d}.wrap{max-width:1160px;margin:0 auto;padding:30px 20px 56px}.auth-wrap{max-width:920px;padding-top:7vh}.brand{text-align:center;margin:0 0 26px}.brand-kicker,.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:900;color:var(--orange)}h1,h2,h3{margin-top:0;line-height:1.08}h1{font-size:clamp(2rem,5vw,3.6rem);margin-bottom:8px}h2{font-size:1.45rem;margin-bottom:12px}.muted{color:var(--muted)}.small{font-size:.86rem}.card{background:linear-gradient(180deg,rgba(31,35,39,.96),rgba(21,24,27,.96));border:1px solid var(--line);border-radius:18px;padding:22px;margin:16px 0;box-shadow:var(--shadow)}.auth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.auth-card{margin:0;min-height:340px}.first-entry{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.auth-foot{text-align:center;margin-top:22px}.narrow-card{max-width:620px;margin:20px auto}.top,.student-head,.section-title{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px}.student-head{padding:8px 0 4px}.identity{display:flex;gap:14px;align-items:center}.identity h2,.identity h1{margin:0 0 5px}.avatar-letter{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;font-size:1.65rem;font-weight:950;background:linear-gradient(145deg,#f59e0b,#c96c08);color:#101214;box-shadow:0 12px 28px rgba(245,158,11,.18)}.btn,button{appearance:none;background:var(--orange);color:#111;border:0;border-radius:10px;padding:10px 15px;font:inherit;font-weight:850;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}.btn:hover,button:hover{filter:brightness(1.07)}.secondary{background:#30363c;color:#f3f4f6}.danger{background:#b91c1c;color:#fff}.quiet-link{color:#c6cbd0;text-decoration:none}.quiet-link:hover{color:#fff}.link-danger{padding:0;background:transparent;color:#ff7979;font-weight:700}.link-danger:hover{background:transparent;color:#ff9a9a}label{display:block;font-size:.9rem;font-weight:750;color:#d5d8da;margin-top:4px}input,select{width:100%;padding:11px 12px;border-radius:10px;border:1px solid #454b52;background:#101315;color:#fff;margin:6px 0 14px;font:inherit;outline:none}input:focus,select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(245,158,11,.12)}input[type=file]{padding:9px}.msg{padding:13px 15px;border-radius:11px;background:#183a27;border:1px solid #285c3b;margin:14px 0}.err{background:#412020;border-color:#713333}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}.inline{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.inline>div{flex:1;min-width:180px}table{width:100%;border-collapse:collapse}th,td{padding:9px;border-bottom:1px solid #30343a;text-align:left}.step{display:flex;gap:12px;align-items:center;margin-bottom:20px}.step>span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:#111;font-weight:950}.group-list,.group-row{display:flex;gap:8px;flex-wrap:wrap}.group-list{margin:18px 0}.group-strip{margin:6px 0 18px;padding:15px 0;border-top:1px solid #292d31;border-bottom:1px solid #292d31}.group-chip{display:flex;gap:7px;align-items:center;border:1px solid #3a4147;background:#181c1f;border-radius:999px;padding:8px 11px;font-size:.86rem}.group-chip span{color:var(--muted)}.delete-confirm{border-color:#673333;display:flex;justify-content:space-between;gap:20px;align-items:center}.delete-confirm h2{margin-bottom:6px}.upload-card{display:grid;grid-template-columns:1fr minmax(280px,.85fr);gap:24px;align-items:center}.upload-form{display:flex;gap:9px;align-items:end;flex-wrap:wrap}.upload-form input{margin:0;flex:1;min-width:200px}.section-title{margin-top:30px}.section-title h2{margin:4px 0 0}.count-pill{min-width:34px;height:34px;padding:0 10px;border-radius:999px;display:grid;place-items:center;background:#272d32;color:#d9dde0;font-weight:900}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:15px}.r5-gallery{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.item{background:#15181b;border:1px solid #30363b;border-radius:15px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.18)}.preview{display:block;height:180px;background:#0c0e10;overflow:hidden}.item img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease}.item:hover img{transform:scale(1.025)}.file-placeholder{display:grid;place-items:center;text-decoration:none;background:linear-gradient(145deg,#1c2024,#111315)}.file-placeholder span{font-size:2rem;font-weight:950;color:#777f86;letter-spacing:.1em}.item .p{padding:13px}.file-name{display:block;margin:8px 0 7px;font-weight:800;text-decoration:none;overflow-wrap:anywhere}.file-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:.78rem}.file-actions{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #2e3338;margin-top:12px;padding-top:10px}.file-actions form{margin:0}.ratings{margin-top:12px;display:grid;gap:7px}.rating{border-left:3px solid var(--green);padding:7px 9px;background:#17211a;border-radius:0 8px 8px 0;font-size:.84rem}.rating p{margin:5px 0 0;color:#d4d8d5}.score{float:right;background:#294a32;color:#bdf7ca;border-radius:999px;padding:2px 7px;font-weight:900}.empty{text-align:center;border:1px dashed #3b4248;border-radius:18px;padding:52px 20px;background:rgba(22,25,28,.55)}.empty-icon{font-size:2.7rem;color:#697177}.empty h3{margin:8px 0}code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#e5e7eb}@media(max-width:720px){.auth-grid,.upload-card{grid-template-columns:1fr}.auth-card{min-height:0}.wrap{padding:22px 14px 44px}.auth-wrap{padding-top:28px}.preview{height:160px}.r5-gallery{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.upload-form{display:block}.upload-form button{width:100%;margin-top:9px}.student-head{align-items:flex-start}.file-meta{display:block}.file-meta span{display:block;margin-top:2px}}

/* GRAFIKA_R5_4_IMAGE_LIGHTBOX_CSS */
a.preview:has(img), .file-card a.file-name { cursor: zoom-in; }
body.image-lightbox-open { overflow: hidden; }
.image-lightbox { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: clamp(12px, 2vw, 28px); }
.image-lightbox.is-open { display: flex; }
.image-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.93); backdrop-filter: blur(9px); }
.image-lightbox__stage { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; pointer-events: none; }
.image-lightbox__image { display: block; max-width: min(96vw, 2200px); max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 24px 80px rgba(0,0,0,.58); pointer-events: auto; }
.image-lightbox__close { position: fixed; z-index: 2; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); width: 50px; height: 50px; padding: 0; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(15,15,15,.82); color: #fff; font: 300 34px/1 Arial,sans-serif; cursor: pointer; pointer-events: auto; }
.image-lightbox__close:hover, .image-lightbox__close:focus-visible { background: rgba(255,255,255,.15); outline: 2px solid rgba(255,255,255,.72); outline-offset: 2px; }
.image-lightbox__caption { min-height: 1.3em; max-width: min(90vw,1100px); margin-top: 12px; color: rgba(255,255,255,.88); text-align: center; font-size: 14px; overflow-wrap: anywhere; pointer-events: none; }
@media (max-width: 700px) { .image-lightbox { padding: 8px; } .image-lightbox__image { max-width: 98vw; max-height: 84vh; border-radius: 6px; } .image-lightbox__close { width: 44px; height: 44px; font-size: 30px; } }

/* GRAFIKA_R5_5_IPAD_UX_CSS */
:root {
  --grafika-vvh: 100dvh;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html { min-height: 100%; background: #101214; }
body { min-height: 100dvh; min-height: var(--grafika-vvh); -webkit-font-smoothing: antialiased; }

/* Safe-area layout for iPad Safari, including landscape. */
.wrap {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  padding-bottom: max(44px, env(safe-area-inset-bottom));
}

/* 44–48 px is the practical minimum touch target on iPad. */
button,
.btn,
input[type="submit"],
input[type="button"],
input[type="reset"],
select,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea {
  min-height: 48px;
}
button, .btn, a, label, select, input[type="file"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(245,158,11,.18);
}
button, .btn { padding: 12px 17px; }

/* 16px form controls prevent automatic input zoom in iPad Safari. */
input,
select,
textarea {
  font-size: 16px !important;
  line-height: 1.3;
}
textarea { min-height: 120px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }

/* Visible keyboard focus without depending on hover. */
:focus-visible {
  outline: 3px solid rgba(245,158,11,.78);
  outline-offset: 3px;
}

/* Smooth, non-destructive table scrolling on touch screens. */
.ipad-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: 12px;
}
.ipad-table-scroll > table { min-width: 680px; margin: 0; }

/* Avoid hover-only feedback sticking after a touch. */
@media (hover: none) and (pointer: coarse) {
  .btn:hover, button:hover { filter: none; }
  .item:hover img { transform: none; }
  .quiet-link:hover { color: inherit; }
  .link-danger:hover { background: transparent; }
  .item.touch-just-used img, .file-card.touch-just-used img { transform: none !important; }
  .file-actions { gap: 12px; flex-wrap: wrap; }
  .file-actions > * { min-height: 44px; }
}

/* iPad portrait and landscape layout. */
@media (min-width: 768px) and (max-width: 1366px) {
  .wrap { max-width: 1180px; padding-top: 24px; }
  .card { border-radius: 20px; padding: 24px; }
  .auth-grid { gap: 20px; }
  .gallery, .r5-gallery { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
  .preview { height: 205px; }
  .top, .student-head, .section-title { gap: 18px; }
  .group-chip { min-height: 42px; padding: 9px 13px; }
  .upload-form { gap: 12px; }
}
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  .gallery, .r5-gallery { grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); }
  .preview { height: 220px; }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .auth-grid { grid-template-columns: 1fr 1fr; }
  .upload-card { grid-template-columns: 1fr; }
}

/* Fullscreen image popup tuned to the actual iPad visual viewport. */
.image-lightbox {
  min-height: var(--grafika-vvh);
  height: var(--grafika-vvh);
  padding-top: max(12px, env(safe-area-inset-top));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  padding-left: max(12px, env(safe-area-inset-left));
  overscroll-behavior: none;
}
.image-lightbox__stage { min-height: 0; }
.image-lightbox__image {
  max-width: calc(100vw - max(24px, env(safe-area-inset-left) + env(safe-area-inset-right)));
  max-height: calc(var(--grafika-vvh) - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  touch-action: pinch-zoom pan-x pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.image-lightbox__close {
  width: 56px;
  height: 56px;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
}
.image-lightbox__caption { font-size: 16px; }

/* Safari-specific polish without disabling user zoom. */
@supports (-webkit-touch-callout: none) {
  input, select, textarea, button { border-radius: 11px; }
  input[type="file"] { padding: 10px; }
  .image-lightbox__backdrop { -webkit-backdrop-filter: blur(9px); }
}

@media (max-width: 820px) {
  .wrap {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .ipad-table-scroll > table { min-width: 620px; }
}