diff --git a/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_cards.scss b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_cards.scss
new file mode 100644
index 00000000..325a3e21
--- /dev/null
+++ b/fusion_plating/fusion_plating_portal/static/src/scss/fp_portal_cards.scss
@@ -0,0 +1,161 @@
+// ============================================================================
+// Fusion Plating — Portal · Card shells + KPI tiles + doc chips
+// ============================================================================
+
+// Generic card shell
+.o_fp_card {
+    background: $fp-card-bg;
+    border: 1px solid $fp-card-border;
+    border-radius: $fp-radius-card;
+    padding: $fp-space-5;
+    box-shadow: $fp-shadow-card;
+}
+
+.o_fp_card_compact {
+    @extend .o_fp_card;
+    padding: $fp-space-3 $fp-space-4;
+    border-radius: $fp-radius-tile;
+}
+
+.o_fp_card_hoverable {
+    transition: box-shadow .15s ease, transform .08s ease;
+    &:hover {
+        box-shadow: $fp-shadow-card-hover;
+        transform: translateY(-1px);
+    }
+}
+
+// KPI tile (the 4-tile strip across the top of the dashboard)
+.o_fp_kpi_tile {
+    @extend .o_fp_card_compact;
+    .o_fp_kpi_label {
+        font-size: .66rem;
+        color: $fp-muted;
+        text-transform: uppercase;
+        letter-spacing: .05em;
+        font-weight: 600;
+        margin-bottom: .2rem;
+    }
+    .o_fp_kpi_value {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: $fp-text;
+        line-height: 1;
+    }
+    .o_fp_kpi_hint {
+        font-size: .7rem;
+        margin-top: .2rem;
+        color: $fp-muted;
+        display: block;
+        text-decoration: none;
+        &.o_fp_hint_action {
+            color: $fp-teal;
+            font-weight: 500;
+        }
+        &.o_fp_hint_success { color: $fp-success-text; font-weight: 500; }
+        &.o_fp_hint_warn { color: $fp-amber-text; font-weight: 500; }
+    }
+    // Highlighted KPI (the In-Flight Jobs hero metric)
+    &.o_fp_kpi_hero {
+        background: $fp-gradient-mint;
+        border-color: $fp-aqua;
+        .o_fp_kpi_label,
+        .o_fp_kpi_value {
+            color: $fp-teal-dark;
+        }
+    }
+}
+
+// Doc chip (compact attachment pill)
+.o_fp_doc_chip {
+    display: inline-flex;
+    align-items: center;
+    gap: .35rem;
+    padding: .25rem .55rem;
+    background: $fp-section-bg;
+    color: $fp-teal;
+    border: 1px solid $fp-card-border;
+    border-radius: $fp-radius-chip;
+    font-size: .7rem;
+    font-weight: 500;
+    text-decoration: none;
+    &:hover {
+        background: $fp-mint;
+        color: $fp-teal-dark;
+    }
+    &.o_fp_doc_chip_pending {
+        background: $fp-card-bg;
+        color: $fp-muted-light;
+        border: 1px dashed $fp-card-border-dark;
+        cursor: default;
+    }
+}
+
+// Document row (used inside grouped doc panel)
+.o_fp_doc_row {
+    display: flex;
+    align-items: center;
+    padding: .55rem .7rem;
+    background: $fp-page-bg;
+    border-radius: $fp-radius-chip;
+    margin-bottom: .4rem;
+    text-decoration: none;
+    transition: background .12s ease;
+    &:hover { background: $fp-section-bg; }
+
+    .o_fp_doc_icon {
+        width: 32px;
+        height: 32px;
+        border-radius: $fp-radius-icon;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: .85rem;
+        margin-right: .7rem;
+        flex-shrink: 0;
+    }
+    .o_fp_doc_meta { flex: 1; min-width: 0; }
+    .o_fp_doc_name {
+        font-size: .84rem;
+        color: $fp-text;
+        font-weight: 500;
+    }
+    .o_fp_doc_sub {
+        font-size: .7rem;
+        color: $fp-muted-light;
+    }
+    .o_fp_doc_action {
+        color: $fp-teal;
+        font-size: .74rem;
+        text-decoration: none;
+        font-weight: 500;
+        padding: .25rem .5rem;
+    }
+
+    // Icon color variants — tint per doc category
+    .o_fp_doc_icon_input { background: #eff6ff; color: #1e40af; }
+    .o_fp_doc_icon_drawing { background: $fp-success-bg; color: $fp-success-text; }
+    .o_fp_doc_icon_spec { background: $fp-amber-bg; color: $fp-amber-text; }
+    .o_fp_doc_icon_quality { background: $fp-mint; color: $fp-teal-dark; }
+    .o_fp_doc_icon_shipping { background: $fp-mint-pastel; color: $fp-teal; }
+    .o_fp_doc_icon_pending { background: $fp-section-bg; color: $fp-muted-light; }
+
+    // Pending state for not-yet-generated docs
+    &.o_fp_doc_row_pending {
+        background: $fp-card-bg;
+        border: 1px dashed $fp-card-border;
+        opacity: .9;
+        cursor: default;
+        .o_fp_doc_name, .o_fp_doc_sub { color: $fp-muted-light; }
+    }
+}
+
+// Doc group label
+.o_fp_doc_group_label {
+    font-size: .7rem;
+    color: $fp-muted;
+    text-transform: uppercase;
+    letter-spacing: .04em;
+    font-weight: 600;
+    margin-bottom: .45rem;
+}