:root {
    --ink: #162032;
    --muted: #667085;
    --line: #dfe4ec;
    --paper: #fff;
    --bg: #f5f7fb;
    --accent: #3857d6
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.55 Inter,Segoe UI,Arial,sans-serif
}

.topbar {
    height: 72px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 0 max(24px,calc((100% - 1160px)/2));
    gap: 48px
}

.brand {
    font-weight: 800;
    letter-spacing: -.03em;
    font-size: 20px;
    color: var(--ink);
    text-decoration: none
}

.topbar nav {
    display: flex;
    gap: 24px
}

    .topbar nav a {
        color: var(--muted);
        text-decoration: none
    }

.shell {
    max-width: 1160px;
    margin: 0 auto;
    padding: 64px 24px
}

.hero {
    max-width: 760px;
    padding: 36px 0 74px
}

.eyebrow {
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    margin: 0 0 10px
}

.hero h1, .page-heading h1 {
    font-size: clamp(36px,5vw,62px);
    line-height: 1.05;
    letter-spacing: -.055em;
    margin: 0 0 20px
}

.page-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 34px
}

    .page-heading h1 {
        font-size: 42px;
        margin-bottom: 10px
    }

.lead {
    color: var(--muted);
    font-size: 20px;
    max-width: 650px
}

.actions {
    display: flex;
    gap: 12px;
    margin-top: 30px
}

.button {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 11px 16px;
    color: var(--ink);
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    text-decoration: none
}

.button.danger { background: #fff1f0; border-color: #f0b8b2; color: #b42318; }
.button:disabled { cursor: not-allowed; opacity: .55; }

    .button.primary {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff
    }

.cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
}

    .cards article, .panel {
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 8px 30px rgba(16,24,40,.04)
    }

    .cards span {
        color: var(--accent);
        font-weight: 800
    }

    .cards h2, .panel h2 {
        margin: 16px 0 8px;
        font-size: 20px
    }

    .cards p, .muted, .page-heading p {
        color: var(--muted)
    }

footer {
    text-align: center;
    color: var(--muted);
    padding: 28px;
    border-top: 1px solid var(--line)
}

.notice {
    padding: 16px 20px;
    border-radius: 10px;
    margin: 0 0 20px
}

.success {
    background: #e7f6ec;
    color: #176b39
}

    .success a {
        float: right;
        color: inherit;
        font-weight: 700
    }

.upload-panel {
    display: grid;
    gap: 14px;
    max-width: 660px
}

    .upload-panel input[type=file] {
        border: 1px dashed #aeb8c8;
        padding: 24px;
        border-radius: 8px;
        background: #fafbff
    }

.validation {
    color: #b42318
}

.panel ul {
    padding-left: 20px
}

.table-wrap {
    overflow: auto
}

table {
    border-collapse: collapse;
    width: 100%
}

th, td {
    border-bottom: 1px solid var(--line);
    padding: 16px;
    text-align: left
}

th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em
}

.inline-form {
    display: inline
}

.text-button {
    border: 0;
    background: none;
    color: #b42318;
    cursor: pointer;
    margin-left: 14px
}

.designer {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    align-items: start
}

.toolbox {
    display: grid;
    gap: 12px;
    min-width: 0;
    overflow: hidden
}

.toolbox > *, .toolbox label { min-width: 0; max-width: 100%; }
.toolbox input, .toolbox select, .toolbox button { width: 100%; max-width: 100%; min-width: 0; }
.toolbox input[type=file] { overflow: hidden; }
.toolbox .check { display: flex; align-items: center; justify-content: flex-start; width: 100%; }
.toolbox .check input[type=checkbox] { width: auto; max-width: none; min-width: 0; flex: 0 0 auto; margin: 0; }

    .toolbox button:not(.button) {
        text-align: left;
        padding: 10px;
        border: 1px solid var(--line);
        background: #fff;
        border-radius: 7px;
        cursor: grab
    }

    .toolbox hr {
        width: 100%;
        border: 0;
        border-top: 1px solid var(--line)
    }

label {
    display: grid;
    gap: 5px;
    font-weight: 700;
    font-size: 13px
}

input, select {
    font: inherit;
    border: 1px solid #cbd3df;
    border-radius: 7px;
    padding: 10px;
    background: #fff;
    font-weight: 400
}

.row {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 8px
}

.check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500
}

    .check input {
        padding: 0
    }

.canvas-panel {
    overflow: auto;
    min-height: 680px;
    display: flex;
    justify-content: center;
    align-items: flex-start
}

.certificate-canvas {
    position: relative;
    background: #fff;
    width: 595px;
    height: 842px;
    box-shadow: 0 4px 18px #cfd5df;
    --certificate-background: none;
    background-image: var(--certificate-background);
    background-size: 100% 100%;
    background-repeat: no-repeat
}
.certificate-canvas.grid-visible{background-image:linear-gradient(#e9eef8 1px,transparent 1px),linear-gradient(90deg,#e9eef8 1px,transparent 1px),var(--certificate-background);background-size:20px 20px,20px 20px,100% 100%;background-repeat:repeat,repeat,no-repeat}

.canvas-hint {
    position: absolute;
    top: 45%;
    width: 100%;
    text-align: center;
    color: #aab4c4;
    pointer-events: none
}

.designer-element {
    position: absolute;
    border: 0;
    background: transparent;
    padding: 4px;
    min-width: 60px;
    min-height: 24px;
    cursor: move;
    resize: both;
    overflow: hidden;
    min-width: 24px;
    min-height: 24px;
    touch-action: none;
    font-size: 12px
}
.designer-element.selected{outline:1px dashed var(--accent);outline-offset:2px}
.resize-handle{display:none;position:absolute;right:-7px;bottom:-7px;width:16px;height:16px;background:var(--accent);border:2px solid #fff;border-radius:3px;cursor:nwse-resize;z-index:10;touch-action:none}.designer-element.selected .resize-handle{display:block}
.designer-element.image-element{padding:0;overflow:hidden}.designer-element.image-element img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}

.check-grid {
    display: grid;
    gap: 12px;
    margin: 24px 0
}

.tool-sequence{display:grid;gap:8px}.tool-button{padding:10px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;font-weight:700}.tool-button:hover{border-color:var(--accent);color:var(--accent)}.formatting{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;display:grid;gap:10px}.formatting h3{margin:0;font-size:15px}.format-checks{display:flex;gap:18px}.hidden{display:none!important}

@media(max-width:760px) {
    .topbar {
        gap: 18px;
        padding: 0 16px
    }

        .topbar nav {
            gap: 10px;
            font-size: 13px
        }

    .shell {
        padding: 36px 16px
    }

    .cards, .designer {
        grid-template-columns: 1fr
    }

    .hero {
        padding-top: 10px
    }

    .page-heading {
        display: block
    }

        .page-heading .button {
            margin-top: 20px
        }

    .canvas-panel {
        min-height: 500px
    }
}