[hidden] { display: none !important; }
.new-main { min-height: 70vh; }
.new-main h1 { font-size: clamp(36px, 6vw, 64px); margin: 0 0 16px; }
.new-main .lead { margin-bottom: 32px; }
#breadcrumbs { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.catalog-link, .detail-panel { background: #f4f5f5; border: 1px solid #dce0e2; border-radius: 12px; padding: 28px; color: #182025; }
.catalog-link { display: flex; flex-direction: column; gap: 14px; transition: transform .2s, border-color .2s; }
.catalog-link:hover { border-color: #ef6c1a; transform: translateY(-3px); }
.catalog-link small { display: block; color: #66717a; }
.catalog-link h2, .catalog-intro h2, .detail-panel h2 { font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; }
.catalog-link p { color: #53616a; font-size: 14px; line-height: 1.7; }
.catalog-link > span { margin-top: auto; font-weight: 700; }
.catalog-intro { max-width: 800px; margin-bottom: 28px; }
.detail-copy { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; margin: 16px 0 24px; }

/* Two faces, a 180-degree flip, and a modal follow the supplied index.html. */
.project-stage { max-width: 500px; margin: 36px auto 0; text-align: center; }
.project-card { perspective: 1000px; width: 300px; max-width: 100%; margin: auto; }
.project-card-inner { position: relative; width: 100%; height: 260px; transform-style: preserve-3d; transition: transform .6s; }
.project-card-inner.flipped { transform: rotateY(180deg); }
.project-face { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; box-shadow: 0 12px 28px #18202520; }
.project-face.card-front { background: #2980b9; color: #fff; }
.project-face.card-back { background: #27ae60; color: #fff; transform: rotateY(180deg); }
.project-face[aria-hidden="true"] { pointer-events: none; }
.project-face img { display: block; width: 100%; height: 138px; object-fit: cover; flex: 0 0 138px; background: #242e36; }
.project-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px; gap: 8px; }
.project-body h3 { font: 700 16px/1.3 Arial, sans-serif; color: #fff; margin: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.btn-details { background: #fff; color: #216b99; border: 0; padding: 8px 16px; border-radius: 5px; cursor: pointer; font: 700 14px/1.3 Arial, sans-serif; }
.card-back .btn-details { color: #19733e; }
.btn-details:hover { background: #ecf0f1; }
.project-counter { color: #53616a; font-size: 14px; margin: 22px 0 12px; }
.project-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 24px; }
.project-controls button, .feature-button { border: 1px solid #aab2b7; background: #fff; color: #182025; border-radius: 6px; padding: 12px 20px; cursor: pointer; font: inherit; }
.project-controls button { padding: 9px 13px; font-size: 14px; }
.feature-button.primary { background: #ef6c1a; color: #fff; border: 0; }
.project-controls button:disabled, .feature-button:disabled { opacity: .5; cursor: default; }
.project-stage button:focus-visible, .project-modal button:focus-visible, .project-modal a:focus-visible { outline: 3px solid #ef6c1a; outline-offset: 3px; }
.project-modal { position: fixed; inset: 0; margin: auto; border: 0; border-radius: 15px; padding: 0; max-width: 500px; width: calc(100% - 32px); max-height: 80vh; max-height: 80dvh; overflow-y: auto; color: #2c3e50; background: #fff; box-shadow: 0 24px 90px #0005; }
.project-modal::backdrop { background: #000b; }
.project-modal[open] { animation: project-slide-in .3s ease; }
.project-modal-content { position: relative; padding: 30px; text-align: left; }
.project-modal-content > img { width: 100%; height: 200px; display: block; object-fit: cover; border-radius: 10px; margin-bottom: 20px; background: #242e36; }
.project-modal h2 { font-size: 26px; line-height: 1.3; overflow-wrap: anywhere; margin: 0 0 15px; }
.project-modal .detail-copy { color: #555; line-height: 1.6; margin: 0 0 15px; }
.project-modal .specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.project-modal .spec-item { background: #f8f9fa; padding: 10px; border-radius: 8px; overflow-wrap: anywhere; }
.spec-item dt { font-size: 12px; color: #66727a; text-transform: uppercase; }
.spec-item dd { font-size: 16px; font-weight: 700; margin: 4px 0 0; }
.project-modal .btn-close { position: absolute; top: 15px; right: 15px; display: grid; place-items: center; background: #e74c3c; color: #fff; border: 0; width: 35px; height: 35px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; }
.project-modal .btn-close:hover { background: #c0392b; }
.project-modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.project-modal-actions a { font-size: 14px; text-decoration: underline; }
@keyframes project-slide-in { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .project-card-inner { transition: none; } .project-modal[open] { animation: none; } .catalog-link { transition: none; } }
@media (max-width: 600px) { .catalog-link { padding: 20px; } .project-modal-content { padding: 22px; } }

.admin-wrap { max-width: 1100px; margin: 40px auto; padding: 20px; }
.admin-wrap label { display: block; margin: 12px 0; }
.admin-wrap input, .admin-wrap select, .admin-wrap textarea { display: block; width: 100%; padding: 10px; border: 1px solid #aab2b7; border-radius: 5px; }
.admin-wrap textarea { min-height: 160px; }
.admin-tools { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.admin-tools > * { flex: 1; min-width: 140px; }
.admin-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-wrap td, .admin-wrap th { border-bottom: 1px solid #ccc; padding: 10px; text-align: left; overflow-wrap: anywhere; }
.table-scroll { overflow: auto; }
.metric-row { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr 60px; gap: 10px; align-items: center; margin: 12px 0; overflow-wrap: anywhere; }
.metric-bar { height: 12px; background: #ef6c1a; border-radius: 10px; }
.admin-section { border-top: 1px solid #ccc; padding: 24px 0 0; margin-top: 32px; }
#status, #accountStatus { white-space: pre-wrap; color: #9d4100; }
.account-form { max-width: 520px; }
.admin-wrap fieldset { padding: 16px; border: 1px solid #cfd3d5; border-radius: 8px; }
.spec-editor-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; margin: 12px 0; }
.spec-editor-row label { margin: 0; }
.spec-editor-row button { align-self: end; }
@media (max-width: 500px) { .spec-editor-row { grid-template-columns: 1fr; } .metric-row { grid-template-columns: minmax(80px, 1fr) 1fr 45px; } }