:root {
    --app-bg: #f6f7fb;
    --app-card: #ffffff;
    --app-border: rgba(0, 0, 0, .08);
    --app-shadow: 0 12px 30px rgba(20, 20, 43, .08);
    --app-radius: 18px;
}

html,
body {
    height: 100%;
}

body {
    background: var(--app-bg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}

.navbar {
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--app-border);
}

.app-container {
    max-width: 1180px;
}

.card {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
}

.card-soft {
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
}

.btn {
    border-radius: 12px;
    padding: .55rem .9rem;
}

.btn-primary {
    box-shadow: 0 10px 24px rgba(13, 110, 253, .18);
}

.badge {
    border-radius: 999px;
    padding: .35rem .55rem;
}

.table {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--app-shadow);
}

.table> :not(caption)>*>* {
    padding: .9rem .9rem;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.form-control,
.form-select {
    border-radius: 12px;
    padding: .6rem .75rem;
    border: 1px solid rgba(0, 0, 0, .12);
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .15);
}

.app-hero {
    background: radial-gradient(1200px 400px at 10% 0%, rgba(13, 110, 253, .18), transparent 60%),
        radial-gradient(900px 360px at 90% 10%, rgba(25, 135, 84, .16), transparent 60%),
        #ffffff;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
}

.app-muted {
    color: rgba(0, 0, 0, .55);
}

.book-cover {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-top-left-radius: var(--app-radius);
    border-top-right-radius: var(--app-radius);
}

footer {
    color: rgba(0, 0, 0, .5);
}