:root {
    --bg          : #f4f7fb;
    --panel       : #ffffff;
    --text        : #182033;
    --muted       : #647084;
    --primary     : #1677ff;
    --primary-dark: #0f5fd1;
    --success     : rgb(0, 207, 0);
    --accent      : #13c2c2;
    --border      : #dbe3ef;
    --shadow      : 0 18px 45px rgba(24, 32, 51, 0.12);
}

* {
    box-sizing: border-box;
    margin    : 0;
    padding   : 0;
}

body {
    min-height : 100vh;
    color      : var(--text);
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
    background :
        radial-gradient(circle at top left, rgba(19, 194, 194, 0.2), transparent 32rem),
        linear-gradient(135deg, #f8fbff 0%, var(--bg) 45%, #edf3f8 100%);
}

button,
input,
textarea {
    font: inherit;
}

.page-shell {
    width  : min(1120px, calc(100% - 32px));
    margin : 0 auto;
    padding: 36px 0 48px;
}

.hero {
    display      : flex;
    align-items  : flex-end;
    min-height   : 210px;
    padding      : 36px;
    overflow     : hidden;
    color        : #ffffff;
    border-radius: 8px;
    background   : linear-gradient(120deg, rgb(4 99 255 / 95%), rgb(247 0 255 / 73%)),
        url(http://demo.muguilin.com/qrcode/muguilin-qrcode.png) center / 220px no-repeat,
        linear-gradient(135deg, #10264d, #0b7d8a);
    box-shadow: var(--shadow);
}

.hero__content {
    max-width: 680px;
}

.eyebrow,
.panel__label {
    margin-bottom : 10px;
    color         : var(--accent);
    font-size     : 13px;
    font-weight   : 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero h1 {
    font-size     : clamp(34px, 6vw, 58px);
    line-height   : 1.08;
    letter-spacing: 0;
}

.hero__desc {
    max-width  : 560px;
    margin-top : 16px;
    color      : rgba(255, 255, 255, 0.82);
    font-size  : 18px;
    line-height: 1.7;
}

.menu {
    display        : flex;
    gap            : 10px;
    justify-content: center;
    width          : fit-content;
    margin         : 24px auto;
    padding        : 6px;
    list-style     : none;
    border         : 1px solid var(--border);
    border-radius  : 8px;
    background     : rgba(255, 255, 255, 0.78);
    box-shadow     : 0 10px 28px rgba(24, 32, 51, 0.08);
    backdrop-filter: blur(10px);
}

.menu nav {
    min-width    : 132px;
    padding      : 12px 20px;
    color        : var(--muted);
    text-align   : center;
    border-radius: 6px;
    cursor       : pointer;
    transition   : color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.menu nav.active {
    color     : #ffffff;
    background: var(--primary);
    box-shadow: 0 8px 18px rgba(22, 119, 255, 0.28);
}

.main {
    position: relative;
    z-index : 1;
}

.panel {
    width        : min(920px, 100%);
    margin       : 0 auto;
    padding      : 32px;
    border       : 1px solid var(--border);
    border-radius: 8px;
    background   : rgba(255, 255, 255, 0.9);
    box-shadow   : var(--shadow);
}

.panel__header {
    max-width : 620px;
    margin    : 0 auto 24px;
    text-align: center;
}

.panel__header h2 {
    margin-bottom: 10px;
    font-size    : 28px;
}

.panel__header p:last-child {
    color      : var(--muted);
    line-height: 1.7;
}

.create {
    text-align: center;
}

.form-row {
    display              : grid;
    grid-template-columns: minmax(0, 1fr) 136px 136px;
    gap                  : 12px;
    max-width            : 680px;
    margin               : 0 auto 26px;
}

.create input,
.reader .sweep,
.reader .result {
    border-radius: 8px;
}

.create input[type="text"] {
    width     : 100%;
    padding   : 14px 16px;
    color     : var(--text);
    border    : 1px solid var(--border);
    outline   : none;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.create input[type="text"]:focus,
.reader .result:focus {
    border-color: var(--primary);
    box-shadow  : 0 0 0 4px rgba(22, 119, 255, 0.14);
}

.create input[type="button"],
.reader .sweep {
    min-height: 40px;
    color     : #ffffff;
    border    : none;
    background: var(--primary);
    cursor    : pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.create input[type="button"]+input[type="button"] {
    background: var(--success);
}

.create input[type="button"]:hover,
.reader .sweep:hover {
    background: var(--primary-dark);
    box-shadow: 0 10px 22px rgba(22, 119, 255, 0.25);
    transform : translateY(-1px);
}

.qrcode-wrap {
    display      : inline-flex;
    padding      : 18px;
    border       : 1px solid var(--border);
    border-radius: 8px;
    background   :
        linear-gradient(45deg, #f7f9fc 25%, transparent 25%),
        linear-gradient(-45deg, #f7f9fc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f7f9fc 75%),
        linear-gradient(-45deg, transparent 75%, #f7f9fc 75%);
    background-color   : #ffffff;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size    : 20px 20px;
}

.qrcode img {
    display      : block;
    width        : min(300px, 70vw);
    height       : min(300px, 70vw);
    padding      : 18px;
    border-radius: 8px;
    background   : #ffffff;
    box-shadow   : 0 8px 24px rgba(24, 32, 51, 0.12);
}

.reader {
    display   : none;
    text-align: center;
}

.actions {
    display        : flex;
    flex-wrap      : wrap;
    gap            : 12px;
    justify-content: center;
    margin-bottom  : 12px;
}

.reader-status {
    min-height   : 24px;
    margin-bottom: 18px;
    color        : var(--primary-dark);
    font-size    : 14px;
    line-height  : 1.6;
}

.reader .sweep {
    position: relative;
    width   : 220px;
    padding : 12px 18px;
    overflow: hidden;
}

.reader .sweep--file {
    background: #f5a402;
}

.reader .sweep--file:hover {
    background: #d89205;
}

.reader .sweep input {
    position: absolute;
    inset   : 0;
    width   : 100%;
    height  : 100%;
    cursor  : pointer;
    opacity : 0;
}

.reader-grid {
    display              : grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap                  : 20px;
    align-items          : stretch;
    max-width            : 760px;
    margin               : 0 auto;
}

.reader .imgurl {
    display      : grid;
    place-items  : center;
    min-height   : 260px;
    padding      : 14px;
    border       : 1px solid var(--border);
    border-radius: 8px;
    background   : #ffffff;
}

.reader .imgurl img {
    display   : block;
    width     : 100%;
    max-width : 240px;
    height    : auto;
    max-height: 240px;
    object-fit: contain;
}

.reader .result {
    width     : 100%;
    min-height: 260px;
    padding   : 16px;
    color     : var(--text);
    border    : 1px solid var(--border);
    outline   : none;
    resize    : vertical;
    background: #ffffff;
}

.reader .canvas {
    display   : none;
    box-sizing: border-box;
    position  : fixed;
    inset     : 0;
    z-index   : 10;
    width     : 100vw;
    height    : 100vh;
    background: #000000;
}

.scan-layer {
    position   : fixed;
    inset      : 0;
    z-index    : 20;
    display    : none;
    place-items: center;
    min-height : 100vh;
    padding    : 24px;
    color      : #ffffff;
    background : rgba(5, 12, 24, 0.9);
}

.scan-layer.is-open {
    display: grid;
}

.scan-layer .canvas {
    display   : block;
    position  : absolute;
    inset     : 0;
    z-index   : 1;
    width     : 100vw;
    height    : 100vh;
    object-fit: cover;
    background: #000000;
}

.scan-panel {
    position     : relative;
    z-index      : 2;
    display      : grid;
    justify-items: center;
    gap          : 18px;
    width        : min(360px, calc(100vw - 48px));
}

.scan-frame {
    position    : relative;
    width       : min(320px, calc(100vw - 64px));
    aspect-ratio: 1;
    border      : 1px solid rgba(255, 255, 255, 0.34);
    background  : rgba(0, 0, 0, 0.08);
    box-shadow  :
        0 0 0 999px rgba(0, 0, 0, 0.38),
        inset 0 0 28px rgba(19, 194, 194, 0.18);
}

.scan-frame span {
    position    : absolute;
    width       : 42px;
    height      : 42px;
    border-color: var(--accent);
    border-style: solid;
}

.scan-frame span:nth-child(1) {
    top         : -2px;
    left        : -2px;
    border-width: 4px 0 0 4px;
}

.scan-frame span:nth-child(2) {
    top         : -2px;
    right       : -2px;
    border-width: 4px 4px 0 0;
}

.scan-frame span:nth-child(3) {
    right       : -2px;
    bottom      : -2px;
    border-width: 0 4px 4px 0;
}

.scan-frame span:nth-child(4) {
    bottom      : -2px;
    left        : -2px;
    border-width: 0 0 4px 4px;
}

.scan-frame i {
    position  : absolute;
    left      : 14px;
    right     : 14px;
    top       : 18px;
    height    : 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    box-shadow: 0 0 18px rgba(19, 194, 194, 0.9);
    animation : scanLine 2.2s ease-in-out infinite;
}

.scan-panel p {
    min-height: 26px;
    color     : red;
    font-size : 15px;
    text-align: center;
}

.scan-tools {
    display              : grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap                  : 10px;
    width                : 100%;
}

.scan-tool {
    min-height     : 42px;
    padding        : 9px 12px;
    color          : #ffffff;
    border         : 1px solid rgba(38, 209, 0, 0.8);
    border-radius  : 8px;
    background     : rgba(19, 194, 194, 0.18);
    cursor         : pointer;
    backdrop-filter: blur(10px);
    transition     : background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.scan-tool:hover:not(:disabled) {
    border-color: rgba(19, 194, 194, 0.78);
    background  : rgba(19, 194, 194, 0.28);
}

.scan-tool:disabled {
    cursor : not-allowed;
    opacity: 0.48;
}

.scan-close {
    min-width      : 132px;
    min-height     : 44px;
    padding        : 10px 18px;
    color          : #ffffff;
    border         : 1px solid rgba(255, 255, 255, 0.32);
    border-radius  : 8px;
    background     : rgba(255, 255, 255, 0.14);
    cursor         : pointer;
    backdrop-filter: blur(10px);
    transition     : background 0.2s ease, border-color 0.2s ease;
}

.scan-close:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background  : rgba(255, 255, 255, 0.22);
}

@keyframes scanLine {
    0% {
        transform: translateY(0);
        opacity  : 0.1;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        transform: translateY(calc(min(320px, calc(100vw - 64px)) - 36px));
        opacity  : 0.1;
    }
}

@media (max-width: 720px) {
    .page-shell {
        width      : min(100% - 20px, 520px);
        padding-top: 16px;
    }

    .hero {
        min-height: 240px;
        padding   : 24px;
        background: linear-gradient(120deg, rgb(4 99 255 / 95%), rgb(247 0 255 / 73%)),
            url(http://demo.muguilin.com/qrcode/muguilin-qrcode.png) right 24px top 24px / 120px no-repeat,
            linear-gradient(135deg, #10264d, #0b7d8a);
    }

    .hero__desc {
        font-size: 16px;
    }

    .menu {
        width: 100%;
    }

    .menu nav {
        min-width: 0;
        flex     : 1;
        padding  : 11px 10px;
    }

    .panel {
        padding: 22px 16px;
    }

    .form-row,
    .reader-grid {
        grid-template-columns: 1fr;
    }

    .reader .sweep {
        width: 100%;
    }

    .scan-tools {
        grid-template-columns: 1fr;
    }
}