:root {
    --bg-pink: #f3b4c4;
    --text-dark-pink: #d66182;
    --sage-green: #7fa98c;
    --sage-green-hover: #6d9679;
    --pastel-yellow: #f9e1a4;
    --cork-tan: #ebdcb9;
    --white: #ffffff;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: var(--bg-pink);
    margin: 0; padding: 0;
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; overflow: hidden;
}

.app-wrapper {
    width: 100vw; height: 100vh;
    background-color: var(--bg-pink);
    display: flex; flex-direction: column;
    box-sizing: border-box; padding: 20px; overflow-y: auto;
}

.app-screen { display: none; height: 100%; flex-direction: column; position: relative; }
.app-screen.active-screen { display: flex; }

/* ================= CLEAN SINGULAR BANNER DESIGN CONFIGURATIONS ================= */
.main-top-banner {
    width: 100%;
    text-align: center;
    margin-bottom: 25px;
    padding-top: 10px;
}

.single-title-banner {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    color: var(--white);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 2px 3px 0px rgba(214, 97, 130, 0.4);
}

.top-row { 
    display: flex; 
    justify-content: center; 
    margin-bottom: 20px; 
    width: 100%;
}
.check-in-widget {
    background-color: var(--pastel-yellow); border: 3px solid var(--text-dark-pink);
    border-radius: 12px; width: 100%; max-width: 500px; padding: 12px; box-sizing: border-box;
}
.widget-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; border-bottom: 2px solid var(--text-dark-pink); padding-bottom: 4px; }
.widget-header h3 { color: var(--text-dark-pink); margin: 0; }
.mini-add-btn { background: var(--text-dark-pink); color: white; border: none; padding: 4px 12px; border-radius: 6px; cursor: pointer; font-weight: bold; }

.table-container { max-height: 90px; overflow-y: auto; }
.check-in-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; text-align: left; }
.check-in-table th { color: var(--text-dark-pink); border-bottom: 1px solid rgba(214, 97, 130, 0.3); }
.check-in-table td { padding: 3px 0; color: #444; }

/* ================= HOME GRIDS SETUP ================= */
.home-main-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; flex: 1; align-items: stretch; }
@media (max-width: 768px) { .home-main-grid { grid-template-columns: 1fr; } .top-row { flex-direction: column; } }

.icons-column { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 15px; width: 220px; }
.nav-icon-block {
    background-color: var(--sage-green); border-radius: 12px; display: flex;
    justify-content: center; align-items: center; cursor: pointer; transition: transform 0.2s, background-color 0.2s;
}
.nav-icon-block:hover { transform: scale(1.05); background-color: var(--sage-green-hover); }
.grid-svg-icon { font-size: 3rem; }

.center-pinboard-panel {
    background-color: var(--cork-tan); border: 4px solid var(--sage-green);
    border-radius: 12px; padding: 15px; display: flex; flex-direction: column; cursor: zoom-in;
}
.pinboard-preview-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px dashed var(--sage-green); padding-bottom: 5px; margin-bottom: 10px; }
.pinboard-preview-header h3 { margin: 0; color: #735d32; }
.zoom-indicator-lbl { font-size: 0.75rem; color: #8c7649; font-weight: bold; }
.pin-preview-scroll-box { flex: 1; overflow-y: auto; max-height: 340px; pointer-events: none; }

.right-about-panel { background-color: var(--sage-green); color: white; border-radius: 12px; width: 240px; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; }
.right-about-panel h3 { color: white; text-align: center; border-bottom: 2px dashed rgba(255,255,255,0.4); padding-bottom: 10px; margin-top: 0; }
.about-content-scroller { font-size: 0.95rem; line-height: 1.5; overflow-y: auto; }
/* ================= EXPANDED FULLSCREEN CORKBOARD ================= */
.fullscreen-pinboard-view {
    display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #dfcd9f; background-image: radial-gradient(#d0b782 15%, transparent 16%); background-size: 16px 16px;
    z-index: 1500; padding: 30px; box-sizing: border-box; flex-direction: column;
}
.corkboard-top-controls { display: flex; justify-content: space-between; align-items: center; border-bottom: 4px solid #735d32; padding-bottom: 10px; margin-bottom: 20px; }
.corkboard-top-controls h2 { margin: 0; color: #524121; font-weight: 900; letter-spacing: 1px; }
.cork-back-btn { background: #735d32; color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; cursor: pointer; }

.corkboard-workspace { display: grid; grid-template-columns: 300px 1fr; gap: 30px; flex: 1; height: calc(100% - 80px); }
.corkboard-input-panel { background: white; border: 3px solid #735d32; padding: 20px; border-radius: 12px; display: flex; flex-direction: column; height: fit-content;}
.corkboard-input-panel h3 { margin-top: 0; color: #735d32; }
.corkboard-input-panel textarea, .corkboard-input-panel input { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid #ccc; box-sizing: border-box; margin-bottom: 10px; }
.corkboard-input-panel textarea { height: 100px; resize: none; }
.cork-post-btn { background: var(--sage-green); color: white; border: none; padding: 12px; border-radius: 6px; font-weight: bold; cursor: pointer; margin-top: 15px; }

.corkboard-pins-canvas { background: rgba(255,255,255,0.15); border-radius: 12px; border: 3px dashed rgba(115,93,50,0.3); padding: 20px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 20px; align-content: flex-start; }

.cork-sticky-card {
    background: #fef5c1; width: 220px; padding: 15px; border-radius: 2px; box-shadow: 3px 5px 12px rgba(0,0,0,0.12);
    position: relative; transform: rotate(-1deg); display: flex; flex-direction: column; border-top: 15px solid #f6e48b;
}
.cork-sticky-card:nth-child(even) { transform: rotate(1.5deg); background: #e8f9e4; border-top-color: #caeec2; }
.cork-sticky-card:nth-child(3n) { transform: rotate(-2deg); background: #ffebf0; border-top-color: #ffd1dc; }

.cork-sticky-img { width: 100%; max-height: 140px; object-fit: cover; border-radius: 4px; margin-top: 8px; border: 1px solid rgba(0,0,0,0.05); }
.sticky-user-tag { font-size: 0.75rem; font-weight: bold; color: #777; margin-bottom: 5px; text-transform: uppercase; border-bottom: 1px dashed rgba(0,0,0,0.1); padding-bottom: 3px;}
.sticky-body-text { font-size: 0.9rem; color: #333; line-height: 1.3; word-wrap: break-word; }
.sticky-pin-header-dot { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 1.3rem; z-index: 10; }

/* ================= INNER SUB-SCREENS INTERFACE ================= */
.screen-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--white); padding-bottom: 10px; margin-bottom: 20px; }
.screen-header h2 { color: var(--white); margin: 0; }
.back-btn { background: none; border: none; color: var(--white); font-weight: bold; cursor: pointer; font-size: 1.2rem; }
.add-content-btn { background: var(--white); color: var(--text-dark-pink); border: none; padding: 10px 16px; border-radius: 8px; cursor: pointer; font-weight: bold; }

.carousel-container { display: flex; align-items: center; gap: 15px; justify-content: center; margin: 20px 0; width: 100%; }
.arrow-btn { background: var(--white); border: none; font-size: 1.5rem; padding: 10px 15px; border-radius: 50%; cursor: pointer; color: var(--text-dark-pink); font-weight: bold; }
.display-card { background: white; border: 3px solid var(--pastel-yellow); border-radius: 16px; padding: 25px; text-align: center; width: 100%; max-width: 450px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); box-sizing: border-box; position: relative; }
.uploaded-img { width: 100%; max-height: 320px; object-fit: cover; border-radius: 8px; margin-bottom: 15px; }

.like-counter-btn { background: #fff0f3; border: 1px solid #ffb3c1; color: #ff4d6d; padding: 8px 20px; border-radius: 20px; cursor: pointer; font-weight: bold; margin-top: 10px; }
.review-box-container { margin-top: 15px; text-align: left; }
.review-box-container textarea { width: 100%; height: 60px; padding: 8px; border-radius: 6px; border: 1px solid #ddd; box-sizing: border-box; resize: none; }
.submit-rev-btn { width: 100%; background: var(--text-dark-pink); color: white; border: none; padding: 8px; border-radius: 4px; margin-top: 5px; cursor: pointer; font-weight: bold; }
.comments-log { max-height: 110px; overflow-y: auto; font-size: 0.85rem; background: #fafafa; padding: 8px; margin-bottom: 10px; border-radius: 4px; border: 1px solid #eee; }

.bookshelf-wrapper { background: #fcd7de; padding: 25px; border-radius: 12px; border-bottom: 20px solid #f3a3b2; }
.bookshelf-structure { display: flex; flex-wrap: wrap; gap: 20px; min-height: 140px; align-items: flex-end; }
.shelf-book-cover { width: 90px; height: 130px; object-fit: cover; border-radius: 4px; border: 2px solid white; cursor: pointer; box-shadow: 2px 4px 8px rgba(0,0,0,0.15); transition: transform 0.2s; }
.shelf-book-cover:hover { transform: translateY(-15px); }

.music-row-strip { display: flex; gap: 15px; overflow-x: auto; scroll-behavior: smooth; width: 100%; padding: 10px; background: white; border-radius: 8px; min-height: 90px;}
.music-card-item { min-width: 160px; background: #fff0f5; padding: 12px; border-radius: 8px; text-align: center; position: relative; }

.pet-user-tabs { display: flex; gap: 10px; overflow-x: auto; margin-bottom: 15px; width: 100%; }
.tab-btn { background: var(--white); border: 2px solid var(--sage-green); padding: 8px 18px; border-radius: 20px; cursor: pointer; font-weight: bold; color: var(--sage-green); }
.tab-btn.active-tab { background: var(--sage-green); color: white; }

.delete-icon-btn { background: none; border: none; color: #ff4500; font-size: 1.1rem; cursor: pointer; }
.card-delete-anchor { position: absolute; top: 15px; right: 15px; background: rgba(255,255,255,0.9); border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: #ff4500; cursor: pointer; font-weight: bold; border: 1px solid #ff4500;}

.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); justify-content: center; align-items: center; z-index: 2000; }
.modal-content { background: white; padding: 25px; border-radius: 12px; width: 90%; max-width: 400px; position: relative; box-sizing: border-box; border: 3px solid var(--text-dark-pink); }
.modal-content input, .modal-content textarea, .modal-content select { width: 100%; padding: 10px; margin: 8px 0; border: 2px solid var(--bg-pink); border-radius: 6px; box-sizing: border-box; }
.modal-content button { width: 100%; background: var(--text-dark-pink); color: white; border: none; padding: 12px; border-radius: 6px; font-weight: bold; cursor: pointer; margin-top: 10px; }
.close-btn { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; cursor: pointer; color: #aaa; }
.file-lbl { font-size: 0.85rem; font-weight: bold; color: var(--text-dark-pink); display: block; margin-top: 10px; text-align: left; }