Neumorphism UI Kit - Free HTML/CSS UI Kit

Color Palette

Soft Background #E0E5EC

Primary Accent #667EEA

Light Shadow #FFFFFF

Dark Shadow #A3B1C6

Main Text #4A5568

Muted Text #A0AEC0

Typography

Navbars

Soft Simple Navbar

HTML

<nav class="nm-navbar nm-flat">
    <div class="nm-nav-container">
        <div class="nm-logo">
            <div class="nm-logo-icon nm-flat-sm">
                <svg viewBox="0 0 24 24" width="20" height="20" stroke="var(--nm-primary)" stroke-width="2" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
            </div>
            <span>Soft<span>UI</span></span>
        </div>
        
        <div class="nm-nav-links">
            <a href="#" class="active">Features</a>
            <a href="#">Solutions</a>
            <a href="#">Resources</a>
            <a href="#">Pricing</a>
        </div>
        
        <div class="nm-nav-actions">
            <a href="#" class="nm-btn">Log In</a>
            <a href="#" class="nm-btn nm-btn-primary">Get Started</a>
        </div>
        
        <button class="nm-mobile-toggle nm-btn-circle">
            <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
        </button>
    </div>
</nav>

CSS (Component Only)

/* Component: Soft Simple Navbar */
/* NOTE: This component requires base.css to be included in your page. */

.nm-navbar {
    width: 100%;
    position: relative;
    top: 0;
    z-index: 100;
}

.nm-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nm-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--nm-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--nm-text-main);
}

.nm-logo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nm-logo span span {
    font-weight: 400;
    color: var(--nm-text-muted);
}

.nm-nav-links {
    display: flex;
    gap: 1rem;
}

.nm-nav-links a {
    text-decoration: none;
    color: var(--nm-text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.nm-nav-links a:hover {
    color: var(--nm-primary);
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-nav-links a.active {
    color: var(--nm-primary);
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-nav-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.nm-mobile-toggle {
    display: none;
}

@media (max-width: 768px) {
    .nm-nav-links, .nm-nav-actions {
        display: none;
    }
    .nm-mobile-toggle {
        display: flex;
    }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --nm-bg: #e0e5ec;
    --nm-primary: #667eea;
    --nm-shadow-light: #ffffff;
    --nm-shadow-dark: #a3b1c6;
    
    /* Text colors */
    --nm-text-main: #4a5568;
    --nm-text-muted: #a0aec0;
    
    --nm-font-heading: 'Nunito', sans-serif;
    --nm-font-body: 'Roboto', sans-serif;
    
    /* Neumorphic Shadows */
    --nm-drop-shadow: 8px 8px 16px var(--nm-shadow-dark), -8px -8px 16px var(--nm-shadow-light);
    --nm-drop-shadow-sm: 4px 4px 8px var(--nm-shadow-dark), -4px -4px 8px var(--nm-shadow-light);
    --nm-drop-shadow-hover: 12px 12px 20px var(--nm-shadow-dark), -12px -12px 20px var(--nm-shadow-light);
    
    --nm-inset-shadow: inset 6px 6px 12px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light);
    --nm-inset-shadow-sm: inset 3px 3px 6px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light);
}

body {
    margin: 0;
    font-family: var(--nm-font-body);
    color: var(--nm-text-main);
    background-color: var(--nm-bg);
    -webkit-font-smoothing: antialiased;
}

/* Neumorphic Utilities */
.nm-flat {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow);
    border-radius: 16px;
}

.nm-flat-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow-sm);
    border-radius: 12px;
}

.nm-inset {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow);
    border-radius: 12px;
}

.nm-inset-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow-sm);
    border-radius: 8px;
}

/* Global Buttons */
.nm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--nm-font-heading);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.5rem;
    background: var(--nm-bg);
    color: var(--nm-text-main);
}

.nm-btn-primary {
    color: var(--nm-primary);
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-primary:hover {
    box-shadow: var(--nm-drop-shadow-hover);
    transform: translateY(-2px);
}

.nm-btn-primary:active {
    box-shadow: var(--nm-inset-shadow);
    transform: translateY(0);
}

.nm-btn-outline {
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-btn-outline:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-outline:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--nm-drop-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nm-btn-circle:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-circle:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-block {
    width: 100%;
}

/* Global Form Inputs */
.nm-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-family: var(--nm-font-body);
    font-size: 0.95rem;
    color: var(--nm-text-main);
    background: var(--nm-bg);
    border: none;
    box-shadow: var(--nm-inset-shadow);
    outline: none;
    transition: all 0.3s ease;
}

.nm-input::placeholder {
    color: var(--nm-text-muted);
    opacity: 0.8;
}

.nm-input:focus {
    box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -8px -8px 16px var(--nm-shadow-light), 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.nm-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nm-text-main);
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nm-font-heading);
    margin: 0;
    color: #2d3748; /* Slightly darker than text-main for headings */
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--nm-text-muted);
}

.nm-text-primary {
    color: var(--nm-primary);
}


/* --- COMPONENT STYLES --- */
.nm-navbar {
    width: 100%;
    position: relative;
    top: 0;
    z-index: 100;
}

.nm-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nm-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--nm-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--nm-text-main);
}

.nm-logo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nm-logo span span {
    font-weight: 400;
    color: var(--nm-text-muted);
}

.nm-nav-links {
    display: flex;
    gap: 1rem;
}

.nm-nav-links a {
    text-decoration: none;
    color: var(--nm-text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.nm-nav-links a:hover {
    color: var(--nm-primary);
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-nav-links a.active {
    color: var(--nm-primary);
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-nav-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.nm-mobile-toggle {
    display: none;
}

@media (max-width: 768px) {
    .nm-nav-links, .nm-nav-actions {
        display: none;
    }
    .nm-mobile-toggle {
        display: flex;
    }
}

Soft Sidebar

HTML

<aside class="nm-sidebar nm-flat">
    <div class="nm-sidebar-header">
        <div class="nm-logo">
            <div class="nm-logo-icon nm-flat-sm">
                <svg viewBox="0 0 24 24" width="20" height="20" stroke="var(--nm-primary)" stroke-width="2" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
            </div>
            <span>Soft<span>UI</span></span>
        </div>
    </div>
    <nav class="nm-sidebar-nav">
        <ul>
            <li><a href="#" class="active"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg> Dashboard</a></li>
            <li><a href="#"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg> Team</a></li>
            <li><a href="#"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg> Projects</a></li>
            <li><a href="#"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg> Calendar</a></li>
            <li><a href="#"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path></svg> Inbox</a></li>
        </ul>
        <div class="nm-nav-divider nm-inset-sm"></div>
        <ul>
            <li><a href="#"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg> Settings</a></li>
        </ul>
    </nav>
    <div class="nm-sidebar-footer">
        <div class="nm-user-profile nm-flat-sm">
            <div class="nm-avatar">
                <img src="https://i.pravatar.cc/100?img=32" alt="User">
                <div class="nm-status-indicator"></div>
            </div>
            <div class="nm-user-info">
                <strong>Sarah Jenkins</strong>
                <span>Pro Member</span>
            </div>
        </div>
    </div>
</aside>

CSS (Component Only)

/* Component: Soft Sidebar */
/* NOTE: This component requires base.css to be included in your page. */

.nm-sidebar {
    width: 280px;
    height: 600px; /* Fixed height for preview purposes */
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    font-family: var(--nm-font-body);
}

.nm-sidebar-header {
    margin-bottom: 2.5rem;
}

.nm-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--nm-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--nm-text-main);
}

.nm-logo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nm-logo span span {
    font-weight: 400;
    color: var(--nm-text-muted);
}

.nm-sidebar-nav {
    flex: 1;
}

.nm-sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.nm-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    color: var(--nm-text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.nm-sidebar-nav a svg {
    color: var(--nm-text-muted);
    transition: color 0.2s ease;
}

.nm-sidebar-nav a:hover {
    color: var(--nm-text-main);
}

.nm-sidebar-nav a.active {
    box-shadow: var(--nm-inset-shadow-sm);
    color: var(--nm-primary);
}

.nm-sidebar-nav a.active svg {
    color: var(--nm-primary);
}

.nm-nav-divider {
    height: 2px;
    margin: 1.5rem 0;
    border-radius: 1px;
}

.nm-sidebar-footer {
    margin-top: auto;
}

.nm-user-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 16px;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.nm-user-profile:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-user-profile:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 2px;
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.nm-status-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid var(--nm-bg);
}

.nm-user-info {
    display: flex;
    flex-direction: column;
}

.nm-user-info strong {
    font-size: 0.95rem;
    color: var(--nm-text-main);
    font-weight: 700;
}

.nm-user-info span {
    font-size: 0.8rem;
    color: var(--nm-text-muted);
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --nm-bg: #e0e5ec;
    --nm-primary: #667eea;
    --nm-shadow-light: #ffffff;
    --nm-shadow-dark: #a3b1c6;
    
    /* Text colors */
    --nm-text-main: #4a5568;
    --nm-text-muted: #a0aec0;
    
    --nm-font-heading: 'Nunito', sans-serif;
    --nm-font-body: 'Roboto', sans-serif;
    
    /* Neumorphic Shadows */
    --nm-drop-shadow: 8px 8px 16px var(--nm-shadow-dark), -8px -8px 16px var(--nm-shadow-light);
    --nm-drop-shadow-sm: 4px 4px 8px var(--nm-shadow-dark), -4px -4px 8px var(--nm-shadow-light);
    --nm-drop-shadow-hover: 12px 12px 20px var(--nm-shadow-dark), -12px -12px 20px var(--nm-shadow-light);
    
    --nm-inset-shadow: inset 6px 6px 12px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light);
    --nm-inset-shadow-sm: inset 3px 3px 6px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light);
}

body {
    margin: 0;
    font-family: var(--nm-font-body);
    color: var(--nm-text-main);
    background-color: var(--nm-bg);
    -webkit-font-smoothing: antialiased;
}

/* Neumorphic Utilities */
.nm-flat {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow);
    border-radius: 16px;
}

.nm-flat-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow-sm);
    border-radius: 12px;
}

.nm-inset {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow);
    border-radius: 12px;
}

.nm-inset-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow-sm);
    border-radius: 8px;
}

/* Global Buttons */
.nm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--nm-font-heading);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.5rem;
    background: var(--nm-bg);
    color: var(--nm-text-main);
}

.nm-btn-primary {
    color: var(--nm-primary);
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-primary:hover {
    box-shadow: var(--nm-drop-shadow-hover);
    transform: translateY(-2px);
}

.nm-btn-primary:active {
    box-shadow: var(--nm-inset-shadow);
    transform: translateY(0);
}

.nm-btn-outline {
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-btn-outline:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-outline:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--nm-drop-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nm-btn-circle:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-circle:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-block {
    width: 100%;
}

/* Global Form Inputs */
.nm-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-family: var(--nm-font-body);
    font-size: 0.95rem;
    color: var(--nm-text-main);
    background: var(--nm-bg);
    border: none;
    box-shadow: var(--nm-inset-shadow);
    outline: none;
    transition: all 0.3s ease;
}

.nm-input::placeholder {
    color: var(--nm-text-muted);
    opacity: 0.8;
}

.nm-input:focus {
    box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -8px -8px 16px var(--nm-shadow-light), 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.nm-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nm-text-main);
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nm-font-heading);
    margin: 0;
    color: #2d3748; /* Slightly darker than text-main for headings */
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--nm-text-muted);
}

.nm-text-primary {
    color: var(--nm-primary);
}


/* --- COMPONENT STYLES --- */
.nm-sidebar {
    width: 280px;
    height: 600px; /* Fixed height for preview purposes */
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    font-family: var(--nm-font-body);
}

.nm-sidebar-header {
    margin-bottom: 2.5rem;
}

.nm-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--nm-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--nm-text-main);
}

.nm-logo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nm-logo span span {
    font-weight: 400;
    color: var(--nm-text-muted);
}

.nm-sidebar-nav {
    flex: 1;
}

.nm-sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.nm-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    color: var(--nm-text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.nm-sidebar-nav a svg {
    color: var(--nm-text-muted);
    transition: color 0.2s ease;
}

.nm-sidebar-nav a:hover {
    color: var(--nm-text-main);
}

.nm-sidebar-nav a.active {
    box-shadow: var(--nm-inset-shadow-sm);
    color: var(--nm-primary);
}

.nm-sidebar-nav a.active svg {
    color: var(--nm-primary);
}

.nm-nav-divider {
    height: 2px;
    margin: 1.5rem 0;
    border-radius: 1px;
}

.nm-sidebar-footer {
    margin-top: auto;
}

.nm-user-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 16px;
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.nm-user-profile:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-user-profile:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 2px;
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.nm-status-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    border: 2px solid var(--nm-bg);
}

.nm-user-info {
    display: flex;
    flex-direction: column;
}

.nm-user-info strong {
    font-size: 0.95rem;
    color: var(--nm-text-main);
    font-weight: 700;
}

.nm-user-info span {
    font-size: 0.8rem;
    color: var(--nm-text-muted);
}

Hero Sections

Soft Centered Hero

HTML

<section class="nm-hero-centered">
    <div class="nm-hero-container">
        <div class="nm-badge nm-inset-sm">
            <span class="nm-badge-dot"></span>
            Soft UI Version 2.0
        </div>
        <h1 class="nm-hero-title">
            Design beautifully with<br>
            <span class="nm-text-primary">Neumorphism</span>
        </h1>
        <p class="nm-hero-subtitle">
            Create stunning, tactile user interfaces with our premium Soft UI component library. Built for modern web applications that demand a physical touch.
        </p>
        <div class="nm-hero-actions">
            <button class="nm-btn nm-btn-primary">Get Started Free</button>
            <button class="nm-btn nm-btn-outline">View Documentation</button>
        </div>
        
        <div class="nm-hero-preview nm-flat">
            <div class="nm-preview-header">
                <div class="nm-window-dots">
                    <span class="nm-inset-sm"></span><span class="nm-inset-sm"></span><span class="nm-inset-sm"></span>
                </div>
            </div>
            <div class="nm-preview-body">
                <div class="nm-skeleton-line nm-inset w-3/4"></div>
                <div class="nm-skeleton-line nm-inset w-1/2"></div>
                <div class="nm-skeleton-line nm-inset w-full mt-4"></div>
                <div class="nm-skeleton-line nm-inset w-full"></div>
                <div class="nm-skeleton-line nm-inset w-5/6"></div>
            </div>
        </div>
    </div>
</section>

CSS (Component Only)

/* Component: Soft Centered Hero */
/* NOTE: This component requires base.css to be included in your page. */

.nm-hero-centered {
    position: relative;
    padding: 6rem 1rem 4rem;
    text-align: center;
}

.nm-hero-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--nm-primary);
}

.nm-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--nm-primary);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

.nm-hero-title {
    font-size: 4rem;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.nm-hero-subtitle {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

.nm-hero-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 4rem;
}

.nm-hero-preview {
    width: 100%;
    max-width: 800px;
    padding: 1.5rem;
    text-align: left;
}

.nm-preview-header {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

.nm-window-dots {
    display: flex;
    gap: 0.5rem;
}

.nm-window-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.nm-skeleton-line {
    height: 14px;
    margin-bottom: 1.25rem;
}

.w-3\/4 { width: 75%; }
.w-1\/2 { width: 50%; }
.w-full { width: 100%; }
.w-5\/6 { width: 83.333%; }
.mt-4 { margin-top: 1.5rem; }

@media (max-width: 768px) {
    .nm-hero-title { font-size: 2.5rem; }
    .nm-hero-subtitle { font-size: 1.1rem; }
    .nm-hero-actions { flex-direction: column; width: 100%; max-width: 300px; margin: 0 auto 3rem; }
    .nm-hero-actions button { width: 100%; }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --nm-bg: #e0e5ec;
    --nm-primary: #667eea;
    --nm-shadow-light: #ffffff;
    --nm-shadow-dark: #a3b1c6;
    
    /* Text colors */
    --nm-text-main: #4a5568;
    --nm-text-muted: #a0aec0;
    
    --nm-font-heading: 'Nunito', sans-serif;
    --nm-font-body: 'Roboto', sans-serif;
    
    /* Neumorphic Shadows */
    --nm-drop-shadow: 8px 8px 16px var(--nm-shadow-dark), -8px -8px 16px var(--nm-shadow-light);
    --nm-drop-shadow-sm: 4px 4px 8px var(--nm-shadow-dark), -4px -4px 8px var(--nm-shadow-light);
    --nm-drop-shadow-hover: 12px 12px 20px var(--nm-shadow-dark), -12px -12px 20px var(--nm-shadow-light);
    
    --nm-inset-shadow: inset 6px 6px 12px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light);
    --nm-inset-shadow-sm: inset 3px 3px 6px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light);
}

body {
    margin: 0;
    font-family: var(--nm-font-body);
    color: var(--nm-text-main);
    background-color: var(--nm-bg);
    -webkit-font-smoothing: antialiased;
}

/* Neumorphic Utilities */
.nm-flat {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow);
    border-radius: 16px;
}

.nm-flat-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow-sm);
    border-radius: 12px;
}

.nm-inset {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow);
    border-radius: 12px;
}

.nm-inset-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow-sm);
    border-radius: 8px;
}

/* Global Buttons */
.nm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--nm-font-heading);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.5rem;
    background: var(--nm-bg);
    color: var(--nm-text-main);
}

.nm-btn-primary {
    color: var(--nm-primary);
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-primary:hover {
    box-shadow: var(--nm-drop-shadow-hover);
    transform: translateY(-2px);
}

.nm-btn-primary:active {
    box-shadow: var(--nm-inset-shadow);
    transform: translateY(0);
}

.nm-btn-outline {
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-btn-outline:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-outline:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--nm-drop-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nm-btn-circle:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-circle:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-block {
    width: 100%;
}

/* Global Form Inputs */
.nm-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-family: var(--nm-font-body);
    font-size: 0.95rem;
    color: var(--nm-text-main);
    background: var(--nm-bg);
    border: none;
    box-shadow: var(--nm-inset-shadow);
    outline: none;
    transition: all 0.3s ease;
}

.nm-input::placeholder {
    color: var(--nm-text-muted);
    opacity: 0.8;
}

.nm-input:focus {
    box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -8px -8px 16px var(--nm-shadow-light), 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.nm-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nm-text-main);
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nm-font-heading);
    margin: 0;
    color: #2d3748; /* Slightly darker than text-main for headings */
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--nm-text-muted);
}

.nm-text-primary {
    color: var(--nm-primary);
}


/* --- COMPONENT STYLES --- */
.nm-hero-centered {
    position: relative;
    padding: 6rem 1rem 4rem;
    text-align: center;
}

.nm-hero-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--nm-primary);
}

.nm-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--nm-primary);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

.nm-hero-title {
    font-size: 4rem;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.nm-hero-subtitle {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

.nm-hero-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 4rem;
}

.nm-hero-preview {
    width: 100%;
    max-width: 800px;
    padding: 1.5rem;
    text-align: left;
}

.nm-preview-header {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

.nm-window-dots {
    display: flex;
    gap: 0.5rem;
}

.nm-window-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.nm-skeleton-line {
    height: 14px;
    margin-bottom: 1.25rem;
}

.w-3\/4 { width: 75%; }
.w-1\/2 { width: 50%; }
.w-full { width: 100%; }
.w-5\/6 { width: 83.333%; }
.mt-4 { margin-top: 1.5rem; }

@media (max-width: 768px) {
    .nm-hero-title { font-size: 2.5rem; }
    .nm-hero-subtitle { font-size: 1.1rem; }
    .nm-hero-actions { flex-direction: column; width: 100%; max-width: 300px; margin: 0 auto 3rem; }
    .nm-hero-actions button { width: 100%; }
}

Soft Split Hero

HTML

<section class="nm-hero-split">
    <div class="nm-hero-content">
        <h2 class="nm-hero-title">Soft & Tactile <span class="nm-text-primary">Interfaces</span></h2>
        <p class="nm-hero-subtitle">High-quality components with Neumorphism at its core. Create stunning dashboards and landing pages in minutes with our clean new kit.</p>
        <div class="nm-hero-actions">
            <a href="#" class="nm-btn nm-btn-primary">Start Building</a>
            <a href="#" class="nm-btn nm-btn-outline">Browse Components</a>
        </div>
    </div>
    <div class="nm-hero-visual">
        <div class="nm-visual-card nm-flat card-1">
            <div class="nm-card-icon nm-inset-sm nm-text-primary">🔥</div>
            <div class="nm-card-val">3x Faster</div>
            <div class="nm-card-label">Development Speed</div>
        </div>
        <div class="nm-visual-card nm-flat card-2">
            <div class="nm-card-icon nm-inset-sm nm-text-primary">✨</div>
            <div class="nm-card-val">100%</div>
            <div class="nm-card-label">Beautiful Design</div>
        </div>
    </div>
</section>

CSS (Component Only)

/* Component: Soft Split Hero */
/* NOTE: This component requires base.css to be included in your page. */

.nm-hero-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 6rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.nm-hero-visual {
    position: relative;
    height: 400px;
}

.nm-visual-card {
    position: absolute;
    padding: 1.5rem;
    width: 220px;
    z-index: 10;
    transition: transform 0.5s ease;
}

.card-1 { top: 20%; left: 0%; transform: rotate(-3deg); }
.card-2 { top: 40%; right: 10%; transform: rotate(3deg); }

.nm-visual-card:hover { transform: scale(1.05) rotate(0deg); }

.nm-card-icon { 
    font-size: 1.5rem; 
    margin-bottom: 1rem; 
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.nm-card-val { font-size: 1.5rem; font-weight: 800; color: var(--nm-text-main); }
.nm-card-label { font-size: 0.85rem; color: var(--nm-text-muted); }

@media (max-width: 992px) {
    .nm-hero-split { grid-template-columns: 1fr; text-align: center; }
    .nm-hero-visual { height: 300px; display: flex; justify-content: center; align-items: center; }
    .card-1, .card-2 { position: relative; top: 0; left: 0; right: 0; transform: none; margin: 0 1rem; }
    .nm-card-icon { margin: 0 auto 1rem; }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --nm-bg: #e0e5ec;
    --nm-primary: #667eea;
    --nm-shadow-light: #ffffff;
    --nm-shadow-dark: #a3b1c6;
    
    /* Text colors */
    --nm-text-main: #4a5568;
    --nm-text-muted: #a0aec0;
    
    --nm-font-heading: 'Nunito', sans-serif;
    --nm-font-body: 'Roboto', sans-serif;
    
    /* Neumorphic Shadows */
    --nm-drop-shadow: 8px 8px 16px var(--nm-shadow-dark), -8px -8px 16px var(--nm-shadow-light);
    --nm-drop-shadow-sm: 4px 4px 8px var(--nm-shadow-dark), -4px -4px 8px var(--nm-shadow-light);
    --nm-drop-shadow-hover: 12px 12px 20px var(--nm-shadow-dark), -12px -12px 20px var(--nm-shadow-light);
    
    --nm-inset-shadow: inset 6px 6px 12px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light);
    --nm-inset-shadow-sm: inset 3px 3px 6px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light);
}

body {
    margin: 0;
    font-family: var(--nm-font-body);
    color: var(--nm-text-main);
    background-color: var(--nm-bg);
    -webkit-font-smoothing: antialiased;
}

/* Neumorphic Utilities */
.nm-flat {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow);
    border-radius: 16px;
}

.nm-flat-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow-sm);
    border-radius: 12px;
}

.nm-inset {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow);
    border-radius: 12px;
}

.nm-inset-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow-sm);
    border-radius: 8px;
}

/* Global Buttons */
.nm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--nm-font-heading);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.5rem;
    background: var(--nm-bg);
    color: var(--nm-text-main);
}

.nm-btn-primary {
    color: var(--nm-primary);
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-primary:hover {
    box-shadow: var(--nm-drop-shadow-hover);
    transform: translateY(-2px);
}

.nm-btn-primary:active {
    box-shadow: var(--nm-inset-shadow);
    transform: translateY(0);
}

.nm-btn-outline {
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-btn-outline:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-outline:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--nm-drop-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nm-btn-circle:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-circle:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-block {
    width: 100%;
}

/* Global Form Inputs */
.nm-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-family: var(--nm-font-body);
    font-size: 0.95rem;
    color: var(--nm-text-main);
    background: var(--nm-bg);
    border: none;
    box-shadow: var(--nm-inset-shadow);
    outline: none;
    transition: all 0.3s ease;
}

.nm-input::placeholder {
    color: var(--nm-text-muted);
    opacity: 0.8;
}

.nm-input:focus {
    box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -8px -8px 16px var(--nm-shadow-light), 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.nm-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nm-text-main);
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nm-font-heading);
    margin: 0;
    color: #2d3748; /* Slightly darker than text-main for headings */
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--nm-text-muted);
}

.nm-text-primary {
    color: var(--nm-primary);
}


/* --- COMPONENT STYLES --- */
.nm-hero-split {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 6rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.nm-hero-visual {
    position: relative;
    height: 400px;
}

.nm-visual-card {
    position: absolute;
    padding: 1.5rem;
    width: 220px;
    z-index: 10;
    transition: transform 0.5s ease;
}

.card-1 { top: 20%; left: 0%; transform: rotate(-3deg); }
.card-2 { top: 40%; right: 10%; transform: rotate(3deg); }

.nm-visual-card:hover { transform: scale(1.05) rotate(0deg); }

.nm-card-icon { 
    font-size: 1.5rem; 
    margin-bottom: 1rem; 
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.nm-card-val { font-size: 1.5rem; font-weight: 800; color: var(--nm-text-main); }
.nm-card-label { font-size: 0.85rem; color: var(--nm-text-muted); }

@media (max-width: 992px) {
    .nm-hero-split { grid-template-columns: 1fr; text-align: center; }
    .nm-hero-visual { height: 300px; display: flex; justify-content: center; align-items: center; }
    .card-1, .card-2 { position: relative; top: 0; left: 0; right: 0; transform: none; margin: 0 1rem; }
    .nm-card-icon { margin: 0 auto 1rem; }
}

Buttons

Soft Primary Buttons

HTML

<div class="nm-btn-group">
    <button class="nm-btn nm-btn-primary">Primary Action</button>
    <button class="nm-btn nm-btn-primary">
        <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><path d="M5 12h14"></path><path d="M12 5l7 7-7 7"></path></svg>
        With Icon
    </button>
    <button class="nm-btn nm-btn-primary nm-btn-loading" disabled>
        Processing...
    </button>
</div>

CSS (Component Only)

/* Component: Soft Primary Buttons */
/* NOTE: This component requires base.css to be included in your page. */

.nm-btn-group {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.nm-btn-loading {
    opacity: 0.7;
    cursor: not-allowed;
    position: relative;
    padding-left: 3rem;
}

.nm-btn-loading::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    width: 14px;
    height: 14px;
    border: 2px solid var(--nm-shadow-dark);
    border-top-color: var(--nm-primary);
    border-radius: 50%;
    animation: nm-spin 1s linear infinite;
}

@keyframes nm-spin {
    to { transform: rotate(360deg); }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --nm-bg: #e0e5ec;
    --nm-primary: #667eea;
    --nm-shadow-light: #ffffff;
    --nm-shadow-dark: #a3b1c6;
    
    /* Text colors */
    --nm-text-main: #4a5568;
    --nm-text-muted: #a0aec0;
    
    --nm-font-heading: 'Nunito', sans-serif;
    --nm-font-body: 'Roboto', sans-serif;
    
    /* Neumorphic Shadows */
    --nm-drop-shadow: 8px 8px 16px var(--nm-shadow-dark), -8px -8px 16px var(--nm-shadow-light);
    --nm-drop-shadow-sm: 4px 4px 8px var(--nm-shadow-dark), -4px -4px 8px var(--nm-shadow-light);
    --nm-drop-shadow-hover: 12px 12px 20px var(--nm-shadow-dark), -12px -12px 20px var(--nm-shadow-light);
    
    --nm-inset-shadow: inset 6px 6px 12px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light);
    --nm-inset-shadow-sm: inset 3px 3px 6px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light);
}

body {
    margin: 0;
    font-family: var(--nm-font-body);
    color: var(--nm-text-main);
    background-color: var(--nm-bg);
    -webkit-font-smoothing: antialiased;
}

/* Neumorphic Utilities */
.nm-flat {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow);
    border-radius: 16px;
}

.nm-flat-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow-sm);
    border-radius: 12px;
}

.nm-inset {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow);
    border-radius: 12px;
}

.nm-inset-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow-sm);
    border-radius: 8px;
}

/* Global Buttons */
.nm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--nm-font-heading);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.5rem;
    background: var(--nm-bg);
    color: var(--nm-text-main);
}

.nm-btn-primary {
    color: var(--nm-primary);
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-primary:hover {
    box-shadow: var(--nm-drop-shadow-hover);
    transform: translateY(-2px);
}

.nm-btn-primary:active {
    box-shadow: var(--nm-inset-shadow);
    transform: translateY(0);
}

.nm-btn-outline {
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-btn-outline:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-outline:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--nm-drop-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nm-btn-circle:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-circle:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-block {
    width: 100%;
}

/* Global Form Inputs */
.nm-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-family: var(--nm-font-body);
    font-size: 0.95rem;
    color: var(--nm-text-main);
    background: var(--nm-bg);
    border: none;
    box-shadow: var(--nm-inset-shadow);
    outline: none;
    transition: all 0.3s ease;
}

.nm-input::placeholder {
    color: var(--nm-text-muted);
    opacity: 0.8;
}

.nm-input:focus {
    box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -8px -8px 16px var(--nm-shadow-light), 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.nm-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nm-text-main);
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nm-font-heading);
    margin: 0;
    color: #2d3748; /* Slightly darker than text-main for headings */
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--nm-text-muted);
}

.nm-text-primary {
    color: var(--nm-primary);
}


/* --- COMPONENT STYLES --- */
.nm-btn-group {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.nm-btn-loading {
    opacity: 0.7;
    cursor: not-allowed;
    position: relative;
    padding-left: 3rem;
}

.nm-btn-loading::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    width: 14px;
    height: 14px;
    border: 2px solid var(--nm-shadow-dark);
    border-top-color: var(--nm-primary);
    border-radius: 50%;
    animation: nm-spin 1s linear infinite;
}

@keyframes nm-spin {
    to { transform: rotate(360deg); }
}

Soft Secondary Buttons

HTML

<div class="nm-btn-group">
    <button class="nm-btn nm-btn-outline">Secondary Action</button>
    <button class="nm-btn nm-btn-outline">
        <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
        Add Item
    </button>
</div>

CSS (Component Only)

/* Component: Soft Secondary Buttons */
/* NOTE: This component requires base.css to be included in your page. */

.nm-btn-group {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --nm-bg: #e0e5ec;
    --nm-primary: #667eea;
    --nm-shadow-light: #ffffff;
    --nm-shadow-dark: #a3b1c6;
    
    /* Text colors */
    --nm-text-main: #4a5568;
    --nm-text-muted: #a0aec0;
    
    --nm-font-heading: 'Nunito', sans-serif;
    --nm-font-body: 'Roboto', sans-serif;
    
    /* Neumorphic Shadows */
    --nm-drop-shadow: 8px 8px 16px var(--nm-shadow-dark), -8px -8px 16px var(--nm-shadow-light);
    --nm-drop-shadow-sm: 4px 4px 8px var(--nm-shadow-dark), -4px -4px 8px var(--nm-shadow-light);
    --nm-drop-shadow-hover: 12px 12px 20px var(--nm-shadow-dark), -12px -12px 20px var(--nm-shadow-light);
    
    --nm-inset-shadow: inset 6px 6px 12px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light);
    --nm-inset-shadow-sm: inset 3px 3px 6px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light);
}

body {
    margin: 0;
    font-family: var(--nm-font-body);
    color: var(--nm-text-main);
    background-color: var(--nm-bg);
    -webkit-font-smoothing: antialiased;
}

/* Neumorphic Utilities */
.nm-flat {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow);
    border-radius: 16px;
}

.nm-flat-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow-sm);
    border-radius: 12px;
}

.nm-inset {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow);
    border-radius: 12px;
}

.nm-inset-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow-sm);
    border-radius: 8px;
}

/* Global Buttons */
.nm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--nm-font-heading);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.5rem;
    background: var(--nm-bg);
    color: var(--nm-text-main);
}

.nm-btn-primary {
    color: var(--nm-primary);
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-primary:hover {
    box-shadow: var(--nm-drop-shadow-hover);
    transform: translateY(-2px);
}

.nm-btn-primary:active {
    box-shadow: var(--nm-inset-shadow);
    transform: translateY(0);
}

.nm-btn-outline {
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-btn-outline:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-outline:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--nm-drop-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nm-btn-circle:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-circle:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-block {
    width: 100%;
}

/* Global Form Inputs */
.nm-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-family: var(--nm-font-body);
    font-size: 0.95rem;
    color: var(--nm-text-main);
    background: var(--nm-bg);
    border: none;
    box-shadow: var(--nm-inset-shadow);
    outline: none;
    transition: all 0.3s ease;
}

.nm-input::placeholder {
    color: var(--nm-text-muted);
    opacity: 0.8;
}

.nm-input:focus {
    box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -8px -8px 16px var(--nm-shadow-light), 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.nm-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nm-text-main);
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nm-font-heading);
    margin: 0;
    color: #2d3748; /* Slightly darker than text-main for headings */
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--nm-text-muted);
}

.nm-text-primary {
    color: var(--nm-primary);
}


/* --- COMPONENT STYLES --- */
.nm-btn-group {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

Forms

Soft Login Form

HTML

<div class="nm-login-card nm-flat">
    <div class="nm-login-header">
        <h3>Welcome Back</h3>
        <p>Please enter your details to sign in</p>
    </div>
    <form class="nm-form">
        <div class="nm-form-group">
            <label for="email" class="nm-label">Email</label>
            <input type="email" id="email" placeholder="Enter your email" class="nm-input">
        </div>
        <div class="nm-form-group">
            <div class="nm-label-flex">
                <label for="password" class="nm-label">Password</label>
                <a href="#" class="nm-forgot-link">Forgot password?</a>
            </div>
            <input type="password" id="password" placeholder="••••••••" class="nm-input">
        </div>
        <div class="nm-form-group nm-checkbox-group">
            <input type="checkbox" id="remember">
            <label for="remember">Remember me for 30 days</label>
        </div>
        <button type="submit" class="nm-btn nm-btn-primary nm-btn-block">Sign In</button>
    </form>
    <div class="nm-login-footer">
        <p>Don't have an account? <a href="#">Sign up</a></p>
    </div>
</div>

CSS (Component Only)

/* Component: Soft Login Form */
/* NOTE: This component requires base.css to be included in your page. */

.nm-login-card {
    max-width: 400px;
    margin: 0 auto;
    padding: 2.5rem;
}

.nm-login-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.nm-login-header h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.nm-form-group {
    margin-bottom: 1.5rem;
}

.nm-label-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.nm-label-flex .nm-label {
    margin-bottom: 0;
}

.nm-forgot-link {
    font-size: 0.85rem;
    color: var(--nm-primary);
    text-decoration: none;
}

.nm-forgot-link:hover {
    text-decoration: underline;
}

.nm-checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.nm-checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--nm-primary);
    cursor: pointer;
    box-shadow: var(--nm-inset-shadow-sm);
    border-radius: 4px;
    border: none;
    outline: none;
}

.nm-checkbox-group label {
    margin-bottom: 0;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--nm-text-muted);
}

.nm-login-footer {
    margin-top: 2.5rem;
    text-align: center;
    font-size: 0.9rem;
}

.nm-login-footer a {
    color: var(--nm-primary);
    text-decoration: none;
    font-weight: 600;
}

.nm-login-footer a:hover {
    text-decoration: underline;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --nm-bg: #e0e5ec;
    --nm-primary: #667eea;
    --nm-shadow-light: #ffffff;
    --nm-shadow-dark: #a3b1c6;
    
    /* Text colors */
    --nm-text-main: #4a5568;
    --nm-text-muted: #a0aec0;
    
    --nm-font-heading: 'Nunito', sans-serif;
    --nm-font-body: 'Roboto', sans-serif;
    
    /* Neumorphic Shadows */
    --nm-drop-shadow: 8px 8px 16px var(--nm-shadow-dark), -8px -8px 16px var(--nm-shadow-light);
    --nm-drop-shadow-sm: 4px 4px 8px var(--nm-shadow-dark), -4px -4px 8px var(--nm-shadow-light);
    --nm-drop-shadow-hover: 12px 12px 20px var(--nm-shadow-dark), -12px -12px 20px var(--nm-shadow-light);
    
    --nm-inset-shadow: inset 6px 6px 12px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light);
    --nm-inset-shadow-sm: inset 3px 3px 6px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light);
}

body {
    margin: 0;
    font-family: var(--nm-font-body);
    color: var(--nm-text-main);
    background-color: var(--nm-bg);
    -webkit-font-smoothing: antialiased;
}

/* Neumorphic Utilities */
.nm-flat {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow);
    border-radius: 16px;
}

.nm-flat-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow-sm);
    border-radius: 12px;
}

.nm-inset {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow);
    border-radius: 12px;
}

.nm-inset-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow-sm);
    border-radius: 8px;
}

/* Global Buttons */
.nm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--nm-font-heading);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.5rem;
    background: var(--nm-bg);
    color: var(--nm-text-main);
}

.nm-btn-primary {
    color: var(--nm-primary);
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-primary:hover {
    box-shadow: var(--nm-drop-shadow-hover);
    transform: translateY(-2px);
}

.nm-btn-primary:active {
    box-shadow: var(--nm-inset-shadow);
    transform: translateY(0);
}

.nm-btn-outline {
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-btn-outline:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-outline:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--nm-drop-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nm-btn-circle:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-circle:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-block {
    width: 100%;
}

/* Global Form Inputs */
.nm-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-family: var(--nm-font-body);
    font-size: 0.95rem;
    color: var(--nm-text-main);
    background: var(--nm-bg);
    border: none;
    box-shadow: var(--nm-inset-shadow);
    outline: none;
    transition: all 0.3s ease;
}

.nm-input::placeholder {
    color: var(--nm-text-muted);
    opacity: 0.8;
}

.nm-input:focus {
    box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -8px -8px 16px var(--nm-shadow-light), 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.nm-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nm-text-main);
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nm-font-heading);
    margin: 0;
    color: #2d3748; /* Slightly darker than text-main for headings */
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--nm-text-muted);
}

.nm-text-primary {
    color: var(--nm-primary);
}


/* --- COMPONENT STYLES --- */
.nm-login-card {
    max-width: 400px;
    margin: 0 auto;
    padding: 2.5rem;
}

.nm-login-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.nm-login-header h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.nm-form-group {
    margin-bottom: 1.5rem;
}

.nm-label-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.nm-label-flex .nm-label {
    margin-bottom: 0;
}

.nm-forgot-link {
    font-size: 0.85rem;
    color: var(--nm-primary);
    text-decoration: none;
}

.nm-forgot-link:hover {
    text-decoration: underline;
}

.nm-checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.nm-checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--nm-primary);
    cursor: pointer;
    box-shadow: var(--nm-inset-shadow-sm);
    border-radius: 4px;
    border: none;
    outline: none;
}

.nm-checkbox-group label {
    margin-bottom: 0;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--nm-text-muted);
}

.nm-login-footer {
    margin-top: 2.5rem;
    text-align: center;
    font-size: 0.9rem;
}

.nm-login-footer a {
    color: var(--nm-primary);
    text-decoration: none;
    font-weight: 600;
}

.nm-login-footer a:hover {
    text-decoration: underline;
}

Soft Settings Form

HTML

<div class="nm-settings-panel nm-flat">
    <div class="nm-panel-header">
        <h3>Profile Settings</h3>
        <p>Update your account information and preferences</p>
    </div>
    
    <div class="nm-settings-body">
        <div class="nm-avatar-upload">
            <div class="nm-avatar-wrapper nm-flat-sm">
                <img src="https://i.pravatar.cc/150?img=32" alt="Profile" class="nm-avatar-lg">
            </div>
            <div class="nm-upload-actions">
                <button class="nm-btn nm-btn-primary">Change Avatar</button>
                <button class="nm-btn">Remove</button>
            </div>
        </div>
        
        <form class="nm-form-grid">
            <div class="nm-form-group">
                <label class="nm-label">First Name</label>
                <input type="text" class="nm-input" value="Sarah">
            </div>
            <div class="nm-form-group">
                <label class="nm-label">Last Name</label>
                <input type="text" class="nm-input" value="Jenkins">
            </div>
            <div class="nm-form-group full-width">
                <label class="nm-label">Email Address</label>
                <input type="email" class="nm-input" value="[email protected]">
            </div>
            <div class="nm-form-group full-width">
                <label class="nm-label">Bio</label>
                <textarea class="nm-input nm-textarea" rows="4">Product designer focusing on intuitive user experiences and clean interfaces.</textarea>
            </div>
            
            <div class="nm-form-group full-width nm-toggle-group">
                <div class="nm-toggle-info">
                    <label class="nm-label">Email Notifications</label>
                    <p>Receive weekly digest emails</p>
                </div>
                <label class="nm-toggle">
                    <input type="checkbox" checked>
                    <span class="nm-slider nm-inset-sm"></span>
                </label>
            </div>
        </form>
    </div>
    
    <div class="nm-panel-footer">
        <button class="nm-btn">Cancel</button>
        <button class="nm-btn nm-btn-primary">Save Changes</button>
    </div>
</div>

CSS (Component Only)

/* Component: Soft Settings Form */
/* NOTE: This component requires base.css to be included in your page. */

.nm-settings-panel {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 24px;
}

.nm-panel-header {
    padding: 2.5rem;
    border-bottom: 2px solid var(--nm-shadow-light);
    box-shadow: 0 2px 4px rgba(163, 177, 198, 0.1);
}

.nm-panel-header h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.nm-settings-body {
    padding: 2.5rem;
}

.nm-avatar-upload {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.nm-avatar-wrapper {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nm-avatar-lg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.nm-upload-actions {
    display: flex;
    gap: 1rem;
}

.nm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.nm-form-group.full-width {
    grid-column: 1 / -1;
}

.nm-textarea {
    resize: vertical;
    min-height: 120px;
}

.nm-toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    margin-top: 1rem;
    border-top: 2px solid var(--nm-shadow-light);
}

.nm-toggle-info .nm-label {
    margin-bottom: 0.25rem;
}

.nm-toggle-info p {
    font-size: 0.85rem;
}

.nm-toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 32px;
}

.nm-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.nm-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    transition: .4s;
    border-radius: 34px;
}

.nm-slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 4px;
    background-color: var(--nm-shadow-dark);
    transition: .4s;
    border-radius: 50%;
    box-shadow: var(--nm-drop-shadow-sm);
}

input:checked + .nm-slider:before {
    background-color: var(--nm-primary);
    transform: translateX(28px);
}

.nm-panel-footer {
    padding: 2rem 2.5rem;
    border-top: 2px solid var(--nm-shadow-light);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 24px 24px;
}

@media (max-width: 600px) {
    .nm-form-grid {
        grid-template-columns: 1fr;
    }
    .nm-avatar-upload {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .nm-panel-header, .nm-settings-body, .nm-panel-footer {
        padding: 1.5rem;
    }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --nm-bg: #e0e5ec;
    --nm-primary: #667eea;
    --nm-shadow-light: #ffffff;
    --nm-shadow-dark: #a3b1c6;
    
    /* Text colors */
    --nm-text-main: #4a5568;
    --nm-text-muted: #a0aec0;
    
    --nm-font-heading: 'Nunito', sans-serif;
    --nm-font-body: 'Roboto', sans-serif;
    
    /* Neumorphic Shadows */
    --nm-drop-shadow: 8px 8px 16px var(--nm-shadow-dark), -8px -8px 16px var(--nm-shadow-light);
    --nm-drop-shadow-sm: 4px 4px 8px var(--nm-shadow-dark), -4px -4px 8px var(--nm-shadow-light);
    --nm-drop-shadow-hover: 12px 12px 20px var(--nm-shadow-dark), -12px -12px 20px var(--nm-shadow-light);
    
    --nm-inset-shadow: inset 6px 6px 12px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light);
    --nm-inset-shadow-sm: inset 3px 3px 6px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light);
}

body {
    margin: 0;
    font-family: var(--nm-font-body);
    color: var(--nm-text-main);
    background-color: var(--nm-bg);
    -webkit-font-smoothing: antialiased;
}

/* Neumorphic Utilities */
.nm-flat {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow);
    border-radius: 16px;
}

.nm-flat-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow-sm);
    border-radius: 12px;
}

.nm-inset {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow);
    border-radius: 12px;
}

.nm-inset-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow-sm);
    border-radius: 8px;
}

/* Global Buttons */
.nm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--nm-font-heading);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.5rem;
    background: var(--nm-bg);
    color: var(--nm-text-main);
}

.nm-btn-primary {
    color: var(--nm-primary);
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-primary:hover {
    box-shadow: var(--nm-drop-shadow-hover);
    transform: translateY(-2px);
}

.nm-btn-primary:active {
    box-shadow: var(--nm-inset-shadow);
    transform: translateY(0);
}

.nm-btn-outline {
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-btn-outline:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-outline:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--nm-drop-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nm-btn-circle:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-circle:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-block {
    width: 100%;
}

/* Global Form Inputs */
.nm-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-family: var(--nm-font-body);
    font-size: 0.95rem;
    color: var(--nm-text-main);
    background: var(--nm-bg);
    border: none;
    box-shadow: var(--nm-inset-shadow);
    outline: none;
    transition: all 0.3s ease;
}

.nm-input::placeholder {
    color: var(--nm-text-muted);
    opacity: 0.8;
}

.nm-input:focus {
    box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -8px -8px 16px var(--nm-shadow-light), 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.nm-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nm-text-main);
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nm-font-heading);
    margin: 0;
    color: #2d3748; /* Slightly darker than text-main for headings */
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--nm-text-muted);
}

.nm-text-primary {
    color: var(--nm-primary);
}


/* --- COMPONENT STYLES --- */
.nm-settings-panel {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 24px;
}

.nm-panel-header {
    padding: 2.5rem;
    border-bottom: 2px solid var(--nm-shadow-light);
    box-shadow: 0 2px 4px rgba(163, 177, 198, 0.1);
}

.nm-panel-header h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.nm-settings-body {
    padding: 2.5rem;
}

.nm-avatar-upload {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.nm-avatar-wrapper {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nm-avatar-lg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.nm-upload-actions {
    display: flex;
    gap: 1rem;
}

.nm-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.nm-form-group.full-width {
    grid-column: 1 / -1;
}

.nm-textarea {
    resize: vertical;
    min-height: 120px;
}

.nm-toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    margin-top: 1rem;
    border-top: 2px solid var(--nm-shadow-light);
}

.nm-toggle-info .nm-label {
    margin-bottom: 0.25rem;
}

.nm-toggle-info p {
    font-size: 0.85rem;
}

.nm-toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 32px;
}

.nm-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.nm-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    transition: .4s;
    border-radius: 34px;
}

.nm-slider:before {
    position: absolute;
    content: "";
    height: 24px;
    width: 24px;
    left: 4px;
    bottom: 4px;
    background-color: var(--nm-shadow-dark);
    transition: .4s;
    border-radius: 50%;
    box-shadow: var(--nm-drop-shadow-sm);
}

input:checked + .nm-slider:before {
    background-color: var(--nm-primary);
    transform: translateX(28px);
}

.nm-panel-footer {
    padding: 2rem 2.5rem;
    border-top: 2px solid var(--nm-shadow-light);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 24px 24px;
}

@media (max-width: 600px) {
    .nm-form-grid {
        grid-template-columns: 1fr;
    }
    .nm-avatar-upload {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .nm-panel-header, .nm-settings-body, .nm-panel-footer {
        padding: 1.5rem;
    }
}

Cards

Soft Stat Cards

HTML

<div class="nm-stats-grid">
    <div class="nm-stat-card nm-flat">
        <div class="nm-stat-header">
            <span class="nm-stat-title">Total Revenue</span>
            <div class="nm-stat-icon nm-inset-sm nm-text-primary">
                <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
            </div>
        </div>
        <div class="nm-stat-value">$124,563.00</div>
        <div class="nm-stat-footer">
            <span class="nm-trend nm-trend-up nm-flat-sm">
                <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
                14%
            </span>
            <span class="nm-trend-label">vs last month</span>
        </div>
    </div>
    
    <div class="nm-stat-card nm-flat">
        <div class="nm-stat-header">
            <span class="nm-stat-title">Active Users</span>
            <div class="nm-stat-icon nm-inset-sm" style="color: #ed8936;">
                <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
            </div>
        </div>
        <div class="nm-stat-value">8,492</div>
        <div class="nm-stat-footer">
            <span class="nm-trend nm-trend-up nm-flat-sm">
                <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
                5.2%
            </span>
            <span class="nm-trend-label">vs last month</span>
        </div>
    </div>
    
    <div class="nm-stat-card nm-flat">
        <div class="nm-stat-header">
            <span class="nm-stat-title">Bounce Rate</span>
            <div class="nm-stat-icon nm-inset-sm" style="color: #e53e3e;">
                <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
            </div>
        </div>
        <div class="nm-stat-value">24.5%</div>
        <div class="nm-stat-footer">
            <span class="nm-trend nm-trend-down nm-flat-sm">
                <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"></polyline><polyline points="17 18 23 18 23 12"></polyline></svg>
                1.2%
            </span>
            <span class="nm-trend-label">vs last month</span>
        </div>
    </div>
</div>

CSS (Component Only)

/* Component: Soft Stat Cards */
/* NOTE: This component requires base.css to be included in your page. */

.nm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.nm-stat-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.nm-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.nm-stat-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nm-text-muted);
}

.nm-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nm-stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    font-family: var(--nm-font-heading);
    color: var(--nm-text-main);
    margin-bottom: 1.5rem;
}

.nm-stat-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.nm-trend {
    font-weight: 700;
    padding: 0.4rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.nm-trend-up {
    color: #48bb78;
}

.nm-trend-down {
    color: #f56565;
}

.nm-trend-label {
    color: var(--nm-text-muted);
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --nm-bg: #e0e5ec;
    --nm-primary: #667eea;
    --nm-shadow-light: #ffffff;
    --nm-shadow-dark: #a3b1c6;
    
    /* Text colors */
    --nm-text-main: #4a5568;
    --nm-text-muted: #a0aec0;
    
    --nm-font-heading: 'Nunito', sans-serif;
    --nm-font-body: 'Roboto', sans-serif;
    
    /* Neumorphic Shadows */
    --nm-drop-shadow: 8px 8px 16px var(--nm-shadow-dark), -8px -8px 16px var(--nm-shadow-light);
    --nm-drop-shadow-sm: 4px 4px 8px var(--nm-shadow-dark), -4px -4px 8px var(--nm-shadow-light);
    --nm-drop-shadow-hover: 12px 12px 20px var(--nm-shadow-dark), -12px -12px 20px var(--nm-shadow-light);
    
    --nm-inset-shadow: inset 6px 6px 12px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light);
    --nm-inset-shadow-sm: inset 3px 3px 6px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light);
}

body {
    margin: 0;
    font-family: var(--nm-font-body);
    color: var(--nm-text-main);
    background-color: var(--nm-bg);
    -webkit-font-smoothing: antialiased;
}

/* Neumorphic Utilities */
.nm-flat {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow);
    border-radius: 16px;
}

.nm-flat-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow-sm);
    border-radius: 12px;
}

.nm-inset {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow);
    border-radius: 12px;
}

.nm-inset-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow-sm);
    border-radius: 8px;
}

/* Global Buttons */
.nm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--nm-font-heading);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.5rem;
    background: var(--nm-bg);
    color: var(--nm-text-main);
}

.nm-btn-primary {
    color: var(--nm-primary);
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-primary:hover {
    box-shadow: var(--nm-drop-shadow-hover);
    transform: translateY(-2px);
}

.nm-btn-primary:active {
    box-shadow: var(--nm-inset-shadow);
    transform: translateY(0);
}

.nm-btn-outline {
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-btn-outline:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-outline:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--nm-drop-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nm-btn-circle:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-circle:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-block {
    width: 100%;
}

/* Global Form Inputs */
.nm-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-family: var(--nm-font-body);
    font-size: 0.95rem;
    color: var(--nm-text-main);
    background: var(--nm-bg);
    border: none;
    box-shadow: var(--nm-inset-shadow);
    outline: none;
    transition: all 0.3s ease;
}

.nm-input::placeholder {
    color: var(--nm-text-muted);
    opacity: 0.8;
}

.nm-input:focus {
    box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -8px -8px 16px var(--nm-shadow-light), 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.nm-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nm-text-main);
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nm-font-heading);
    margin: 0;
    color: #2d3748; /* Slightly darker than text-main for headings */
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--nm-text-muted);
}

.nm-text-primary {
    color: var(--nm-primary);
}


/* --- COMPONENT STYLES --- */
.nm-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.nm-stat-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.nm-stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.nm-stat-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--nm-text-muted);
}

.nm-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nm-stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    font-family: var(--nm-font-heading);
    color: var(--nm-text-main);
    margin-bottom: 1.5rem;
}

.nm-stat-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.nm-trend {
    font-weight: 700;
    padding: 0.4rem 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.nm-trend-up {
    color: #48bb78;
}

.nm-trend-down {
    color: #f56565;
}

.nm-trend-label {
    color: var(--nm-text-muted);
}

Soft Pricing Card

HTML

<div class="nm-pricing-card nm-flat">
    <div class="nm-pricing-header">
        <h3 class="nm-pricing-title">Pro Plan</h3>
        <p class="nm-pricing-desc">Perfect for growing teams and businesses.</p>
        <div class="nm-pricing-price">
            <span class="nm-currency">$</span>
            <span class="nm-amount">49</span>
            <span class="nm-period">/mo</span>
        </div>
    </div>
    <div class="nm-pricing-features">
        <ul>
            <li>
                <div class="nm-check nm-inset-sm nm-text-primary">
                    <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
                </div>
                Up to 10 users
            </li>
            <li>
                <div class="nm-check nm-inset-sm nm-text-primary">
                    <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
                </div>
                50GB Storage
            </li>
            <li>
                <div class="nm-check nm-inset-sm nm-text-primary">
                    <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
                </div>
                Priority Email Support
            </li>
            <li>
                <div class="nm-check nm-inset-sm nm-text-primary">
                    <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
                </div>
                Advanced Analytics
            </li>
            <li class="nm-feature-disabled">
                <div class="nm-check nm-flat-sm">
                    <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                </div>
                Custom Domain
            </li>
        </ul>
    </div>
    <div class="nm-pricing-footer">
        <button class="nm-btn nm-btn-primary nm-btn-block">Choose Pro</button>
    </div>
</div>

CSS (Component Only)

/* Component: Soft Pricing Card */
/* NOTE: This component requires base.css to be included in your page. */

.nm-pricing-card {
    max-width: 350px;
    margin: 0 auto;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
}

.nm-pricing-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--nm-shadow-light);
    box-shadow: 0 2px 0 rgba(163, 177, 198, 0.2);
}

.nm-pricing-title {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--nm-text-main);
}

.nm-pricing-desc {
    font-size: 0.95rem;
    color: var(--nm-text-muted);
    margin-bottom: 1.5rem;
}

.nm-pricing-price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: var(--nm-text-main);
}

.nm-currency {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    margin-right: 0.2rem;
}

.nm-amount {
    font-size: 4rem;
    font-family: var(--nm-font-heading);
    font-weight: 800;
    line-height: 1;
}

.nm-period {
    color: var(--nm-text-muted);
    margin-bottom: 0.5rem;
    margin-left: 0.2rem;
    font-weight: 600;
}

.nm-pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.nm-pricing-features li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
    color: var(--nm-text-main);
    font-weight: 500;
}

.nm-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nm-feature-disabled {
    color: var(--nm-text-muted) !important;
}

.nm-feature-disabled .nm-check {
    color: var(--nm-text-muted);
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --nm-bg: #e0e5ec;
    --nm-primary: #667eea;
    --nm-shadow-light: #ffffff;
    --nm-shadow-dark: #a3b1c6;
    
    /* Text colors */
    --nm-text-main: #4a5568;
    --nm-text-muted: #a0aec0;
    
    --nm-font-heading: 'Nunito', sans-serif;
    --nm-font-body: 'Roboto', sans-serif;
    
    /* Neumorphic Shadows */
    --nm-drop-shadow: 8px 8px 16px var(--nm-shadow-dark), -8px -8px 16px var(--nm-shadow-light);
    --nm-drop-shadow-sm: 4px 4px 8px var(--nm-shadow-dark), -4px -4px 8px var(--nm-shadow-light);
    --nm-drop-shadow-hover: 12px 12px 20px var(--nm-shadow-dark), -12px -12px 20px var(--nm-shadow-light);
    
    --nm-inset-shadow: inset 6px 6px 12px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light);
    --nm-inset-shadow-sm: inset 3px 3px 6px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light);
}

body {
    margin: 0;
    font-family: var(--nm-font-body);
    color: var(--nm-text-main);
    background-color: var(--nm-bg);
    -webkit-font-smoothing: antialiased;
}

/* Neumorphic Utilities */
.nm-flat {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow);
    border-radius: 16px;
}

.nm-flat-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow-sm);
    border-radius: 12px;
}

.nm-inset {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow);
    border-radius: 12px;
}

.nm-inset-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow-sm);
    border-radius: 8px;
}

/* Global Buttons */
.nm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--nm-font-heading);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.5rem;
    background: var(--nm-bg);
    color: var(--nm-text-main);
}

.nm-btn-primary {
    color: var(--nm-primary);
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-primary:hover {
    box-shadow: var(--nm-drop-shadow-hover);
    transform: translateY(-2px);
}

.nm-btn-primary:active {
    box-shadow: var(--nm-inset-shadow);
    transform: translateY(0);
}

.nm-btn-outline {
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-btn-outline:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-outline:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--nm-drop-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nm-btn-circle:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-circle:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-block {
    width: 100%;
}

/* Global Form Inputs */
.nm-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-family: var(--nm-font-body);
    font-size: 0.95rem;
    color: var(--nm-text-main);
    background: var(--nm-bg);
    border: none;
    box-shadow: var(--nm-inset-shadow);
    outline: none;
    transition: all 0.3s ease;
}

.nm-input::placeholder {
    color: var(--nm-text-muted);
    opacity: 0.8;
}

.nm-input:focus {
    box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -8px -8px 16px var(--nm-shadow-light), 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.nm-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nm-text-main);
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nm-font-heading);
    margin: 0;
    color: #2d3748; /* Slightly darker than text-main for headings */
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--nm-text-muted);
}

.nm-text-primary {
    color: var(--nm-primary);
}


/* --- COMPONENT STYLES --- */
.nm-pricing-card {
    max-width: 350px;
    margin: 0 auto;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
}

.nm-pricing-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--nm-shadow-light);
    box-shadow: 0 2px 0 rgba(163, 177, 198, 0.2);
}

.nm-pricing-title {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--nm-text-main);
}

.nm-pricing-desc {
    font-size: 0.95rem;
    color: var(--nm-text-muted);
    margin-bottom: 1.5rem;
}

.nm-pricing-price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: var(--nm-text-main);
}

.nm-currency {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    margin-right: 0.2rem;
}

.nm-amount {
    font-size: 4rem;
    font-family: var(--nm-font-heading);
    font-weight: 800;
    line-height: 1;
}

.nm-period {
    color: var(--nm-text-muted);
    margin-bottom: 0.5rem;
    margin-left: 0.2rem;
    font-weight: 600;
}

.nm-pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.nm-pricing-features li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
    color: var(--nm-text-main);
    font-weight: 500;
}

.nm-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nm-feature-disabled {
    color: var(--nm-text-muted) !important;
}

.nm-feature-disabled .nm-check {
    color: var(--nm-text-muted);
}

Tables

Soft Data Grid

HTML

<div class="nm-table-wrapper nm-flat">
    <div class="nm-table-header">
        <h3>Recent Transactions</h3>
        <button class="nm-btn nm-btn-outline" style="padding: 0.5rem 1rem; font-size: 0.85rem;">Export CSV</button>
    </div>
    <div class="nm-table-container">
        <table class="nm-table">
            <thead>
                <tr>
                    <th>Transaction ID</th>
                    <th>Customer</th>
                    <th>Date</th>
                    <th>Amount</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>#TRX-8492</td>
                    <td>
                        <div class="nm-table-user">
                            <div class="nm-table-avatar nm-flat-sm">
                                <img src="https://i.pravatar.cc/150?img=11" alt="Avatar">
                            </div>
                            <span>Michael Chen</span>
                        </div>
                    </td>
                    <td>Oct 24, 2023</td>
                    <td>$450.00</td>
                    <td><span class="nm-status nm-status-success nm-inset-sm">Completed</span></td>
                </tr>
                <tr>
                    <td>#TRX-8493</td>
                    <td>
                        <div class="nm-table-user">
                            <div class="nm-table-avatar nm-flat-sm">
                                <img src="https://i.pravatar.cc/150?img=47" alt="Avatar">
                            </div>
                            <span>Sarah Jenkins</span>
                        </div>
                    </td>
                    <td>Oct 24, 2023</td>
                    <td>$120.50</td>
                    <td><span class="nm-status nm-status-pending nm-inset-sm">Pending</span></td>
                </tr>
                <tr>
                    <td>#TRX-8494</td>
                    <td>
                        <div class="nm-table-user">
                            <div class="nm-table-avatar nm-flat-sm">
                                <img src="https://i.pravatar.cc/150?img=12" alt="Avatar">
                            </div>
                            <span>David Smith</span>
                        </div>
                    </td>
                    <td>Oct 23, 2023</td>
                    <td>$890.00</td>
                    <td><span class="nm-status nm-status-success nm-inset-sm">Completed</span></td>
                </tr>
                <tr>
                    <td>#TRX-8495</td>
                    <td>
                        <div class="nm-table-user">
                            <div class="nm-table-avatar nm-flat-sm">
                                <img src="https://i.pravatar.cc/150?img=41" alt="Avatar">
                            </div>
                            <span>Emily Davis</span>
                        </div>
                    </td>
                    <td>Oct 22, 2023</td>
                    <td>$65.00</td>
                    <td><span class="nm-status nm-status-failed nm-inset-sm">Failed</span></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="nm-table-pagination">
        <span class="nm-text-muted">Showing 1 to 4 of 24 entries</span>
        <div class="nm-pagination-controls">
            <button class="nm-btn" disabled style="padding: 0.4rem 0.8rem; font-size: 0.85rem; box-shadow: none; color: var(--nm-text-muted);">Prev</button>
            <button class="nm-btn nm-inset-sm nm-text-primary" style="padding: 0.4rem 0.8rem; border-radius: 8px;">1</button>
            <button class="nm-btn nm-flat-sm" style="padding: 0.4rem 0.8rem; border-radius: 8px;">2</button>
            <button class="nm-btn nm-flat-sm" style="padding: 0.4rem 0.8rem; border-radius: 8px;">3</button>
            <button class="nm-btn nm-flat-sm" style="padding: 0.4rem 0.8rem; border-radius: 8px;">Next</button>
        </div>
    </div>
</div>

CSS (Component Only)

/* Component: Soft Data Grid */
/* NOTE: This component requires base.css to be included in your page. */

.nm-table-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 24px;
    padding: 1rem;
}

.nm-table-header {
    padding: 1rem 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nm-table-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.nm-table-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 16px;
    box-shadow: var(--nm-inset-shadow);
    padding: 1rem;
}

.nm-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.nm-table th {
    text-align: left;
    padding: 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--nm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--nm-shadow-light);
}

.nm-table td {
    padding: 1.25rem 1rem;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(163, 177, 198, 0.2);
    color: var(--nm-text-main);
    vertical-align: middle;
}

.nm-table tbody tr:last-child td {
    border-bottom: none;
}

.nm-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.2);
}

.nm-table-user {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nm-table-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 2px;
}

.nm-table-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.nm-table-user span {
    font-weight: 600;
}

.nm-status {
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.nm-status-success {
    color: #48bb78;
}

.nm-status-pending {
    color: #ed8936;
}

.nm-status-failed {
    color: #f56565;
}

.nm-table-pagination {
    padding: 2rem 1rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nm-pagination-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 768px) {
    .nm-table-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .nm-table-pagination { flex-direction: column; gap: 1rem; text-align: center; }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --nm-bg: #e0e5ec;
    --nm-primary: #667eea;
    --nm-shadow-light: #ffffff;
    --nm-shadow-dark: #a3b1c6;
    
    /* Text colors */
    --nm-text-main: #4a5568;
    --nm-text-muted: #a0aec0;
    
    --nm-font-heading: 'Nunito', sans-serif;
    --nm-font-body: 'Roboto', sans-serif;
    
    /* Neumorphic Shadows */
    --nm-drop-shadow: 8px 8px 16px var(--nm-shadow-dark), -8px -8px 16px var(--nm-shadow-light);
    --nm-drop-shadow-sm: 4px 4px 8px var(--nm-shadow-dark), -4px -4px 8px var(--nm-shadow-light);
    --nm-drop-shadow-hover: 12px 12px 20px var(--nm-shadow-dark), -12px -12px 20px var(--nm-shadow-light);
    
    --nm-inset-shadow: inset 6px 6px 12px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light);
    --nm-inset-shadow-sm: inset 3px 3px 6px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light);
}

body {
    margin: 0;
    font-family: var(--nm-font-body);
    color: var(--nm-text-main);
    background-color: var(--nm-bg);
    -webkit-font-smoothing: antialiased;
}

/* Neumorphic Utilities */
.nm-flat {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow);
    border-radius: 16px;
}

.nm-flat-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow-sm);
    border-radius: 12px;
}

.nm-inset {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow);
    border-radius: 12px;
}

.nm-inset-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow-sm);
    border-radius: 8px;
}

/* Global Buttons */
.nm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--nm-font-heading);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.5rem;
    background: var(--nm-bg);
    color: var(--nm-text-main);
}

.nm-btn-primary {
    color: var(--nm-primary);
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-primary:hover {
    box-shadow: var(--nm-drop-shadow-hover);
    transform: translateY(-2px);
}

.nm-btn-primary:active {
    box-shadow: var(--nm-inset-shadow);
    transform: translateY(0);
}

.nm-btn-outline {
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-btn-outline:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-outline:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--nm-drop-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nm-btn-circle:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-circle:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-block {
    width: 100%;
}

/* Global Form Inputs */
.nm-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-family: var(--nm-font-body);
    font-size: 0.95rem;
    color: var(--nm-text-main);
    background: var(--nm-bg);
    border: none;
    box-shadow: var(--nm-inset-shadow);
    outline: none;
    transition: all 0.3s ease;
}

.nm-input::placeholder {
    color: var(--nm-text-muted);
    opacity: 0.8;
}

.nm-input:focus {
    box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -8px -8px 16px var(--nm-shadow-light), 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.nm-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nm-text-main);
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nm-font-heading);
    margin: 0;
    color: #2d3748; /* Slightly darker than text-main for headings */
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--nm-text-muted);
}

.nm-text-primary {
    color: var(--nm-primary);
}


/* --- COMPONENT STYLES --- */
.nm-table-wrapper {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-radius: 24px;
    padding: 1rem;
}

.nm-table-header {
    padding: 1rem 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nm-table-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.nm-table-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 16px;
    box-shadow: var(--nm-inset-shadow);
    padding: 1rem;
}

.nm-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.nm-table th {
    text-align: left;
    padding: 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--nm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--nm-shadow-light);
}

.nm-table td {
    padding: 1.25rem 1rem;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(163, 177, 198, 0.2);
    color: var(--nm-text-main);
    vertical-align: middle;
}

.nm-table tbody tr:last-child td {
    border-bottom: none;
}

.nm-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.2);
}

.nm-table-user {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nm-table-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 2px;
}

.nm-table-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.nm-table-user span {
    font-weight: 600;
}

.nm-status {
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.nm-status-success {
    color: #48bb78;
}

.nm-status-pending {
    color: #ed8936;
}

.nm-status-failed {
    color: #f56565;
}

.nm-table-pagination {
    padding: 2rem 1rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nm-pagination-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

@media (max-width: 768px) {
    .nm-table-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .nm-table-pagination { flex-direction: column; gap: 1rem; text-align: center; }
}

Lists

Soft Activity Feed

HTML

<div class="nm-activity-feed nm-flat">
    <div class="nm-feed-header">
        <h3>Recent Activity</h3>
        <button class="nm-btn nm-btn-outline" style="padding: 0.5rem 1rem; font-size: 0.85rem;">Mark all read</button>
    </div>
    <ul class="nm-feed-list">
        <li class="nm-feed-item unread">
            <div class="nm-feed-icon nm-inset-sm nm-text-primary">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
            </div>
            <div class="nm-feed-content">
                <p><strong>Sarah Jenkins</strong> commented on your post</p>
                <span class="nm-feed-time">2 hours ago</span>
            </div>
            <div class="nm-unread-dot nm-inset-sm"></div>
        </li>
        <li class="nm-feed-item unread">
            <div class="nm-feed-icon nm-inset-sm" style="color: #ed8936;">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
            </div>
            <div class="nm-feed-content">
                <p><strong>Michael Chen</strong> liked your photo</p>
                <span class="nm-feed-time">4 hours ago</span>
            </div>
            <div class="nm-unread-dot nm-inset-sm"></div>
        </li>
        <li class="nm-feed-item">
            <div class="nm-feed-icon nm-inset-sm" style="color: #48bb78;">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><polyline points="20 6 9 17 4 12"></polyline></svg>
            </div>
            <div class="nm-feed-content">
                <p>System successfully updated to version 2.4</p>
                <span class="nm-feed-time">Yesterday at 4:30 PM</span>
            </div>
        </li>
        <li class="nm-feed-item">
            <div class="nm-feed-icon nm-inset-sm" style="color: #9f7aea;">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="23" y1="11" x2="17" y2="11"></line></svg>
            </div>
            <div class="nm-feed-content">
                <p><strong>Emily Davis</strong> joined the team</p>
                <span class="nm-feed-time">Oct 22, 2023</span>
            </div>
        </li>
    </ul>
    <div class="nm-feed-footer">
        <a href="#" class="nm-btn nm-btn-block">View All Activity</a>
    </div>
</div>

CSS (Component Only)

/* Component: Soft Activity Feed */
/* NOTE: This component requires base.css to be included in your page. */

.nm-activity-feed {
    max-width: 500px;
    margin: 0 auto;
    border-radius: 24px;
}

.nm-feed-header {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--nm-shadow-light);
    box-shadow: 0 2px 0 rgba(163, 177, 198, 0.2);
}

.nm-feed-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.nm-feed-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nm-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid rgba(163, 177, 198, 0.2);
    position: relative;
    transition: background 0.2s ease;
}

.nm-feed-item:last-child {
    border-bottom: none;
}

.nm-feed-item:hover {
    background: rgba(255, 255, 255, 0.4);
}

.nm-feed-item.unread {
    background: rgba(255, 255, 255, 0.2);
}

.nm-feed-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nm-feed-content {
    flex: 1;
}

.nm-feed-content p {
    margin: 0 0 0.25rem 0;
    font-size: 0.95rem;
    color: var(--nm-text-main);
}

.nm-feed-content strong {
    font-weight: 700;
}

.nm-feed-time {
    font-size: 0.8rem;
    color: var(--nm-text-muted);
    font-weight: 600;
}

.nm-unread-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 0.25rem;
    background: var(--nm-primary);
}

.nm-feed-footer {
    padding: 1.5rem;
    border-top: 2px solid var(--nm-shadow-light);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 24px 24px;
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --nm-bg: #e0e5ec;
    --nm-primary: #667eea;
    --nm-shadow-light: #ffffff;
    --nm-shadow-dark: #a3b1c6;
    
    /* Text colors */
    --nm-text-main: #4a5568;
    --nm-text-muted: #a0aec0;
    
    --nm-font-heading: 'Nunito', sans-serif;
    --nm-font-body: 'Roboto', sans-serif;
    
    /* Neumorphic Shadows */
    --nm-drop-shadow: 8px 8px 16px var(--nm-shadow-dark), -8px -8px 16px var(--nm-shadow-light);
    --nm-drop-shadow-sm: 4px 4px 8px var(--nm-shadow-dark), -4px -4px 8px var(--nm-shadow-light);
    --nm-drop-shadow-hover: 12px 12px 20px var(--nm-shadow-dark), -12px -12px 20px var(--nm-shadow-light);
    
    --nm-inset-shadow: inset 6px 6px 12px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light);
    --nm-inset-shadow-sm: inset 3px 3px 6px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light);
}

body {
    margin: 0;
    font-family: var(--nm-font-body);
    color: var(--nm-text-main);
    background-color: var(--nm-bg);
    -webkit-font-smoothing: antialiased;
}

/* Neumorphic Utilities */
.nm-flat {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow);
    border-radius: 16px;
}

.nm-flat-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow-sm);
    border-radius: 12px;
}

.nm-inset {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow);
    border-radius: 12px;
}

.nm-inset-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow-sm);
    border-radius: 8px;
}

/* Global Buttons */
.nm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--nm-font-heading);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.5rem;
    background: var(--nm-bg);
    color: var(--nm-text-main);
}

.nm-btn-primary {
    color: var(--nm-primary);
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-primary:hover {
    box-shadow: var(--nm-drop-shadow-hover);
    transform: translateY(-2px);
}

.nm-btn-primary:active {
    box-shadow: var(--nm-inset-shadow);
    transform: translateY(0);
}

.nm-btn-outline {
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-btn-outline:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-outline:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--nm-drop-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nm-btn-circle:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-circle:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-block {
    width: 100%;
}

/* Global Form Inputs */
.nm-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-family: var(--nm-font-body);
    font-size: 0.95rem;
    color: var(--nm-text-main);
    background: var(--nm-bg);
    border: none;
    box-shadow: var(--nm-inset-shadow);
    outline: none;
    transition: all 0.3s ease;
}

.nm-input::placeholder {
    color: var(--nm-text-muted);
    opacity: 0.8;
}

.nm-input:focus {
    box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -8px -8px 16px var(--nm-shadow-light), 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.nm-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nm-text-main);
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nm-font-heading);
    margin: 0;
    color: #2d3748; /* Slightly darker than text-main for headings */
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--nm-text-muted);
}

.nm-text-primary {
    color: var(--nm-primary);
}


/* --- COMPONENT STYLES --- */
.nm-activity-feed {
    max-width: 500px;
    margin: 0 auto;
    border-radius: 24px;
}

.nm-feed-header {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--nm-shadow-light);
    box-shadow: 0 2px 0 rgba(163, 177, 198, 0.2);
}

.nm-feed-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.nm-feed-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nm-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid rgba(163, 177, 198, 0.2);
    position: relative;
    transition: background 0.2s ease;
}

.nm-feed-item:last-child {
    border-bottom: none;
}

.nm-feed-item:hover {
    background: rgba(255, 255, 255, 0.4);
}

.nm-feed-item.unread {
    background: rgba(255, 255, 255, 0.2);
}

.nm-feed-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nm-feed-content {
    flex: 1;
}

.nm-feed-content p {
    margin: 0 0 0.25rem 0;
    font-size: 0.95rem;
    color: var(--nm-text-main);
}

.nm-feed-content strong {
    font-weight: 700;
}

.nm-feed-time {
    font-size: 0.8rem;
    color: var(--nm-text-muted);
    font-weight: 600;
}

.nm-unread-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 0.25rem;
    background: var(--nm-primary);
}

.nm-feed-footer {
    padding: 1.5rem;
    border-top: 2px solid var(--nm-shadow-light);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0 0 24px 24px;
}

Modals

Soft Confirmation Modal

HTML

<!-- Note: For preview purposes, the modal is shown inline. In production, wrap this in a fixed overlay. -->
<div class="nm-modal-wrapper">
    <div class="nm-modal nm-flat">
        <div class="nm-modal-icon nm-inset">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 3h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
        </div>
        <div class="nm-modal-content">
            <h3 class="nm-modal-title">Delete Account</h3>
            <p class="nm-modal-desc">Are you sure you want to delete your account? All of your data will be permanently removed. This action cannot be undone.</p>
        </div>
        <div class="nm-modal-actions">
            <button class="nm-btn">Cancel</button>
            <button class="nm-btn" style="color: #e53e3e; box-shadow: var(--nm-drop-shadow-sm);">Delete Account</button>
        </div>
    </div>
</div>

CSS (Component Only)

/* Component: Soft Confirmation Modal */
/* NOTE: This component requires base.css to be included in your page. */

.nm-modal-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.nm-modal {
    max-width: 480px;
    width: 100%;
    border-radius: 24px;
    padding: 2.5rem;
    text-align: center;
}

.nm-modal-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    color: #e53e3e;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.nm-modal-icon svg {
    width: 36px;
    height: 36px;
}

.nm-modal-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--nm-text-main);
}

.nm-modal-desc {
    color: var(--nm-text-muted);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.nm-modal-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

.nm-modal-actions .nm-btn {
    flex: 1;
}

@media (max-width: 480px) {
    .nm-modal-actions {
        flex-direction: column;
    }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --nm-bg: #e0e5ec;
    --nm-primary: #667eea;
    --nm-shadow-light: #ffffff;
    --nm-shadow-dark: #a3b1c6;
    
    /* Text colors */
    --nm-text-main: #4a5568;
    --nm-text-muted: #a0aec0;
    
    --nm-font-heading: 'Nunito', sans-serif;
    --nm-font-body: 'Roboto', sans-serif;
    
    /* Neumorphic Shadows */
    --nm-drop-shadow: 8px 8px 16px var(--nm-shadow-dark), -8px -8px 16px var(--nm-shadow-light);
    --nm-drop-shadow-sm: 4px 4px 8px var(--nm-shadow-dark), -4px -4px 8px var(--nm-shadow-light);
    --nm-drop-shadow-hover: 12px 12px 20px var(--nm-shadow-dark), -12px -12px 20px var(--nm-shadow-light);
    
    --nm-inset-shadow: inset 6px 6px 12px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light);
    --nm-inset-shadow-sm: inset 3px 3px 6px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light);
}

body {
    margin: 0;
    font-family: var(--nm-font-body);
    color: var(--nm-text-main);
    background-color: var(--nm-bg);
    -webkit-font-smoothing: antialiased;
}

/* Neumorphic Utilities */
.nm-flat {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow);
    border-radius: 16px;
}

.nm-flat-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow-sm);
    border-radius: 12px;
}

.nm-inset {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow);
    border-radius: 12px;
}

.nm-inset-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow-sm);
    border-radius: 8px;
}

/* Global Buttons */
.nm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--nm-font-heading);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.5rem;
    background: var(--nm-bg);
    color: var(--nm-text-main);
}

.nm-btn-primary {
    color: var(--nm-primary);
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-primary:hover {
    box-shadow: var(--nm-drop-shadow-hover);
    transform: translateY(-2px);
}

.nm-btn-primary:active {
    box-shadow: var(--nm-inset-shadow);
    transform: translateY(0);
}

.nm-btn-outline {
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-btn-outline:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-outline:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--nm-drop-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nm-btn-circle:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-circle:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-block {
    width: 100%;
}

/* Global Form Inputs */
.nm-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-family: var(--nm-font-body);
    font-size: 0.95rem;
    color: var(--nm-text-main);
    background: var(--nm-bg);
    border: none;
    box-shadow: var(--nm-inset-shadow);
    outline: none;
    transition: all 0.3s ease;
}

.nm-input::placeholder {
    color: var(--nm-text-muted);
    opacity: 0.8;
}

.nm-input:focus {
    box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -8px -8px 16px var(--nm-shadow-light), 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.nm-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nm-text-main);
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nm-font-heading);
    margin: 0;
    color: #2d3748; /* Slightly darker than text-main for headings */
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--nm-text-muted);
}

.nm-text-primary {
    color: var(--nm-primary);
}


/* --- COMPONENT STYLES --- */
.nm-modal-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.nm-modal {
    max-width: 480px;
    width: 100%;
    border-radius: 24px;
    padding: 2.5rem;
    text-align: center;
}

.nm-modal-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    color: #e53e3e;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.nm-modal-icon svg {
    width: 36px;
    height: 36px;
}

.nm-modal-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--nm-text-main);
}

.nm-modal-desc {
    color: var(--nm-text-muted);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.nm-modal-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

.nm-modal-actions .nm-btn {
    flex: 1;
}

@media (max-width: 480px) {
    .nm-modal-actions {
        flex-direction: column;
    }
}

Footers

Soft Footer

HTML

<footer class="nm-footer">
    <div class="nm-footer-content nm-flat">
        <div class="nm-footer-brand">
            <div class="nm-logo">
                <div class="nm-logo-icon nm-flat-sm">
                    <svg viewBox="0 0 24 24" width="20" height="20" stroke="var(--nm-primary)" stroke-width="2" fill="none"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
                </div>
                <span>Soft<span>UI</span></span>
            </div>
            <p class="nm-footer-desc">Beautifully crafted soft UI components for modern web applications. Build faster with our premium Neumorphic kit.</p>
            <div class="nm-social-links">
                <a href="#" class="nm-btn-circle nm-text-muted"><svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></a>
                <a href="#" class="nm-btn-circle nm-text-muted"><svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a>
                <a href="#" class="nm-btn-circle nm-text-muted"><svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a>
            </div>
        </div>
        
        <div class="nm-footer-links">
            <div class="nm-link-col">
                <h4>Product</h4>
                <ul>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Integrations</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Changelog</a></li>
                </ul>
            </div>
            <div class="nm-link-col">
                <h4>Company</h4>
                <ul>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="nm-link-col">
                <h4>Legal</h4>
                <ul>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms of Service</a></li>
                    <li><a href="#">Cookie Policy</a></li>
                </ul>
            </div>
        </div>
        <div class="nm-footer-bottom nm-inset">
            <p>&copy; 2026 Soft UI. All rights reserved.</p>
        </div>
    </div>
</footer>

CSS (Component Only)

/* Component: Soft Footer */
/* NOTE: This component requires base.css to be included in your page. */

.nm-footer {
    width: 100%;
    margin-top: 4rem;
    padding: 0 1rem;
}

.nm-footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 4rem 2rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    position: relative;
}

.nm-footer-brand {
    max-width: 320px;
}

.nm-footer-brand .nm-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--nm-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--nm-text-main);
    margin-bottom: 1.5rem;
}

.nm-logo-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nm-footer-desc {
    font-size: 0.95rem;
    color: var(--nm-text-muted);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.nm-social-links {
    display: flex;
    gap: 1rem;
}

.nm-footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.nm-link-col h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--nm-text-main);
}

.nm-link-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nm-link-col a {
    color: var(--nm-text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.nm-link-col a:hover {
    color: var(--nm-primary);
}

.nm-footer-bottom {
    grid-column: 1 / -1;
    margin-top: 2rem;
    padding: 1.5rem;
    text-align: center;
}

.nm-footer-bottom p {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nm-text-muted);
}

@media (max-width: 900px) {
    .nm-footer-content {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 2.5rem 1.5rem 1.5rem;
    }
}

@media (max-width: 600px) {
    .nm-footer-links {
        grid-template-columns: 1fr 1fr;
    }
}

Combined CSS (Includes Base)

/* 
   COMBINED CSS
   Includes base resets/variables + component styles.
   Use this if you haven't included base.css elsewhere.
*/

/* --- BASE STYLES --- */
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap');

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --nm-bg: #e0e5ec;
    --nm-primary: #667eea;
    --nm-shadow-light: #ffffff;
    --nm-shadow-dark: #a3b1c6;
    
    /* Text colors */
    --nm-text-main: #4a5568;
    --nm-text-muted: #a0aec0;
    
    --nm-font-heading: 'Nunito', sans-serif;
    --nm-font-body: 'Roboto', sans-serif;
    
    /* Neumorphic Shadows */
    --nm-drop-shadow: 8px 8px 16px var(--nm-shadow-dark), -8px -8px 16px var(--nm-shadow-light);
    --nm-drop-shadow-sm: 4px 4px 8px var(--nm-shadow-dark), -4px -4px 8px var(--nm-shadow-light);
    --nm-drop-shadow-hover: 12px 12px 20px var(--nm-shadow-dark), -12px -12px 20px var(--nm-shadow-light);
    
    --nm-inset-shadow: inset 6px 6px 12px var(--nm-shadow-dark), inset -6px -6px 12px var(--nm-shadow-light);
    --nm-inset-shadow-sm: inset 3px 3px 6px var(--nm-shadow-dark), inset -3px -3px 6px var(--nm-shadow-light);
}

body {
    margin: 0;
    font-family: var(--nm-font-body);
    color: var(--nm-text-main);
    background-color: var(--nm-bg);
    -webkit-font-smoothing: antialiased;
}

/* Neumorphic Utilities */
.nm-flat {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow);
    border-radius: 16px;
}

.nm-flat-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-drop-shadow-sm);
    border-radius: 12px;
}

.nm-inset {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow);
    border-radius: 12px;
}

.nm-inset-sm {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset-shadow-sm);
    border-radius: 8px;
}

/* Global Buttons */
.nm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--nm-font-heading);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    gap: 0.5rem;
    background: var(--nm-bg);
    color: var(--nm-text-main);
}

.nm-btn-primary {
    color: var(--nm-primary);
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-primary:hover {
    box-shadow: var(--nm-drop-shadow-hover);
    transform: translateY(-2px);
}

.nm-btn-primary:active {
    box-shadow: var(--nm-inset-shadow);
    transform: translateY(0);
}

.nm-btn-outline {
    box-shadow: var(--nm-drop-shadow-sm);
}

.nm-btn-outline:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-outline:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-circle {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    box-shadow: var(--nm-drop-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nm-btn-circle:hover {
    box-shadow: var(--nm-drop-shadow);
}

.nm-btn-circle:active {
    box-shadow: var(--nm-inset-shadow-sm);
}

.nm-btn-block {
    width: 100%;
}

/* Global Form Inputs */
.nm-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-family: var(--nm-font-body);
    font-size: 0.95rem;
    color: var(--nm-text-main);
    background: var(--nm-bg);
    border: none;
    box-shadow: var(--nm-inset-shadow);
    outline: none;
    transition: all 0.3s ease;
}

.nm-input::placeholder {
    color: var(--nm-text-muted);
    opacity: 0.8;
}

.nm-input:focus {
    box-shadow: inset 8px 8px 16px var(--nm-shadow-dark), inset -8px -8px 16px var(--nm-shadow-light), 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.nm-label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nm-text-main);
}

/* Typography Utilities */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--nm-font-heading);
    margin: 0;
    color: #2d3748; /* Slightly darker than text-main for headings */
}

p {
    line-height: 1.6;
    margin: 0;
    color: var(--nm-text-muted);
}

.nm-text-primary {
    color: var(--nm-primary);
}


/* --- COMPONENT STYLES --- */
.nm-footer {
    width: 100%;
    margin-top: 4rem;
    padding: 0 1rem;
}

.nm-footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 4rem 2rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    position: relative;
}

.nm-footer-brand {
    max-width: 320px;
}

.nm-footer-brand .nm-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--nm-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--nm-text-main);
    margin-bottom: 1.5rem;
}

.nm-logo-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nm-footer-desc {
    font-size: 0.95rem;
    color: var(--nm-text-muted);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.nm-social-links {
    display: flex;
    gap: 1rem;
}

.nm-footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.nm-link-col h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--nm-text-main);
}

.nm-link-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nm-link-col a {
    color: var(--nm-text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.nm-link-col a:hover {
    color: var(--nm-primary);
}

.nm-footer-bottom {
    grid-column: 1 / -1;
    margin-top: 2rem;
    padding: 1.5rem;
    text-align: center;
}

.nm-footer-bottom p {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nm-text-muted);
}

@media (max-width: 900px) {
    .nm-footer-content {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 2.5rem 1.5rem 1.5rem;
    }
}

@media (max-width: 600px) {
    .nm-footer-links {
        grid-template-columns: 1fr 1fr;
    }
}