:root{--stie-teal:#1d6971;--stie-teal-dark:#15535b;--stie-ink:#203039;--stie-muted:#687881;--stie-line:#e2e9ea;--stie-canvas:#f6f8f8;--stie-sidebar:#12353d}
*{box-sizing:border-box}
body{background:var(--stie-canvas);color:var(--stie-ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:.94rem}
.ui-icon{width:19px;height:19px;flex:none;vertical-align:-.22em}
.app-header{position:sticky;top:0;z-index:1020;background:#fff;border-bottom:1px solid var(--stie-line);box-shadow:0 2px 12px rgba(20,55,61,.035)}
.app-header-inner{display:flex;align-items:center;gap:28px;max-width:1840px;min-height:70px;margin:auto;padding:0 32px}
.app-brand{display:flex;align-items:center;gap:10px;flex:none;color:var(--stie-ink);text-decoration:none}.app-brand:hover{color:var(--stie-ink)}
.brand-mark{width:38px;height:38px;border-radius:10px;background:#d7ece8;color:#145761;display:grid;place-items:center;flex:none;font-size:.82rem;font-weight:800;letter-spacing:.02em}
.brand-copy,.login-brand>div:last-child{display:flex;flex-direction:column;line-height:1.25}
.brand-copy strong{font-size:.9rem;letter-spacing:-.02em}.brand-copy span{color:#71858b;font-size:.72rem;margin-top:3px}
.app-navigation{min-width:0;justify-content:space-between;gap:16px}.app-nav-links{display:flex;flex-direction:row;align-items:center;gap:4px}
.app-nav-links .nav-link{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;color:#52666d;font-size:.84rem;font-weight:600;white-space:nowrap;transition:background .16s,color .16s}
.app-nav-links .nav-link .ui-icon{width:17px;height:17px;color:#718b8f}.app-nav-links .nav-link:hover{background:#f1f7f5;color:var(--stie-teal)}
.app-nav-links .nav-link.active{background:#e7f3f1;color:#164f58}.app-nav-links .nav-link.active .ui-icon{color:var(--stie-teal)}
.app-account{display:flex;align-items:center;gap:12px;margin-left:auto;flex:none}.app-username{color:#62757c;font-size:.8rem;font-weight:650}.app-account form{margin:0}
.app-menu-toggle{border:1px solid #d3dfe1;border-radius:8px;color:#345961;width:38px;height:38px;padding:0;font-size:1.2rem;line-height:1}
.app-main{min-width:0;min-height:calc(100vh - 70px)}.app-content{max-width:1360px;margin:0 auto}
.app-content>h1,.app-content>div>div>h1{letter-spacing:-.025em}.eyebrow{color:var(--stie-teal);font-size:.68rem;font-weight:800;letter-spacing:.14em}
.card{border:1px solid var(--stie-line);border-radius:14px;box-shadow:0 3px 18px rgba(20,55,61,.035)}.card-body{padding:1.35rem}.card-header{padding:1rem 1.35rem;border-color:var(--stie-line)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;font-weight:600;line-height:1.4;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-sm{gap:5px}
.btn-primary{--bs-btn-bg:var(--stie-teal);--bs-btn-border-color:var(--stie-teal);--bs-btn-hover-bg:var(--stie-teal-dark);--bs-btn-hover-border-color:var(--stie-teal-dark);--bs-btn-active-bg:var(--stie-teal-dark);--bs-btn-active-border-color:var(--stie-teal-dark)}
.btn-outline-secondary{--bs-btn-color:#47616a;--bs-btn-border-color:#d3dfe1;--bs-btn-hover-bg:#ebf3f3;--bs-btn-hover-color:#215761;--bs-btn-hover-border-color:#b9d3d5;--bs-btn-active-bg:#ebf3f3;--bs-btn-active-color:#215761;--bs-btn-active-border-color:#b9d3d5}
.btn-link{font-weight:600}.form-control,.form-select{border-color:#d6e0e2;border-radius:8px;min-height:40px;background-color:#fff}.form-control-sm,.form-select-sm{min-height:32px;border-radius:6px}
.form-control:focus,.form-select:focus,.form-check-input:focus{border-color:#73afb3;box-shadow:0 0 0 .22rem rgba(29,105,113,.12)}.form-check-input:checked{background-color:var(--stie-teal);border-color:var(--stie-teal)}
.form-label{font-size:.82rem;font-weight:650;color:#43545c;margin-bottom:.42rem}.form-text,.text-secondary{color:var(--stie-muted)!important}.alert{border-radius:10px}.badge{border-radius:6px;font-weight:650;padding:.42em .65em}
.table-responsive.border.rounded{border-color:var(--stie-line)!important;border-radius:12px!important;background:#fff;box-shadow:0 3px 18px rgba(20,55,61,.035)}
.table{--bs-table-color:var(--stie-ink);--bs-table-border-color:#edf1f2;font-size:.88rem}.table>:not(caption)>*>*{padding:.78rem .9rem}.table-sm>:not(caption)>*>*{padding:.55rem .55rem}
.table thead th{background:#f7faf9!important;color:#5e7078;font-size:.71rem;font-weight:750;text-transform:uppercase;letter-spacing:.045em;white-space:nowrap;border-bottom:1px solid var(--stie-line)}
.table tbody tr:last-child td,.table tbody tr:last-child th{border-bottom:0}.table-hover tbody tr:hover>*{--bs-table-bg-state:#f5faf9}.position-input{min-width:70px}
.position-field-panel{border:1px solid var(--stie-line);border-radius:11px;background:#f8fbfa;padding:17px}.position-field-panel[hidden]{display:none!important}.position-field-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px}.position-field-heading strong{font-size:.88rem}.position-field-heading span{font-size:.68rem;color:#547b7e;background:#e6f2ef;border-radius:20px;padding:5px 9px}.position-field-panel .form-label{font-size:.76rem}
.empty-table-cell{padding:2.6rem 1rem!important}.empty-state{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}.empty-state-icon{width:42px;height:42px;border-radius:12px;background:#eaf5f2;color:var(--stie-teal);display:grid;place-items:center;margin-bottom:4px}.empty-state strong{font-size:.9rem}.empty-state span{font-size:.78rem;color:var(--stie-muted)}
.dashboard-hero{display:flex;align-items:center;justify-content:space-between;gap:30px;min-height:260px;padding:38px 44px;border:1px solid #d6e8e5;border-radius:17px;background:linear-gradient(110deg,#eaf5f2 0%,#f3f9f7 61%,#e3f1ed 100%);overflow:hidden;position:relative}
.hero-copy{position:relative;z-index:1}.hero-copy h1{font-size:clamp(1.8rem,3vw,2.75rem);font-weight:750;letter-spacing:-.045em;line-height:1.12;margin:.65rem 0 .8rem}.hero-copy p{color:#597078;max-width:475px;line-height:1.6;margin-bottom:1.35rem}
.hero-decoration{position:relative;flex:0 0 275px;height:188px;margin-right:12px}.hero-paper{position:absolute;width:190px;height:165px;border-radius:9px;background:#fff;box-shadow:0 14px 30px rgba(23,87,89,.12);border:1px solid #d5e6e3}
.hero-paper-back{right:10px;top:14px;transform:rotate(12deg);background:#d9ebe7}.hero-paper-front{right:47px;top:6px;transform:rotate(-7deg);padding:26px 23px}
.hero-paper-seal{border:2px solid #87b8b3;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;color:#4b918f;font-size:.63rem;font-weight:800;margin:0 auto 18px}.hero-paper-line{height:5px;border-radius:10px;background:#d8e6e3;width:84%;margin:11px auto}.hero-paper-line.long{width:100%}.hero-paper-line.short{width:54%}
.dashboard-stats{margin-top:17px}.stat-card{background:#fff;border:1px solid var(--stie-line);border-radius:13px;padding:20px 22px;min-height:143px;box-shadow:0 3px 18px rgba(20,55,61,.035);position:relative}
.stat-icon{width:37px;height:37px;background:#eaf5f2;color:var(--stie-teal);display:grid;place-items:center;border-radius:10px;position:absolute;right:20px;top:19px}.stat-icon .ui-icon{width:19px;height:19px}
.stat-number{font-size:2rem;font-weight:750;line-height:1.1;letter-spacing:-.055em;margin-top:18px}.stat-label{color:#72828a;font-size:.79rem;margin-top:7px}
.dashboard-section .card-body{padding:24px 27px 17px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.section-heading h2{font-weight:700;letter-spacing:-.025em;margin-top:5px}
.workflow-link{display:flex;align-items:center;gap:16px;padding:14px 0;color:var(--stie-ink);text-decoration:none;border-top:1px solid #eaf0f0}.workflow-link:hover{color:var(--stie-teal)}.workflow-link>.ui-icon{margin-left:auto;color:#8ca7ab;width:17px;height:17px}
.workflow-number{font-size:.7rem;font-weight:750;color:var(--stie-teal);background:#e9f5f2;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}.workflow-copy{display:flex;flex-direction:column;gap:3px}.workflow-copy strong{font-size:.86rem}.workflow-copy small{font-size:.74rem;color:#7b8b91}
.dashboard-note{background:#f9fbfa}.dashboard-note .card-body{padding:25px}.dashboard-note h2{font-weight:700;letter-spacing:-.025em;margin:17px 0 9px}.dashboard-note p{font-size:.85rem;line-height:1.65}
.note-icon{width:42px;height:42px;border-radius:10px;background:#e7f2ef;color:var(--stie-teal);display:grid;place-items:center}.text-link{display:inline-flex;align-items:center;gap:7px;color:var(--stie-teal);font-size:.82rem;font-weight:700;text-decoration:none}.text-link:hover{text-decoration:underline}.text-link .ui-icon{width:15px;height:15px}
.public-page{background:linear-gradient(145deg,#eff5f3,#f8faf9 58%,#e9f2f0);min-height:100vh}.public-content{max-width:1000px}.login-shell{max-width:430px;margin:5vh auto 0}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:27px}
.login-brand .brand-mark{width:44px;height:44px;background:var(--stie-sidebar);color:#fff}.login-brand strong{font-size:.92rem}.login-brand span{font-size:.75rem;color:#6c8087;margin-top:4px}.login-card{box-shadow:0 22px 55px rgba(20,65,68,.11)}.login-card h1{font-weight:750;letter-spacing:-.035em}.login-caption{text-align:center;color:#8a9b9e;font-size:.75rem;margin-top:23px}.login-card .btn{height:44px}
@media(min-width:992px){.app-navigation.collapse{display:flex!important}}
.app-main main:has(.template-editor){max-width:1660px!important}.template-editor .card-body{padding:1.2rem}.template-editor .card h2{font-weight:700;letter-spacing:-.02em}
.template-preview-panel{position:sticky;top:92px;max-height:calc(100vh - 110px);overflow:auto}.template-preview-panel .card-header{position:sticky;top:0;z-index:2;background:#fff!important}
.template-save-bar{position:sticky;bottom:0;background:#fff;border:1px solid var(--stie-line);border-radius:10px;padding:12px 14px;z-index:3;box-shadow:0 -5px 20px rgba(29,66,69,.055)}
.preview-stage{width:100%;position:relative;background:#fff;border:1px solid #cbd5da;overflow:hidden}.diploma-sheet{position:absolute;top:0;left:0;width:1122.52px;height:793.70px;background:#fff;color:#080808;font-family:"Times New Roman",Times,serif;transform-origin:top left}
.sheet-grid{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}.sheet-grid line{vector-effect:non-scaling-stroke;shape-rendering:crispEdges;stroke-width:1}.sheet-grid .grid-minor{stroke:rgba(29,105,113,.14)}.sheet-grid .grid-major{stroke:rgba(29,105,113,.34)}.sheet-grid .grid-center{stroke:rgba(201,110,40,.7);stroke-dasharray:5 4;shape-rendering:auto}
.sheet-grid[hidden]{display:none}
.sheet-grid.center-active .grid-center-x{stroke:rgba(16,134,105,.9);stroke-width:2;stroke-dasharray:none}
.canvas-field{position:absolute;z-index:2;line-height:1.08;overflow-wrap:break-word;cursor:move;touch-action:none;border:1px dashed transparent;user-select:none}.canvas-field:hover,.canvas-field:focus,.canvas-selected{outline:1.5px solid #24636a!important;background:rgba(36,99,106,.08)}.canvas-empty{color:#667782;border-color:#cbd5da;background:rgba(36,99,106,.04)}
.canvas-field.canvas-centered{outline:2px solid #19875f!important;background:rgba(25,135,95,.1)}
.canvas-qr{position:absolute;z-index:2;border:2px dashed #607a80;background:#f1f5f5;color:#35545b;display:flex;align-items:center;justify-content:center;text-align:center;font:bold 18px Arial,sans-serif;cursor:move;touch-action:none;user-select:none}.canvas-qr-enabled{border-color:#24636a;background:#d9eded;color:#194e55}.canvas-qr-warning{border-color:#b74242;background:#fbe9e9;color:#8f2828}.canvas-qr[hidden]{display:none}
.editor-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:.75rem}.editor-help{position:relative;margin-left:auto}.editor-help summary{list-style:none;width:30px;height:30px;border:1px solid var(--stie-line);border-radius:50%;display:grid;place-items:center;font-weight:700;color:var(--stie-teal);background:#fff;cursor:pointer}.editor-help summary::-webkit-details-marker{display:none}.editor-help[open] summary{background:#eaf5f2}.editor-help-body{position:absolute;right:0;top:36px;z-index:6;width:min(360px,80vw);background:#fff;border:1px solid var(--stie-line);border-radius:10px;padding:12px 14px;box-shadow:0 10px 30px rgba(20,55,61,.12);color:var(--stie-ink)}.editor-help-body ul{margin:0;padding-left:1.1rem}.editor-help-body li+li{margin-top:.35rem}
.field-inspector{border:1px solid var(--stie-line);border-radius:11px;background:#f8fbfa;padding:10px 12px;margin-bottom:.75rem}.field-inspector [hidden]{display:none!important}.field-inspector-empty{color:var(--stie-muted);font-size:.85rem;padding:4px 0}.field-inspector-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem .75rem;margin-bottom:.5rem}.field-inspector-grid{display:grid;grid-template-columns:repeat(4,minmax(58px,1fr)) auto;gap:.5rem;align-items:end}@media(max-width:575.98px){.field-inspector-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.field-inspector-grid [data-inspect-wrap="align"]{grid-column:1/-1}}.field-inspector label,.inspector-caption{display:block;font-size:.78rem;color:var(--stie-muted);margin-bottom:0}.field-inspector label .form-control{margin-top:2px}.inspector-caption{margin-bottom:2px}.field-inspector-text{margin-top:.5rem}
.sheet-background{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:0;pointer-events:none;user-select:none}.sheet-background[hidden]{display:none}.background-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin-bottom:.75rem}.background-tools form{margin:0}.background-tools #background-form{display:contents}.background-opacity{display:flex;align-items:center;gap:.4rem;margin:0;color:var(--stie-muted)}.background-opacity .form-range{width:110px}
.curriculum-table .col-no,.grade-sheet-table .col-no{width:44px}.curriculum-table .col-code,.grade-sheet-table .col-code{width:130px}.curriculum-table .col-sks,.grade-sheet-table .col-sks{width:84px}.curriculum-table .col-actions{width:104px}.grade-sheet-table .col-letter{width:110px}.sticky-save{position:sticky;bottom:0;z-index:3;border-top:1px solid var(--stie-line);box-shadow:0 -5px 20px rgba(29,66,69,.055)}.grade-sheet-table tr.grade-empty td:not(:nth-child(5)){color:var(--stie-muted)}.grade-sheet-table tr.grade-changed td{background:#fff8e1}@media(min-width:1200px){.grade-side{position:sticky;top:92px}}
.verify-shell{max-width:560px;margin:0 auto}.verify-brand{display:flex;align-items:center;gap:12px;margin-bottom:20px}.verify-brand .brand-mark{width:44px;height:44px;background:var(--stie-sidebar);color:#fff}.verify-brand strong{display:block;font-size:.95rem}.verify-brand span{font-size:.78rem;color:var(--stie-muted)}.verify-card{background:#fff;border:1px solid var(--stie-line);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(20,55,61,.06)}.verify-status{display:flex;gap:14px;align-items:flex-start;padding:20px 22px}.verify-status h1{font-size:1.2rem;font-weight:750;margin:0 0 4px}.verify-status p{margin:0;font-size:.9rem}.verify-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800;font-size:1.15rem;color:#fff}.verify-status-valid{background:#e8f5ee;color:#14532d}.verify-status-valid .verify-icon{background:#198754}.verify-status-revoked{background:#fdecec;color:#7f1d1d}.verify-status-revoked .verify-icon{background:#dc3545}.verify-status-unknown{background:#f1f3f5;color:#343a40}.verify-status-unknown .verify-icon{background:#6c757d}.verify-body{padding:18px 22px;margin:0}.verify-details>div{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:12px;padding:9px 0;border-bottom:1px solid var(--stie-line)}.verify-details>div:last-child{border-bottom:0}.verify-details dt{font-weight:500;color:var(--stie-muted);font-size:.86rem}.verify-details dd{margin:0;font-weight:600;overflow-wrap:anywhere}.verify-details .verify-name{font-size:1.05rem}.verify-guide{margin-top:14px;padding:14px 18px;border:1px solid var(--stie-line);border-radius:12px;background:rgba(255,255,255,.7)}.verify-guide h2{font-size:.85rem;font-weight:700;margin:0 0 4px}.verify-guide p{font-size:.85rem;color:#4b5b62;margin:0}.verify-footer{margin-top:16px;text-align:center;font-size:.78rem;color:var(--stie-muted)}@media(max-width:575.98px){.public-content{padding-top:24px!important}.verify-details>div{grid-template-columns:1fr;gap:2px}}
.canvas-block{line-height:1.15;overflow:hidden;cursor:move}.canvas-block table{pointer-events:none}.canvas-title{font-weight:bold;letter-spacing:.15em}.canvas-muted{color:#5b6b71;letter-spacing:.03em}.canvas-signer{font-weight:bold}.sheet-transcript{color:#141c1f}.sheet-transcript .canvas-field{line-height:1.2}.canvas-block.canvas-overflow{outline:1.5px dashed #dc3545!important}
@media print{.sheet-grid{display:none!important}}
.live-pdf{display:block;width:100%;height:740px;border:1px solid #cbd5da;background:#f7f9fa;margin-bottom:10px}
@media(min-width:1200px){.template-editor .col-md-6{width:100%}}
@media(min-width:768px) and (max-width:1199.98px){.template-save-bar .small{display:block;margin:8px 0 0!important}}
@media(max-width:1199.98px){.hero-decoration{flex-basis:200px}.hero-paper-front{right:20px}.hero-paper-back{right:0}}
@media(max-width:1199.98px){.template-preview-panel{position:static;max-height:none;overflow:visible}}
@media(max-width:991.98px){.app-header-inner{min-height:64px;flex-wrap:wrap;gap:0;padding:12px 20px}.app-menu-toggle{margin-left:auto}.app-navigation{flex-basis:100%;width:100%;padding-top:12px}.app-nav-links{align-items:stretch;flex-direction:column;gap:3px}.app-nav-links .nav-link{padding:11px 12px}.app-account{margin:10px 0 0;padding:13px 0 3px;border-top:1px solid var(--stie-line);justify-content:space-between}.app-content{padding-top:26px!important}.hero-decoration{display:none}.dashboard-hero{min-height:0}}
@media(max-width:767.98px){.dashboard-hero{padding:28px 25px}.hero-copy h1{font-size:1.9rem}.dashboard-stats .stat-card{min-height:115px}.stat-number{margin-top:11px}.template-preview-panel{position:static;max-height:none;overflow:visible}.app-content{padding-bottom:35px!important}.table-responsive{overflow-x:auto}.login-shell{margin-top:2vh}}
@media(max-width:575.98px){.dashboard-hero .btn{width:100%}.app-header-inner{padding:10px 15px}.workflow-copy small{line-height:1.4}.dashboard-section .card-body{padding:19px}.app-content{padding-left:15px!important;padding-right:15px!important}}