:root {
    --lcars-orange: #f90;
    --lcars-purple: #c9c;
    --lcars-blue: #99f;
    --lcars-pink: #c69;
    --lcars-tan: #fc9;
    --sidebar-width: 150px;
    --elbow-size: 60px;
}

body {
    background: #000;
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
    text-transform: uppercase;
    margin: 0;
    padding: 10px;
}

/* Framework Layout */
.lcars-app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.lcars-header-frame {
    display: flex;
    align-items: flex-start;
    height: 80px;
}

.lcars-main-layout {
    display: flex;
    flex: 1;
}

/* The Elbow Joint */
.lcars-elbow-top-left {
    width: var(--sidebar-width);
    height: var(--elbow-size);
    background: var(--lcars-tan);
    border-radius: 0 0 0 40px; /* The inner curve */
    position: relative;
    margin-right: 10px;
}

/* The Top Bar */
.lcars-top-bar {
    flex: 1;
    height: 35px; /* Thinner than the elbow to create the 'step' */
    background: var(--lcars-tan);
    border-radius: 0 0 0 15px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.lcars-bar-segment {
    background: var(--lcars-orange);
    padding: 0 15px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #000;
}

.lcars-bar-segment.pink { background: var(--lcars-pink); }

/* Sidebar Logic */
.lcars-sidebar {
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lcars-side-bar-connector {
    height: 20px;
    background: var(--lcars-tan);
    margin-bottom: 5px;
}

.lcars-nav-button {
    background: var(--lcars-blue);
    color: #000;
    padding: 10px;
    text-align: right;
    font-weight: bold;
    border-radius: 10px 0 0 10px;
    font-size: 0.9rem;
}

.lcars-side-bar-filler {
    flex: 1;
    background: var(--lcars-orange);
    width: 60%; /* Tapered sidebar look */
    border-radius: 10px 0 0 0;
}

/* Content Area */
.lcars-content {
    flex: 1;
    padding: 20px 40px;
}

.lcars-title {
    color: var(--lcars-orange);
    font-size: 2.5rem;
    letter-spacing: 2px;
}

.lcars-text-dull { color: #888; font-size: 0.8rem; }

/* Cards */
.lcars-card-link { text-decoration: none; color: inherit; }

.lcars-card {
    background: #111;
    border-left: 15px solid var(--lcars-orange);
    border-radius: 15px 5px 5px 15px;
    position: relative;
    transition: 0.3s;
}

.lcars-card:hover { background: #222; border-left-width: 25px; }

.card-tag {
    position: absolute;
    right: 10px;
    top: 5px;
    font-size: 0.7rem;
    color: var(--lcars-orange);
}

.card-content { padding: 20px; }
.lcars-card h3 { color: var(--lcars-tan); margin-bottom: 15px; }
.lcars-card p { font-size: 0.85rem; color: #ccc; text-transform: none; }

.lcars-card.lcars-purple { border-color: var(--lcars-purple); }
.lcars-card.lcars-blue { border-color: var(--lcars-blue); }

/* Responsive Mobile */
@media (max-width: 768px) {
    .lcars-sidebar { display: none; }
    .lcars-elbow-top-left { display: none; }
    .lcars-top-bar { border-radius: 0; margin: 0; }
    .lcars-content { padding: 15px; }
}