/* Smarto One – certificate verification */
:root {
            --cv-primary: #021512;
            --cv-primary-soft: #052a26;
            --cv-accent: #0d9488;
            --cv-accent-hover: #0f766e;
            --cv-surface: #ffffff;
            --cv-bg: #f1f7f6;
            --cv-border: #cce8e4;
            --cv-text: #1f2937;
            --cv-text-muted: #667085;
            --cv-radius: 20px;
            --cv-radius-sm: 12px;
            --cv-shadow: 0 12px 30px rgba(15, 23, 42, .08);
            --cv-shadow-lg: 0 24px 60px rgba(15, 23, 42, .15);
        }
        .cv-page {
            font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
            background:
                radial-gradient(circle at top right, rgba(13, 148, 136, .18), transparent 40%),
                radial-gradient(circle at top left, rgba(14, 165, 233, .15), transparent 35%),
                var(--cv-bg);
            min-height: 100vh;
            color: var(--cv-text);
        }
        .cv-nav {
            background: linear-gradient(135deg, var(--cv-primary) 0%, var(--cv-primary-soft) 100%);
            padding: .75rem 0;
            box-shadow: var(--cv-shadow);
        }
        .cv-nav .navbar-nav .nav-link {
            color: rgba(255,255,255,.9);
            font-weight: 500;
            padding: .4rem .75rem;
            border-radius: 8px;
            transition: background .2s, color .2s;
        }
        .cv-nav .navbar-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,.12); }
        .cv-nav .navbar-toggler { border-color: rgba(255,255,255,.4); }
        .cv-nav .navbar-toggler-icon { filter: invert(1); }
        .cv-nav .cv-menu-link {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .5rem .85rem;
            color: rgba(255,255,255,.92);
            text-decoration: none;
            font-weight: 500;
            font-size: .9rem;
            border-radius: 10px;
            transition: background .2s, color .2s, transform .05s;
        }
        .cv-nav .cv-menu-link:hover {
            color: #fff;
            background: rgba(255,255,255,.14);
        }
        .cv-nav .cv-menu-link i { opacity: .9; font-size: .95em; }
        .cv-nav .cv-menu-link.active {
            color: #fff;
            background: rgba(255,255,255,.16);
        }
        .cv-nav .cv-menu-cta {
            background: var(--cv-accent);
            color: #fff !important;
            padding: .5rem 1rem;
        }
        .cv-nav .cv-menu-cta:hover {
            background: var(--cv-accent-hover);
            color: #fff !important;
        }
        .cv-nav .cv-menu-list {
            display: flex;
            gap: .3rem;
            flex-wrap: wrap;
            align-items: center;
        }
        .cv-nav .navbar-collapse {
            margin-top: .75rem;
        }
        @media (min-width: 992px) {
            .cv-nav .navbar-collapse {
                margin-top: 0;
            }
        }
        .cv-main { padding: 2.5rem 1rem 4rem; }
        .cv-container { max-width: 960px; margin: 0 auto; }
        .cv-hero {
            background: linear-gradient(135deg, rgba(11, 19, 43, .95), rgba(13, 148, 136, .9));
            color: #fff;
            border-radius: var(--cv-radius);
            padding: 2rem 1.5rem;
            box-shadow: var(--cv-shadow-lg);
            margin-bottom: 1.5rem;
        }
        .cv-hero h1 {
            font-size: clamp(1.5rem, 3vw, 2rem);
            margin-bottom: .5rem;
            font-weight: 700;
        }
        .cv-hero p {
            margin: 0;
            color: rgba(255,255,255,.85);
            font-size: .96rem;
            max-width: 680px;
        }
        .cv-breadcrumb {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .35rem;
            margin-bottom: 1.25rem;
            font-size: .9rem;
        }
        .cv-breadcrumb a { color: var(--cv-text-muted); text-decoration: none; }
        .cv-breadcrumb a:hover { color: var(--cv-accent); }
        .cv-breadcrumb .sep { color: var(--cv-border); }
        .cv-breadcrumb .current { color: var(--cv-text); font-weight: 600; }
        .cv-back {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .5rem .9rem;
            background: rgba(255,255,255,.14);
            color: #fff;
            border: 1px solid rgba(255,255,255,.35);
            border-radius: var(--cv-radius-sm);
            font-weight: 600;
            font-size: .875rem;
            text-decoration: none;
            transition: all .2s;
        }
        .cv-back:hover { background: rgba(255,255,255,.24); color: #fff; border-color: rgba(255,255,255,.5); }
        .cv-card {
            background: var(--cv-surface);
            border-radius: var(--cv-radius);
            box-shadow: var(--cv-shadow);
            border: 1px solid rgba(13, 148, 136, .12);
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        .cv-card-head {
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid #ecfdf5;
            font-weight: 700;
            font-size: 1.15rem;
            color: var(--cv-primary);
            display: flex;
            align-items: center;
            gap: .5rem;
        }
        .cv-card-head i { color: var(--cv-accent); }
        .cv-card-body { padding: 1.5rem; }
        .cv-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
        @media (min-width: 992px) {
            .cv-grid {
                grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
                align-items: start;
            }
        }
        .cv-form .form-control {
            padding: .75rem 1rem;
            border-radius: var(--cv-radius-sm);
            border: 1px solid #b2e4dc;
            font-size: 1rem;
            background: #f8fffe;
        }
        .cv-form .form-control:focus {
            border-color: var(--cv-accent);
            box-shadow: 0 0 0 3px rgba(13, 148, 136, .15);
        }
        .cv-form .form-label { font-weight: 600; color: var(--cv-text); margin-bottom: .35rem; }
        .cv-form-note {
            display: block;
            margin-top: .45rem;
            color: var(--cv-text-muted);
            font-size: .8rem;
        }
        .cv-btn-verify {
            width: 100%;
            padding: .85rem 1.5rem;
            background: linear-gradient(135deg, var(--cv-accent) 0%, #14b8a6 100%);
            color: #fff;
            border: none;
            border-radius: var(--cv-radius-sm);
            font-weight: 700;
            font-size: 1rem;
            letter-spacing: .02em;
            transition: transform .15s, box-shadow .2s;
        }
        .cv-btn-verify:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(13, 148, 136, .34); }
        .cv-btn-verify:disabled { opacity: .7; transform: none; }
        .cv-result-placeholder {
            text-align: center;
            padding: 2rem 1rem;
            color: var(--cv-text-muted);
            font-size: .95rem;
        }
        .cv-result-placeholder i { font-size: 2rem; margin-bottom: .5rem; opacity: .6; }
        .cv-result-table-wrap { overflow-x: auto; border-radius: 0 0 var(--cv-radius) var(--cv-radius); }
        .cv-table {
            width: 100%;
            font-size: .9rem;
            margin: 0;
        }
        .cv-table thead th {
            background: #f0fdfa;
            color: var(--cv-text-muted);
            font-weight: 600;
            padding: .75rem 1rem;
            border-bottom: 2px solid var(--cv-border);
        }
        .cv-table tbody td { padding: .85rem 1rem; border-bottom: 1px solid var(--cv-border); vertical-align: middle; }
        .cv-table tbody tr:last-child td { border-bottom: 0; }
        .cv-table tbody tr:hover { background: #f0fdfa; }
        .cv-table .btn-verify-link {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .4rem .85rem;
            background: var(--cv-accent);
            color: #fff;
            border-radius: var(--cv-radius-sm);
            font-weight: 600;
            font-size: .85rem;
            text-decoration: none;
            transition: background .2s, transform .15s;
        }
        .cv-table .btn-verify-link:hover { color: #fff; background: var(--cv-accent-hover); transform: translateY(-1px); }
        .cv-table .btn-primary,
        .cv-table a.btn.btn-sm.btn-primary {
            background: var(--cv-accent) !important;
            border-color: var(--cv-accent) !important;
            color: #fff !important;
            border-radius: var(--cv-radius-sm);
            font-weight: 600;
            padding: .4rem .85rem;
            text-decoration: none;
            transition: background .2s, transform .15s;
        }
        .cv-table .btn-primary:hover,
        .cv-table a.btn.btn-sm.btn-primary:hover { background: var(--cv-accent-hover) !important; border-color: var(--cv-accent-hover) !important; color: #fff !important; transform: translateY(-1px); }
        .cv-no-result {
            text-align: center;
            padding: 2rem 1rem;
            color: var(--cv-text-muted);
        }
        .cv-no-result i { font-size: 2.5rem; margin-bottom: .5rem; opacity: .5; }
        .cv-loader-wrap { text-align: center; padding: 1.5rem; }
        .cv-loader {
            width: 40px; height: 40px;
            border: 3px solid var(--cv-border);
            border-top-color: var(--cv-accent);
            border-radius: 50%;
            animation: cv-spin .7s linear infinite;
            margin: 0 auto .75rem;
        }
        @keyframes cv-spin { to { transform: rotate(360deg); } }
        .cv-pill {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            font-size: .78rem;
            padding: .35rem .65rem;
            border-radius: 999px;
            background: rgba(13, 148, 136, .15);
            color: #ccfbf1;
            margin-bottom: .6rem;
        }
        @media (max-width: 768px) {
            .cv-main { padding-top: 1.5rem; }
            .cv-card-head, .cv-card-body { padding: 1.1rem; }
        }