@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;500;600;700;800;900&display=swap');

:root {
  --ink: #26364b;
  --muted: #71839a;
  --blue: #4a91e8;
  --blue-dark: #2878d7;
  --sky: #eaf5ff;
  --line: #e2edf8;
  --white: #ffffff;
  --shadow: 0 18px 55px rgba(57, 103, 151, .12);
  font-family: 'Nunito', sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #f4f9ff; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 5%, rgba(182, 222, 255, .52), transparent 25rem),
    radial-gradient(circle at 94% 25%, rgba(255, 223, 238, .42), transparent 22rem),
    linear-gradient(180deg, #f3f9ff 0%, #f8fbff 60%, #f0f7ff 100%);
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(64, 145, 232, .48); outline-offset: 3px; }

.page-shell { width: min(1220px, calc(100% - 42px)); margin: 0 auto; padding: 26px 0 24px; }
.site-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.brand-mark {
  display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px;
  border-radius: 19px; color: #fff; font-size: 30px;
  background: linear-gradient(145deg, #75b6f4, #4d8de2 65%, #876fe6);
  box-shadow: 0 10px 22px rgba(71, 139, 222, .24);
}
.brand-copy { min-width: 0; }
.eyebrow, .section-kicker { margin: 0 0 1px; font-size: 10px; font-weight: 900; letter-spacing: .17em; color: #79a1cb; }
.brand-copy h1 { margin: 0; font: 800 30px/1 'Baloo 2', sans-serif; letter-spacing: -.025em; color: #2e4a6a; }
.brand-copy h1 span { color: #4b91e6; }
.subtitle { margin: 2px 0 0; color: #7f91a6; font-size: 13px; font-weight: 700; }
.header-side { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.status-pill { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid #dfebf7; border-radius: 999px; color: #73879b; background: rgba(255,255,255,.76); font-size: 11px; font-weight: 800; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; background: #f0b75d; border-radius: 50%; box-shadow: 0 0 0 4px rgba(240,183,93,.14); }
.status-pill.is-ready .status-dot { background: #37b982; box-shadow: 0 0 0 4px rgba(55,185,130,.14); }
.status-pill.is-error .status-dot { background: #ed6a72; box-shadow: 0 0 0 4px rgba(237,106,114,.14); }

.button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 41px; padding: 0 17px; border: 0; border-radius: 13px; cursor: pointer; font-size: 12px; font-weight: 900; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover:not(:disabled) { transform: translateY(-2px); }
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button-primary { color: white; background: linear-gradient(135deg, #5ca4f1, #397fda); box-shadow: 0 8px 18px rgba(57,127,218,.23); }
.button-primary:hover:not(:disabled) { box-shadow: 0 12px 22px rgba(57,127,218,.3); }
.start-button { min-height: 40px; }

.game-card { padding: 22px; border: 1px solid rgba(219, 234, 249, .94); border-radius: 25px; background: rgba(255,255,255,.91); box-shadow: var(--shadow); }
.stage-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 1px 14px; }
.stage-heading h2 { margin: 2px 0 0; font: 700 22px/1.15 'Baloo 2', sans-serif; letter-spacing: -.01em; color: #2d496a; }
.selected-colour { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #e5eef8; border-radius: 999px; background: #f8fbff; color: #7b8da2; font-size: 11px; font-weight: 700; }
.selected-colour strong { color: #47617f; }
.selected-dot { width: 13px; height: 13px; border: 2px solid white; border-radius: 50%; background: #2878e8; box-shadow: 0 0 0 1px rgba(48,83,122,.18); }

.drawing-stage {
  position: relative; isolation: isolate; width: 100%; aspect-ratio: 16 / 9; min-height: 410px; max-height: 690px;
  overflow: hidden; border: 5px solid #e7f1fc; border-radius: 21px;
  background: radial-gradient(circle at 50% 45%, #263d57, #122034 80%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 7px 24px rgba(40,76,116,.1);
}
#webcam { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); background: #16283f; }
#drawingCanvas { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; pointer-events: auto; cursor: crosshair; touch-action: none; }
.stage-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(13,26,45,.22), transparent 22%, transparent 80%, rgba(13,26,45,.1)); }

.palette-panel { position: absolute; z-index: 5; top: 50%; left: 17px; transform: translateY(-50%); width: 72px; padding: 12px 9px 10px; border: 1px solid rgba(255,255,255,.34); border-radius: 17px; background: rgba(246,251,255,.91); box-shadow: 0 8px 25px rgba(7,19,36,.19); backdrop-filter: blur(12px); }
.palette-label { margin-bottom: 9px; color: #6f8297; text-align: center; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.palette-grid { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; gap: 7px 5px; }
.swatch { position: relative; display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 2px solid rgba(255,255,255,.98); border-radius: 9px; background: transparent; box-shadow: 0 1px 5px rgba(19,43,69,.15); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.swatch span { display: block; width: 100%; height: 100%; border-radius: 6px; background: var(--swatch); }
.swatch:hover { transform: scale(1.1); }
.swatch.active { box-shadow: 0 0 0 2px #4a91e8, 0 2px 10px rgba(42,112,198,.28); transform: scale(1.07); }
.swatch.active::after { content: '✓'; position: absolute; right: -5px; top: -6px; display: grid; place-items: center; width: 13px; height: 13px; border: 1px solid white; border-radius: 50%; color: white; background: #3d8add; font-size: 8px; font-weight: 900; }
.swatch.holding { box-shadow: 0 0 0 3px rgba(255,255,255,.55), 0 0 0 5px rgba(74,145,232,.78); }
.swatch.holding::before { content: ''; position: absolute; inset: -5px; border-radius: 12px; background: conic-gradient(#4a91e8 var(--hold-angle, 0deg), rgba(176, 207, 237, .55) 0); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); pointer-events: none; }
.palette-hint { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 9px 0 0; color: #7890a8; font-size: 8px; font-weight: 900; line-height: 1.15; text-align: center; }
.hold-ring { width: 12px; height: 12px; border: 2px solid #80b6ee; border-top-color: transparent; border-radius: 50%; }

.top-stage-tools { position: absolute; z-index: 6; top: 14px; right: 15px; display: flex; align-items: center; gap: 9px; }
.brush-size { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: white; background: rgba(22,39,61,.53); backdrop-filter: blur(8px); font-size: 9px; font-weight: 800; }
.brush-size input { width: 72px; accent-color: #9fd0ff; cursor: pointer; }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.36); border-radius: 50%; color: white; background: rgba(22,39,61,.53); backdrop-filter: blur(8px); cursor: pointer; font-size: 15px; }

.camera-placeholder { position: absolute; z-index: 8; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 25px 140px; color: #edf6ff; text-align: center; background: linear-gradient(120deg, rgba(13,28,47,.9), rgba(20,48,76,.84)); }
.camera-placeholder.hidden { display: none; }
.placeholder-art { position: relative; display: grid; place-items: center; width: 86px; height: 86px; margin-bottom: 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 28px; background: linear-gradient(145deg, rgba(120,180,240,.32), rgba(150,129,230,.28)); box-shadow: 0 15px 35px rgba(0,0,0,.16); }
.placeholder-art span { font-size: 40px; filter: drop-shadow(0 4px 2px rgba(0,0,0,.15)); }
.placeholder-art i { position: absolute; top: 7px; right: 11px; color: #ffd76d; font-style: normal; font-size: 20px; }
.placeholder-art b { position: absolute; bottom: 12px; left: 12px; color: #ff9fc6; font-size: 12px; }
.camera-placeholder h3 { margin: 0; color: #fff; font: 700 23px/1.2 'Baloo 2', sans-serif; }
.camera-placeholder p { max-width: 410px; margin: 8px 0 17px; color: #c1d3e6; font-size: 12px; line-height: 1.6; }
.camera-placeholder small { margin-top: 11px; color: #9bb1c8; font-size: 9px; }
.placeholder-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.button-ghost { color: #eaf4ff; border: 1px solid rgba(255,255,255,.42); background: rgba(255,255,255,.12); }
.button-ghost:hover:not(:disabled) { background: rgba(255,255,255,.2); }


.gesture-cursor { position: absolute; z-index: 4; display: none; width: 21px; height: 21px; border: 3px solid white; border-radius: 50%; background: #4d9cf0; box-shadow: 0 2px 12px rgba(0,0,0,.3), 0 0 0 4px rgba(78,156,240,.3); transform: translate(-50%, -50%); pointer-events: none; }
.gesture-cursor.visible { display: block; }
.gesture-cursor.drawing { width: 16px; height: 16px; border-color: #fff; background: #ffcf5c; box-shadow: 0 0 0 4px rgba(255,207,92,.24), 0 2px 10px rgba(0,0,0,.25); }
.gesture-message { position: absolute; z-index: 7; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: calc(100% - 170px); padding: 8px 14px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: white; background: rgba(17,34,54,.6); backdrop-filter: blur(8px); font-size: 10px; font-weight: 800; text-align: center; pointer-events: none; white-space: nowrap; }
.loading-overlay { position: absolute; z-index: 10; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: #fff; background: rgba(13,29,49,.87); text-align: center; }
.loading-overlay.hidden { display: none; }
.loading-overlay strong { font: 700 18px 'Baloo 2', sans-serif; }
.loading-overlay span { color: #b9cde1; font-size: 11px; }
.loader { width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.2); border-top-color: #8bc5ff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 1px 1px; }
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 9px; }
.button-soft { color: #57718e; border: 1px solid #e1edf8; background: #f5f9fe; }
.button-danger { color: #d66f7c; border-color: #f6e4e8; background: #fff8f9; }
.button-save { color: #fff; background: linear-gradient(135deg, #45b987, #299d78); box-shadow: 0 7px 15px rgba(41,157,120,.17); }
.toolbar-tip { display: inline-flex; align-items: center; gap: 6px; margin-right: 7px; color: #8a9caf; font-size: 10px; font-weight: 800; }
.tiny-sparkle { color: #e9b94b; font-size: 16px; }

.how-to { margin: 19px 2px 0; padding: 18px 20px 15px; border: 1px solid #e1edf8; border-radius: 20px; background: rgba(255,255,255,.72); }
.how-to-title { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.how-to-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: #fff3d4; font-size: 18px; }
.how-to-title h2 { margin: 0; color: #3b5878; font: 700 17px 'Baloo 2', sans-serif; }
.how-to-title p { margin: 0; color: #93a3b5; font-size: 10px; font-weight: 700; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.step-card { position: relative; display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 12px 13px; border: 1px solid #eaf1f8; border-radius: 15px; background: #fbfdff; }
.step-number { position: absolute; top: 8px; right: 10px; color: #c2d6e9; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.step-illustration { display: grid; flex: 0 0 48px; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #eef7ff; font-size: 24px; }
.colour-illustration { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 4px; background: #fff5f0; }
.colour-illustration i { width: 12px; height: 12px; border-radius: 5px; background: #f16b7a; }
.colour-illustration i:nth-child(2) { background: #ffc64d; }
.colour-illustration i:nth-child(3) { background: #49be88; }
.colour-illustration i:nth-child(4) { background: #668ee8; }
.draw-illustration { background: #f2efff; }
.step-card h3 { margin: 0 0 3px; color: #526c89; font-size: 11px; font-weight: 900; }
.step-card p { max-width: 235px; margin: 0; color: #92a2b3; font-size: 9px; line-height: 1.5; }
.gesture-note { display: flex; align-items: center; gap: 7px; margin: 13px 0 0; color: #8297ad; font-size: 10px; }
.gesture-note strong { color: #5d7795; }
.site-footer { display: flex; justify-content: space-between; gap: 12px; padding: 18px 4px 0; color: #99aabe; font-size: 9px; font-weight: 700; }
.site-footer span:first-child { color: #7d9fc4; letter-spacing: .14em; font-weight: 900; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 24px; transform: translate(-50%, 20px); max-width: min(90vw, 520px); padding: 11px 17px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: white; background: rgba(34,55,79,.93); box-shadow: 0 9px 25px rgba(20,44,71,.2); font-size: 11px; font-weight: 800; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.toast.visible { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 760px) {
  .page-shell { width: min(100% - 22px, 640px); padding-top: 15px; }
  .site-header { flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
  .brand-mark { flex-basis: 48px; width: 48px; height: 48px; border-radius: 16px; font-size: 25px; }
  .brand-copy h1 { font-size: 26px; }
  .header-side { flex: 1 0 100%; justify-content: space-between; margin-left: 0; }
  .game-card { padding: 13px; border-radius: 19px; }
  .stage-heading { align-items: center; flex-wrap: wrap; }
  .stage-heading h2 { font-size: 19px; }
  .drawing-stage { min-height: 420px; aspect-ratio: 4 / 5; max-height: 72vh; border-radius: 15px; }
  .palette-panel { top: auto; bottom: 13px; left: 50%; transform: translateX(-50%); width: auto; padding: 7px 10px 6px; border-radius: 13px; }
  .palette-label { margin-bottom: 5px; font-size: 7px; }
  .palette-grid { grid-template-columns: repeat(9, 1fr); gap: 4px; }
  .swatch { width: 22px; height: 22px; border-radius: 7px; }
  .swatch span { border-radius: 5px; }
  .palette-hint { display: none; }
  .top-stage-tools { top: 10px; right: 10px; }
  .brush-size { padding: 6px 8px; }
  .brush-size input { width: 55px; }
  .camera-placeholder { padding: 20px 22px 100px; }
  .camera-placeholder h3 { font-size: 20px; }
  .camera-placeholder p { font-size: 11px; }
  .placeholder-actions { width: 100%; flex-direction: column; align-items: stretch; max-width: 245px; }
  .placeholder-actions .button { width: 100%; }
  .placeholder-art { width: 72px; height: 72px; }
  .placeholder-art span { font-size: 34px; }
  .gesture-message { bottom: 75px; max-width: calc(100% - 30px); white-space: normal; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-left, .toolbar-right { justify-content: space-between; }
  .toolbar-tip { display: none; }
  .toolbar .button { flex: 1; padding-inline: 10px; }
  .how-to { padding: 14px; }
  .steps-grid { grid-template-columns: 1fr; }
  .step-card { min-height: 73px; }
  .step-card p { max-width: none; }
  .site-footer { flex-direction: column; align-items: center; text-align: center; }
}

@media (max-width: 390px) {
  .status-pill { padding: 8px 10px; font-size: 10px; }
  .start-button { padding-inline: 12px; font-size: 11px; }
  .selected-colour { font-size: 10px; }
  .swatch { width: 19px; height: 19px; }
  .palette-panel { padding-inline: 7px; }
  .palette-grid { gap: 3px; }
  .brush-size span { display: none; }
}


/* WARNA DIRIKU — 3D hobby sticker collection */
.sticker-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.placed-sticker{position:absolute;display:grid;place-items:center;width:74px;height:74px;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.96);border-radius:25px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(235,244,255,.72));box-shadow:0 10px 23px rgba(10,29,55,.26),inset 0 2px 4px rgba(255,255,255,.9);font-size:47px;line-height:1;cursor:grab;pointer-events:auto;touch-action:none;user-select:none;backdrop-filter:blur(5px);transition:box-shadow .15s,transform .15s}
.placed-sticker:active,.placed-sticker.moving{cursor:grabbing;transform:translate(-50%,-50%) scale(1.08);box-shadow:0 14px 28px rgba(10,29,55,.32),0 0 0 4px rgba(142,192,255,.3)}
.sticker-remove{position:absolute;top:-8px;right:-8px;display:grid;place-items:center;width:23px;height:23px;border:2px solid #fff;border-radius:50%;background:#f27f9c;color:#fff;font-size:13px;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 3px 9px rgba(25,36,58,.22);opacity:0;transition:opacity .15s}
.placed-sticker:hover .sticker-remove,.placed-sticker:focus-within .sticker-remove{opacity:1}
.drag-sticker-ghost{position:fixed;z-index:1000;display:grid;place-items:center;width:70px;height:70px;border:2px solid #fff;border-radius:24px;background:linear-gradient(145deg,#fff,#e9f3ff);box-shadow:0 15px 35px rgba(31,67,111,.25);font-size:46px;pointer-events:none;transform:translate(-50%,-50%) rotate(-7deg) scale(1.08)}
.drawing-stage.is-drop-target{outline:5px solid rgba(158,125,237,.5);outline-offset:3px}
.sticker-dock{margin:18px 0 2px;padding:18px 18px 14px;border:1px solid #e6e5fb;border-radius:20px;background:linear-gradient(135deg,rgba(248,244,255,.96),rgba(239,248,255,.96));box-shadow:0 8px 20px rgba(95,112,163,.07)}
.sticker-dock-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.sticker-dock-heading .section-kicker{margin:0;color:#a181d2;font-size:9px}.sticker-dock-heading h3{margin:1px 0 3px;color:#3b5278;font:800 21px 'Baloo 2',sans-serif}.sticker-dock-heading h3 span{color:#ffb95c}.sticker-dock-heading p:last-child{margin:0;color:#8999b0;font-size:10px;font-weight:700;line-height:1.5}.sticker-count{flex:none;padding:8px 13px;border:1px solid #e7defc;border-radius:999px;background:white;color:#9871c6;font-size:10px;font-weight:900;box-shadow:0 4px 12px rgba(128,100,181,.08)}
.sticker-list{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:9px}.sticker-choice{min-width:0;min-height:86px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:7px 3px 6px;border:1px solid #e4e9f5;border-radius:15px;background:linear-gradient(150deg,#fff,#f8faff);color:#71819d;cursor:grab;touch-action:none;user-select:none;box-shadow:0 5px 12px rgba(76,103,150,.07);transition:transform .17s,box-shadow .17s,border-color .17s}.sticker-choice:hover{transform:translateY(-4px);border-color:#c9b3f0;box-shadow:0 10px 18px rgba(122,100,171,.14)}.sticker-choice:active{cursor:grabbing;transform:scale(.96)}.sticker-emoji{width:48px;height:48px;display:grid;place-items:center;border-radius:17px;background:radial-gradient(circle at 30% 25%,#fff 0%,#fff9 24%,#e9e4ff 100%);font-size:31px;filter:drop-shadow(0 4px 2px rgba(61,76,112,.2));box-shadow:inset 0 2px 4px #fff,0 4px 8px rgba(111,107,168,.12)}.sticker-choice:nth-child(3n+1) .sticker-emoji{background:radial-gradient(circle at 30% 25%,#fff 0%,#fff8d9 100%)}.sticker-choice:nth-child(3n+2) .sticker-emoji{background:radial-gradient(circle at 30% 25%,#fff 0%,#e0f6ff 100%)}.sticker-choice:nth-child(3n) .sticker-emoji{background:radial-gradient(circle at 30% 25%,#fff 0%,#fbe3f0 100%)}.sticker-choice b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;font-weight:900}.sticker-tip{display:flex;align-items:center;gap:7px;margin:12px 1px 0;color:#8c91b0;font-size:10px;font-weight:800}.sticker-tip span{font-size:15px}.sticker-illustration{background:#f4edff!important}
.header-side .status-pill{background:rgba(255,255,255,.9)}.game-card{border-color:#e5e4fa;box-shadow:0 20px 55px rgba(96,111,160,.11)}.drawing-stage{border-color:#ece5ff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 12px 28px rgba(68,89,133,.14)}
@media(max-width:900px){.sticker-list{grid-template-columns:repeat(5,minmax(0,1fr))}.sticker-choice{min-height:82px}}
@media(max-width:560px){.sticker-dock{padding:14px 11px}.sticker-dock-heading{align-items:flex-start}.sticker-dock-heading h3{font-size:19px}.sticker-dock-heading p:last-child{font-size:9px}.sticker-count{padding:7px 9px;font-size:9px}.sticker-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.sticker-choice{min-height:73px;border-radius:12px}.sticker-emoji{width:42px;height:42px;font-size:27px;border-radius:14px}.sticker-choice b{font-size:7px}.placed-sticker{width:57px;height:57px;border-radius:20px;font-size:37px}.sticker-remove{opacity:1;width:20px;height:20px;font-size:11px}.sticker-tip{font-size:9px;line-height:1.45}}


/* Panel Guru + dialog rekod karya */
.hidden{display:none!important}
.teacher-open-button{color:#8554bd;border:1px solid #eadcfb;background:linear-gradient(135deg,#fff,#f7efff);box-shadow:0 7px 17px rgba(134,91,188,.10)}
.teacher-open-button:hover{box-shadow:0 10px 20px rgba(134,91,188,.17)}
.modal-backdrop{position:fixed;z-index:1200;inset:0;display:grid;place-items:center;padding:18px;background:rgba(22,38,61,.58);backdrop-filter:blur(8px)}
.dialog-card{position:relative;width:min(100%,460px);padding:30px;border:1px solid rgba(255,255,255,.85);border-radius:26px;background:linear-gradient(145deg,#fff,#f6f9ff 65%,#fff7fc);box-shadow:0 25px 80px rgba(12,29,55,.27);animation:dialogPop .22s ease-out}
@keyframes dialogPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.dialog-close{position:absolute;top:13px;right:14px;width:34px;height:34px;border:1px solid #e7edf7;border-radius:50%;background:#fff;color:#8293a8;font-size:22px;line-height:1;cursor:pointer}
.dialog-icon{display:grid;place-items:center;width:60px;height:60px;margin-bottom:14px;border:1px solid #f3e5fc;border-radius:20px;background:linear-gradient(145deg,#fff2cf,#f4e8ff);font-size:29px;box-shadow:0 9px 20px rgba(120,94,162,.12)}
.teacher-icon{background:linear-gradient(145deg,#e3f4ff,#f0e6ff)}
.dialog-card h2{margin:3px 35px 5px 0;color:#2f4d70;font:800 25px/1.15 'Baloo 2',sans-serif}
.dialog-description{margin:0 0 18px;color:#8192a8;font-size:12px;line-height:1.6}
.field-label{display:block;margin:12px 0 6px;color:#586f8a;font-size:11px;font-weight:900}
.dialog-input{width:100%;height:47px;padding:0 14px;border:1px solid #dfeaf7;border-radius:13px;outline:none;background:#fff;color:#354d68;font-size:13px;font-weight:700;transition:border .15s,box-shadow .15s}
.dialog-input:focus{border-color:#83b8ee;box-shadow:0 0 0 4px rgba(91,161,232,.13)}
.privacy-hint{margin:13px 0 0;color:#91a0b2;font-size:10px;line-height:1.5}
.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
.login-error{margin:9px 0 0;color:#d65f70;font-size:11px;font-weight:800}
.teacher-dashboard{position:fixed;z-index:1100;inset:0;overflow:auto;background:linear-gradient(145deg,#f3f8ff,#fbf7ff 55%,#f6fbff);padding:24px}
.teacher-dashboard-shell{width:min(1320px,100%);margin:0 auto}
.teacher-dashboard-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 19px;border:1px solid #e3edf8;border-radius:22px;background:rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(71,100,145,.08)}
.teacher-dashboard-brand{display:flex;align-items:center;gap:13px}.teacher-dashboard-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:linear-gradient(145deg,#dff2ff,#eee6ff);font-size:27px}.teacher-dashboard-brand h2{margin:0;color:#314f72;font:800 26px 'Baloo 2',sans-serif}.teacher-dashboard-brand p:last-child{margin:0;color:#8797aa;font-size:11px;font-weight:700}
.teacher-dashboard-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.import-backup-label{display:inline-flex;align-items:center;cursor:pointer}
.teacher-notice{display:flex;align-items:flex-start;gap:10px;margin:15px 0;padding:12px 15px;border:1px solid #f4e8c9;border-radius:14px;background:#fffaf0;color:#89764d;font-size:11px;font-weight:700;line-height:1.55}
.teacher-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:15px 0}.teacher-stat-card{display:flex;align-items:center;gap:13px;padding:17px 19px;border:1px solid #e4edf8;border-radius:18px;background:#fff;box-shadow:0 7px 20px rgba(68,103,150,.06)}.stat-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#eef6ff;font-size:23px}.teacher-stat-card:nth-child(2) .stat-icon{background:#fff0f7}.teacher-stat-card:nth-child(3) .stat-icon{background:#f4efff}.teacher-stat-card div{display:flex;flex-direction:column}.teacher-stat-card strong{color:#315276;font:800 25px 'Baloo 2',sans-serif;line-height:1}.teacher-stat-card div span{margin-top:4px;color:#8b9caf;font-size:10px;font-weight:800}
.teacher-gallery-panel{padding:20px;border:1px solid #e3edf8;border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 12px 32px rgba(71,100,145,.07)}.teacher-gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.teacher-gallery-heading h3{margin:1px 0 2px;color:#315073;font:800 22px 'Baloo 2',sans-serif}.teacher-gallery-heading p:last-child{margin:0;color:#8999ad;font-size:10px;font-weight:700}.button-danger-soft{color:#d46f7d;border:1px solid #f5dfe5;background:#fff6f8}.teacher-filter-row{display:flex;gap:9px;margin:17px 0}.teacher-search{display:flex;align-items:center;gap:8px;flex:1;min-width:180px;height:42px;padding:0 12px;border:1px solid #e1ebf7;border-radius:12px;background:#fbfdff;color:#8ca0b7}.teacher-search input{width:100%;border:0;outline:0;background:transparent;color:#3b5572;font:700 11px 'Nunito',sans-serif}.teacher-select{min-width:150px;padding:0 12px;border:1px solid #e1ebf7;border-radius:12px;background:#fbfdff;color:#647d98;font:800 10px 'Nunito',sans-serif}
.teacher-gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.teacher-work-card{overflow:hidden;border:1px solid #e6edf7;border-radius:17px;background:#fff;box-shadow:0 6px 18px rgba(67,97,137,.07);transition:transform .16s,box-shadow .16s}.teacher-work-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(67,97,137,.12)}.teacher-work-thumb{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#eef4fb}.teacher-work-body{padding:12px}.teacher-work-body h4{overflow:hidden;margin:0 0 5px;color:#3a5575;font:800 15px 'Baloo 2',sans-serif;text-overflow:ellipsis;white-space:nowrap}.teacher-class-chip{display:inline-flex;padding:4px 8px;border:1px solid #e8e0fa;border-radius:999px;background:#f7f1ff;color:#8965b9;font-size:9px;font-weight:900}.teacher-work-body p{margin:8px 0 10px;color:#98a5b5;font-size:9px;font-weight:700}.teacher-work-actions{display:flex;flex-wrap:wrap;gap:5px}.teacher-work-actions .button{min-height:32px;flex:1;padding:0 8px;border-radius:9px;font-size:9px}.teacher-empty-state{padding:55px 20px;text-align:center}.teacher-empty-state>div{font-size:42px}.teacher-empty-state h3{margin:7px 0;color:#476382;font:800 20px 'Baloo 2',sans-serif}.teacher-empty-state p{max-width:460px;margin:0 auto;color:#91a0b2;font-size:11px;line-height:1.6}.teacher-footer-note{margin:14px 4px;color:#a0adbc;font-size:9px;text-align:center}
.preview-dialog{position:relative;width:min(100%,900px);max-height:92vh;overflow:auto;padding:22px;border:1px solid white;border-radius:22px;background:#fff;box-shadow:0 25px 80px rgba(12,29,55,.27)}.preview-dialog-heading h2{margin:0;color:#315073;font:800 23px 'Baloo 2',sans-serif}.preview-dialog-heading p:last-child{margin:2px 0 14px;color:#91a0b2;font-size:10px}.preview-dialog>img{display:block;max-width:100%;max-height:65vh;margin:0 auto;border:1px solid #edf1f7;border-radius:13px;object-fit:contain;background:#f7f9fc}.preview-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:14px}.preview-actions a{text-decoration:none}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:1000px){.teacher-gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.teacher-dashboard-header{align-items:flex-start;flex-direction:column}.teacher-dashboard-actions{justify-content:flex-start}}
@media(max-width:700px){.teacher-dashboard{padding:10px}.teacher-dashboard-header{padding:13px;border-radius:17px}.teacher-dashboard-actions{width:100%}.teacher-dashboard-actions .button,.teacher-dashboard-actions label{flex:1;min-height:36px;padding:0 8px;font-size:9px}.teacher-stat-grid{gap:7px}.teacher-stat-card{gap:7px;padding:11px 9px}.stat-icon{width:35px;height:35px;border-radius:11px;font-size:18px}.teacher-stat-card strong{font-size:20px}.teacher-stat-card div span{font-size:8px}.teacher-gallery-panel{padding:13px}.teacher-gallery-heading{align-items:flex-start;flex-direction:column}.teacher-filter-row{flex-wrap:wrap}.teacher-search{flex-basis:100%}.teacher-select{flex:1;min-width:0;height:40px}.teacher-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.teacher-work-actions .button{font-size:8px}.dialog-card{padding:23px 19px}.preview-dialog{padding:16px}}
@media(max-width:420px){.teacher-open-button{font-size:10px;padding:0 10px}.header-side{flex-wrap:wrap}.header-side .status-pill{order:3;flex-basis:100%}.teacher-gallery-grid{grid-template-columns:1fr 1fr}.teacher-work-actions{flex-direction:column}.teacher-work-actions .button{width:100%}}