:root{--avatar-accent-1:var(--odin-info);--avatar-radius-module:18px;--avatar-radius-box:14px}
.certificate-photo-page{display:grid;gap:24px}.certificate-photo-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}.certificate-photo-head h1{margin:.3rem 0;font-size:clamp(1.55rem,3vw,2.2rem)}.certificate-photo-head p{margin:0;color:var(--bs-secondary-color)}.certificate-photo-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:20px}.certificate-photo-editor,.certificate-photo-info{background:var(--bs-tertiary-bg);border:1px solid rgba(127,150,168,.2);border-radius:14px;padding:20px}.certificate-photo-section-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:18px}.certificate-photo-section-head>span{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:rgba(13,202,240,.12);color:#0dcaf0}.certificate-photo-section-head small{font-size:.68rem;letter-spacing:.09em;color:#65d9ef}.certificate-photo-section-head h2{font-size:1.08rem;margin:2px 0}.certificate-photo-section-head p{margin:0;color:var(--bs-secondary-color);font-size:.88rem}.certificate-photo-workspace{display:grid;grid-template-columns:minmax(240px,380px) minmax(220px,1fr);gap:24px;align-items:start}.certificate-photo-canvas-wrap{position:relative;max-width:380px;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#e9eef2;box-shadow:0 12px 35px rgba(0,0,0,.25)}.certificate-photo-canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.certificate-photo-canvas-wrap canvas:active{cursor:grabbing}.certificate-photo-guide{position:absolute;inset:0;pointer-events:none;border:2px solid rgba(255,255,255,.7);box-shadow:inset 0 0 0 999px rgba(0,0,0,.08)}.certificate-photo-head-guide{position:absolute;width:47%;height:48%;left:26.5%;top:15%;border:2px dashed rgba(255,255,255,.9);border-radius:48% 48% 44% 44%}.certificate-photo-eye-line{position:absolute;left:18%;right:18%;top:38%;border-top:1px dashed rgba(13,202,240,.95)}.certificate-photo-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#587080;pointer-events:none}.certificate-photo-empty i{font-size:2rem;margin-bottom:10px}.certificate-photo-empty small{display:block}.certificate-photo-empty[hidden]{display:none}.certificate-photo-controls{display:grid;gap:14px}.certificate-photo-upload{display:flex;align-items:center;gap:12px;padding:14px;border:1px dashed #0dcaf0;border-radius:10px;cursor:pointer;background:rgba(13,202,240,.06)}.certificate-photo-upload>i{font-size:1.4rem;color:#0dcaf0}.certificate-photo-upload span,.certificate-photo-controls label>span{display:flex;justify-content:space-between;gap:10px}.certificate-photo-upload span{display:block}.certificate-photo-upload small{display:block;color:var(--bs-secondary-color)}.certificate-photo-controls input[type=range]{width:100%;accent-color:#0dcaf0}.certificate-photo-controls form,.certificate-photo-controls form button{width:100%}.certificate-photo-info ul{list-style:none;padding:0;margin:18px 0;display:grid;gap:13px}.certificate-photo-info li{display:flex;gap:12px}.certificate-photo-info li>i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(25,135,84,.14);color:#51cf86;flex:0 0 auto}.certificate-photo-info li span{display:grid}.certificate-photo-info li small{color:var(--bs-secondary-color)}.certificate-photo-example{padding:16px;border-radius:12px;background:rgba(13,202,240,.06);text-align:center}.certificate-photo-example>div{position:relative;width:112px;height:140px;margin:0 auto 10px;border-radius:8px;background:linear-gradient(#dce7ec,#aabfc9);overflow:hidden;display:grid;place-items:center}.certificate-photo-example>div i{font-size:64px;color:#fff}.certificate-photo-example>div span{position:absolute;width:58px;height:76px;top:22px;border:2px dashed #0dcaf0;border-radius:50%}.certificate-photo-example small{display:block;color:var(--bs-secondary-color)}.certificate-photo-avatar-note{display:flex;gap:12px;padding:14px;border-radius:10px;background:rgba(255,193,7,.08);color:var(--bs-secondary-color)}.certificate-photo-avatar-note i{color:#ffc107;margin-top:3px}.certificate-photo-avatar-note p{margin:0;font-size:.84rem}.certificate-photo-current{display:flex;align-items:center;gap:12px;margin-top:15px;padding-top:15px;border-top:1px solid rgba(127,150,168,.2)}.certificate-photo-current img{width:52px;height:65px;object-fit:cover;border-radius:7px}.certificate-photo-current span{display:grid}.certificate-photo-current small{color:var(--bs-secondary-color)}@media(max-width:991px){.certificate-photo-grid{grid-template-columns:1fr}}@media(max-width:680px){.certificate-photo-head{align-items:flex-start;flex-direction:column}.certificate-photo-workspace{grid-template-columns:1fr}.certificate-photo-canvas-wrap{width:min(100%,360px);margin:auto}.certificate-photo-editor,.certificate-photo-info{padding:15px}}.certificate-photo-canvas-wrap{box-shadow:none;border:1px solid var(--odin-line);padding:clamp(.65rem,1.5vw,1rem);background:var(--odin-panel,#0b1826)}.certificate-photo-guide{inset:clamp(.65rem,1.5vw,1rem);border-color:#8796a1;box-shadow:none}.certificate-photo-head-guide{border-color:#8796a1}.certificate-photo-eye-line{border-color:#8796a1}.certificate-photo-controls{gap:.9rem}.certificate-photo-upload{padding:1rem;border-color:color-mix(in srgb,var(--avatar-accent-1,#0dcaf0) 45%,transparent);border-radius:var(--avatar-radius-box,12px);background:color-mix(in srgb,var(--avatar-accent-1,#0dcaf0) 5%,transparent)}.certificate-photo-upload:hover{border-color:var(--avatar-accent-1,#0dcaf0)}.certificate-photo-upload>i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--avatar-accent-1,#0dcaf0) 12%,transparent);color:var(--avatar-accent-1,#0dcaf0)}.certificate-photo-range,.certificate-photo-rotation{display:grid;gap:.55rem;padding:.9rem;border:1px solid var(--odin-line);border-radius:var(--avatar-radius-box,12px);background:transparent}.certificate-photo-range>span,.certificate-photo-rotation>span{display:flex;align-items:center;gap:.5rem;color:var(--odin-text)}.certificate-photo-range output{margin-left:auto;color:var(--avatar-accent-1,#0dcaf0);font-weight:800}.certificate-photo-range input{accent-color:var(--avatar-accent-1,#0dcaf0)}.certificate-photo-rotation>div{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.certificate-photo-rotation button{min-width:0}.certificate-photo-hint{display:flex;align-items:flex-start;gap:.7rem;color:#bcd2df}.certificate-photo-hint>i{margin-top:.2rem;color:var(--avatar-accent-1,#0dcaf0)}.certificate-photo-hint span{display:grid}.certificate-photo-hint small{color:var(--odin-muted);font-size:.74rem}.certificate-photo-controls form button{min-height:46px}@media(max-width:420px){.certificate-photo-rotation>div{grid-template-columns:1fr}}.certificate-photo-rotation>span{display:flex;align-items:center;gap:.5rem}.certificate-photo-rotation output{margin-left:auto;color:var(--avatar-accent-1,#0dcaf0);font-weight:800}.certificate-photo-rotation input{width:100%;accent-color:var(--avatar-accent-1,#0dcaf0)}.certificate-photo-rotation>small{color:var(--odin-muted);font-size:.72rem;line-height:1.4}.certificate-photo-rotation>div{display:none}.certificate-photo-controls{--certificate-photo-accent:var(--avatar-accent-1);color:var(--odin-text)}.certificate-photo-controls .certificate-photo-upload,.certificate-photo-controls .certificate-photo-range,.certificate-photo-controls .certificate-photo-rotation{border-color:color-mix(in srgb,var(--certificate-photo-accent) 45%,var(--odin-line))}.certificate-photo-controls .certificate-photo-upload{background:color-mix(in srgb,var(--certificate-photo-accent) 5%,transparent)}.certificate-photo-controls .certificate-photo-upload:hover{border-color:var(--certificate-photo-accent)}.certificate-photo-controls .certificate-photo-upload>i{color:var(--certificate-photo-accent);background:color-mix(in srgb,var(--certificate-photo-accent) 12%,transparent)}.certificate-photo-controls output,.certificate-photo-controls .certificate-photo-hint>i{color:var(--certificate-photo-accent)}.certificate-photo-controls input[type=range]{accent-color:var(--certificate-photo-accent)}