:root{
    --bg:#f3f5f7;
    --panel:#ffffff;
    --muted:#9aa3ad;
    --accent:#2d8cff;
    --radius:8px;
    --shadow:0 6px 18px rgba(26,35,44,0.06);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}
/* make .wrap cover the full window by default */
.wrap{
    position:fixed;
    inset:0;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    border-radius:0 !important;
    box-sizing:border-box;
    padding:clamp(10px, 2.5vw, 18px) !important;
    transition: width .22s ease, padding .22s ease, border-radius .22s ease;
    overflow:auto;
}

/* larger typography for key UI elements */
.project-pill .project-name{ font-size:20px; line-height:1; }
.plan .plan-name{ font-size:18px;  line-height:1; }

/* headings for panels (Command list, Authenticated User, etc.) */
.panel h3{ font-size:18px;  }

/* item / image labels and command entries */
.item > div,
.image > div,
.command-row input{ font-size:18px;  }

/* user email inputs */
.user-row input{ font-size:16px; }

/* be sure to override inline styles where necessary */
.items-grid .item > div,
.items-grid .image > div{ font-size:18px !important; }

/* small-screen adjustments */
@media (max-width: 420px){
    .project-pill .project-name{ font-size:16px; }
    .plan .plan-name{ font-size:15px; }
    .panel h3{ font-size:16px; }
    .item > div, .image > div, .command-row input, .user-row input{ font-size:15px; }
}
/* improve readability on very small screens */
@media (max-width: 420px){
    .item, .image{ height:48px; }
    .panel{ padding:12px; }
    .project-pill input, .plan input{ font-size:14px; }
}
html,body{height:100%; width: 100%; margin:0; background:var(--bg); color:#222;}

.topbar{display:flex; align-items:center; gap:12px; margin-bottom:10px; border-bottom: 1px solid gray; padding-bottom: 10px;}
.project-pill{
    display:inline-flex; align-items:center; gap:8px; background:#f6f8fa; padding:6px 10px; border-radius:20px; border:1px solid #e3e7ea;
    min-width:140px;
}
.project-pill input{border:0; background:transparent; outline:none; font-weight:600;}
.title{flex:1; text-align:right; font-size:20px; font-weight:600; color:#333;}
.edit-btn, .save-btn, .cancel-btn{
    width:30px; height:30px; display:inline-grid; place-items:center; background:#fff; border-radius:50%;
    border:1px solid #e3e7ea; cursor:pointer;
}
.dropdown-btn{
    width:30px; height:30px; background-color: transparent;
    border:none; cursor:pointer; font-size: 25px; margin-right: 10px;
}
.setting-btn{
    background-color: transparent;
    border:none; cursor:pointer; font-size: 15px; 
}
.toolbar{display:flex; align-items:center; gap:10px; background:transparent; margin:5px 0; padding:8px 4px;  border-bottom: 1px solid gray; padding-bottom: 10px;}
.plan{flex:0.5; display:flex; align-items:center; gap:8px; background:#f6f8fa; padding:8px 12px; border-radius:8px; border:1px solid #e6eaed; width: 100px;}
.plan input{border:0; background:transparent; outline:none;}
.version{display:flex; gap:8px; align-items:center; margin-left: auto;}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px;}

.grid-2{display:grid; gap:14px; margin-top:8px;}
.panel{
    background:var(--panel); 
    border-radius:10px; 
    padding:14px; 
    min-height:100px; 
    box-shadow:0 2px 8px rgba(20,28,36,0.04); 
    border:1px solid #eef2f5;
    max-height: 300px;}
.panel label{
    margin:0 0 10px 0; 
    font-size:18px; color:#444; 
    display: flex; align-items: center; 
    justify-content: space-between; 
    border-bottom: 1px solid gray; 
    padding-bottom: 10px;
    font-weight: bold;
}
.content{background-color: rgb(235, 235, 235); padding: 5px; border-radius:10px; margin-bottom: 10px;}
/* Items */
.items{
    overflow: auto;
    max-height: 90%; 
}
.items-grid{display:flex; gap:8px; flex-wrap:wrap;}
.item{
    width:100%; height:56px; display:flex; place-items:center; background:#f6f9ff; border-radius:8px; border:1px solid #e6eefb;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
    cursor: pointer;
}
.item svg{width:28px; height:28px; fill:var(--accent); opacity:0.95;}

/* Image */
.image-grid{display:flex; gap:8px; flex-wrap:wrap;}
.image{
    width:100%; height:56px; display:flex; place-items:center; background:#f6f9ff; border-radius:8px; border:1px solid #e6eefb;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
    cursor: pointer;
}
.image svg{width:28px; height:28px; fill:var(--accent); opacity:0.95;}

/* Users */
.users{
    overflow: auto;
    max-height: 90%; 
}
.user-row{display:flex; gap:8px; align-items:center; margin-bottom:10px;}
.user-row input[type="email"]{flex:1; padding:8px 10px; border-radius:6px; border:1px solid #e6eaed; outline:none;}
.user-row select{padding:8px 10px; border-radius:6px; border:1px solid #e6eaed; background:#fff;}
.user-row .remove{width:34px; height:34px; display:grid; place-items:center; border-radius:6px; background:#fff; border:1px solid #f0d0d0; color:#c43a3a; cursor:pointer;}

.command{
    overflow: auto;
    max-height: 90%; 
}
.command-row{display:flex; gap:8px; align-items:center; margin-bottom:10px;}
.command-row input[type="text"]{flex:1; padding:8px 10px; border-radius:6px; border:1px solid #e6eaed; outline:none; cursor: pointer;}

.panel-footer{display:flex; gap:10px; margin-top:8px; margin-bottom: 5px;}
.ghost{background:#fbfdff; border:1px dashed #e3e7ea; padding:8px 10px; border-radius:8px;color:var(--muted);}
.add-user{
    cursor: pointer;
}