* { box-sizing: border-box; }
body { margin:0; background:#f2f5fa; color:#17243a; font-family:Tahoma,Arial,sans-serif; }
.topbar { background:#143f7c; color:white; padding:20px max(24px,calc((100% - 1240px)/2)); display:flex; justify-content:space-between; align-items:center; gap:24px; }
h1 { margin:0 0 5px; font-size:23px; } .topbar p { margin:0;color:#d8e4f3; font-size:14px; }
nav { display:flex; gap:8px; } nav a { color:white; text-decoration:none;padding:11px 15px;border-radius:8px;font-size:14px; } nav a:hover,nav a.active { background:#ffffff24; }
main { max-width:1240px;margin:28px auto;padding:0 20px; } .panel { background:white;border:1px solid #e0e6ef;border-radius:14px;padding:24px;box-shadow:0 5px 18px #14345d0c; }
h2 { font-size:19px;margin:0 0 8px; } .workspace { display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start; }.panel-head { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px; }.panel-head p { color:#66758a;margin:0;font-size:13px; }
.fields { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }.field { display:flex;flex-direction:column;gap:7px; }.field span {font-size:13px;font-weight:700;color:#34455e;} input {width:100%;height:42px;padding:8px 11px;border:1px solid #ccd6e3;border-radius:8px;font:15px Tahoma,Arial,sans-serif;color:#1d2c42;background:white;}.field.wide {grid-column:1/-1;}
button {border:0;border-radius:8px;background:#1c579b;color:#fff;padding:11px 19px;font:700 14px Tahoma,Arial,sans-serif;cursor:pointer;}button:hover {background:#14477f}.secondary {background:#e8eef7;color:#173d6a}.secondary:hover {background:#d9e4f1}.actions {display:flex;gap:10px;margin-top:22px;}
.side ul {padding:0;list-style:none;margin:15px 0}.side li {border-top:1px solid #edf0f5}.side li a {display:block;padding:12px 2px;color:#1b477c;text-decoration:none}.side small {display:block;color:#77849a;margin-top:5px}.hint {font-size:12px;line-height:1.8;background:#f3f7fc;color:#596a80;padding:12px;border-radius:8px}.notice,.error {padding:12px 16px;margin-bottom:15px;border-radius:8px}.notice {background:#e5f7ed;color:#16653c}.error {background:#fff0ee;color:#9a3025}
.table-wrap {overflow:auto} table {border-collapse:collapse;width:100%;margin-top:15px} th,td {text-align:right;padding:12px;border-bottom:1px solid #e8edf3;font-size:14px} th {background:#f6f8fb;color:#43546d}td a {color:#1c579b}
.print-area {margin:26px auto 0;max-width:810px}.preview-actions {display:flex;align-items:center;gap:12px;margin:0 0 10px}.preview-actions span {font-size:12px;color:#68778b}.certificate {position:relative;width:100%;aspect-ratio:595/842;background:url('assets/sijil-sinaei-background.png?v=2') center/100% 100% no-repeat;direction:rtl;container-type:inline-size;}.registry-mask {position:absolute;z-index:1;left:12.5%;top:24%;width:13%;height:4.1%;background:#faf7f2;}.registry-mask::after {content:"";position:absolute;left:0;right:0;top:30%;border-top:1px solid #222}.ink {position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center;white-space:nowrap;color:#111;font-family:Tahoma,Arial,sans-serif;font-size:var(--ink-size,13px);font-weight:400;line-height:1;}.ink.is-empty {display:none}.template-tools {margin:14px 0;background:#fff;border:1px solid #ccd6e3;border-radius:12px;padding:12px 16px}.template-tools summary {cursor:pointer;color:#17487f;font-weight:700}.editor-body>p {font-size:13px;color:#596a80;line-height:1.7}.tool-grid {display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:10px;margin:12px 0}.tool-grid label,.font-upload label {display:flex;flex-direction:column;gap:5px;font-size:12px;color:#3b4c62}.tool-grid input,.tool-grid select,.font-upload input {width:100%;min-width:0;padding:7px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#17243a;font:14px Tahoma,Arial,sans-serif}.tool-grid input {height:36px}.font-upload {display:flex;align-items:end;gap:12px;border-top:1px solid #e4eaf1;padding-top:12px;margin-top:12px}.font-upload label {flex:1}.font-upload input {height:auto}.template-tools form button {margin-top:4px}.template-tools #template-status {margin-inline-start:10px;color:#276448;font-size:12px}.mask-setting {display:flex;align-items:center;gap:7px;margin:10px 0;color:#3b4c62;font-size:13px}.mask-setting input {width:auto}.certificate.is-editing {touch-action:none}.certificate.is-editing .ink {cursor:move;outline:1px dashed #1684df;background:#ffffff55;overflow:visible;z-index:3}.certificate.is-editing .ink.is-empty {display:flex;align-items:center;justify-content:center;background:#d9edffb8;color:#124e7c}.certificate.is-editing .ink.editor-selected {outline:2px solid #ed8b19;background:#fff9;z-index:5}.template-tools~.certificate {margin-top:10px}
footer {text-align:center;color:#8390a2;padding:18px;font-size:12px}
@page { size:A4 portrait; margin:0; }
@media print { body {background:#fff}.topbar,main> :not(.print-area),.print-area~*,footer,.preview-actions,.template-tools {display:none!important} main {margin:0;padding:0;max-width:none}.print-area {margin:0;max-width:none;width:210mm;height:297mm}.certificate {width:210mm;height:297mm;aspect-ratio:auto;print-color-adjust:exact;-webkit-print-color-adjust:exact}.ink {font-size:var(--ink-size,12px);color:#111}.certificate.is-editing .ink {outline:0!important;background:transparent!important;cursor:default}.ink.is-empty {display:none!important} }
@media(max-width:850px) { .topbar {align-items:flex-start;flex-direction:column}.workspace {grid-template-columns:1fr}.fields {grid-template-columns:1fr}.field.wide {grid-column:auto}.print-area {overflow:auto}.certificate {min-width:600px}.tool-grid {grid-template-columns:repeat(2,minmax(0,1fr))}.font-upload {align-items:stretch;flex-direction:column} }
.logout-form {margin:0}.nav-button {padding:8px 12px;background:#ffffff20;color:#fff}.nav-button:hover {background:#ffffff35}.auth-panel {max-width:480px;margin:48px auto}.auth-panel>p,.admin-panel>p {color:#64748b;line-height:1.7}.auth-form {display:grid;gap:14px;margin-top:20px}.auth-form label,.admin-create label,.user-update label {display:grid;gap:6px;font-size:13px;color:#34455e}.auth-form input,.admin-create input,.admin-create select,.user-update input,.user-update select {width:100%;min-width:0;height:40px;border:1px solid #ccd6e3;border-radius:7px;padding:8px 10px;font:14px Tahoma,Arial,sans-serif}.auth-form button {margin-top:5px}.admin-panel h3 {margin:24px 0 12px;color:#24456b}.admin-create {display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));align-items:end;gap:12px;padding:16px;background:#f7f9fc;border-radius:10px}.admin-create button {min-height:40px}.user-list {display:grid;gap:12px}.user-card {display:flex;align-items:end;gap:10px;flex-wrap:wrap;padding:14px;border:1px solid #e0e6ef;border-radius:10px}.user-update {flex:1;display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));align-items:end;gap:10px}.user-card form:not(.user-update) {margin:0}.check-label {display:flex!important;align-items:center;gap:8px}.check-label input {width:auto}.danger {background:#a43434}.danger:hover {background:#812828}.inline-form {display:inline-block;margin-inline-start:8px}.small-button {padding:6px 10px;font-size:12px}.admin-panel table form {margin:0}.auth-panel code {display:inline-block;direction:ltr;text-align:left;white-space:normal}
@media(max-width:850px) {.admin-create,.user-update {grid-template-columns:1fr 1fr}.user-card {align-items:stretch}.user-update {width:100%}}
@media(max-width:560px) {.admin-create,.user-update {grid-template-columns:1fr}.auth-panel {margin:20px auto}}