@font-face{font-family:CertificateCairo;src:url('./fonts/Cairo-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:CertificateCairo;src:url('./fonts/Cairo-700.ttf') format('truetype');font-weight:700;font-display:swap}
#certificate-studio{--cs-blue:#235f86;--cs-ink:#172f43;--cs-muted:#6b7d8e;--cs-line:#dce5eb;color:var(--cs-ink);font:14px CertificateCairo,Arial,sans-serif;max-width:1250px;margin:auto;background:#f2f6f8;border:1px solid var(--cs-line);border-radius:20px;overflow:hidden;box-shadow:0 18px 50px #1b41500b}
#certificate-studio *{box-sizing:border-box}
#certificate-studio [hidden]{display:none!important}
#certificate-studio button,#certificate-studio input,#certificate-studio textarea,#certificate-studio select,#certificate-studio summary{font:inherit}
#certificate-studio button,#certificate-studio .cs-popover>summary{cursor:pointer;border:1px solid var(--cs-line);background:white;color:var(--cs-ink);border-radius:9px;padding:8px 12px;transition:background .15s}
#certificate-studio button:hover,#certificate-studio .cs-popover>summary:hover{background:#edf5fa}
#certificate-studio :is(button,input,select,textarea,summary):focus-visible{outline:2px solid #278bad;outline-offset:2px}
#certificate-studio .cs-top{padding:16px 22px;background:white;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--cs-line)}
#certificate-studio h2{font-size:20px;margin:0 0 3px}#certificate-studio p{margin:0;color:var(--cs-muted);line-height:1.6}
#certificate-studio .cs-top p{font-size:12px}#certificate-studio .cs-top-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
#certificate-studio .cs-badge{background:#e7f4ef;color:#27715d;border-radius:20px;padding:5px 10px;font-size:10px;white-space:nowrap}
#certificate-studio .cs-expand{font-size:12px;white-space:nowrap}
#certificate-studio .cs-layout{display:grid;grid-template-columns:320px minmax(0,1fr);height:clamp(510px,68dvh,650px);min-height:0}
#certificate-studio .cs-controls{min-height:0;min-width:0;background:white;border-inline-end:1px solid var(--cs-line);display:flex;flex-direction:column}
#certificate-studio .cs-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:12px;border-bottom:1px solid var(--cs-line);flex-shrink:0}
#certificate-studio .cs-tabs button{display:flex;align-items:center;gap:6px;justify-content:center;font-size:11px;padding:8px 4px;min-width:0}
#certificate-studio .cs-tabs svg{width:18px;height:18px;flex-shrink:0}
#certificate-studio .cs-tabs [aria-selected=true],#certificate-studio button[aria-pressed=true]{border-color:#267da0;background:#e9f5fa;box-shadow:0 0 0 1px #267da0}
#certificate-studio .cs-panels{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#certificate-studio .cs-panel{padding:18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;flex:1;min-height:0}
#certificate-studio .cs-panel-top{display:none}
#certificate-studio .cs-field{display:block;margin:0 0 12px}
#certificate-studio .cs-field>span{display:block;font-weight:700;font-size:11px;margin-bottom:5px}
#certificate-studio input:not([type=color]):not([type=file]),#certificate-studio textarea,#certificate-studio select{width:100%;padding:8px 10px;border:1px solid var(--cs-line);border-radius:8px;background:#fbfdfe;color:var(--cs-ink);font-size:12px}
#certificate-studio textarea{resize:vertical;min-height:76px;max-height:180px}
#certificate-studio .cs-main{min-width:0;min-height:0;padding:22px;display:flex;align-items:stretch;justify-content:center}
#certificate-studio .cs-preview{width:100%;min-width:0;min-height:0;padding:20px;background:#dce6e9;border:1px solid #d1dde1;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
#certificate-studio .cs-preview canvas{display:block;min-height:0;max-width:100%;max-height:calc(100% - 30px);width:auto;height:auto;object-fit:contain;background:#fffefa;box-shadow:0 10px 25px #1b354427}
#certificate-studio .cs-preview-note{display:flex;justify-content:space-between;gap:10px;flex-shrink:0;width:100%;font-size:10px;color:#5b727d}
#certificate-studio .cs-eyebrow{font-size:11px;font-weight:700;color:#39738e;margin-bottom:12px}
#certificate-studio .cs-section-title{margin-top:20px;padding-top:16px;border-top:1px solid var(--cs-line)}
#certificate-studio .cs-templates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:22px}
#certificate-studio .cs-template{padding:8px!important;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:11px}
#certificate-studio .cs-template :is(svg,img){width:90px!important;height:54px!important;object-fit:contain}
#certificate-studio .cs-palette{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 0 12px}
#certificate-studio .cs-swatch{width:24px;height:24px;min-height:0;border-radius:50%;padding:0;border:2px solid #fff;outline:1px solid #d4dfe5}
#certificate-studio input[type=color]{width:34px;height:30px;padding:2px;border:1px solid var(--cs-line);background:white;border-radius:6px}
#certificate-studio .cs-logo-actions{display:flex;gap:8px;align-items:center;margin:10px 0;font-size:11px}
#certificate-studio input[type=file]{font-size:11px;max-width:100%}
#certificate-studio small{display:block;color:var(--cs-muted);line-height:1.7;font-size:10px}
#certificate-studio .cs-format{display:flex;flex-direction:column;gap:8px}#certificate-studio .cs-format button{font-size:12px}
#certificate-studio .cs-badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:16px}
#certificate-studio .cs-badges button{padding:6px;font-size:10px}
#certificate-studio .cs-badges canvas{display:block;width:42px;height:42px;margin:auto}
#certificate-studio .cs-export{background:#fff;border-top:1px solid var(--cs-line);padding:12px 18px;flex-shrink:0}
#certificate-studio .cs-commandbar,#certificate-studio .cs-command-main,#certificate-studio .cs-project-actions,#certificate-studio .cs-export-row{display:flex;gap:8px;align-items:center;min-width:0}
#certificate-studio .cs-commandbar{justify-content:space-between;flex-wrap:wrap}#certificate-studio .cs-project-actions button{font-size:11px}
#certificate-studio .cs-export-row select{width:90px;min-width:0}#certificate-studio .cs-export-row{gap:6px}
#certificate-studio .cs-primary{background:#235f86;color:white;border-color:#235f86;min-width:105px;font-weight:700}
#certificate-studio .cs-primary:hover{background:#174866}
#certificate-studio .cs-popover{position:relative;font-size:12px}#certificate-studio .cs-popover>summary{list-style:none;white-space:nowrap}#certificate-studio .cs-popover>summary::-webkit-details-marker{display:none}
#certificate-studio .cs-popover[open]>summary{background:#e9f5fa;border-color:#267da0}
#certificate-studio .cs-popover-body{position:absolute;bottom:calc(100% + 10px);inset-inline-end:0;width:285px;max-width:calc(100vw - 48px);background:#fff;padding:16px;border:1px solid var(--cs-line);border-radius:12px;box-shadow:0 10px 35px #172f4333;z-index:20}
#certificate-studio .cs-share-menu .cs-popover-body>button{width:100%;margin-bottom:14px}
#certificate-studio .cs-share{display:flex;flex-wrap:wrap;gap:6px}#certificate-studio .cs-share span{width:100%;font-size:11px}#certificate-studio .cs-share button{font-size:11px;padding:6px 8px}
#certificate-studio .cs-status{font-size:11px;margin:8px 0 0}#certificate-studio .cs-status:empty{display:none}
#certificate-studio.cs-expanded{position:fixed;inset:0;z-index:2147483000;width:100%;max-width:none;height:100dvh;margin:0;border:0;border-radius:0;display:flex;flex-direction:column}
#certificate-studio.cs-expanded .cs-layout{height:auto;flex:1;min-height:0}
@media(max-width:1000px){#certificate-studio .cs-badge{display:none}#certificate-studio .cs-layout{grid-template-columns:285px minmax(0,1fr)}#certificate-studio .cs-main{padding:14px}#certificate-studio .cs-preview{padding:12px}}
@media(max-width:800px){
 #certificate-studio{border-radius:14px}#certificate-studio .cs-top{padding:12px;gap:8px}#certificate-studio h2{font-size:16px}#certificate-studio .cs-top p{display:none}#certificate-studio .cs-expand{font-size:10px;padding:7px}
 #certificate-studio .cs-layout{display:flex;flex-direction:column;position:relative;height:clamp(350px,60dvh,520px)}
 #certificate-studio .cs-controls{border:0;flex-shrink:0}#certificate-studio .cs-tabs{grid-template-columns:repeat(4,minmax(0,1fr));padding:8px;gap:4px}
 #certificate-studio .cs-tabs button{flex-direction:column;gap:3px;font-size:9px;padding:7px 2px}#certificate-studio .cs-tabs svg{width:16px;height:16px}
 #certificate-studio .cs-panels{position:absolute;inset-inline:8px;top:70px;bottom:8px;background:#fff;border:1px solid var(--cs-line);border-radius:12px;box-shadow:0 8px 25px #172f4329;z-index:10}
 #certificate-studio .cs-panel-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--cs-line);padding:7px 12px;font-size:12px;flex-shrink:0}
 #certificate-studio .cs-panel-close{font-size:22px;line-height:1;padding:2px 9px}#certificate-studio .cs-panel{padding:14px}#certificate-studio .cs-main{flex:1;padding:10px;min-height:0}
 #certificate-studio .cs-preview{gap:8px;padding:10px}#certificate-studio .cs-preview-note{font-size:9px}
 #certificate-studio .cs-export{padding:10px}#certificate-studio .cs-commandbar{gap:10px}#certificate-studio .cs-project-actions{flex:1}#certificate-studio .cs-project-actions button{flex:1;padding:7px 8px}
 #certificate-studio .cs-command-main{justify-content:space-between;width:100%;gap:6px}#certificate-studio .cs-export-row{flex:1}#certificate-studio .cs-export-row select{flex:1;width:70px}#certificate-studio .cs-primary{min-width:90px}
 #certificate-studio .cs-popover>summary{padding:8px 9px;font-size:11px}#certificate-studio .cs-share-menu .cs-popover-body{inset-inline-start:0;inset-inline-end:auto}#certificate-studio .cs-info .cs-popover-body{inset-inline-end:0}
 #certificate-studio.cs-expanded .cs-layout{height:auto;flex:1}
}
#certificate-studio .cs-preview{position:relative}
#certificate-studio .cs-marks-overlay{position:absolute;pointer-events:none;z-index:3;direction:ltr}
#certificate-studio .cs-mark-box{position:absolute;pointer-events:auto;cursor:grab;touch-action:none;border:1px solid transparent;min-width:4px;min-height:4px}
#certificate-studio .cs-mark-box:focus-visible,#certificate-studio .cs-mark-selected{border:1px dashed #168ab7;outline:1px solid #fff8}
#certificate-studio .cs-mark-locked{cursor:pointer}#certificate-studio .cs-mark-locked.cs-mark-selected{border-color:#7d8992}
#certificate-studio .cs-mark-resize{position:absolute;right:-8px;bottom:-8px;width:18px;height:18px;border:2px solid #168ab7;border-radius:50%;background:white;cursor:nwse-resize}
#certificate-studio .cs-mark-toolbar{position:absolute;top:6px;left:6px;z-index:4;display:flex;gap:4px;padding:4px;border:1px solid var(--cs-line);border-radius:9px;background:#fffffff2;box-shadow:0 3px 12px #172f4320;direction:ltr}
#certificate-studio .cs-mark-toolbar button{padding:3px 9px;font-size:18px;line-height:1.3}
#certificate-studio .cs-mark-add{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
#certificate-studio .cs-mark-add button,#certificate-studio .cs-upload-button{padding:8px 10px;text-align:center;font-size:11px;border:1px solid var(--cs-line);border-radius:8px;cursor:pointer;background:white}
#certificate-studio .cs-upload-button:focus-visible{outline:2px solid #278bad}
#certificate-studio .cs-mark-list{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0}#certificate-studio .cs-mark-list button{font-size:11px}
#certificate-studio .cs-mark-inspector button{font-size:11px}
#certificate-studio .cs-signature-dialog{width:min(720px,94vw);max-height:90dvh;padding:0;border:1px solid var(--cs-line);border-radius:16px;color:var(--cs-ink);background:white;box-shadow:0 24px 80px #0005;overflow:auto}
#certificate-studio .cs-signature-dialog::backdrop{background:#152b3a99;backdrop-filter:blur(3px)}
#certificate-studio .cs-signature-head{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--cs-line)}#certificate-studio .cs-signature-head h3{font-size:17px;margin:0}#certificate-studio .cs-signature-head button{padding:3px 12px;font-size:22px}
#certificate-studio .cs-signature-body{padding:18px}#certificate-studio .cs-signature-modes{display:flex;gap:8px;margin-bottom:14px}#certificate-studio .cs-signature-modes button{flex:1}
#certificate-studio .cs-type-options{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-bottom:12px}#certificate-studio .cs-type-options label{font-size:12px}
#certificate-studio .cs-signature-options{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:12px}#certificate-studio .cs-signature-options label{display:flex;align-items:center;gap:6px;font-size:12px}#certificate-studio .cs-signature-options input[type=range]{width:100px}
#certificate-studio .cs-signature-canvas{display:block;width:100%;height:auto;background-color:#fff;background-image:linear-gradient(45deg,#e9eef1 25%,transparent 25%),linear-gradient(-45deg,#e9eef1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e9eef1 75%),linear-gradient(-45deg,transparent 75%,#e9eef1 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;border:1px solid var(--cs-line);border-radius:8px;touch-action:none}
#certificate-studio .cs-signature-error{font-size:12px;margin:10px 0}
#certificate-studio .cs-tabs button span{line-height:1.35}
@media(max-width:800px){#certificate-studio .cs-tabs{min-height:78px}#certificate-studio .cs-panels{top:86px}#certificate-studio .cs-signature-body{padding:12px}#certificate-studio .cs-signature-options{gap:8px}#certificate-studio .cs-mark-toolbar{top:4px;left:4px}#certificate-studio .cs-mark-toolbar button{font-size:16px;padding:3px 8px}}

@media(max-width:800px){#certificate-studio .cs-mark-resize{width:24px;height:24px;right:-12px;bottom:-12px}}